From e0ca1346ed2f1e1e79324e3d74e368a06bc324e4 Mon Sep 17 00:00:00 2001
From: BryanV <bveith2000@gmail.com>
Date: Sun, 4 Dec 2022 17:14:51 -0500
Subject: [PATCH 1/2] doesnt work ey

---
 src/components/RecipeFeed.vue | 101 +++++++++++++++++++++++++++++++++-
 1 file changed, 100 insertions(+), 1 deletion(-)

diff --git a/src/components/RecipeFeed.vue b/src/components/RecipeFeed.vue
index 20688a9..f769a4b 100644
--- a/src/components/RecipeFeed.vue
+++ b/src/components/RecipeFeed.vue
@@ -70,7 +70,14 @@
               <h3>{{ name }}</h3>
             </div>
             <div class="row">
-              <ul>
+              <ul class="containter">
+                <div id="left-scroll-button" class="left-scroll btn scroll">
+                  <i
+                    class="fa fa-chevron-left"
+                    @click="scroll_left"
+                    aria-hidden="true"
+                  ></i>
+                </div>
                 <div v-for="(recipe, name) in types" :key="name">
                   <div class="col-md-auto">
                     <button type="button" class="btn recipe-item">
@@ -80,6 +87,13 @@
                     </button>
                   </div>
                 </div>
+                <div
+                  id="right-scroll-button"
+                  class="right-scroll btn scroll"
+                  @click="scroll_right"
+                >
+                  <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                </div>
               </ul>
             </div>
           </div>
@@ -98,6 +112,16 @@ export default {
       return this.$store.state.auth.user;
     },
   },
+  methods: {
+    scroll_right() {
+      let content = document.querySelector(".containter");
+      content.scrollLeft += 500;
+    },
+    scroll_left() {
+      let content = document.querySelector(".containter");
+      content.scrollLeft -= 500;
+    },
+  },
   mounted() {
     if (!this.currentUser) {
       this.$router.push("/login");
@@ -135,6 +159,34 @@ export default {
             recipeName: "Recipe7",
             recipeType: "Category1",
           },
+          Recipe8: {
+            recipeName: "Recipe1",
+            recipeType: "Category1",
+          },
+          Recipe9: {
+            recipeName: "RecipeNameVeryLong",
+            recipeType: "Category1",
+          },
+          Recipe10: {
+            recipeName: "Recipe3",
+            recipeType: "Category1",
+          },
+          Recipe11: {
+            recipeName: "Recipe4",
+            recipeType: "Category1",
+          },
+          Recipe12: {
+            recipeName: "Recipe5",
+            recipeType: "Category1",
+          },
+          Recipe13: {
+            recipeName: "Recipe6",
+            recipeType: "Category1",
+          },
+          Recipe14: {
+            recipeName: "Recipe7",
+            recipeType: "Category1",
+          },
         },
 
         Category2: {
@@ -159,6 +211,37 @@ export default {
             recipeType: "Category5",
           },
         },
+
+        Category3: {
+          Recipe1: {
+            recipeName: "Recipe1",
+            recipeType: "Category1",
+          },
+          RecipeNameVeryLong: {
+            recipeName: "RecipeNameVeryLong",
+            recipeType: "Category1",
+          },
+          Recipe3: {
+            recipeName: "Recipe3",
+            recipeType: "Category1",
+          },
+          Recipe4: {
+            recipeName: "Recipe4",
+            recipeType: "Category1",
+          },
+          Recipe5: {
+            recipeName: "Recipe5",
+            recipeType: "Category1",
+          },
+          Recipe6: {
+            recipeName: "Recipe6",
+            recipeType: "Category1",
+          },
+          Recipe7: {
+            recipeName: "Recipe7",
+            recipeType: "Category1",
+          },
+        },
       },
     ]);
     return {
@@ -317,4 +400,20 @@ h3 {
   cursor: pointer;
   width: 100%;
 }
+
+.scroll {
+  position: sticky;
+  z-index: 1;
+  height: fit-content;
+}
+
+.left-scroll {
+  top: 40%;
+  left: 3%;
+}
+
+.right-scroll {
+  top: 40%;
+  right: 3%;
+}
 </style>

From b29771fccab44bc9d31a1634a00a3b3bbeb2e0ed Mon Sep 17 00:00:00 2001
From: BryanV <bveith2000@gmail.com>
Date: Sun, 4 Dec 2022 22:19:26 -0500
Subject: [PATCH 2/2] Set up working scroll bar buttons recipe feed can be
 ignored and ill adjust it when its implemented

---
 src/components/IngredientFeed.vue | 27 ++++++++++++++++++++++++++-
 src/components/RecipeFeed.vue     | 15 ++++++++-------
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/components/IngredientFeed.vue b/src/components/IngredientFeed.vue
index 03b8fc0..0cd91c4 100644
--- a/src/components/IngredientFeed.vue
+++ b/src/components/IngredientFeed.vue
@@ -117,7 +117,15 @@
               <h3>{{ category.name }}</h3>
             </div>
             <div class="row">
-              <ul>
+              <ul :id="category.name + 'scrollbar'">
+                <!-- TODO: Only have them appear when overflow -->
+                <div id="left-scroll-button" class="left-scroll btn scroll">
+                  <i
+                    class="fa fa-chevron-left"
+                    @click="scroll_left(category.name + 'scrollbar')"
+                    aria-hidden="true"
+                  ></i>
+                </div>
                 <div v-for="item in category.items" :key="item">
                   <div class="col-md-auto">
                     <button
@@ -142,6 +150,14 @@
                     </button>
                   </div>
                 </div>
+                <!-- TODO: Only have them appear when overflow -->
+                <div
+                  id="right-scroll-button"
+                  class="right-scroll btn scroll"
+                  @click="scroll_right(category.name + 'scrollbar')"
+                >
+                  <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                </div>
               </ul>
             </div>
           </div>
@@ -266,6 +282,14 @@ export default {
         }
       );
     },
