From ff5022af4b9e7d4d3714f964da5a434e57e86898 Mon Sep 17 00:00:00 2001
From: subnub <kyle.hoell@gmail.com>
Date: Sat, 9 May 2020 14:03:01 -0400
Subject: [PATCH] Really imrpoved the mobile UI, espically on iOS, started
 working on making a docker image

---
 .dockerignore                             |  1 +
 Dockerfile                                | 15 +++++++
 src/components/MainSection/MainSection.js |  5 ++-
 src/components/Subbar/Subbar.js           | 49 ++++++++++-------------
 src/styles/components/_File.scss          |  5 ++-
 src/styles/components/_Filter.scss        |  4 ++
 src/styles/components/_Header.scss        | 15 ++++++-
 src/styles/components/_HomePage.scss      | 37 ++++++++++++++---
 src/styles/components/_LeftSection.scss   | 12 ++++++
 src/styles/components/_Popup-window.scss  | 20 +++++----
 src/styles/components/_QuickAccess.scss   |  3 ++
 src/styles/components/_SettingsMenu.scss  |  1 +
 src/styles/components/_Spacer.scss        |  7 ++++
 src/styles/components/_Subbar.scss        | 15 +++++++
 14 files changed, 144 insertions(+), 45 deletions(-)
 create mode 100644 .dockerignore
 create mode 100644 Dockerfile

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..b512c09
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..7179ee5
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,15 @@
+FROM node
+
+WORKDIR /usr/app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
+EXPOSE 8000
+
+RUN npm run start
\ No newline at end of file
diff --git a/src/components/MainSection/MainSection.js b/src/components/MainSection/MainSection.js
index 3545864..59d3d16 100644
--- a/src/components/MainSection/MainSection.js
+++ b/src/components/MainSection/MainSection.js
@@ -26,13 +26,14 @@ const MainSection = React.forwardRef((props, ref) => {
                 <div className="section" ref={ref}>
 
                     {(props.quickFiles.length !== 0 && props.parent === "/") ? 
-                        <div>
+                        <div className="spacer__mobile">
                             <Spacer title="Quick Access"/>
                             <QuickAccess 
                                 fileClick={props.fileClick}
                                 downloadFile={props.downloadFile}/>
                         </div> :
-                        undefined} 
+                        <div className="spacer__mobile">
+                        </div>} 
                     
 
                     <ShareMenu />
diff --git a/src/components/Subbar/Subbar.js b/src/components/Subbar/Subbar.js
index 7c48ef8..1b764a5 100644
--- a/src/components/Subbar/Subbar.js
+++ b/src/components/Subbar/Subbar.js
@@ -11,38 +11,33 @@ export class Subbar extends React.Component {
         return (
             <div className="subbar">
 
-                {!this.props.isMobile ? undefined : 
-                        
-                    <div className="add-button" onClick={this.props.addButtonEvent} ref={this.props.wrapperRef}>
+            <div className="add-button add-button-2" onClick={this.props.addButtonEvent} ref={this.props.wrapperRef}>
                             
-                        <img className="add-button__img" src="/images/add-blue.png"/>
+            <img className="add-button__img" src="/images/add-blue.png"/>
 
-                        <h3 className="add-button__title">New</h3>
+            <h3 className="add-button__title">New</h3>
 
-                        <div className={this.props.showAddOptions2 ? "add-button__option-wrapper2 add-button__option-wrapper--show" : "add-button__option-wrapper2"}>
-                            <div className="add_button__option__add-folder-wrapper" onClick={this.props.createFolder}>
-                                <img className="add_button__option__add-folder-image" src="/images/grey-add-folder.png"/>
-                                <p className="add_button__option__add-folder-title">Folder</p>
-                            </div>
+            <div className={this.props.showAddOptions2 ? "add-button__option-wrapper2 add-button__option-wrapper--show" : "add-button__option-wrapper2"}>
+                <div className="add_button__option__add-folder-wrapper" onClick={this.props.createFolder}>
+                    <img className="add_button__option__add-folder-image" src="/images/grey-add-folder.png"/>
+                    <p className="add_button__option__add-folder-title">Folder</p>
+                </div>
 
-                            <div className="add_button__option__add-folder-wrapper add_button__option__add-folder-wrapper--no-border">
-                                        
-                                <img className="add_button__option__add-folder-image" src="/images/upload-file-grey.png"/>
-                                <p className="add_button__option__add-folder-title">File Upload</p>
-                                <input className="add_button__option__add-file-input"  ref={this.props.uploadInput} 
-                                type="file" multiple={true} onChange={this.props.handleUpload}/>
-                                        
-                            </div>
+                <div className="add_button__option__add-folder-wrapper add_button__option__add-folder-wrapper--no-border">
+                            
+                    <img className="add_button__option__add-folder-image" src="/images/upload-file-grey.png"/>
+                    <p className="add_button__option__add-folder-title">File Upload</p>
+                    <input className="add_button__option__add-file-input"  ref={this.props.uploadInput} 
+                    type="file" multiple={true} onChange={this.props.handleUpload}/>
+                            
+                </div>
 
-                            <div className="add_button__option__add-folder-wrapper add_button__option__add-folder-wrapper--no-border">
-                                <img className="add_button__option__add-folder-image" src="/images/folder-upload-grey.png"/>
-                                <p className="add_button__option__add-folder-title">Folder Upload</p>
-                            </div>
-                            </div>
-                    </div>
-
-                        
-                }
+                <div className="add_button__option__add-folder-wrapper add_button__option__add-folder-wrapper--no-border">
+                    <img className="add_button__option__add-folder-image" src="/images/folder-upload-grey.png"/>
+                    <p className="add_button__option__add-folder-title">Folder Upload</p>
+                </div>
+                </div>
+                </div>
            
                 
                 <div className="path__wrapper">
diff --git a/src/styles/components/_File.scss b/src/styles/components/_File.scss
index b71aa27..292c7d8 100644
--- a/src/styles/components/_File.scss
+++ b/src/styles/components/_File.scss
@@ -26,7 +26,7 @@
     @media (max-width: $desktop-breakpoint) {
         flex-basis: 28%;
         max-width: 30.2%;
-        position: unset
+        position: unset;
     }
 }
 
@@ -116,7 +116,8 @@
     -webkit-tap-highlight-color: transparent;
 
     @media (max-width: $desktop-breakpoint) {
-        position: unset
+        position: unset;
+        overflow: hidden;
     }
 
 }
diff --git a/src/styles/components/_Filter.scss b/src/styles/components/_Filter.scss
index 0939195..6d19643 100644
--- a/src/styles/components/_Filter.scss
+++ b/src/styles/components/_Filter.scss
@@ -3,6 +3,10 @@
     justify-content: space-between;
     align-items: center;
     height: 52px;
+
+    @media (max-width: $desktop-breakpoint) {
+        width: 100vw;
+    }
 }
 
 .filter__folder-wrapper {
diff --git a/src/styles/components/_Header.scss b/src/styles/components/_Header.scss
index 04b5dc2..8a3810d 100644
--- a/src/styles/components/_Header.scss
+++ b/src/styles/components/_Header.scss
@@ -9,6 +9,7 @@
     position: fixed;
     /* top: 0; */
     width: 100%;
+    z-index: 1;
 
     @media (max-width: $desktop-breakpoint) {
         text-align: center;
@@ -16,10 +17,16 @@
         flex-direction: row;
         border-bottom: 1px solid #dadce0;
         justify-content: space-between;
-        position: initial;
+        position: fixed;
+        background: white;
+        top: 0;
+        left: 0;
+        right: 0;
         width: 100%;
         height: 80px;
         padding: 0;
+        z-index: 2;
+        // background: blue;
     }
 }
 
