scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

revised banner css to be more flexible

Browse source 
simplified share banner conditionals

shorter banner height without button; button has margin instead
This commit is contained in:
Ben Wheeler 2018-12-02 10:59:31 -05:00
parent 351d38de09
commit 089cdbb06b
3 changed files with 24 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/views/preview/banner.jsx
View file

@ -14,7 +14,7 @@ const Banner = ({className, message, actionMessage, onAction}) => (
</span>
{actionMessage && onAction && (
<Button
className="button banner-button"
className="banner-button"
onClick={onAction}
>
{actionMessage}

9
src/views/preview/banner.scss
View file

@ -6,7 +6,7 @@ $navigation-height: 50px;
display: flex;
background-color: $ui-orange-25percent;
width: 100%;
min-height: 4rem;
min-height: 3rem;
overflow: hidden;
color: $ui-orange-high-contrast;
font-size: .875rem;
@ -37,9 +37,14 @@ $navigation-height: 50px;
.banner-button {
border-radius: .25rem;
background-color: $ui-orange;
margin-top: .75rem;
margin-bottom: .75rem;
padding-top: .6875rem;
padding-bottom: .75rem;
height: 2.5rem;
min-width: 6rem;
max-width: 16rem;
min-height: 2.5rem;
max-height: 6rem;
font-size: .875rem;
}

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

@ -136,21 +136,19 @@ const PreviewPresentation = ({
/>);
}
} else if (canShare) {
if (isShared) {
if (justShared) {
if (isNewScratcher) {
banner = (<Banner
className="banner-success"
message={<FormattedMessage id="project.share.sharedLong" />}
/>);
} else {
banner = (<Banner
className="banner-success"
message={<FormattedMessage id="project.share.sharedShort" />}
/>);
}
} // if was shared a while ago, don't show any share banner
} else {
if (isShared && justShared) { // if was shared a while ago, don't show any share banner
if (isNewScratcher) {
banner = (<Banner
className="banner-success"
message={<FormattedMessage id="project.share.sharedLong" />}
/>);
} else {
banner = (<Banner
className="banner-success"
message={<FormattedMessage id="project.share.sharedShort" />}
/>);
}
} else if (!isShared) {
banner = (<Banner
actionMessage={<FormattedMessage id="project.share.shareButton" />}
message={<FormattedMessage id="project.share.notShared" />}
@ -410,11 +408,11 @@ const PreviewPresentation = ({
scripts={modInfo.scripts}
sprites={modInfo.sprites}
/>
</React.Fragment>
}
<MediaQuery minWidth={frameless.tablet}>
<FlexRow className="preview-row">
<FlexRow className="extension-list">