mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
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:
parent
76e01f5919
commit
e88e669297
4 changed files with 13 additions and 3 deletions
|
@ -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;
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in a new issue