Acasă Explorează Ajutor
Înregistrare Autentificare
lee
/
subline
1
0
Bifurcare 0
Fisiere Probleme 0 Trageți solicitările 0 Wiki
Răsfoiți Sursa

Create fully functional sidebar

Lee Morgan 6 ani în urmă
părinte
4f916414ee
comite
a8d73a6cb4
5 a modificat fișierele cu 81 adăugiri și 4 ștergeri
Vizualizare divizată Arată Statisticile Diff
  1. 5 0
      views/dashboardPage/components/addIngredient.ejs
  2. 32 0
      views/dashboardPage/components/components.css
  3. 21 1
      views/dashboardPage/dashboard.css
  4. 11 1
      views/dashboardPage/dashboard.ejs
  5. 12 2
      views/dashboardPage/ingredients.js

+ 5 - 0
views/dashboardPage/components/addIngredient.ejs
Vizualizați fișierul 

@@ -0,0 +1,5 @@
 
+<div id="addIngredient" class="sidebarHide">
 
+    <h1>Things and stuff</h1>
 
+
 
+    <input type="text">
 
+</div>

+ 32 - 0
views/dashboardPage/components/components.css
Vizualizați fișierul 

@@ -0,0 +1,32 @@
 
+.sidebar{
 
+    display: flex;
 
+    width: 18vw;
 
+    height: 100vh;
 
+    box-sizing: border-box;
 
+    padding: 25px;
 
+    transition: width 0.2s;
 
+    overflow: hidden;
 
+}
 
+
 
+.sidebarHide{
 
+    width: 0;
 
+    transition: width 0.2s;
 
+    margin: 0;
 
+    padding: 0;
 
+    overflow: hidden;
 
+}
 
+
 
+    .sidebarHide *{
 
+        width: 0;
 
+        transition: width 0.2s;
 
+    }
 
+
 
+    .sidebarHide input{
 
+        display: none;
 
+    }
 
+
 
+#addIngredient{
 
+    flex-direction: column;
 
+    background: rgb(0, 27, 45);
 
+    color: white;
 
+}

+ 21 - 1
views/dashboardPage/dashboard.css
Vizualizați fișierul 

@@ -1,5 +1,6 @@
 
 html{
 
     height: 100%;
 
+    max-width: 100%;
 
 }
 
 
 body{
 
@@ -7,11 +8,13 @@ body{
 
     flex-direction: row;
 
     font-family: 'Saira', sans-serif;
 
     height: 100%;
 
+    max-width: 100%;
 
 }
 
 
 .contentBlock{
 
     width: 100%;
 
     height: 100vh;
 
+    flex: 1;
 
     box-sizing: border-box;
 
     padding: 50px;
 
 }
 
@@ -22,7 +25,7 @@ body{
 
     width: 100%;
 
 }
 
 
-.strand > h1{
 
+.strand > *:first-of-type{
 
     text-align: left;
 
     margin: 15px;
 
 }
 
@@ -155,6 +158,7 @@ body{
 
 /* Ingredients Strand */
 
 #ingredientsStrand{
 
     display: none;
 
+    height: 100vh;
 
     box-sizing: border-box;
 
     padding-right: 100px;
 
 }
 
@@ -163,6 +167,22 @@ body{
 
     margin-bottom: 100px;
 
 }
 
 
+#ingredientHead{
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    margin-bottom: 100px;
 
+}
 
+
 
+#ingredientHead button{
 
+    display: flex;
 
+    align-items: center;
 
+}
 
+
 
+#ingredientHead svg{
 
+    margin-right: 5px;
 
+}
 
+
 
 .categoryDiv > div:first-of-type{
 
     display: flex;
 
     margin-left: 15px;

+ 11 - 1
views/dashboardPage/dashboard.ejs
Vizualizați fișierul 

@@ -6,6 +6,7 @@
 
         <link rel="icon" type="img/png" href="/shared/images/logo.png">
 
         <link rel="stylesheet" href="/shared/shared.css">
 
         <link rel="stylesheet" href="/dashboardPage/dashboard.css">
 
+        <link rel="stylesheet" href="/dashboardPage/components/components.css">
 
         <link rel="stylesheet" href="/shared/menu.css">
 
     </head>
 
     <body>
 
@@ -55,7 +56,14 @@
 
             </div>
 
 
             <div id="ingredientsStrand" class="strand">
 
-                <h1>Ingredient Inventory</h1>
 
+                <div id="ingredientHead">
 
+                    <h1>Ingredient Inventory</h1>
 
+
 
+                    <button class="button" onclick="ingredientsStrandObj.toggleAddIngredient()">
 
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
 
+                        add
 
+                    </button>
 
+                </div>
 
             </div>
 
 
             <div id="recipeBookStrand" class="strand">
 
@@ -67,6 +75,8 @@
 
             </div>
 
         </div>
 
 
+        <% include ./components/addIngredient %>
 
+
 
         <script>let merchant = <%- JSON.stringify(merchant) %>;</script>
 
         <script>let transactions = <%- JSON.stringify(transactions) %>;</script>
 
         <script src="../shared/graphs.js"></script>

+ 12 - 2
views/dashboardPage/ingredients.js
Vizualizați fișierul 

@@ -5,11 +5,11 @@ window.ingredientsStrandObj = {
 
         if(!this.isPopulated){
 
             let categories = this.categorizeIngredients();
 
 
-            let ingredientsStrand = document.querySelector("#ingredientsStrand");
 
+            let ingredientStrand = document.querySelector("#ingredientsStrand");
 
             for(let category of categories){
 
                 let categoryDiv = document.createElement("div");
 
                 categoryDiv.classList = "categoryDiv"
 
-                ingredientsStrand.appendChild(categoryDiv);
 
+                ingredientStrand.appendChild(categoryDiv);
 
 
                 let headerDiv = document.createElement("div");
 
                 categoryDiv.appendChild(headerDiv);
 
@@ -96,5 +96,15 @@ window.ingredientsStrandObj = {
 
             button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>';
 
             div.style.display = "none";
 
         }
 
+    },
 
+
 
+    toggleAddIngredient: function(){
 
+        let sidebar = document.querySelector("#addIngredient");
 
+
 
+        if(sidebar.classList.value === "sidebarHide"){
 
+            sidebar.classList = "sidebar";
 
+        }else{
 
+            sidebar.classList = "sidebarHide";
 
+        }
 
     }
 
 }