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

Merge pull request #3430 from benjiwheeler/join-flow-responsive-fixes

Browse source 
Join flow responsive fixes
This commit is contained in:
Benjamin Wheeler 2019-10-07 12:44:30 -04:00 committed by GitHub
commit 60609dc819
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/join-flow/join-flow-step.scss
View file

@ -42,10 +42,16 @@
margin: 0; margin: 0;
border-top-left-radius: 1rem; border-top-left-radius: 1rem;
border-top-right-radius: 1rem; border-top-right-radius: 1rem;
/* match the small window setting for modal as a whole */
@media #{$small}, #{$small-height} {
border-top-left-radius: 0rem;
border-top-right-radius: 0rem;
}
} }
.join-flow-header-image { .join-flow-header-image {
width: 27.5rem; width: 100%;
} }
.join-flow-footer-message { .join-flow-footer-message {

6
src/components/join-flow/next-step-button.scss
View file

@ -14,6 +14,12 @@
transition: background-color .25s ease; transition: background-color .25s ease;
background-color: $ui-orange-90percent; background-color: $ui-orange-90percent;
} }
/* match the small window setting for modal as a whole */
@media #{$small}, #{$small-height} {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
} }
.next-step-title { .next-step-title {

21
src/components/modal/join/modal.scss
View file

@ -1,13 +1,32 @@
@import "../../../colors"; @import "../../../colors";
@import "../../../frameless"; @import "../../../frameless";
/* unusually for a modal, the join flow modal cares about the screen around it
being clickable, because of the standalone join view. */
.mod-join { .mod-join {
width: 27.4375rem; width: 27.4375rem;
@media #{$small} {
width: auto;
}
}
/* enable vertical scrolling when modal showing, if page is short */
.modal-overlay {
@media #{$small-height}, #{$medium-height} {
overflow: auto;
}
}
.modal-content {
@media #{$small}, #{$small-height} {
height: unset;
}
} }
/* lower the modal slightly to accomodate Scratch logo above it */ /* lower the modal slightly to accomodate Scratch logo above it */
.modal-sizes { .modal-sizes {
@media #{$medium}, #{$medium-height} { @media #{$small}, #{$small-height}, #{$medium}, #{$medium-height} {
margin: 3.5rem auto; margin: 3.5rem auto;
} }
} }

16
src/views/join/join.scss
View file

@ -8,21 +8,11 @@
left: calc(25% - 76px); left: calc(25% - 76px);
.logo { .logo {
width: 76px; width: 76px;
} }
} }
@media #{$small} { @media #{$small}, #{$medium}, #{$intermediate} {
.join {
left: calc(50% - 38px);
}
}
@media #{$medium} {
.join {
left: calc(50% - 38px);
}
}
@media #{$intermediate} {
.join { .join {
left: calc(50% - 38px); left: calc(50% - 38px);
} }