Startseite Erkunden Hilfe
Registrieren Anmelden
lee
/
subline
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

Add very basic side menu and controller

Lee Morgan vor 6 Jahren
Ursprung
12086dbca7
Commit
807426d9aa
5 geänderte Dateien mit 195 neuen und 69 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 78 0
      views/dashboardPage/dashboard.css
  2. 37 2
      views/dashboardPage/dashboard.ejs
  3. 5 0
      views/dashboardPage/home.js
  4. 5 67
      views/shared/controller.js
  5. 70 0
      views/shared/oldController.js

+ 78 - 0
views/dashboardPage/dashboard.css
Datei anzeigen 

@@ -0,0 +1,78 @@
 
+body{
 
+    display: flex;
 
+    flex-direction: row;
 
+    font-family: 'Saira', sans-serif;
 
+}
 
+
 
+.menu{
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    max-width: 18vw;
 
+    background: rgb(0, 27, 45);
 
+    height: 100vh;
 
+}
 
+
 
+    .menuHead{
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+        padding: 0 20px;
 
+        margin-top: 0;
 
+        font-size: 25px;
 
+        font-weight: bold;
 
+        color: white;
 
+        margin-bottom: 100px;
 
+        text-decoration: none;
 
+    }
 
+
 
+    .menu button{
 
+        background: none;
 
+        border-style: none;
 
+        color: white;
 
+        font-size: 20px;
 
+        margin: 15px 0;
 
+        padding: 0 0 0 50px;
 
+        width: 100%;
 
+        height: 75px;
 
+        cursor: pointer;
 
+        text-align: left;
 
+    }
 
+
 
+    .menu button:hover{
 
+        background: rgb(201, 201, 201);
 
+        color: black;
 
+    }
 
+
 
+        .menuHead img{
 
+            max-width: 40%;
 
+            max-height: 40%;
 
+        }
 
+
 
+    .logout{
 
+        position: absolute;
 
+        bottom: 25px;
 
+        color: white;
 
+        text-decoration: none;
 
+        font-size: 20px;
 
+    }
 
+
 
+/* Home Strand */
 
+#homeStrand{
 
+    display: flex;
 
+}
 
+
 
+/* Ingredients Strand */
 
+#ingredientsStrand{
 
+    display: none;
 
+}
 
+
 
+/* Recipe Book Strand */
 
+#recipeBookStrand{
 
+    display: none;
 
+}
 
+
 
+/* Orders Strand */
 
+#ordersStrand{
 
+    display: none;
 
+}

+ 37 - 2
views/dashboardPage/dashboard.ejs
Datei anzeigen 

@@ -4,12 +4,47 @@
 
         <meta charset="UTF-8">
 
         <title>The Subline</title>
 
         <link rel="icon" type="img/png" href="/shared/images/logo.png">
 
-        <link rel="stylesheet" href="/dashboardPage/dashboard.css">
 
         <link rel="stylesheet" href="/shared/shared.css">
 
+        <link rel="stylesheet" href="/dashboardPage/dashboard.css">
 
     </head>
 
     <body>
 
-        <h1>Dashboard</h1>
 
+        <div class="menu">
 
+            <a class="menuHead" href="/">
 
+                <img src="/shared/images/logo.png">
 
+                <p>The Subline</p>
 
+            </a>
 
+
 
+            <button onclick="changeStrand('homeStrand')">Home</button>
 
+
 
+            <button onclick="changeStrand('ingredientsStrand')">Ingredients</button>
 
+
 
+            <button onclick="changeStrand('recipeBookStrand')">Recipe Book</button>
 
+
 
+            <button onclick="changeStrand('ordersStrand')">Orders</button>
 
+
 
+            <a class="logout" href="/logout">Logout</a>
 
+        </div>
 
+
 
+        <div class="content">
 
+            <div id="homeStrand" class="strand">
 
+                <h1>Home strand</h1>
 
+            </div>
 
+
 
+            <div id="ingredientsStrand" class="strand">
 
+                <h1>Ingredient strand</h1>
 
+            </div>
 
+
 
+            <div id="recipeBookStrand" class="strand">
 
+                <h1>Recipe book strand</h1>
 
+            </div>
 
+
 
+            <div id="ordersStrand" class="strand">
 
+                <h1>Orders Strand</h1>
 
+            </div>
 
+        </div>
 
 
         <script>let merchant = <%- JSON.stringify(merchant) %>;</script>
 
+        <script src="../shared/controller.js"></script>
 
+        <script src="/dashboardPage/home.js"></script>
 
     </body>
 
 </html>

+ 5 - 0
views/dashboardPage/home.js
Datei anzeigen 

@@ -0,0 +1,5 @@
 
+window.homeStrandObj = {
 
+    display: function(){
 
+        console.log("Home strand");
 
+    }
 
+}

+ 5 - 67
views/shared/controller.js
Datei anzeigen 

@@ -1,70 +1,8 @@
 
