set the z-index of the player as a whole, to go under nav bar

separately set z-index in fullscreen mode, to go over other project page 
UI including nav bar

correct isFullScreen prop
This commit is contained in:
Ben Wheeler 2019-01-15 23:45:05 -05:00
parent 76e01f5919
commit e88e669297
4 changed files with 13 additions and 3 deletions

View file

@ -5,7 +5,7 @@
position: fixed;
top: 0;
left: 0;
z-index: 99;
z-index: 10;
border-bottom: 1px solid $active-gray;
box-shadow: 0 0 3px $box-shadow-gray;

View file

@ -274,7 +274,12 @@ const PreviewPresentation = ({
</MediaQuery>
</FlexRow>
<FlexRow className="preview-row">
<div className="guiPlayer">
<div
className={classNames(
'guiPlayer',
{fullscreen: isFullScreen}
)}
>
{showCloudDataAlert && (
<FlexRow className="project-info-alert">
<FormattedMessage id="project.cloudDataAlert" />

View file

@ -345,6 +345,7 @@ $stage-width: 480px;
display: inline-block;
position: relative;
width: $player-width;
z-index: 1;
$alert-bg: rgba(255, 255, 255, .85);
.project-info-alert {
@ -358,6 +359,10 @@ $stage-width: 480px;
font-size: .95rem;
}
&.fullscreen {
z-index: 200;
}
@media #{$small} {
width: 100%;
}

View file

@ -604,7 +604,7 @@ class Preview extends React.Component {
extensions={this.state.extensions}
faved={this.state.clientFaved}
favoriteCount={this.state.favoriteCount}
isFullScreen={this.state.isFullScreen}
isFullScreen={this.props.fullScreen}
isLoggedIn={this.props.isLoggedIn}
isNewScratcher={this.props.isNewScratcher}
isRemixing={this.state.isRemixing}