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;
$desktop: 942px;
$mobileIntermediary: 640px;
$mobileIntermediate: 640px;
$tabletPortrait: 768px;
$mobile: 480px;

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

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

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

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

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

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

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

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

2
src/lib/frameless.js
View file

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

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

@ -150,7 +150,7 @@ $story-width: $cols3;
}
//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 {
&.sidebar-row {
@ -179,7 +179,7 @@ $story-width: $cols3;
//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 {
h1 {
text-align: center;

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

@ -343,7 +343,7 @@ const PreviewPresentation = ({
onUpdateProjectThumbnail={onUpdateProjectThumbnail}
/>
</div>
<MediaQuery maxWidth={frameless.tablet - 1}>
<MediaQuery maxWidth={frameless.tabletPortrait - 1}>
<FlexRow className="preview-row force-center">
<div className="wrappable-item">
<Stats
@ -380,7 +380,7 @@ const PreviewPresentation = ({
<RemixCredit projectInfo={parentInfo} />
<RemixCredit projectInfo={originalInfo} />
{/* eslint-disable max-len */}
<MediaQuery maxWidth={frameless.tablet - 1}>
<MediaQuery maxWidth={frameless.tabletPortrait - 1}>
{(extensions && extensions.length) ? (
<FlexRow className="preview-row">
{extensionChips}
@ -491,7 +491,7 @@ const PreviewPresentation = ({
{/* eslint-enable max-len */}
</FlexRow>
</FlexRow>
<MediaQuery minWidth={frameless.tablet}>
<MediaQuery minWidth={frameless.tabletPortrait}>
<FlexRow className="preview-row">
<Stats
faved={faved}
@ -521,7 +521,7 @@ const PreviewPresentation = ({
/>
</FlexRow>
</MediaQuery>
<MediaQuery minWidth={frameless.tablet}>
<MediaQuery minWidth={frameless.tabletPortrait}>
{(extensions && extensions.length) ? (
<FlexRow className="preview-row">
{extensionChips}

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

@ -352,6 +352,7 @@ $stage-width: 480px;
@media #{$medium-and-smaller} {
.preview-row {
margin-top: .5rem;
align-items: center;
}
}
@ -419,6 +420,7 @@ $stage-width: 480px;
@media #{$medium-and-smaller} {
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 {
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-banner-images {
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-banner-image {
&.right {

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

@ -278,7 +278,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
</Box>
);
}
if (
this.props.sessionStatus === sessionActions.Status.FETCHED &&
Object.keys(this.props.user).length === 0 &&
@ -287,7 +287,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
rows.push(
<MediaQuery
key="frameless-tablet"
minWidth={frameless.tablet}
minWidth={frameless.mobileIntermediate}
>
<MiddleBanner />
</MediaQuery>
@ -473,7 +473,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
>
{
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
className="splash-header"
key="header"

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

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

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

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