Fixed category buttons, added single source of truth for board color

svsticky · Dec 12, 2023 · bab7dd8 · bab7dd8
1 parent ee69190
commit bab7dd8
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 15 deletions.
diff --git a/src/static/base.css b/src/static/base.css
@@ -0,0 +1,3 @@
+:root {
+	--board-color: #61518f;
+}
diff --git a/src/static/js/products.js b/src/static/js/products.js
@@ -37,22 +37,25 @@ ipcRenderer.on('getProducts', (event, arg) => {
         // Create category HTML
         let category = categories[i];
         let parser = new DOMParser();
+        // A body gets inserted which does something weird with the buttons
         document.getElementById("categoryList").firstElementChild.append(parser.parseFromString(
-          `<a class="ui red basic button category_button" href="#${category.name.toLowerCase()}_header">${category.name}</a>`
-        , 'text/html').body);
+          `<a class="ui basic button category_button" href="#${category.name.toLowerCase()}_header">${category.name}</a>`
+        , 'text/html').body.firstChild);
         document.getElementById("productList").append(parser.parseFromString(
           `
-          <a class="category_headers" id="${category.name.toLowerCase()}_header"></a>
-          <h1 class="ui horizontal divider header">
-            ${category.name}
-          </h1>
-          <section id="${category.name.toLowerCase()}" class="ui five column grid products"></section>
+          <article>
+            <a class="category_headers" id="${category.name.toLowerCase()}_header"></a>
+            <h1 class="ui horizontal divider header">
+              ${category.name}
+            </h1>
+            <section id="${category.name.toLowerCase()}" class="ui five column grid products"></section>
+          </article>
           `
-        , 'text/html').body);
-  
-        let products = categories[i].products.sort((a, b) => (a.name > b.name) ? 1 : -1)
+        , 'text/html').body.firstChild);
+
+        let products = category.products.sort((a, b) => (a.name > b.name) ? 1 : -1)
         for (let j = 0; j < products.length; j++) {
-          renderProduct(products[j], categories[i]);
+          renderProduct(products[j], category);
         }
       }
     }

diff --git a/src/views/base/base.css b/src/views/base/base.css
@@ -8,7 +8,7 @@ body {
 .menu {
 	height: 100px;
 	margin-bottom: 0 !important;
-	background-color: #61518f !important;
+	background-color: var(--board-color) !important;
 }
 
 .menu > span {
@@ -38,7 +38,6 @@ body {
 }
 
 /* Default components */
-
 main {
 	height: calc(100% - 100px);
 	position: relative;

diff --git a/src/views/base/base.html b/src/views/base/base.html
@@ -10,6 +10,7 @@
 
   <!-- CSS Imports -->
   <link rel="stylesheet" type="text/css" href="../../../src/semantic/dist/semantic.min.css">
+  <link rel="stylesheet" type="text/css" href="../../static/base.css">
   <link rel="stylesheet" type="text/css" href="./base.css">
   <link rel="stylesheet" type="text/css" href="../products/products.css">
 </head>

diff --git a/src/views/idle/idle.css b/src/views/idle/idle.css
@@ -1,10 +1,11 @@
 body {
-  background-color: #61518f;
+  background-color: var(--board-color);
 }
 
 #logo {
   display: block;
 }
+
 #description{
   text-align: center;
   color: #ffffff;

diff --git a/src/views/idle/idle.html b/src/views/idle/idle.html
@@ -10,6 +10,7 @@
 
   <!-- CSS Imports -->
   <link rel="stylesheet" type="text/css" href="../../../src/semantic/dist/semantic.min.css">
+  <link rel="stylesheet" type="text/css" href="../../static/base.css">
   <link rel="stylesheet" type="text/css" href="./idle.css">
 </head>
 <body>

diff --git a/src/views/products/products.css b/src/views/products/products.css
@@ -4,10 +4,17 @@
   padding: 20px;
   z-index: 1;
   background-color: #f8f8f4;
+  text-align: center;
+}
+
+#categoryList > section {
+  width: 100%;
 }
 
 .category_button {
   font-size: 20px !important;
+  color: var(--board-color) !important;
+  box-shadow: 0 0 0 1px var(--board-color) inset !important;
 }
 
 #productList {
@@ -28,6 +35,7 @@
 
 #purchase {
   width: 100%;
+  background-color: var(--board-color);
 }
 
 #cartTitle {

diff --git a/src/views/register/register.css b/src/views/register/register.css
@@ -1,5 +1,5 @@
 body {
-	background-color: #61518f;
+	background-color: var(--board-color);
 }
 #title {
   position: relative;