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

renamed frameless.js tablet var to mobileIntermediate, use tabletPortrait for breaks

Browse source
This commit is contained in:
Ben Wheeler 2019-01-29 10:35:19 -05:00
parent 4b660b0176
commit a8d4184b3f
14 changed files with 25 additions and 23 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;
$mobileIntermediary: 640px; $mobileIntermediate: 640px;
$tabletPortrait: 768px; $tabletPortrait: 768px;
$mobile: 480px; $mobile: 480px;

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 : #{$mobileIntermediary}-1)"; $medium-and-small: "screen and (max-width : #{$mobileIntermediate}-1)";
.mod-report * { .mod-report * {
box-sizing: border-box; box-sizing: border-box;

2
src/lib/frameless.js
View file

@ -3,7 +3,7 @@
*/ */
const frameless = { const frameless = {
desktop: 942, desktop: 942,
tablet: 640, mobileIntermediate: 640,
tabletPortrait: 768, 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: $mobileIntermediary - 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: $mobileIntermediary) 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;

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

@ -343,7 +343,7 @@ 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"> <div className="wrappable-item">
<Stats <Stats
@ -380,7 +380,7 @@ const PreviewPresentation = ({
<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) ? ( {(extensions && extensions.length) ? (
<FlexRow className="preview-row"> <FlexRow className="preview-row">
{extensionChips} {extensionChips}
@ -491,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}
@ -521,7 +521,7 @@ const PreviewPresentation = ({
/> />
</FlexRow> </FlexRow>
</MediaQuery> </MediaQuery>
<MediaQuery minWidth={frameless.tablet}> <MediaQuery minWidth={frameless.tabletPortrait}>
{(extensions && extensions.length) ? ( {(extensions && extensions.length) ? (
<FlexRow className="preview-row"> <FlexRow className="preview-row">
{extensionChips} {extensionChips}

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

@ -352,6 +352,7 @@ $stage-width: 480px;
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
.preview-row { .preview-row {
margin-top: .5rem;
align-items: center; align-items: center;
} }
} }
@ -419,6 +420,7 @@ $stage-width: 480px;
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
flex-direction: row; flex-direction: row;
margin-bottom: .5rem;
} }
} }

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

@ -106,7 +106,7 @@
} }
} }
@media only screen and (min-width: $mobileIntermediary) { @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: $mobileIntermediary) 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: $mobileIntermediary - 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 {

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

@ -278,7 +278,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
</Box> </Box>
); );
} }
if ( if (
this.props.sessionStatus === sessionActions.Status.FETCHED && this.props.sessionStatus === sessionActions.Status.FETCHED &&
Object.keys(this.props.user).length === 0 && Object.keys(this.props.user).length === 0 &&
@ -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>
@ -473,7 +473,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
> >
{ {
this.props.sessionStatus === sessionActions.Status.FETCHED && this.props.sessionStatus === sessionActions.Status.FETCHED &&
Object.keys(this.props.user).length > 0 && // user is logged in Object.keys(this.props.user).length > 0 && // user is logged in
<div <div
className="splash-header" className="splash-header"
key="header" key="header"

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: $mobileIntermediary - 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: $mobileIntermediary; width: $mobileIntermediate;
} }
} }
} }