-class StrandSelector extends HTMLElement{
 
-    constructor(){
 
-        super();
 
+let changeStrand = (name)=>{
 
+    for(let strand of document.querySelectorAll(".strand")){
 
+        strand.style.display = "none";
 
     }
 
 
-    connectedCallback(){
 
-        setTimeout(()=>{
 
-            let firstStrand = document.querySelector(".strand");
 
-            this.setAttribute("strand", firstStrand.id.slice(0, firstStrand.id.indexOf("Strand")));
 
-            window[`${firstStrand.id.slice(0, firstStrand.id.indexOf("Strand"))}Obj`].display();
 
-
 
-            let strands = document.querySelectorAll(".strand");
 
-            for(let strand of strands){
 
-                let selector = document.createElement("button");
 
-                selector.strandName = strand.id;
 
-                selector.innerText = strand.id.slice(0, strand.id.indexOf("Strand")).toUpperCase();
 
-                this.appendChild(selector);
 
-            }
 
-
 
-            for(let button of this.querySelectorAll("button")){
 
-                button.onclick = ()=>{
 
-                    this.setAttribute("strand", button.strandName.slice(0, button.strandName.indexOf("Strand")));
 
-
 
-                    window[`${button.strandName.slice(0, button.strandName.indexOf("Strand"))}Obj`].display();
 
-                }
 
-            }
 
-
 
-            strands[0].style.display = "flex";
 
-        })
 
-    }
 
-
 
-    static get observedAttributes(){
 
-        return ["strand"];
 
-    }
 
-
 
-    attributeChangedCallback(){
 
-        setTimeout(()=>{
 
-            let buttons = this.querySelectorAll("button");
 
-
 
-            for(let button of buttons){
 
-                if(button.innerText.toLowerCase() === this.getAttribute("strand").toLowerCase()){
 
-                    button.style.borderBottom = "3px solid black";
 
-                    button.style.cursor = "pointer";
 
-                }else{
 
-                    button.style.borderBottom = "none";
 
-                    button.style.cursor = "pointer";
 
-                }
 
-            }
 
-        })
 
-    }
 
-}
 
-
 
-customElements.define("strand-selector", StrandSelector);
 
-
 
-let actions = document.querySelectorAll(".action");
 
-for(let action of actions){
 
-    action.display = ()=>{window[`${action.id.slice(0, action.id.indexOf("Action"))}Obj`].display();};
 
-}
 
-
 
-let strands = document.querySelectorAll(".strand");
 
-for(let strand of strands){
 
-    strand.display = ()=>{window[`${strand.id.slice(0, strand.id.indexOf("Strand"))}Obj`].display();};
 
-}
 
-
 
-window.clearScreen = ()=>{
 
-    let subpages = document.querySelectorAll(".strand, .action");
 
-    for(let subpage of subpages){
 
-        subpage.style.display = "none";
 
-    }
 
+    document.querySelector(`#${name}`).style.display = "flex";
 
+    window[`${name}Obj`].display();
 
 }

+ 70 - 0
views/shared/oldController.js
Datei anzeigen 

@@ -0,0 +1,70 @@
 
+class StrandSelector extends HTMLElement{
 
+    constructor(){
 
+        super();
 
+    }
 
+
 
+    connectedCallback(){
 
+        setTimeout(()=>{
 
+            let firstStrand = document.querySelector(".strand");
 
+            this.setAttribute("strand", firstStrand.id.slice(0, firstStrand.id.indexOf("Strand")));
 
+            window[`${firstStrand.id.slice(0, firstStrand.id.indexOf("Strand"))}Obj`].display();
 
+
 
+            let strands = document.querySelectorAll(".strand");
 
+            for(let strand of strands){
 
+                let selector = document.createElement("button");
 
+                selector.strandName = strand.id;
 
+                selector.innerText = strand.id.slice(0, strand.id.indexOf("Strand")).toUpperCase();
 
+                this.appendChild(selector);
 
+            }
 
+
 
+            for(let button of this.querySelectorAll("button")){
 
+                button.onclick = ()=>{
 
+                    this.setAttribute("strand", button.strandName.slice(0, button.strandName.indexOf("Strand")));
 
+
 
+                    window[`${button.strandName.slice(0, button.strandName.indexOf("Strand"))}Obj`].display();
 
+                }
 
+            }
 
+
 
+            strands[0].style.display = "flex";
 
+        })
 
+    }
 
+
 
+    static get observedAttributes(){
 
+        return ["strand"];
 
+    }
 
+
 
+    attributeChangedCallback(){
 
+        setTimeout(()=>{
 
+            let buttons = this.querySelectorAll("button");
 
+
 
+            for(let button of buttons){
 
+                if(button.innerText.toLowerCase() === this.getAttribute("strand").toLowerCase()){
 
+                    button.style.borderBottom = "3px solid black";
 
+                    button.style.cursor = "pointer";
 
+                }else{
 
+                    button.style.borderBottom = "none";
 
+                    button.style.cursor = "pointer";
 
+                }
 
+            }
 
+        })
 
+    }
 
+}
 
+
 
+customElements.define("strand-selector", StrandSelector);
 
+
 
+let actions = document.querySelectorAll(".action");
 
+for(let action of actions){
 
+    action.display = ()=>{window[`${action.id.slice(0, action.id.indexOf("Action"))}Obj`].display();};
 
+}
 
+
 
+let strands = document.querySelectorAll(".strand");
 
+for(let strand of strands){
 
+    strand.display = ()=>{window[`${strand.id.slice(0, strand.id.indexOf("Strand"))}Obj`].display();};
 
+}
 
+
 
+window.clearScreen = ()=>{
 
+    let subpages = document.querySelectorAll(".strand, .action");
 
+    for(let subpage of subpages){
 
+        subpage.style.display = "none";
 
+    }
 
+}