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

wip refactored and responsive project page modals

Browse source
This commit is contained in:
Linda 2018-09-17 17:11:31 -04:00
parent 337a9e2f30
commit 55cdeea04d
7 changed files with 150 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,41 +1,60 @@
@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 * {
box-sizing: border-box;
// box-sizing: border-box;
}
.mod-addToStudio {
margin: 100px auto;
outline: none;
padding: 0;
width: 36.25rem; /* 580px; */
// margin: 100px auto;
// outline: none;
// padding: 0;
// max-width: 36.25rem; /* 580px; */
height: 388px; /* 24.25rem; */
overflow: hidden;
user-select: none;
// 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;
// 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-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;
// font-size: .875rem;
}
.studio-list-outer-scrollbox {

7
src/components/modal/addtostudio/presentation.jsx
View file

@ -37,18 +37,19 @@ const AddToStudioModalPresentation = ({
return (
<Modal
standardSizes
className="mod-addToStudio"
contentLabel={contentLabel}
isOpen={isOpen}
onRequestClose={onRequestClose}
>
<div>
<div className="addToStudio-modal-header">
<div className="addToStudio-content-label">
<div className="addToStudio-modal-header modal-header">
<div className="addToStudio-content-label content-label">
{contentLabel}
</div>
</div>
<div className="addToStudio-modal-content">
<div className="addToStudio-modal-content modal-content">
<div className="studio-list-outer-scrollbox">
<div className="studio-list-inner-scrollbox">
<div className="studio-list-container">

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

@ -27,7 +27,9 @@ class Modal extends React.Component {
<ReactModal
appElement={document.getElementById('app')}
className={{
base: classNames('modal-content', this.props.className),
base: classNames('modal-content', this.props.className, {
'modal-sizes': this.props.standardSizes
}),
afterOpen: classNames('modal-content', this.props.className),
beforeClose: classNames('modal-content', this.props.className)
}}
@ -60,7 +62,8 @@ class Modal extends React.Component {
Modal.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
overlayClassName: PropTypes.string
overlayClassName: PropTypes.string,
standardSizes: PropTypes.boolean
};
module.exports = Modal;

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

@ -1,6 +1,12 @@
@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)";
.modal-content {
position: relative;
margin: 3.75rem auto;
@ -13,6 +19,18 @@
&:focus {
outline: none;
}
@media #{$small}, #{$medium}, #{$big} {
margin-top: 0;
width: 100%;
overflow: scroll;
}
@media #{$small}, #{$small-height} {
height: 100%;
box-shadow: none;
border-radius: 0;
}
}
.modal-overlay {
@ -43,23 +61,6 @@ $modal-close-size: 1rem;
padding-top: $modal-close-size / 2;
}
@media only screen and (max-width: $desktop - 1) {
.modal-content {
top: 0;
left: 0;
margin-top: 0;
border-radius: 0;
box-shadow: none;
width: 100%;
height: 100%;
overflow: scroll;
}
.modal-content-close {
position: fixed;
}
}
/* Close button, Submit button, etc. */
.action-buttons {
display: flex;
@ -68,6 +69,10 @@ $modal-close-size: 1rem;
justify-content: flex-end !important;
align-items: flex-start;
flex-wrap: nowrap;
@media #{$small}, #{$medium}, #{$big} {
justify-content: center !important;
}
}
/* setting overall modal to contain overflow looks good, but isn't
@ -108,3 +113,48 @@ row to appear to contain overflow. */
overflow: visible;
color: $type-white;
}
.modal-sizes * {
box-sizing: border-box;
}
.modal-sizes {
margin: 100px auto;
outline: none;
padding: 0;
max-width: 36.25rem; /* 580px; */
overflow: hidden;
user-select: none;
@media #{$medium}, #{$medium-height} {
margin: 40px auto;
}
@media #{$small}, #{$small-height} {
width: auto;
margin: 0 auto;
}
.modal-header {
padding-top: .75rem;
width: 100%;
height: 3rem;
box-sizing: border-box;
@media #{$small}, #{$small-height} {
border-radius: 0;
}
}
.content-label {
text-align: center;
color: $type-white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: bold;
}
.modal-content {
font-size: .875rem;
}
}

7
src/components/modal/report/modal.jsx
View file

@ -111,6 +111,7 @@ class ReportModal extends React.Component {
const contentLabel = intl.formatMessage({id: `report.${type}`});
return (
<Modal
standardSizes
className="mod-report"
contentLabel={contentLabel}
isOpen={isOpen}
@ -118,8 +119,8 @@ class ReportModal extends React.Component {
{...modalProps}
>
<div>
<div className="report-modal-header">
<div className="report-content-label">
<div className="report-modal-header modal-header">
<div className="report-content-label content-label">
{contentLabel}
</div>
</div>
@ -130,7 +131,7 @@ class ReportModal extends React.Component {
onValid={this.handleValid}
onValidSubmit={onReport}
>
<div className="report-modal-content">
<div className="report-modal-content modal-content">
{isConfirmed ? (
<div className="received">
<div className="received-header">

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

@ -1,6 +1,11 @@
@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-report * {
box-sizing: border-box;
}
@ -9,32 +14,45 @@
margin: 100px auto;
outline: none;
padding: 0;
width: 36.25rem; /* 580px; */
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;
// 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-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;
// font-size: .875rem;
.instructions {
line-height: 1.5rem;

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

@ -11,6 +11,7 @@ $small: "screen and (max-width : #{$mobile}-1)";
$medium: "screen and (min-width : #{$mobile}) and (max-width : #{$tablet}-1)";
$big: "screen and (min-width : #{$tablet})";
$medium-and-small: "screen and (max-width : #{$tablet}-1)";
$little-height: "screen and (max-height : 460px)";
/* override view padding for share banner */
#view {