Add generate shopping list modal

Microverse-Fullstack-Program · Sep 7, 2023 · d17ad83 · d17ad83
1 parent 4c4231c
commit d17ad83
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/app/assets/stylesheets/recipe.scss b/app/assets/stylesheets/recipe.scss
@@ -1,9 +1,7 @@
 .switch {
   position: relative;
-  display: flex; /* Use flexbox */
+  display: flex;
   justify-content: space-around;
-  // align-items: center;
-  // display: inline-block;
   width: 50px;
   height: 24px;
 }
@@ -25,7 +23,7 @@
   -webkit-transition: 0.4s;
   transition: 0.4s;
   border-radius: 34px;
-  z-index: 1; /* Ensure the button is above other elements */
+  z-index: 1;
 }
 
 .slider::before {
@@ -39,14 +37,13 @@
   -webkit-transition: 0.4s;
   transition: 0.4s;
   border-radius: 50%;
-  z-index: 2; /* Ensure the button is above other elements */
+  z-index: 2;
 }
 
-/* Adjust the label position */
 .public {
   position: relative;
-  z-index: 3; /* Ensure the label is above other elements */
-  margin-right: 10rem; /* Add spacing between label and button */
+  z-index: 3;
+  margin-right: 10rem;
 }
 
 input:checked + .slider {
@@ -130,3 +127,16 @@ a {
   display: flex;
   justify-content: center;
 }
+
+.modal-title {
+  display: block;
+}
+
+.modal-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.modal-wrapper {
+  padding-top: 15rem;
+}
diff --git a/app/views/recipes/show.html.erb b/app/views/recipes/show.html.erb
@@ -22,7 +22,7 @@
             Generate shopping list
           </button>
         </div>
-
+            <%= render partial: 'shared/modal_structure' %>
         <div class="add-btn">
           <%= link_to 'Add ingredient', new_recipe_recipe_food_path(recipe_id: @recipe.id), class: 'btn btn-primary' %>
         </div>

diff --git a/app/views/shared/_modal_structure.erb b/app/views/shared/_modal_structure.erb
@@ -0,0 +1,24 @@
+
+<div class="modal fade modal-wrapper" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header modal-title">
+        <h5 class="modal-title text-center" id="exampleModalLabel">Generate Shopping List</h5>
+      </div>
+      <h5 class="modal-title ms-4">Choose an inventory to use</h5>
+      <div class="modal-body modal-container">
+        <div class="form-group">
+        <select class="form-select" id="shopping-list" data-style="btn-primary">
+            <option disabled selected>... Select inventory ... </option>
+            <option value="item1">Inventory 1</option>
+            <option value="item2">Inventory 2</option>
+            <option value="item3">Inventory 3</option>
+        </select>
+        </div>
+          <div class="modal-footer">
+        <button type="button" class="btn btn-primary" id="generate-button">Generate</button>
+      </div>
+      </div>
+    </div>
+  </div>
+</div>