scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

media queries used in responsive project page have been moved to frameless.css

Browse source
This commit is contained in:
Linda 2018-10-05 10:25:56 -04:00
parent 79afc55f26
commit d358c45482
7 changed files with 46 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/_frameless.scss
View file

@ -38,6 +38,29 @@ $desktop: 942px;
$tablet: 640px; $tablet: 640px;
$mobile: 480px; $mobile: 480px;
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
$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)";
$big: "only screen and (min-width : #{$desktop})";
$medium-and-smaller: "only screen and (max-width : #{$tablet}-1)";
$intermediate-and-smaller: "only screen and (max-width : #{$desktop}-1)";
/* Height */
$small-height: "only screen and (max-height : #{$mobile} - 1)";
$medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$tablet} - 1)";
// //
// Column-widths in a function, in ems // Column-widths in a function, in ems
// //

5
src/components/modal/addtostudio/modal.scss
View file

@ -1,11 +1,6 @@
@import "../../../colors"; @import "../../../colors";
@import "../../../frameless"; @import "../../../frameless";
$small: "only screen and (max-width : #{$mobile})";
$medium: "only screen and (min-width : #{$mobile}+1) and (max-width : #{$tablet}-1)";
$small-height: "only screen and (max-height : #{$mobile})";
$medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height : #{$tablet} - 1)";
.mod-addToStudio { .mod-addToStudio {
overflow: hidden; overflow: hidden;

10
src/components/modal/base/modal.scss
View file

@ -1,12 +1,6 @@
@import "../../../colors"; @import "../../../colors";
@import "../../../frameless"; @import "../../../frameless";
$small: "only screen and (max-width : #{$mobile})";
$medium: "only screen and (min-width : #{$mobile}+1) and (max-width : #{$tablet}-1)";
$big: "only screen and (min-width : #{$tablet}) and (max-width : #{$desktop}-1)";
$small-height: "only screen and (max-height : #{$mobile})";
$medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height : #{$tablet} - 1)";
.overflow-hidden { .overflow-hidden {
/* to avoid double scroll bars this /* to avoid double scroll bars this
gets added to body while modal is open */ gets added to body while modal is open */
@ -32,7 +26,7 @@ $medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height :
outline: none; outline: none;
} }
@media #{$small}, #{$medium}, #{$big} { @media #{$intermediate-and-smaller} {
margin-top: 0; margin-top: 0;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
@ -82,7 +76,7 @@ $modal-close-size: 1rem;
align-items: flex-start; align-items: flex-start;
flex-wrap: nowrap; flex-wrap: nowrap;
@media #{$small}, #{$medium}, #{$big} { @media #{$intermediate-and-smaller} {
justify-content: center !important; //overwriting flex row properties justify-content: center !important; //overwriting flex row properties
flex-direction: row !important; flex-direction: row !important;
} }

5
src/components/modal/report/modal.scss
View file

@ -1,7 +1,6 @@
@import "../../../colors"; @import "../../../colors";
@import "../../../frameless"; @import "../../../frameless";
$medium-and-small: "screen and (max-width : #{$tablet}-1)";
.report-modal-header { .report-modal-header {
box-shadow: inset 0 -1px 0 0 $ui-coral-dark; box-shadow: inset 0 -1px 0 0 $ui-coral-dark;
@ -47,7 +46,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
overflow: visible; overflow: visible;
color: $type-white; color: $type-white;
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
position: relative; position: relative;
margin-top: calc($arrow-border-width / 2); margin-top: calc($arrow-border-width / 2);
max-width: 100%; max-width: 100%;
@ -72,7 +71,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
content: ""; content: "";
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
display: none; display: none;
} }
} }

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