@@ -155,6 +162,12 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: center;  
+    height: 50px;
+
+    // @media (max-width: $desktop-breakpoint) {
+    //     height: 60px;
+    // }
 }
 
 .header__input__suggested__item:hover {
diff --git a/src/styles/components/_HomePage.scss b/src/styles/components/_HomePage.scss
index 50bf44c..00e8fd8 100644
--- a/src/styles/components/_HomePage.scss
+++ b/src/styles/components/_HomePage.scss
@@ -10,7 +10,9 @@
     -ms-overflow-style: none;  /* IE 10+ */
     &::-webkit-scrollbar {
         width: 0px;
+        height: unset;
         background: transparent; /* Chrome/Safari/Webkit */
+        overflow-y: unset;
     }
 
 }
@@ -26,7 +28,8 @@
         // margin-top: 77px;
         display: flex;
         flex-direction: column;
-        overflow-x: hidden;
+        //overflow-x: hidden;
+        overflow: hidden;
         width: unset;
     }
 
@@ -38,12 +41,25 @@
     height: -webkit-fill-available;
     display: inherit;
     overflow: hidden;
+
+    @media (max-width: $desktop-breakpoint) { 
+        height: unset;
+    }
 }
 
-.outter-wrapper {
-    height: 100vh;
-    width: 100vw;
-}
+// .outter-wrapper {
+//     height: 100%;
+//     width: 100%;
+//     overflow: hidden;
+//     @media (max-width: $desktop-breakpoint) {
+//         //background: blue;
+//         position: fixed;
+//         top: 0;
+//         left: 0;
+//         right: 0;
+//         bottom: 0;
+//     }
+// }
 
 .main-page {
     background: white;
@@ -55,10 +71,19 @@
     @media (max-width: $desktop-breakpoint) {
         background: #fff;
         /* height: 100vh; */
-        height: calc(100% - 80px);
+        // height: calc(100% - 80px);
+        height: unset;
         width: 100vw;
         display: inline-flex;
         padding: 0;
+        overflow: hidden;
+        // position: fixed;
+        // padding: 0;
+        // bottom: 0;
+        // left: 0;
+        // right: 0;
+        // margin-top: 80px;
+        //background: red;
     }
 }
 
