scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/navigation/base/navigation.scss
View file

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

7
src/views/preview/presentation.jsx
View file

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

5
src/views/preview/preview.scss
View file

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

2
src/views/preview/project-view.jsx
View file

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