add header to preview frame

This commit is contained in:
Cassie Tarakajian 2017-03-02 15:01:33 -05:00
parent a4e8c4b51d
commit 7e9ce95264
4 changed files with 42 additions and 24 deletions

View file

@ -320,6 +320,9 @@ class IDEView extends React.Component {
/>
</SplitPane>
<div className="preview-frame-holder">
<header className="preview-frame__header">
<h2 className="preview-frame__title">Preview</h2>
</header>
<div className="preview-frame-overlay" ref={(element) => { this.overlay = element; }}>
</div>
<div>

View file

@ -0,0 +1,38 @@
.preview-frame {
min-height: 100%;
min-width: 100%;
position: absolute;
}
.preview-frame-overlay {
height: 100%;
width: 100%;
position: absolute;
z-index: 10;
display: none;
}
.preview-frame-placeholder {
width: #{400 / $base-font-size}rem;
height: #{400 / $base-font-size}rem;
position: absolute;
@include themify() {
background: getThemifyVariable('preview-placeholder-color');
}
}
.preview-frame__header {
height: #{29 / $base-font-size}rem;
}
.preview-frame__title {
@include themify() {
color: getThemifyVariable('secondary-text-color');
}
height: #{29 / $base-font-size}rem;
padding-top: #{7 / $base-font-size}rem;
padding-left: #{5 / $base-font-size}rem;
font-size: #{12 / $base-font-size}rem;
font-weight: normal;
}

View file

@ -35,30 +35,6 @@
@extend %hidden-element;
}
.preview-frame {
min-height: 100%;
min-width: 100%;
position: absolute;
}
.preview-frame-overlay {
height: 100%;
width: 100%;
position: absolute;
z-index: 10;
display: none;
}
.preview-frame-placeholder {
width: #{400 / $base-font-size}rem;
height: #{400 / $base-font-size}rem;
position: absolute;
@include themify() {
background: getThemifyVariable('preview-placeholder-color');
}
}
.toolbar {
width: 100%;
}

View file

@ -32,6 +32,7 @@
@import 'components/timer';
@import 'components/form-container';
@import 'components/error-modal';
@import 'components/preview-frame';
@import 'layout/ide';
@import 'layout/fullscreen';