mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
Merge pull request #2108 from LiFaytheGoblin/responsive-project-page/modals
Make modals responsive
This commit is contained in:
Linda
GitHub
commit
79afc55f26
6 changed files with 166 additions and 136 deletions
|
|
@ -1,52 +1,46 @@
|
|||
@import "../../../colors";
|
||||
@import "../../../frameless";
|
||||
|
||||
.mod-addToStudio * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
$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 {
|
||||
margin: 100px auto;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
width: 36.25rem; /* 580px; */
|
||||
height: 388px; /* 24.25rem; */
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
|
||||
@media #{$small}, #{$small-height} {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.studio-list-outer-scrollbox {
|
||||
position: relative;
|
||||
background-color: $ui-blue-10percent;
|
||||
min-height: 15rem;
|
||||
max-height: calc(100% - 8rem);
|
||||
flex: 1;
|
||||
|
||||
@media #{$small-height} {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.studio-list-inner-scrollbox {
|
||||
margin-right: .5rem;
|
||||
padding-right: .5rem;
|
||||
height: 16.9375rem;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
|
||||
|
|
@ -93,35 +87,32 @@
|
|||
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 {
|
||||
|
|
@ -144,7 +135,7 @@
|
|||
|
||||
.studio-status-icon {
|
||||
position: absolute;
|
||||
margin: .5rem .625rem .5rem 14.0625rem;
|
||||
right: .625rem;
|
||||
border-radius: .75rem;
|
||||
padding: .0625rem .075rem;
|
||||
width: 1.5rem;
|
||||
|
|
|
|||
|
|
@ -37,70 +37,69 @@ const AddToStudioModalPresentation = ({
|
|||
|
||||
return (
|
||||
<Modal
|
||||
useStandardSizes
|
||||
className="mod-addToStudio"
|
||||
contentLabel={contentLabel}
|
||||
isOpen={isOpen}
|
||||
onRequestClose={onRequestClose}
|
||||
>
|
||||
<div>
|
||||
<div className="addToStudio-modal-header">
|
||||
<div className="addToStudio-content-label">
|
||||
{contentLabel}
|
||||
<div className="addToStudio-modal-header modal-header">
|
||||
<div className="addToStudio-content-label content-label">
|
||||
{contentLabel}
|
||||
</div>
|
||||
</div>
|
||||
<div className="addToStudio-modal-content modal-content">
|
||||
<div className="studio-list-outer-scrollbox">
|
||||
<div className="studio-list-inner-scrollbox">
|
||||
<div className="studio-list-container">
|
||||
{studioButtons}
|
||||
</div>
|
||||
<div className="studio-list-bottom-gradient" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="addToStudio-modal-content">
|
||||
<div className="studio-list-outer-scrollbox">
|
||||
<div className="studio-list-inner-scrollbox">
|
||||
<div className="studio-list-container">
|
||||
{studioButtons}
|
||||
|
||||
|
||||
<Form
|
||||
className="add-to-studio"
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
<FlexRow className="action-buttons">
|
||||
<Button
|
||||
className="action-button close-button white"
|
||||
key="closeButton"
|
||||
name="closeButton"
|
||||
type="button"
|
||||
onClick={onRequestClose}
|
||||
>
|
||||
<div className="action-button-text">
|
||||
<FormattedMessage id="general.close" />
|
||||
</div>
|
||||
<div className="studio-list-bottom-gradient" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<Form
|
||||
className="add-to-studio"
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
<FlexRow className="action-buttons">
|
||||
</Button>
|
||||
{waitingToClose ? [
|
||||
<Button
|
||||
className="action-button close-button white"
|
||||
key="closeButton"
|
||||
name="closeButton"
|
||||
type="button"
|
||||
onClick={onRequestClose}
|
||||
className="action-button submit-button submit-button-waiting"
|
||||
disabled="disabled"
|
||||
key="submitButton"
|
||||
type="submit"
|
||||
>
|
||||
<div className="action-button-text">
|
||||
<FormattedMessage id="general.close" />
|
||||
<Spinner />
|
||||
<FormattedMessage id="addToStudio.finishing" />
|
||||
</div>
|
||||
</Button>
|
||||
{waitingToClose ? [
|
||||
<Button
|
||||
className="action-button submit-button submit-button-waiting"
|
||||
disabled="disabled"
|
||||
key="submitButton"
|
||||
type="submit"
|
||||
>
|
||||
<div className="action-button-text">
|
||||
<Spinner />
|
||||
<FormattedMessage id="addToStudio.finishing" />
|
||||
</div>
|
||||
</Button>
|
||||
] : [
|
||||
<Button
|
||||
className="action-button submit-button"
|
||||
key="submitButton"
|
||||
type="submit"
|
||||
>
|
||||
<div className="action-button-text">
|
||||
<FormattedMessage id="general.okay" />
|
||||
</div>
|
||||
</Button>
|
||||
]}
|
||||
</FlexRow>
|
||||
</Form>
|
||||
</div>
|
||||
] : [
|
||||
<Button
|
||||
className="action-button submit-button"
|
||||
key="submitButton"
|
||||
type="submit"
|
||||
>
|
||||
<div className="action-button-text">
|
||||
<FormattedMessage id="general.okay" />
|
||||
</div>
|
||||
</Button>
|
||||
]}
|
||||
</FlexRow>
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -26,8 +26,11 @@ class Modal extends React.Component {
|
|||
return (
|
||||
<ReactModal
|
||||
appElement={document.getElementById('app')}
|
||||
bodyOpenClassName={this.props.useStandardSizes ? classNames('overflow-hidden') : null}
|
||||
className={{
|
||||
base: classNames('modal-content', this.props.className),
|
||||
base: classNames('modal-content', this.props.className, {
|
||||
'modal-sizes': this.props.useStandardSizes
|
||||
}),
|
||||
afterOpen: classNames('modal-content', this.props.className),
|
||||
beforeClose: classNames('modal-content', this.props.className)
|
||||
}}
|
||||
|
|
@ -60,7 +63,8 @@ class Modal extends React.Component {
|
|||
Modal.propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
overlayClassName: PropTypes.string
|
||||
overlayClassName: PropTypes.string,
|
||||
useStandardSizes: PropTypes.bool
|
||||
};
|
||||
|
||||
module.exports = Modal;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,18 @@
|
|||
@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 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
margin: 3.75rem auto;
|
||||
|
|
@ -10,9 +22,27 @@
|
|||
padding: 0;
|
||||
width: 48.75rem;
|
||||
|
||||
.modal-content { /* content inside of content */
|
||||
display: flex;
|
||||
border-radius: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media #{$small}, #{$medium}, #{$big} {
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@media #{$small}, #{$small-height} {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
|
|
@ -43,23 +73,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 +81,11 @@ $modal-close-size: 1rem;
|
|||
justify-content: flex-end !important;
|
||||
align-items: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
@media #{$small}, #{$medium}, #{$big} {
|
||||
justify-content: center !important; //overwriting flex row properties
|
||||
flex-direction: row !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* setting overall modal to contain overflow looks good, but isn't
|
||||
|
|
@ -108,3 +126,46 @@ 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; */
|
||||
user-select: none;
|
||||
|
||||
@media #{$medium}, #{$medium-height} {
|
||||
margin: 40px auto;
|
||||
}
|
||||
|
||||
@media #{$small}, #{$small-height} {
|
||||
margin: 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding-top: .75rem;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -111,6 +111,7 @@ class ReportModal extends React.Component {
|
|||
const contentLabel = intl.formatMessage({id: `report.${type}`});
|
||||
return (
|
||||
<Modal
|
||||
useStandardSizes
|
||||
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">
|
||||
|
|
|
|||
|
|
@ -3,40 +3,14 @@
|
|||
|
||||
$medium-and-small: "screen and (max-width : #{$tablet}-1)";
|
||||
|
||||
.mod-report * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mod-report {
|
||||
margin: 100px auto;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
width: 36.25rem; /* 580px; */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue