Explorar el Código

Update home strand responsiveness for landscape mode.

Lee Morgan hace 5 años
padre
commit
cec1e7bc45

+ 0 - 5
views/dashboardPage/bundle.js

@@ -1568,11 +1568,6 @@ controller = {
     }
 }
 
-if(window.screen.availWidth > 1000 && window.screen.availWidth <= 1400){
-    controller.changeMenu();
-    document.getElementById("menuShifter2").style.display = "none";
-}
-
 //Add click listeners for menu buttons
 document.getElementById("homeBtn").onclick = ()=>{controller.openStrand("home")};
 document.getElementById("ingredientsBtn").onclick = ()=>{controller.openStrand("ingredients")};

+ 72 - 3
views/dashboardPage/dashboard.css

@@ -792,26 +792,95 @@ Modal
 }
 
 @media screen and (orientation: landscape){
-    @media screen and (max-width: 1400px){
+    @media screen and (max-width: 1200px){
         body{
             background: rgb(0, 27, 45);
         }
 
+        .contentBlock{
+            padding: 0;
+        }
+
         .button{
             padding: 3px 0;
         }
 
         .mobileMenuSelector{
+            display: flex;
             color: rgb(240, 252, 255);
             z-index: 10;
         }
 
-        .strandTitle{
+        .strandHead{
             color: white;
+            position: fixed;
+            top: 5px;
+            left: 25px;
+            right: 0;
+            margin: 0;
+            text-align: center;
+            font-size: 20px;
         }
 
-        @media screen and (min-width: 601px){
+        /* HOME */
+        #homeStrand{
+            flex-direction: row;
+            padding: 0;
+            align-items: flex-end;
+        }
+
+            #graphCard{
+                display: none;
+            }
+
+            #inventoryCheckCard{
+                display: none;
+            }
+
+            .flexRow{
+                height: 80%;
+            }
 
+                .flexRow:nth-child(3){
+                    flex-grow: 2;
+                }
+
+                .card{
+                    background: white;
+                }
+
+                #popularIngredientsCard{
+                    max-height: 100%;
+                    padding: 0;
+                }
+
+        @media screen and (min-width: 1000px){
+            .mobileMenuSelector{
+                top: 20px;
+                left: 40px;
+            }
+
+            /* HOME */
+            #homeStrand{
+                flex-direction: column;
+                justify-content: flex-end;
+            }
+
+                #graphCard{
+                    display: flex;
+                }
+
+                .flexRow{
+                    max-height: 40vh;
+                }
+
+                .flexRow:nth-child(2){
+                    flex-grow: 2;
+                }
+
+                .flexRow:nth-child(3){
+                    flex-grow: 1;
+                }
         }
     }
 }

+ 0 - 5
views/dashboardPage/js/dashboard.js

@@ -321,11 +321,6 @@ controller = {
     }
 }
 
-if(window.screen.availWidth > 1000 && window.screen.availWidth <= 1400){
-    controller.changeMenu();
-    document.getElementById("menuShifter2").style.display = "none";
-}
-
 //Add click listeners for menu buttons
 document.getElementById("homeBtn").onclick = ()=>{controller.openStrand("home")};
 document.getElementById("ingredientsBtn").onclick = ()=>{controller.openStrand("ingredients")};