mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-22 23:27:54 -05:00
Merge pull request #2512 from benjiwheeler/mobile-read-only
changed tablet width to 768; several responsive tweaks
This commit is contained in:
Benjamin Wheeler
GitHub
commit
bfa4e3331c
16 changed files with 121 additions and 81 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const Carousel = props => {
|
|||
}
|
||||
},
|
||||
{
|
||||
breakpoint: frameless.tablet,
|
||||
breakpoint: frameless.mobileIntermediate,
|
||||
settings: {
|
||||
slidesToScroll: 2,
|
||||
slidesToShow: 2
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ const Carousel = props => {
|
|||
}
|
||||
},
|
||||
{
|
||||
breakpoint: frameless.tablet,
|
||||
breakpoint: frameless.mobileIntermediate,
|
||||
settings: {
|
||||
slidesToScroll: 2,
|
||||
slidesToShow: 2
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,7 +3,8 @@
|
|||
*/
|
||||
const frameless = {
|
||||
desktop: 942,
|
||||
tablet: 640,
|
||||
mobileIntermediate: 640,
|
||||
tabletPortrait: 768,
|
||||
mobile: 480
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
background-color: $ui-dark-orange;
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
|
||||
|
||||
&:before {
|
||||
display: inline-block;
|
||||
margin-right: .5rem;
|
||||
|
|
@ -106,10 +106,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
@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
|
||||
|
||||
|
||||
&:after{
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
height: 56px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
||||
.feature-top-container {
|
||||
transform: translateX(-15%);
|
||||
}
|
||||
|
|
@ -140,19 +140,19 @@
|
|||
@media only screen and (min-width: $mobile) and (max-width: $desktop - 1) {
|
||||
.feature-top-banner {
|
||||
justify-content: flex-start;
|
||||
|
||||
|
||||
.feature-header {
|
||||
text-align: left; // override #view text centering
|
||||
}
|
||||
|
||||
|
||||
.feature-banner-images {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
|
||||
.feature-top-container {
|
||||
transform: translateX(10%);
|
||||
}
|
||||
|
||||
|
||||
.feature-banner-image {
|
||||
&.left {
|
||||
display: none;
|
||||
|
|
@ -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 {
|
||||
|
|
@ -191,7 +191,7 @@
|
|||
.feature-top-banner {
|
||||
overflow: hidden;
|
||||
min-height: 32rem;
|
||||
|
||||
|
||||
.feature-top-container {
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
|
@ -200,19 +200,19 @@
|
|||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.feature-header {
|
||||
margin: 2rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.feature-banner-image {
|
||||
&.right {
|
||||
margin-right: 0;
|
||||
margin-bottom: -4rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
&.left {
|
||||
margin-bottom: .5rem;
|
||||
display: block;
|
||||
|
|
@ -221,4 +221,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@
|
|||
|
||||
.modal-content-iframe.mod-confirmation {
|
||||
border-radius: 0;
|
||||
width: $tablet - 1;
|
||||
width: $mobileIntermediate - 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 50px;
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.column {
|
||||
.column {
|
||||
margin: 15px;
|
||||
max-width: $cols4;
|
||||
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
margin: 0 auto;
|
||||
max-width: $cols9;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.project-card {
|
||||
transition: transform .25s ease;
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
&:hover {
|
||||
transform: scale(1.1, 1.1);
|
||||
transition: transform .25s ease;
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
color: $ui-blue-dark;
|
||||
|
|
@ -162,7 +162,7 @@
|
|||
margin: 0 auto;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
|
||||
.top-banner {
|
||||
text-align: center;
|
||||
|
||||
|
|
@ -226,7 +226,7 @@
|
|||
|
||||
.inner {
|
||||
margin: 0 auto;
|
||||
width: $tablet;
|
||||
width: $mobileIntermediate;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue