diff options
| -rw-r--r-- | iridescence/src/components/InventoryFilter.vue | 49 | ||||
| -rw-r--r-- | iridescence/src/components/InventorySearch.vue | 2 | ||||
| -rw-r--r-- | iridescence/src/views/Home.vue | 16 |
3 files changed, 52 insertions, 15 deletions
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> |