From 31b5e855053d43a4b79c877f7bcdc2576a59019a Mon Sep 17 00:00:00 2001
From: Adam Carpenter <atc@53hor.net>
Date: Fri, 1 May 2020 15:38:28 -0400
Subject: added basic filter menu, not functional yet

---
 iridescence/src/components/InventoryFilter.vue | 49 ++++++++++++++++++++++----
 iridescence/src/components/InventorySearch.vue |  2 +-
 iridescence/src/views/Home.vue                 | 16 +++++----
 3 files changed, 52 insertions(+), 15 deletions(-)

(limited to 'iridescence/src')

diff --git a/iridescence/src/components/InventoryFilter.vue b/iridescence/src/components/InventoryFilter.vue
index 58547eb..349b0f5 100644
--- a/iridescence/src/components/InventoryFilter.vue
+++ b/iridescence/src/components/InventoryFilter.vue
@@ -1,12 +1,47 @@
 <template>
   <div id="inventoryFilter">
-    <h1 class="subtitle">
-      Filter Products
-    </h1>
-    <label class="checkbox">
-      <input type="checkbox" />
-      Remember me
-    </label>
+    <aside class="menu">
+      <p class="menu-label">
+        Availability
+      </p>
+      <ul class="menu-list">
+        <li>
+          <label class="radio">
+            <input type="radio" name="availability" />
+            In stock
+          </label>
+        </li>
+        <li>
+          <label class="radio">
+            <input type="radio" name="availability" />
+            Made to order
+          </label>
+        </li>
+      </ul>
+      <p class="menu-label">
+        Category
+      </p>
+      <ul class="menu-list">
+        <li>
+          <label class="radio">
+            <input type="radio" name="category" />
+            Garden
+          </label>
+        </li>
+        <li>
+          <label class="radio">
+            <input type="radio" name="category" />
+            Beach
+          </label>
+        </li>
+        <li>
+          <label class="radio">
+            <input type="radio" name="category" />
+            Pets
+          </label>
+        </li>
+      </ul>
+    </aside>
   </div>
 </template>
 
diff --git a/iridescence/src/components/InventorySearch.vue b/iridescence/src/components/InventorySearch.vue
index 320a774..0e5b88f 100644
--- a/iridescence/src/components/InventorySearch.vue
+++ b/iridescence/src/components/InventorySearch.vue
@@ -14,7 +14,7 @@
       <div class="control">
         <div class="select is-primary is-medium">
           <select>
-            <option></option>
+            <option>Sort by Age (Oldest to Newest)</option>
             <option>Sort by Name</option>
             <option>Sort by Price (Low to High)</option>
             <option>Sort by Price (High to Low)</option>
diff --git a/iridescence/src/views/Home.vue b/iridescence/src/views/Home.vue
index 9272d90..b01b78d 100644
--- a/iridescence/src/views/Home.vue
+++ b/iridescence/src/views/Home.vue
@@ -3,7 +3,7 @@
 	  allow users to sort, filter, and search for items and add them to their
 	  cart. -->
 
-  <div id="home" class="container">
+  <div id="home">
     <div class="columns">
       <div class="column is-narrow">
         <section class="section">
@@ -14,12 +14,14 @@
       </div>
 
       <div class="column">
-        <section class="section">
-          <InventorySearch></InventorySearch>
-        </section>
-        <section class="section">
-          <InventoryList></InventoryList>
-        </section>
+        <div class="container">
+          <section class="section">
+            <InventorySearch></InventorySearch>
+          </section>
+          <section class="section">
+            <InventoryList></InventoryList>
+          </section>
+        </div>
       </div>
     </div>
   </div>
-- 
cgit v1.2.3