Merge pull request #2108 from LiFaytheGoblin/responsive-project-page/modals

Make modals responsive

src/components/modal/addtostudio/modal.scss

@@ -1,52 +1,46 @@
 @import "../../../colors";
 @import "../../../frameless";
 
-.mod-addToStudio * {
+$small: "only screen and (max-width : #{$mobile})";
-    box-sizing: border-box;
+$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;
+    margin: auto 2.18375rem auto .6875rem;
-    /* per spec, should be:
+    min-width: 0;
-    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 */
     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;

src/components/modal/addtostudio/presentation.jsx

@@ -37,70 +37,69 @@ const AddToStudioModalPresentation = ({
 
     return (
         <Modal
+            useStandardSizes
             className="mod-addToStudio"
             contentLabel={contentLabel}
             isOpen={isOpen}
             onRequestClose={onRequestClose}
         >
-            <div>
+            <div className="addToStudio-modal-header modal-header">
-                <div className="addToStudio-modal-header">
+                <div className="addToStudio-content-label content-label">
-                    <div className="addToStudio-content-label">
+                    {contentLabel}
-                        {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">
+                <Form
-                            <div className="studio-list-container">
+                    className="add-to-studio"
-                                {studioButtons}
+                    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" />
+                        </Button>
-                        </div>
+                        {waitingToClose ? [
-                    </div>
-
-
-                    <Form
-                        className="add-to-studio"
-                        onSubmit={onSubmit}
-                    >
-                        <FlexRow className="action-buttons">
                             <Button
-                                className="action-button close-button white"
+                                className="action-button submit-button submit-button-waiting"
-                                key="closeButton"
+                                disabled="disabled"
-                                name="closeButton"
+                                key="submitButton"
-                                type="button"
+                                type="submit"
-                                onClick={onRequestClose}
                             >
                                 <div className="action-button-text">
-                                    <FormattedMessage id="general.close" />
+                                    <Spinner />
+                                    <FormattedMessage id="addToStudio.finishing" />
                                 </div>
                             </Button>
-                            {waitingToClose ? [
+                        ] : [
-                                <Button
+                            <Button
-                                    className="action-button submit-button submit-button-waiting"
+                                className="action-button submit-button"
-                                    disabled="disabled"
+                                key="submitButton"
-                                    key="submitButton"
+                                type="submit"
-                                    type="submit"
+                            >
-                                >
+                                <div className="action-button-text">
-                                    <div className="action-button-text">
+                                    <FormattedMessage id="general.okay" />
-                                        <Spinner />
+                                </div>
-                                        <FormattedMessage id="addToStudio.finishing" />
+                            </Button>
-                                    </div>
+                        ]}
-                                </Button>
+                    </FlexRow>
-                            ] : [
+                </Form>
-                                <Button
-                                    className="action-button submit-button"
-                                    key="submitButton"
-                                    type="submit"
-                                >
-                                    <div className="action-button-text">
-                                        <FormattedMessage id="general.okay" />
-                                    </div>
-                                </Button>
-                            ]}
-                        </FlexRow>
-                    </Form>
-                </div>
             </div>
         </Modal>
     );

src/components/modal/base/modal.jsx

@@ -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;

src/components/modal/base/modal.scss

@@ -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;
+    }
+}

src/components/modal/report/modal.jsx

@@ -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-modal-header modal-header">
-                        <div className="report-content-label">
+                        <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">

src/components/modal/report/modal.scss

@@ -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;