+    scroll_right(categoryToScroll) {
+      let content = document.getElementById(categoryToScroll);
+      content.scrollLeft += 500;
+    },
+    scroll_left(categoryToScroll) {
+      let content = document.getElementById(categoryToScroll);
+      content.scrollLeft -= 500;
+    },
   },
   watch: {
     selected(newVal) {
@@ -397,6 +421,7 @@ ul {
   padding: 0;
   overflow: auto;
   overflow-y: hidden;
+  overflow-x: hidden;
 }
 
 h3 {
diff --git a/src/components/RecipeFeed.vue b/src/components/RecipeFeed.vue
index f769a4b..6f4cb29 100644
--- a/src/components/RecipeFeed.vue
+++ b/src/components/RecipeFeed.vue
@@ -70,11 +70,11 @@
               <h3>{{ name }}</h3>
             </div>
             <div class="row">
-              <ul class="containter">
+              <ul :id="name + 'scrollbar'">
                 <div id="left-scroll-button" class="left-scroll btn scroll">
                   <i
                     class="fa fa-chevron-left"
-                    @click="scroll_left"
+                    @click="scroll_left(name + 'scrollbar')"
                     aria-hidden="true"
                   ></i>
                 </div>
@@ -90,7 +90,7 @@
                 <div
                   id="right-scroll-button"
                   class="right-scroll btn scroll"
-                  @click="scroll_right"
+                  @click="scroll_right(name + 'scrollbar')"
                 >
                   <i class="fa fa-chevron-right" aria-hidden="true"></i>
                 </div>
@@ -113,12 +113,12 @@ export default {
     },
   },
   methods: {
-    scroll_right() {
-      let content = document.querySelector(".containter");
+    scroll_right(categoryToScroll) {
+      let content = document.getElementById(categoryToScroll);
       content.scrollLeft += 500;
     },
-    scroll_left() {
-      let content = document.querySelector(".containter");
+    scroll_left(categoryToScroll) {
+      let content = document.getElementById(categoryToScroll);
       content.scrollLeft -= 500;
     },
   },
@@ -366,6 +366,7 @@ ul {
   padding: 0;
   overflow: auto;
   overflow-y: hidden;
+  overflow-x: hidden;
 }
 
 h3 {