ホーム エクスプローラ ヘルプ
登録 サインイン
lee
/
subline
1
0
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

Create working menu

Lee Morgan 6 年 前
親
3225f10e1e
コミット
9f693cc9e5
3 ファイル変更、70 行追加、15 行削除
分割表示 差分情報を表示
  1. 12 0
      views/dashboardPage/controller.js
  2. 4 2
      views/dashboardPage/dashboard.ejs
  3. 54 13
      views/dashboardPage/sidebars/sidebars.css

+ 12 - 0
views/dashboardPage/controller.js
ファイルの表示 

@@ -80,4 +80,16 @@ let changeMenu = ()=>{
 
     }
 
 }
 
 
+let openMenu = ()=>{
 
+    document.getElementById("menu").style.display = "flex";
 
+    document.querySelector(".contentBlock").style.display = "none";
 
+    document.getElementById("mobileMenuSelector").onclick = ()=>{closeMenu()};
 
+}
 
+
 
+let closeMenu = ()=>{
 
+    document.getElementById("menu").style.display = "none";
 
+    document.querySelector(".contentBlock").style.display = "flex";
 
+    document.getElementById("mobileMenuSelector").onclick = ()=>{openMenu()};
 
+}
 
+
 
 homeStrandObj.display();

+ 4 - 2
views/dashboardPage/dashboard.ejs
ファイルの表示 

@@ -11,14 +11,14 @@
 
         <link href="https://fonts.googleapis.com/css?family=Saira&display=swap" rel="stylesheet"> 
     </head>
 
     <body>
 
-        <div class="menu">
 
+        <div id="menu" class="menu">
 
             <div id="max" class="menuHead">
 
                 <a href="/">
 
                     <img class="menuLogo" src="/shared/images/logo.png" alt="The Subline">
 
                     <p>THE SUBLINE</p>
 
                 </a>
 
         
-                <button onclick="changeMenu()">&#8801;</button>
 
+                <button class="menuShifter" onclick="changeMenu()">&#8801;</button>
 
             </div>
 
         
             <div id="min" class="menuHead menuHeadMin">
 
@@ -82,6 +82,8 @@
 
             </a>
 
         </div>
 
 
+        <div id="mobileMenuSelector" class="mobileMenuSelector" onclick="openMenu()">&#8801;</div>
 
+
 
         <div class="contentBlock">
 
             <% include ../shared/banner %>

+ 54 - 13
views/dashboardPage/sidebars/sidebars.css
ファイルの表示 

@@ -211,6 +211,18 @@
 
     margin: 25px;
 
 }
 
 
+.mobileMenuSelector{
 
+    display: none;
 
+    position: fixed;
 
+    left: 13px;
 
+    top: -2px;
 
+    font-size: 40px;
 
+}
 
+
 
+    .mobileMenuSelector:active{
 
+        color: rgb(255, 99, 107);
 
+    }
 
+
 
 /* 
 Add Ingredients 
 */
 
@@ -615,20 +627,57 @@ New Transaction
 
         overflow-y: auto;
 
     }
 
 
-@media (max-width: 600px){
 
+@media (max-width: 1000px){
 
     body{
 
         flex-direction: column;
 
+        background: rgb(0, 27, 45);
 
+        color: white;
 
     }
 
 
-    .contentBlock{
 
-        padding: 0;
 
-    }
 
+        .contentBlock{
 
+            padding: 0;
 
+        }
 
+
 
+            .menu{
 
+                display: none;
 
+                width: 100vw;
 
+                height: 100vh;
 
+            }
 
+
 
+                .menuHead{
 
+                    padding: 0;
 
+                    margin-bottom: 15px;
 
+                }
 
+
 
+                    .menuHead a{
 
+                        display: flex;
 
+                        justify-content: right;
 
+                        width: 70%;
 
+                    }
 
+
 
+                .menuShifter{
 
+                    display: none;
 
+                }
 
+
 
+            .mobileMenuSelector{
 
+                display: block;
 
+            }
 
+
 
+            .strandTitle{
 
+                margin-top: 35px;
 
+            }
 
+
 
+            .sidebar{
 
+                width: 100vw;
 
+            }
 
 
     /*
 
     Home
 
     */
 
     .card{
 
-        margin: 5px;
 
+        margin: 5px 10px;
 
+        background: white;
 
+        color: black;
 
     }
 
 
     #inventoryCheckCard{
 
@@ -643,12 +692,4 @@ New Transaction
 
         flex-direction: column;
 
         margin: 0;
 
     }
 
-
 
-    .menu{
 
-        display: none;
 
-    }
 
-
 
-    .sidebar{
 
-        width: 100vw;
 
-    }
 
 }