scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #2512 from benjiwheeler/mobile-read-only

Browse source 
changed tablet width to 768; several responsive tweaks
This commit is contained in:
Benjamin Wheeler 2019-01-29 10:47:24 -05:00 committed by GitHub
commit bfa4e3331c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 121 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/_frameless.scss
View file

@ -35,7 +35,8 @@ $cols11: (11 * ($column + $gutter) - $gutter) / $em;
$cols12: (12 * ($column + $gutter) - $gutter) / $em; $cols12: (12 * ($column + $gutter) - $gutter) / $em;
$desktop: 942px; $desktop: 942px;
$tablet: 640px; $mobileIntermediate: 640px;
$tabletPortrait: 768px;
$mobile: 480px; $mobile: 480px;
/* Media Queries */ /* Media Queries */
@ -48,11 +49,11 @@ $mobile: 480px;
*/ */
$small: "only screen and (max-width : #{$mobile}-1)"; $small: "only screen and (max-width : #{$mobile}-1)";
$medium: "only screen and (min-width : #{$mobile}) and (max-width : #{$tablet}-1)"; $medium: "only screen and (min-width : #{$mobile}) and (max-width : #{$tabletPortrait}-1)";
$intermediate: "only screen and (min-width : #{$tablet}) and (max-width : #{$desktop}-1)"; $intermediate: "only screen and (min-width : #{$tabletPortrait}) and (max-width : #{$desktop}-1)";
$big: "only screen and (min-width : #{$desktop})"; $big: "only screen and (min-width : #{$desktop})";
$medium-and-smaller: "only screen and (max-width : #{$tablet}-1)"; $medium-and-smaller: "only screen and (max-width : #{$tabletPortrait}-1)";
$intermediate-and-smaller: "only screen and (max-width : #{$desktop}-1)"; $intermediate-and-smaller: "only screen and (max-width : #{$desktop}-1)";
$medium-and-intermediate: "only screen and (min-width : #{$mobile}) and (max-width : #{$desktop}-1)"; $medium-and-intermediate: "only screen and (min-width : #{$mobile}) and (max-width : #{$desktop}-1)";
@ -60,7 +61,7 @@ $medium-and-intermediate: "only screen and (min-width : #{$mobile}) and (max-wid
/* Height */ /* Height */
$small-height: "only screen and (max-height : #{$mobile} - 1)"; $small-height: "only screen and (max-height : #{$mobile} - 1)";
$medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$tablet} - 1)"; $medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$tabletPortrait} - 1)";
// //
@ -112,7 +113,7 @@ $medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$
#{$child-selector} { #{$child-selector} {
margin: 0 auto; margin: 0 auto;
width: $tablet; width: $tabletPortrait;
} }
} }
} }

2
src/components/carousel/carousel.jsx
View file

