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;
$desktop: 942px;
$tablet: 640px;
$mobileIntermediate: 640px;
$tabletPortrait: 768px;
$mobile: 480px;
/* Media Queries */
@ -48,11 +49,11 @@ $mobile: 480px;
*/
$small: "only screen and (max-width : #{$mobile}-1)";
$medium: "only screen and (min-width : #{$mobile}) and (max-width : #{$tablet}-1)";
$intermediate: "only screen and (min-width : #{$tablet}) and (max-width : #{$desktop}-1)";
$medium: "only screen and (min-width : #{$mobile}) and (max-width : #{$tabletPortrait}-1)";
$intermediate: "only screen and (min-width : #{$tabletPortrait}) and (max-width : #{$desktop}-1)";
$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)";
$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 */
$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} {
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: {
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 : #{$tablet}-1)";
$medium-and-small: "screen and (max-width : #{$mobileIntermediate}-1)";
.mod-report * {
box-sizing: border-box;

3
src/lib/frameless.js
View file

@ -3,7 +3,8 @@
*/
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: $tablet - 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: $tablet) and (max-width: $desktop - 1) {
@media only screen and (min-width: $mobileIntermediate) and (max-width: $desktop - 1) {
.masthead {
h1 {
text-align: center;

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;

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

@ -343,43 +343,49 @@ const PreviewPresentation = ({
onUpdateProjectThumbnail={onUpdateProjectThumbnail}
/>
</div>
<MediaQuery maxWidth={frameless.tablet - 1}>
<MediaQuery maxWidth={frameless.tabletPortrait - 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">
<RemixCredit projectInfo={parentInfo} />
<RemixCredit projectInfo={originalInfo} />
{/* eslint-disable max-len */}
<MediaQuery maxWidth={frameless.tablet - 1}>
<FlexRow className="preview-row">
{extensionChips}
</FlexRow>
<MediaQuery maxWidth={frameless.tabletPortrait - 1}>
{(extensions && extensions.length) ? (
<FlexRow className="preview-row">
{extensionChips}
</FlexRow>
) : null}
</MediaQuery>
{showInstructions && (
<div className="description-block">
@ -485,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}
@ -515,10 +521,12 @@ const PreviewPresentation = ({
/>
</FlexRow>
</MediaQuery>
<MediaQuery minWidth={frameless.tablet}>
<FlexRow className="preview-row">
{extensionChips}
</FlexRow>
<MediaQuery minWidth={frameless.tabletPortrait}>
{(extensions && extensions.length) ? (
<FlexRow className="preview-row">
{extensionChips}
</FlexRow>
) : null}
</MediaQuery>
{showModInfo &&
<FlexRow className="preview-row">

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

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

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 {
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-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: $tablet - 1) {
@media only screen and (min-width: $mobile) and (max-width: $mobileIntermediate - 1) {
.feature-top-banner {
.feature-banner-image {
&.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(
<MediaQuery
key="frameless-tablet"
minWidth={frameless.tablet}
minWidth={frameless.mobileIntermediate}
>
<MiddleBanner />
</MediaQuery>

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

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

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

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