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 #2153 from LiFaytheGoblin/2133/move-media-queries-to-frameless

Browse source 
Move media queries used in responsive project page to frameless
This commit is contained in:
chrisgarrity 2018-10-09 10:56:11 -04:00 committed by GitHub
commit 32aa3e66d4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 50 additions and 47 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;
$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
//

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

@ -1,11 +1,6 @@
@import "../../../colors";
@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 {
overflow: hidden;

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

@ -1,12 +1,6 @@
@import "../../../colors";
@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 {
/* to avoid double scroll bars this
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;
}
@media #{$small}, #{$medium}, #{$big} {
@media #{$intermediate-and-smaller} {
margin-top: 0;
width: 100%;
overflow: auto;
@ -82,7 +76,7 @@ $modal-close-size: 1rem;
align-items: flex-start;
flex-wrap: nowrap;
@media #{$small}, #{$medium}, #{$big} {
@media #{$intermediate-and-smaller} {
justify-content: center !important; //overwriting flex row properties
flex-direction: row !important;
}

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

@ -1,7 +1,6 @@
@import "../../../colors";
@import "../../../frameless";
$medium-and-small: "screen and (max-width : #{$tablet}-1)";
.report-modal-header {
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;
color: $type-white;
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
position: relative;
margin-top: calc($arrow-border-width / 2);
max-width: 100%;
@ -72,7 +71,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
content: "";
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
display: none;
}
}

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

@ -6,11 +6,6 @@ $player-width: 482px;
$player-height: 406px;
$stage-width: 480px;
$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 : #{$desktop}-1)";
$medium-and-small: "screen and (max-width : #{$tablet}-1)";
/* override view padding for share banner */
#view {
padding: 0;
@ -31,7 +26,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
.inner {
margin: 0 auto;
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
max-width: 90%;
}
@ -72,7 +67,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
height: calc(3rem - 4px);
}
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
flex-direction: row;
}
@ -103,6 +98,10 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
text-align: left;
font-size: .8rem;
flex-grow: 1;
@media #{$medium-and-smaller} {
min-width: 100%;
}
}
.validation-message {
@ -121,7 +120,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
color: $type-white;
font-size: 1rem;
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
margin-top: calc($arrow-border-width / 2);
width: 100%;
}
@ -144,7 +143,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
content: "";
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
display: none;
}
}
@ -178,7 +177,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
max-width: 100%;
flex: 1;
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
padding: 0;
width: 100%;
}
@ -233,7 +232,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
flex-wrap: nowrap;
&.force-row {
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
flex-direction: row;
}
}
@ -249,7 +248,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
}
.force-center {
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
align-self: center;
}
}
@ -261,7 +260,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
flex: 1;
flex-flow: column;
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
margin-top: 1rem;
margin-left: 0;
width: 100%;
@ -282,7 +281,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
flex-wrap: nowrap;
align-items: center;
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
flex-direction: row;
}
}
@ -388,7 +387,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
justify-content: flex-start;
flex-direction: row;
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
justify-content: center;
}
@ -417,7 +416,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
/* TODO: the following can be transferred to
src/components/thumbnailcolumn/thumbnailcolumn.scss
after testing */
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
flex-direction: row;
.thumbnail {
@ -426,7 +425,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
}
}
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
margin-top: 1rem;
}
}

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

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

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

@ -1,18 +1,13 @@
@import "../../colors";
@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 {
margin-left: 1.5rem;
justify-content: flex-end;
align-items: flex-start;
flex: 1;
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
margin-top: 1rem;
width: 100%;
}
@ -36,7 +31,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
margin: 0;
text-align: right;
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
padding: 0;
}
}
@ -60,7 +55,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
line-height: .875rem;
font-size: .75rem;
font-weight: normal;
&.studio-button,
&.copy-link-button,
&.report-button {
@ -101,14 +96,14 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
}
.subactions, .subactions .action-buttons {
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
margin: 0;
justify-content: center;
flex-direction: row;
}
& > div, .action-button {
@media #{$medium-and-small} {
@media #{$medium-and-smaller} {
padding: 0 1rem;
}
}