Преглед изворни кода

Update menu responsiveness for landscape mode.

Lee Morgan пре 5 година
родитељ
комит
003f1cae08

+ 1 - 1
views/dashboardPage/bundle.js

@@ -1339,7 +1339,7 @@ controller = {
         activeButton.classList = "menuButton active";
         activeButton.disabled = true;
 
-        if(screen.width < 1400 && screen.height > screen.width){
+        if(screen.height > screen.width || screen.width < 1200){
             this.closeMenu();
         }
     },

+ 43 - 0
views/dashboardPage/dashboard.css

@@ -737,6 +737,10 @@ Modal
             justify-content: center;
         }
 
+        #newOrderBtn{
+            display: none;
+        }
+
         #orderList{
             width: 90%;
         }
@@ -745,6 +749,15 @@ Modal
             display: none;
         }
 
+        /* TRANSACTIONS */
+        #transactionsStrand .strandHead{
+            justify-content: center;
+        }
+
+        .transactionsList{
+            width: 90%;
+        }
+
         @media screen and (min-width: 601px){
             .strandTitle{
                 font-size: 40px;
@@ -769,6 +782,36 @@ Modal
             #ordersStrand .strandHead{
                 margin-top: 25px;
             }
+
+            /* TRANSACTIONS */
+            #transactionsStrand .strandHead{
+                margin-top: 25px;
+            }
+        }
+    }
+}
+
+@media screen and (orientation: landscape){
+    @media screen and (max-width: 1400px){
+        body{
+            background: rgb(0, 27, 45);
+        }
+
+        .button{
+            padding: 3px 0;
+        }
+
+        .mobileMenuSelector{
+            color: rgb(240, 252, 255);
+            z-index: 10;
+        }
+
+        .strandTitle{
+            color: white;
+        }
+
+        @media screen and (min-width: 601px){
+
         }
     }
 }

+ 1 - 1
views/dashboardPage/dashboard.ejs

@@ -376,7 +376,7 @@
                     <div class="buttonBox">
                         <button id="orderFilterBtn" class="button">FILTER</button>
 
-                        <button id="newOrderBtn" class="button mobileHide">NEW</button>
+                        <button id="newOrderBtn" class="button">NEW</button>
 
                         <button id="orderCalcBtn" class="button">CALCULATOR</button>
                     </div>

+ 1 - 1
views/dashboardPage/js/dashboard.js

@@ -92,7 +92,7 @@ controller = {
         activeButton.classList = "menuButton active";
         activeButton.disabled = true;
 
-        if(screen.width < 1400 && screen.height > screen.width){
+        if(screen.height > screen.width || screen.width < 1200){
             this.closeMenu();
         }
     },

+ 47 - 0
views/dashboardPage/sidebars.css

@@ -720,4 +720,51 @@ NEW TRANSACTION
             font-size: 40px;
         }
     }
+}
+
+@media screen and (orientation: landscape){
+    @media screen and (max-width: 1200px){
+        /* MENU */
+        #menu{
+            display: none;
+            width: 100vw;
+            height: 100vh;
+            padding: 0;
+            flex-wrap: wrap;
+            flex-direction: row;
+            justify-content: space-around;
+        }
+
+            .menuShifter{
+                display: none;
+            }
+
+            .menuHead{
+                justify-content: center;
+                padding: 0;
+                margin-bottom: 0;
+                height: 50px;
+            }
+
+                .menuHead a{
+                    width: initial;
+                }
+
+                    .menuLogo{
+                        max-height: 50px;
+                        max-width: 50px;
+                    }
+
+                .menuButton{
+                    width: 40%;
+                    justify-content: center;
+                    background: rgb(201, 201, 201);
+                    color: black;
+                    margin: 15px;
+                    padding-left: 0;
+                    border-radius: 5px;
+                    box-shadow: 0 0 5px white;
+                    height: 35px;
+                }
+    }
 }