diff --git a/src/styles/components/_LeftSection.scss b/src/styles/components/_LeftSection.scss
index d431f41..fd36ac0 100644
--- a/src/styles/components/_LeftSection.scss
+++ b/src/styles/components/_LeftSection.scss
@@ -35,6 +35,14 @@
     }
 }
 
+.add-button-2 {
+
+    display: none;
+    @media (max-width: $desktop-breakpoint) {
+        display: inline-flex;
+    }
+}
+
 .add-button__img {
     width: 30px;
     height: 30px;
@@ -108,6 +116,10 @@
     // padding: 0 140px 132px 36px;
     margin-top: 52px;
     box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);
+
+    @media (max-width: $desktop-breakpoint) {
+        margin-top: 75px;
+    }
 }
 
 .add_button__option__add-folder-wrapper {
diff --git a/src/styles/components/_Popup-window.scss b/src/styles/components/_Popup-window.scss
index ebd79c5..4cf1e4c 100644
--- a/src/styles/components/_Popup-window.scss
+++ b/src/styles/components/_Popup-window.scss
@@ -22,6 +22,7 @@
     @media (max-width: $desktop-breakpoint) {
         width: 100%;
         height: 100%;
+        z-index: 2;
     }
     
 }
@@ -60,12 +61,13 @@
 
 .popup-window__image--loaded {
 
-    width: 100%;
-    max-height: 100%;
+    width: 94vw;
+    max-height: 70vh;
     object-fit: cover;
     opacity: 1;
-    max-width: 100%;
+    max-width: 94vw;
     border-radius: 6px;
+    height: 70vh;
     cursor: pointer;
 
 }
@@ -94,13 +96,17 @@
         align-items: center;
         display: flex;
         margin-bottom: 50px;
-        height: 65%;
-        width: 99%;
-        max-width: 99%;
+        overflow: visible;
+        // height: 65%;
+        // width: 99%;
+        max-width: 100%;
         overflow: hidden;
         position: relative;
         justify-content: center;
-        max-height: 50%;
+        // max-height: 50%;
+        height: 70%;
+        width: 100%;
+        max-height: 70%;
     }
 
 }
diff --git a/src/styles/components/_QuickAccess.scss b/src/styles/components/_QuickAccess.scss
index 0925d44..b9931f5 100644
--- a/src/styles/components/_QuickAccess.scss
+++ b/src/styles/components/_QuickAccess.scss
@@ -9,6 +9,9 @@
     /* overflow-y: hidden; */
     overflow: hidden;
 
+    @media (max-width: $desktop-breakpoint) {
+        // margin-top: calc(80px + 3vh);
+    }
 }
 
 .quickaccess__item {
diff --git a/src/styles/components/_SettingsMenu.scss b/src/styles/components/_SettingsMenu.scss
index 69a1c27..c7bb3c8 100644
--- a/src/styles/components/_SettingsMenu.scss
+++ b/src/styles/components/_SettingsMenu.scss
@@ -17,6 +17,7 @@
     @media (max-width: $desktop-breakpoint) {
         width: 100%;
         height: 100%;
+        z-index: 2;
     }
 }
 
diff --git a/src/styles/components/_Spacer.scss b/src/styles/components/_Spacer.scss
index 7b32b87..e9f92ff 100644
--- a/src/styles/components/_Spacer.scss
+++ b/src/styles/components/_Spacer.scss
@@ -3,6 +3,13 @@
     height: 37px;
 }
 
+.spacer__mobile {
+   
+    @media (max-width: $desktop-breakpoint) {
+        margin-top: calc(80px + 6vh);
+    }
+}
+
 .spacer__title {
     color: #5f6368;
     margin-left: 22px;
diff --git a/src/styles/components/_Subbar.scss b/src/styles/components/_Subbar.scss
index 9e00ba1..92fe980 100644
--- a/src/styles/components/_Subbar.scss
+++ b/src/styles/components/_Subbar.scss
@@ -41,6 +41,21 @@
     user-select: none;
     // overflow-x: scroll;
 
+    @media (max-width: $desktop-breakpoint) { 
+        width: 100vw;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        height: 7vh;
+        min-height: 50px;
+        user-select: none;
+        position: fixed;
+        top: 80px;
+        background: white;
+        z-index: 1;
+    }
+
+
 }
 
 .path__block {