Merge pull request #64 from ente-io/responsive-ui

Responsive UI

src/components/MessageDialog.tsx

@@ -39,10 +39,7 @@ export default function MessageDialog({
             centered
             backdrop={attributes.staticBackdrop ? 'static' : 'true'}
         >
-            <Modal.Header
+            <Modal.Header style={{ borderBottom: 'none' }} closeButton>
-                style={{ borderBottom: 'none' }}
-                closeButton={attributes.close != null}
-            >
                 {attributes.title && (
                     <Modal.Title>
                         <strong>{attributes.title}</strong>
@@ -55,6 +52,12 @@ export default function MessageDialog({
                 </Modal.Body>
             )}
             <Modal.Footer style={{ borderTop: 'none' }}>
+                <div
+                    style={{
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                    }}
+                >
                     {attributes.close && (
                         <Button
                             variant={`outline-${
@@ -63,7 +66,10 @@ export default function MessageDialog({
                             onClick={props.onHide}
                             style={{
                                 padding: '6px 3em',
-                            marginRight: '20px',
+                                margin: '0 20px',
+                                marginBottom: '20px',
+                                flex: 1,
+                                whiteSpace: 'nowrap',
                             }}
                         >
                             {attributes.close?.text ?? constants.OK}
@@ -78,12 +84,19 @@ export default function MessageDialog({
                                 attributes.proceed.action();
                                 props.onHide();
                             }}
-                        style={{ padding: '6px 3em', marginRight: '20px' }}
+                            style={{
+                                padding: '6px 3em',
+                                margin: '0 20px',
+                                marginBottom: '20px',
+                                flex: 1,
+                                whiteSpace: 'nowrap',
+                            }}
                             disabled={attributes.proceed.disabled}
                         >
                             {attributes.proceed.text}
                         </Button>
                     )}
+                </div>
             </Modal.Footer>
         </Modal>
     );

src/pages/_app.tsx

@@ -90,17 +90,14 @@ const GlobalStyles = createGlobalStyle`
     .pswp__img {
         object-fit: contain;
     }
-    .modal-90w{
+
-        width:90vw;
-        max-width:960px!important;
-    }
     .modal {
         z-index: 2000;
     }
     .modal-dialog-centered {
-        min-height: -webkit-calc(90% - 3.5rem);
+        min-height: -webkit-calc(80% - 3.5rem);
-        min-height: -moz-calc(90% - 3.5rem);
+        min-height: -moz-calc(80% - 3.5rem);
-        min-height: calc(90% - 3.5rem);
+        min-height: calc(80% - 3.5rem);
     }
     .modal .modal-header, .modal .modal-footer {
         border-color: #444 !important;
@@ -126,6 +123,11 @@ const GlobalStyles = createGlobalStyle`
         background-color:#202020 !important;
         color:#aaa;
     }
+    .modal-dialog{
+        max-width:960px!important;
+        width:90%;
+        margin:5% auto;
+    }
     .download-btn{
         margin-top:10px;
         width: 25px;
@@ -176,10 +178,6 @@ const GlobalStyles = createGlobalStyle`
     .alert-primary {
         background-color: #c4ffd6;
     }
-    .ente-modal{
-        width: 500px;
-        max-width:100%;
-    } 
     .bm-burger-button {
         position: fixed;
         width: 24px;

src/pages/gallery/components/ChoiceModal.tsx

@@ -1,3 +1,4 @@
+import MessageDialog from 'components/MessageDialog';
 import React from 'react';
 import { Button, Modal } from 'react-bootstrap';
 import constants from 'utils/strings/constants';
@@ -15,31 +16,15 @@ function ChoiceModal({
     ...props
 }: Props) {
     return (
-        <Modal
+        <MessageDialog
             {...props}
-            size="lg"
+            attributes={{ title: constants.MULTI_FOLDER_UPLOAD }}
-            aria-labelledby="contained-modal-title-vcenter"
-            centered
         >
-            <Modal.Body style={{ padding: '24px' }}>
+            <p>{constants.UPLOAD_STRATEGY_CHOICE}</p>
-                <Modal.Header
-                    style={{
-                        borderColor: 'rgb(16, 176, 2)',
-                        fontSize: '20px',
-                        marginBottom: '20px',
-                        border: 'none',
-                    }}
-                    id="contained-modal-title-vcenter"
-                    closeButton
-                >
-                    {constants.UPLOAD_STRATEGY_CHOICE}
-                </Modal.Header>
             <div
                 style={{
                     display: 'flex',
-                        justifyContent: 'space-around',
+                    flexWrap: 'wrap',
-                        paddingBottom: '20px',
-                        alignItems: 'center',
                 }}
             >
                 <Button
@@ -49,30 +34,38 @@ function ChoiceModal({
                         showCollectionCreateModal();
                     }}
                     style={{
-                            padding: '12px',
+                        padding: '12px 24px',
-                            paddingLeft: '24px',
+                        flex: 2,
-                            paddingRight: '24px',
+                        whiteSpace: 'nowrap',
                     }}
                 >
                     {constants.UPLOAD_STRATEGY_SINGLE_COLLECTION}
                 </Button>
+                <div
+                    style={{
+                        flex: 1,
+                        textAlign: 'center',
+                        minWidth: '100px',
+                        margin: '2% auto',
+                    }}
+                >
                     <strong>{constants.OR}</strong>
+                </div>
                 <Button
                     variant="outline-success"
                     onClick={() =>
                         uploadFiles(UPLOAD_STRATEGY.COLLECTION_PER_FOLDER)
                     }
                     style={{
-                            padding: '12px',
+                        padding: '12px 24px',
-                            paddingLeft: '24px',
+                        flex: 2,
-                            paddingRight: '24px',
+                        whiteSpace: 'nowrap',
                     }}
                 >
                     {constants.UPLOAD_STRATEGY_COLLECTION_PER_FOLDER}
                 </Button>
             </div>
-            </Modal.Body>
+        </MessageDialog>
-        </Modal>
     );
 }
 export default ChoiceModal;

src/pages/gallery/components/CollectionSelector.tsx

@@ -71,18 +71,14 @@ function CollectionSelector({
     );
 
     return (
-        <Modal
+        <Modal {...props} size="xl" centered>
-            {...props}
-            dialogClassName="modal-90w"
-            style={{ maxWidth: '100%' }}
-        >
             <Modal.Header closeButton>
                 <Modal.Title>{attributes.title}</Modal.Title>
             </Modal.Header>
             <Modal.Body
                 style={{
                     display: 'flex',
-                    justifyContent: 'flex-start',
+                    justifyContent: 'space-around',
                     flexWrap: 'wrap',
                 }}
             >

src/pages/gallery/components/PlanSelector.tsx

@@ -57,7 +57,7 @@ function PlanSelector(props: Props) {
         );
     };
     useEffect(() => {
-        if (!plans) {
+        if (!plans && props.modalView) {
             const main = async () => {
                 props.setLoading(true);
                 await billingService.updatePlans();
@@ -65,7 +65,7 @@ function PlanSelector(props: Props) {
             };
             main();
         }
-    });
+    }, [props.modalView]);
 
     async function onPlanSelect(plan: Plan) {
         if (
@@ -157,7 +157,7 @@ function PlanSelector(props: Props) {
         <Modal
             show={props.modalView}
             onHide={props.closeModal}
-            dialogClassName="modal-90w"
+            size="xl"
             centered
             backdrop={hasPaidSubscription(subscription) ? 'true' : `static`}
         >
@@ -207,8 +207,7 @@ function PlanSelector(props: Props) {
                         justifyContent: 'space-around',
                         flexWrap: 'wrap',
                         minHeight: '212px',
-                        marginTop: '24px',
+                        margin: '24px 0',
-                        marginBottom: '36px',
                     }}
                 >
                     {plans && PlanIcons}

src/pages/gallery/components/UploadProgress.tsx

@@ -29,13 +29,11 @@ export default function UploadProgress(props: Props) {
                     ? () => null
                     : props.closeModal
             }
-            size="lg"
             aria-labelledby="contained-modal-title-vcenter"
             centered
             backdrop={
                 props.uploadStage !== UPLOAD_STAGES.FINISH ? 'static' : 'true'
             }
-            dialogClassName="ente-modal"
         >
             <Modal.Body>
                 <div

src/utils/strings/englishConstants.tsx

@@ -110,6 +110,7 @@ const englishConstants = {
     DELETE_FILE_MESSAGE: 'sure you want to delete selected files?',
     DELETE_FILE: 'delete files',
     DELETE: 'delete',
+    MULTI_FOLDER_UPLOAD: 'choose upload strategy',
     UPLOAD_STRATEGY_CHOICE:
         'you are uploading multiple folders, would you like us to create',
     UPLOAD_STRATEGY_SINGLE_COLLECTION: 'a single album for everything',