@ -6,9 +6,6 @@ $player-width: 482px;
$player-height: 406px; $player-height: 406px;
$stage-width: 480px; $stage-width: 480px;
$small: "screen and (max-width : #{$mobile}-1)";
$medium-and-small: "screen and (max-width : #{$tablet}-1)";
/* override view padding for share banner */ /* override view padding for share banner */
#view { #view {
padding: 0; padding: 0;
@ -56,7 +53,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
height: calc(3rem - 4px); height: calc(3rem - 4px);
} }
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
flex-direction: row; flex-direction: row;
} }
} }
@ -84,7 +81,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
font-size: .8rem; font-size: .8rem;
flex-grow: 1; flex-grow: 1;
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
min-width: 100%; min-width: 100%;
} }
} }
@ -105,7 +102,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
color: $type-white; color: $type-white;
font-size: 1rem; font-size: 1rem;
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
margin-top: calc($arrow-border-width / 2); margin-top: calc($arrow-border-width / 2);
width: 100%; width: 100%;
} }
@ -128,7 +125,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
content: ""; content: "";
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
display: none; display: none;
} }
} }
@ -162,7 +159,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
max-width: 100%; max-width: 100%;
flex: 1; flex: 1;
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
padding: 0; padding: 0;
width: 100%; width: 100%;
} }
@ -217,7 +214,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
flex-wrap: nowrap; flex-wrap: nowrap;
&.force-row { &.force-row {
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
flex-direction: row; flex-direction: row;
} }
} }
@ -237,7 +234,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
} }
.force-center { .force-center {
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
align-self: center; align-self: center;
} }
} }
@ -249,7 +246,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
flex: 1; flex: 1;
flex-flow: column; flex-flow: column;
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
margin-top: 1rem; margin-top: 1rem;
margin-left: 0; margin-left: 0;
width: 100%; width: 100%;
@ -270,7 +267,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
flex-direction: row; flex-direction: row;
} }
} }
@ -376,7 +373,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
justify-content: flex-start; justify-content: flex-start;
flex-direction: row; flex-direction: row;
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
justify-content: center; justify-content: center;
} }
@ -405,7 +402,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
/* TODO: the following can be transferred to /* TODO: the following can be transferred to
src/components/thumbnailcolumn/thumbnailcolumn.scss src/components/thumbnailcolumn/thumbnailcolumn.scss
after testing */ after testing */
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
flex-direction: row; flex-direction: row;
.thumbnail { .thumbnail {
@ -414,7 +411,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
} }
} }
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
margin-top: 1rem; margin-top: 1rem;
} }
} }

6
src/views/preview/stats.scss
View file

@ -1,12 +1,10 @@
@import "../../frameless"; @import "../../frameless";
$medium-and-small: "screen and (max-width : #{$tablet}-1)";
.stats { .stats {
line-height: 2rem; line-height: 2rem;
justify-content: flex-start; justify-content: flex-start;
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
margin: 0; margin: 0;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
@ -14,7 +12,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
} }
& > div { & > div {
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
padding: 0 1rem; padding: 0 1rem;
} }
} }

15
src/views/preview/subactions.scss
View file

@ -1,18 +1,13 @@
@import "../../colors"; @import "../../colors";
@import "../../frameless"; @import "../../frameless";
$small: "screen and (max-width : #{$mobile}-1)";
$medium: "screen and (min-width : #{$mobile}) and (max-width : #{$tablet}-1)";
$intermediate: "screen and (min-width : #{$tablet}) and (max-width : 941px)"; /* 941 because currently breakpoint of .inner in www is 941 */
$medium-and-small: "screen and (max-width : #{$tablet}-1)";
.subactions { .subactions {
margin-left: 1.5rem; margin-left: 1.5rem;
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: flex-start;
flex: 1; flex: 1;
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
margin-top: 1rem; margin-top: 1rem;
width: 100%; width: 100%;
} }
@ -36,7 +31,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
margin: 0; margin: 0;
text-align: right; text-align: right;
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
padding: 0; padding: 0;
} }
} }
@ -60,7 +55,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
line-height: .875rem; line-height: .875rem;
font-size: .75rem; font-size: .75rem;
font-weight: normal; font-weight: normal;
&.studio-button, &.studio-button,
&.copy-link-button, &.copy-link-button,
&.report-button { &.report-button {
@ -101,14 +96,14 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
} }
.subactions, .subactions .action-buttons { .subactions, .subactions .action-buttons {
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
margin: 0; margin: 0;
justify-content: center; justify-content: center;
flex-direction: row; flex-direction: row;
} }
& > div, .action-button { & > div, .action-button {
@media #{$medium-and-small} { @media #{$medium-and-smaller} {
padding: 0 1rem; padding: 0 1rem;
} }
} }