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;
$desktop: 942px;
$tablet: 640px;
$tablet: 768px;
$mobile: 480px;
/* Media Queries */

2
src/lib/frameless.js
View file

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

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

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

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

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

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

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

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

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