Added buttons for jumping to categories

svsticky · Nov 8, 2021 · a86c23c · a86c23c
1 parent 65ab4fb
commit a86c23c
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 33 deletions.
diff --git a/src/views/base/base.css b/src/views/base/base.css
@@ -40,13 +40,7 @@ body {
 /* Default components */
 
 main {
-	height: calc(100% - 120px);
+	height: calc(100% - 100px);
 	position: relative;
 	overflow-y: auto;
 }
-
-footer {
-	width: 100%;
-	text-align: center;
-	height: 20px;
-}
diff --git a/src/views/base/base.html b/src/views/base/base.html
@@ -37,9 +37,6 @@
   <main>
     <article id="content"></article>
   </main>
-  <!-- <footer>
-    Study Association Sticky - 2020 - Magnificent Sloth
-  </footer> -->
   <script>
     require('../../static/js/menu');
   </script>

diff --git a/src/views/products/products.css b/src/views/products/products.css
@@ -1,5 +1,29 @@
+#categoryList {
+  position: fixed;
+  width: calc(100% - 10px);
+  padding: 20px;
+  z-index: 1;
+  background-color: #f8f8f4;
+}
+
+.category_button {
+  font-size: 20px !important;
+}
+
 #productList {
-  width: calc(100% - 200px);
+  width: calc(100% - 240px);
+  padding-top: 70px;
+  margin: 0 20px;
+}
+
+.category_headers {
+  display: hidden;
+}
+
+.category_headers:target {
+  display: block;
+  position: relative;
+  top: -70px;
 }
 
 #purchase {
@@ -29,9 +53,5 @@
   position: fixed; 
   width: 200px; 
   right: 20px; 
-  top: 140px;
+  top: 209px;
 }
-
-.products {
-  margin: 20px;
-}
diff --git a/src/views/products/products.html b/src/views/products/products.html
@@ -1,28 +1,56 @@
 <article class="products">
+  <section id="categoryList">
+    <section class="five ui buttons">
+      <a class="ui red basic button category_button" href="#beverage_header">
+        Beverages
+      </a>
+      <a class="ui orange basic button category_button" href="#savory_header">
+        Savory
+      </a>
+      <a class="ui green basic button category_button" href="#chocolate_header">
+        Sweet
+      </a>
+      <a class="ui blue basic button category_button" href="#additional_header">
+        Additional
+      </a>
+      <a class="ui purple basic button category_button" href="#liquor_header">
+        Alcohol
+      </a>
+    </section>
+  </section>
   <section id="productList">
     <!-- <h1 id="recent" class="header">Recent</h1>
     <section id="recentList" class="ui five column grid products"></section> -->
 
-    <h1>Beverages</h1>
-    <section id="beverage" class="ui five column grid products">
-
-    </section>
-    <h1>Savory</h1>
-    <section id="savory" class="ui five column grid products">
-
-    </section>
-    <h1>Sweet</h1>
-    <section id="chocolate" class="ui five column grid products">
+    <a class="category_headers" id="beverage_header"></a>
+    <h1 class="ui horizontal divider header">
+      Beverages
+    </h1>
+    <section id="beverage" class="ui five column grid products"></section>
 
-    </section>
-    <h1>Additional</h1>
-    <section id="additional" class="ui five column grid products">
+    <a class="category_headers" id="savory_header"></a>
+    <h1 class="ui horizontal divider header">
+      Savory
+    </h1>
+    <section id="savory" class="ui five column grid products"></section>
 
-    </section>
-    <h1 id="alcoholText">Alcohol</h1>
-    <section id="liquor" class="ui five column grid products">
+    <a class="category_headers" id="chocolate_header"></a>
+    <h1 class="ui horizontal divider header">
+      Sweet
+    </h1>
+    <section id="chocolate" class="ui five column grid products"></section>
 
-    </section>
+    <a class="category_headers" id="additional_header"></a>
+    <h1 class="ui horizontal divider header">
+      Additional
+    </h1>
+    <section id="additional" class="ui five column grid products"></section>
+
+    <a class="category_headers" id="liquor_header"></a>
+    <h1 class="ui horizontal divider header" id="alcoholText">
+      Alcohol
+    </h1>
+    <section id="liquor" class="ui five column grid products"></section>
   </section>
   <aside class="cart">
     <article class="ui one column">