@ -31,7 +31,7 @@ const Carousel = props => {
} }
}, },
{ {
breakpoint: frameless.tablet, breakpoint: frameless.mobileIntermediate,
settings: { settings: {
slidesToScroll: 2, slidesToScroll: 2,
slidesToShow: 2 slidesToShow: 2

2
src/components/carousel/legacy-carousel.jsx
View file

@ -35,7 +35,7 @@ const Carousel = props => {
} }
}, },
{ {
breakpoint: frameless.tablet, breakpoint: frameless.mobileIntermediate,
settings: { settings: {
slidesToScroll: 2, slidesToScroll: 2,
slidesToShow: 2 slidesToShow: 2

4
src/components/footer/www/footer.jsx
View file

@ -13,7 +13,7 @@ require('./footer.scss');
const Footer = props => ( const Footer = props => (
<FooterBox> <FooterBox>
<MediaQuery maxWidth={frameless.tablet - 1}> <MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
<div className="lists"> <div className="lists">
<dl> <dl>
<dd> <dd>
@ -51,7 +51,7 @@ const Footer = props => (
</dl> </dl>
</div> </div>
</MediaQuery> </MediaQuery>
<MediaQuery minWidth={frameless.tablet}> <MediaQuery minWidth={frameless.mobileIntermediate}>
<div className="lists"> <div className="lists">
<dl> <dl>
<dt> <dt>

4
src/components/masonrygrid/masonrygrid.jsx
View file

@ -39,12 +39,12 @@ class MasonryGrid extends React.Component {
render () { render () {
return ( return (
<this.props.as className={classNames('masonry', this.props.className)}> <this.props.as className={classNames('masonry', this.props.className)}>
<MediaQuery maxWidth={frameless.tablet - 1}> <MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
{this.props.children} {this.props.children}
</MediaQuery> </MediaQuery>
<MediaQuery <MediaQuery
maxWidth={frameless.desktop - 1} maxWidth={frameless.desktop - 1}
minWidth={frameless.tablet} minWidth={frameless.mobileIntermediate}
> >
{this.reorderColumns(this.props.children, 2)} {this.reorderColumns(this.props.children, 2)}
</MediaQuery> </MediaQuery>

2
src/components/modal/comments/modal.scss
View file

@ -1,7 +1,7 @@
@import "../../../colors"; @import "../../../colors";
@import "../../../frameless"; @import "../../../frameless";
$medium-and-small: "screen and (max-width : #{$tablet}-1)"; $medium-and-small: "screen and (max-width : #{$mobileIntermediate}-1)";
.mod-report * { .mod-report * {
box-sizing: border-box; box-sizing: border-box;

3
src/lib/frameless.js
View file

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

4
src/views/parents/parents.scss
View file

@ -150,7 +150,7 @@ $story-width: $cols3;
} }
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media only screen and (min-width: $mobile) and (max-width: $mobileIntermediate - 1) {
.flex-row { .flex-row {
&.sidebar-row { &.sidebar-row {
@ -179,7 +179,7 @@ $story-width: $cols3;
//8 columns //8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media only screen and (min-width: $mobileIntermediate) and (max-width: $desktop - 1) {
.masthead { .masthead {
h1 { h1 {
text-align: center; text-align: center;

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;

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

@ -343,8 +343,9 @@ const PreviewPresentation = ({
onUpdateProjectThumbnail={onUpdateProjectThumbnail} onUpdateProjectThumbnail={onUpdateProjectThumbnail}
/> />
</div> </div>
<MediaQuery maxWidth={frameless.tablet - 1}> <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
<FlexRow className="preview-row force-center"> <FlexRow className="preview-row force-center">
<div className="wrappable-item">
<Stats <Stats
faved={faved} faved={faved}
favoriteCount={favoriteCount} favoriteCount={favoriteCount}
@ -354,6 +355,8 @@ const PreviewPresentation = ({
onFavoriteClicked={onFavoriteClicked} onFavoriteClicked={onFavoriteClicked}
onLoveClicked={onLoveClicked} onLoveClicked={onLoveClicked}
/> />
</div>
<div className="wrappable-item">
<Subactions <Subactions
addToStudioOpen={addToStudioOpen} addToStudioOpen={addToStudioOpen}
canReport={canReport} canReport={canReport}
@ -370,16 +373,19 @@ const PreviewPresentation = ({
onReportSubmit={onReportSubmit} onReportSubmit={onReportSubmit}
onToggleStudio={onToggleStudio} onToggleStudio={onToggleStudio}
/> />
</div>
</FlexRow> </FlexRow>
</MediaQuery> </MediaQuery>
<FlexRow className="project-notes"> <FlexRow className="project-notes">
<RemixCredit projectInfo={parentInfo} /> <RemixCredit projectInfo={parentInfo} />
<RemixCredit projectInfo={originalInfo} /> <RemixCredit projectInfo={originalInfo} />
{/* eslint-disable max-len */} {/* eslint-disable max-len */}
<MediaQuery maxWidth={frameless.tablet - 1}> <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
{(extensions && extensions.length) ? (
<FlexRow className="preview-row"> <FlexRow className="preview-row">
{extensionChips} {extensionChips}
</FlexRow> </FlexRow>
) : null}
</MediaQuery> </MediaQuery>
{showInstructions && ( {showInstructions && (
<div className="description-block"> <div className="description-block">
@ -485,7 +491,7 @@ const PreviewPresentation = ({
{/* eslint-enable max-len */} {/* eslint-enable max-len */}
</FlexRow> </FlexRow>
</FlexRow> </FlexRow>
<MediaQuery minWidth={frameless.tablet}> <MediaQuery minWidth={frameless.tabletPortrait}>
<FlexRow className="preview-row"> <FlexRow className="preview-row">
<Stats <Stats
faved={faved} faved={faved}
@ -515,10 +521,12 @@ const PreviewPresentation = ({
/> />
</FlexRow> </FlexRow>
</MediaQuery> </MediaQuery>
<MediaQuery minWidth={frameless.tablet}> <MediaQuery minWidth={frameless.tabletPortrait}>
{(extensions && extensions.length) ? (
<FlexRow className="preview-row"> <FlexRow className="preview-row">
{extensionChips} {extensionChips}
</FlexRow> </FlexRow>
) : null}
</MediaQuery> </MediaQuery>
{showModInfo && {showModInfo &&
<FlexRow className="preview-row"> <FlexRow className="preview-row">

22
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,17 @@ $stage-width: 480px;
flex-direction: row; flex-direction: row;
} }
} }
.wrappable-item {
margin-bottom: .5rem;
}
}
@media #{$medium-and-smaller} {
.preview-row {
margin-top: .5rem;
align-items: center;
}
} }
.guiPlayer { .guiPlayer {
@ -384,7 +398,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%;
} }
@ -406,6 +420,7 @@ $stage-width: 480px;
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
flex-direction: row; flex-direction: row;
margin-bottom: .5rem;
} }
} }
@ -537,7 +552,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 {
@ -599,6 +614,7 @@ $stage-width: 480px;
.thumbnail-column { .thumbnail-column {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
max-width: 300px;
/* TODO: the following can be transferred to /* TODO: the following can be transferred to
src/components/thumbnailcolumn/thumbnailcolumn.scss src/components/thumbnailcolumn/thumbnailcolumn.scss

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;
} }

7
src/views/splash/feature/top-banner.scss
View file

@ -106,7 +106,7 @@
} }
} }
@media only screen and (min-width: $tablet) { @media only screen and (min-width: $mobileIntermediate) {
.feature-top-banner { .feature-top-banner {
margin-bottom: 80px; // double the normal banner 40px for the notch margin-bottom: 80px; // double the normal banner 40px for the notch
@ -161,7 +161,7 @@
} }
} }
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media only screen and (min-width: $mobileIntermediate) and (max-width: $desktop - 1) {
.feature-top-banner { .feature-top-banner {
.feature-banner-images { .feature-banner-images {
overflow: hidden; // make sure overflow is hidden to avoid scrolling with translated content overflow: hidden; // make sure overflow is hidden to avoid scrolling with translated content
@ -176,7 +176,7 @@
} }
} }
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media only screen and (min-width: $mobile) and (max-width: $mobileIntermediate - 1) {
.feature-top-banner { .feature-top-banner {
.feature-banner-image { .feature-banner-image {
&.right { &.right {
@ -221,4 +221,3 @@
} }
} }
} }

2
src/views/splash/presentation.jsx
View file

@ -287,7 +287,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
rows.push( rows.push(
<MediaQuery <MediaQuery
key="frameless-tablet" key="frameless-tablet"
minWidth={frameless.tablet} minWidth={frameless.mobileIntermediate}
> >
<MiddleBanner /> <MiddleBanner />
</MediaQuery> </MediaQuery>

2
src/views/splash/splash.scss
View file

@ -165,7 +165,7 @@
.modal-content-iframe.mod-confirmation { .modal-content-iframe.mod-confirmation {
border-radius: 0; border-radius: 0;
width: $tablet - 1; width: $mobileIntermediate - 1;
} }
} }

2
src/views/wedo2-legacy/wedo2.scss
View file

@ -226,7 +226,7 @@
.inner { .inner {
margin: 0 auto; margin: 0 auto;
width: $tablet; width: $mobileIntermediate;
} }
} }
} }