scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 08:31:23 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

improve responsiveness for project page modals and also clean up the modals a bit

Browse source
This commit is contained in:
Linda 2018-09-18 14:31:43 -04:00
parent 55cdeea04d
commit d061e2afe9
4 changed files with 22 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,55 +6,15 @@ $medium: "only screen and (min-width : #{$mobile}+1) and (max-width : #{$tablet}
$small-height: "only screen and (max-height : #{$mobile})";
$medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height : #{$tablet} - 1)";
.mod-addToStudio * {
// box-sizing: border-box;
}
.mod-addToStudio {
// margin: 100px auto;
// outline: none;
// padding: 0;
// max-width: 36.25rem; /* 580px; */
height: 388px; /* 24.25rem; */
// overflow: hidden;
// user-select: none;
//
// @media #{$medium}, #{$medium-height} {
// margin: 40px auto;
// }
//
// @media #{$small}, #{$small-height} {
// width: auto;
// height: 100%;
// margin: 0 auto;
// }
}
.addToStudio-modal-header {
box-shadow: inset 0 -1px 0 0 $ui-blue-dark;
background-color: $ui-blue;
// padding-top: .75rem;
// width: 100%;
// height: 3rem;
// box-sizing: border-box;
// @media #{$small}, #{$small-height} {
// border-radius: 0;
// }
}
// .addToStudio-content-label {
// text-align: center;
// color: $type-white;
// font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
// font-size: 1rem;
// font-weight: bold;
// }
.addToStudio-modal-content {
margin: 0 auto;
width: 100%;
// font-size: .875rem;
box-shadow: none;
}
.studio-list-outer-scrollbox {
@ -112,35 +72,32 @@ $medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height :
display: flex;
position: relative;
transition: all .5s;
margin: .21875rem .21875rem;
margin: .21875rem;
border-radius: .5rem;
background-color: $ui-white;
cursor: pointer;
padding: 0;
width: 16.1875rem; /* 259px */
width: 48%;
height: 2.5rem;
box-sizing: border-box;
justify-content: space-between;
align-items: center;
@media #{$small} {
min-width: 98%;
flex-shrink: 1;
}
}
.studio-selector-button-text {
position: absolute;
/* per spec, should be:
margin: .375rem 2.18375rem .375rem .6875rem
but in practice, our css seems to vertically align text to top, where
invision spec aligned to middle.
*/
margin: .575rem 2.18375rem .175rem .6875rem;
width: 13.3125rem;
height: 1.25rem; /* diff from spec, in case we ever do valign to middle; changed to match line-height because else with overflow hidden it cuts off some letters */
margin: auto 2.18375rem auto .6875rem;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.25rem;
white-space: nowrap;
font-family: "Helvetica Neue";
font-size: .875rem;
font-weight: regular;
flex-shrink: 1;
}
.studio-selector-button-selected {
@ -163,7 +120,7 @@ $medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height :
.studio-status-icon {
position: absolute;
margin: .5rem .625rem .5rem 14.0625rem;
right: .625rem;
border-radius: .75rem;
padding: .0625rem .075rem;
width: 1.5rem;

2
src/components/modal/base/modal.jsx
View file

@ -63,7 +63,7 @@ Modal.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
overlayClassName: PropTypes.string,
standardSizes: PropTypes.boolean
standardSizes: PropTypes.bool
};
module.exports = Modal;

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

@ -16,6 +16,12 @@ $medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height :
padding: 0;
width: 48.75rem;
.modal-content { /* content inside of content */
border-radius: 0;
display: flex;
flex-direction: column;
}
&:focus {
outline: none;
}
@ -71,7 +77,8 @@ $modal-close-size: 1rem;
flex-wrap: nowrap;
@media #{$small}, #{$medium}, #{$big} {
justify-content: center !important;
justify-content: center !important; //overwriting flex row properties
flex-direction: row !important;
}
}
@ -133,13 +140,13 @@ row to appear to contain overflow. */
@media #{$small}, #{$small-height} {
width: auto;
margin: 0 auto;
overflow: hidden scroll;
}
.modal-header {
padding-top: .75rem;
width: 100%;
height: 3rem;
box-sizing: border-box;
@media #{$small}, #{$small-height} {
border-radius: 0;

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

@ -6,53 +6,14 @@ $medium: "only screen and (min-width : #{$mobile}+1) and (max-width : #{$tablet}
$small-height: "only screen and (max-height : #{$mobile})";
$medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height : #{$tablet} - 1)";
.mod-report * {
box-sizing: border-box;
}
.mod-report {
margin: 100px auto;
outline: none;
padding: 0;
max-width: 36.25rem; /* 580px; */
user-select: none;
@media #{$medium}, #{$medium-height} {
margin: 40px auto;
}
@media #{$small}, #{$small-height} {
width: auto;
margin: 0 auto;
}
}
.report-modal-header {
border-radius: 1rem 1rem 0 0;
box-shadow: inset 0 -1px 0 0 $ui-coral-dark;
background-color: $ui-coral;
// padding-top: .75rem;
// width: 100%;
// height: 3rem;
// box-sizing: border-box;
//
// @media #{$small}, #{$small-height} {
// border-radius: 0;
// }
}
// .report-content-label {
// text-align: center;
// color: $type-white;
// font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
// font-size: 1rem;
// font-weight: bold;
// }
.report-modal-content {
margin: 1rem auto;
width: 80%;
// font-size: .875rem;
.instructions {
line-height: 1.5rem;