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

changed tablet width to 768; several responsive tweaks

Browse source
This commit is contained in:
Ben Wheeler 2018-12-19 14:36:53 -05:00
parent 04e7aa1c8f
commit 7b19878d7f
6 changed files with 70 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/_frameless.scss
View file

@ -35,7 +35,7 @@ $cols11: (11 * ($column + $gutter) - $gutter) / $em;
$cols12: (12 * ($column + $gutter) - $gutter) / $em; $cols12: (12 * ($column + $gutter) - $gutter) / $em;
$desktop: 942px; $desktop: 942px;
$tablet: 640px; $tablet: 768px;
$mobile: 480px; $mobile: 480px;
/* Media Queries */ /* Media Queries */

2
src/lib/frameless.js
View file

@ -3,7 +3,7 @@
*/ */
const frameless = { const frameless = {
desktop: 942, desktop: 942,
tablet: 640, tablet: 768,
mobile: 480 mobile: 480
}; };

16
src/views/preview/comment/comment.scss
View file

@ -1,4 +1,5 @@
@import "../../../colors"; @import "../../../colors";
@import "../../../frameless";
.compose-comment { .compose-comment {
margin-left: .5rem; margin-left: .5rem;
@ -228,6 +229,14 @@
content: ""; content: "";
} }
} }
/* hide comment input on tablets and mobile */
@media #{$medium-and-smaller} {
.comment-reply {
display: none;
}
}
} }
} }
@ -256,6 +265,13 @@
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
/* hide comment input on tablets and mobile */
@media #{$medium-and-smaller} {
.comments-root-reply {
display: none;
}
}
.comment-reply-row { .comment-reply-row {
margin-top: 1.5rem; margin-top: 1.5rem;
margin-left: .5rem; margin-left: .5rem;

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

@ -187,7 +187,7 @@ const PreviewPresentation = ({
const extensionChips = ( const extensionChips = (
<FlexRow className="extension-list"> <FlexRow className="extension-list">
{extensions && extensions.map(extension => ( {extensions.map(extension => (
<ExtensionChip <ExtensionChip
action={extension.action} action={extension.action}
extensionL10n={extension.l10nId} extensionL10n={extension.l10nId}
@ -345,31 +345,35 @@ const PreviewPresentation = ({
</div> </div>
<MediaQuery maxWidth={frameless.tablet - 1}> <MediaQuery maxWidth={frameless.tablet - 1}>
<FlexRow className="preview-row force-center"> <FlexRow className="preview-row force-center">
<Stats <div className="wrappable-item">
faved={faved} <Stats
favoriteCount={favoriteCount} faved={faved}
loveCount={loveCount} favoriteCount={favoriteCount}
loved={loved} loveCount={loveCount}
projectInfo={projectInfo} loved={loved}
onFavoriteClicked={onFavoriteClicked} projectInfo={projectInfo}
onLoveClicked={onLoveClicked} onFavoriteClicked={onFavoriteClicked}
/> onLoveClicked={onLoveClicked}
<Subactions />
addToStudioOpen={addToStudioOpen} </div>
canReport={canReport} <div className="wrappable-item">
isAdmin={isAdmin} <Subactions
projectInfo={projectInfo} addToStudioOpen={addToStudioOpen}
reportOpen={reportOpen} canReport={canReport}
shareDate={shareDate} isAdmin={isAdmin}
userOwnsProject={userOwnsProject} projectInfo={projectInfo}
onAddToStudioClicked={onAddToStudioClicked} reportOpen={reportOpen}
onAddToStudioClosed={onAddToStudioClosed} shareDate={shareDate}
onCopyProjectLink={onCopyProjectLink} userOwnsProject={userOwnsProject}
onReportClicked={onReportClicked} onAddToStudioClicked={onAddToStudioClicked}
onReportClose={onReportClose} onAddToStudioClosed={onAddToStudioClosed}
onReportSubmit={onReportSubmit} onCopyProjectLink={onCopyProjectLink}
onToggleStudio={onToggleStudio} onReportClicked={onReportClicked}
/> onReportClose={onReportClose}
onReportSubmit={onReportSubmit}
onToggleStudio={onToggleStudio}
/>
</div>
</FlexRow> </FlexRow>
</MediaQuery> </MediaQuery>
<FlexRow className="project-notes"> <FlexRow className="project-notes">
@ -377,9 +381,11 @@ const PreviewPresentation = ({
<RemixCredit projectInfo={originalInfo} /> <RemixCredit projectInfo={originalInfo} />
{/* eslint-disable max-len */} {/* eslint-disable max-len */}
<MediaQuery maxWidth={frameless.tablet - 1}> <MediaQuery maxWidth={frameless.tablet - 1}>
<FlexRow className="preview-row"> {extensions &&
{extensionChips} <FlexRow className="preview-row">
</FlexRow> {extensionChips}
</FlexRow>
}
</MediaQuery> </MediaQuery>
{showInstructions && ( {showInstructions && (
<div className="description-block"> <div className="description-block">

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

@ -110,6 +110,9 @@ $stage-width: 480px;
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
flex-direction: row; flex-direction: row;
.inplace-input {
width: calc(100% - 4rem);
}
} }
@media #{$small} { @media #{$small} {
@ -141,7 +144,7 @@ $stage-width: 480px;
flex-grow: 1; flex-grow: 1;
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
min-width: 100%; min-width: calc(100% - 2rem);
} }
} }
@ -341,6 +344,16 @@ $stage-width: 480px;
flex-direction: row; flex-direction: row;
} }
} }
.wrappable-item {
margin-bottom: .5rem;
}
}
@media #{$medium-and-smaller} {
.preview-row {
align-items: center;
}
} }
.guiPlayer { .guiPlayer {
@ -384,7 +397,7 @@ $stage-width: 480px;
flex-flow: column; flex-flow: column;
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
margin-top: 1rem; margin-top: .5rem;
margin-left: 0; margin-left: 0;
width: 100%; width: 100%;
} }
@ -537,7 +550,7 @@ $stage-width: 480px;
margin-top: 1rem; margin-top: 1rem;
background-color: $ui-blue-10percent; background-color: $ui-blue-10percent;
padding: 1rem 0; padding: 1rem 0;
min-height: 12rem; min-height: 6rem;
} }
.create-comment { .create-comment {

3
src/views/preview/subactions.scss
View file

@ -2,7 +2,6 @@
@import "../../frameless"; @import "../../frameless";
.subactions { .subactions {
margin-left: 1.5rem;
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: flex-start;
flex: 1; flex: 1;
@ -20,7 +19,7 @@
font-size: .875rem; font-size: .875rem;
@media #{$small} { @media #{$small} {
margin-top: 1rem; margin-top: .5rem;
width: 100%; width: 100%;
order: 100; order: 100;
} }