From 8866256a216a68c16868aebd522d4ad05721e367 Mon Sep 17 00:00:00 2001
From: Hayden <hay-kot@pm.me>
Date: Sat, 6 Feb 2021 12:17:10 -0900
Subject: [PATCH] added category scroll

---
 frontend/src/App.vue                           | 11 -----------
 .../Settings/General/HomePageSettings.vue      | 18 ++++++++++++++----
 .../src/components/Settings/General/index.vue  |  2 +-
 .../src/components/Settings/Webhook/index.vue  | 12 ++++++------
 frontend/src/components/UI/CardSection.vue     |  2 +-
 frontend/src/locales/en.json                   |  2 +-
 6 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 66f15ccce..93103d324 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -94,16 +94,5 @@ export default {
 </script>
 
 <style>
-/* Scroll Bar PageSettings */
-body::-webkit-scrollbar {
-  width: 0.25rem;
-}
 
-body::-webkit-scrollbar-track {
-  background: grey;
-}
-
-body::-webkit-scrollbar-thumb {
-  background: black;
-}
 </style>
diff --git a/frontend/src/components/Settings/General/HomePageSettings.vue b/frontend/src/components/Settings/General/HomePageSettings.vue
index 10acc4ecc..4fbf24f59 100644
--- a/frontend/src/components/Settings/General/HomePageSettings.vue
+++ b/frontend/src/components/Settings/General/HomePageSettings.vue
@@ -30,13 +30,18 @@
               <h3>Homepage Categories</h3>
             </v-card-text>
             <v-divider></v-divider>
-            <v-list min-height="200px" dense>
+            <v-list
+              min-height="200"
+              dense
+              max-height="200"
+              style="overflow:auto"
+            >
               <v-list-item-group>
                 <draggable
                   v-model="homeCategories"
                   group="categories"
                   :style="{
-                    minHeight: `200px`,
+                    minHeight: `150px`,
                   }"
                 >
                   <v-list-item
@@ -72,13 +77,18 @@
               </h3>
             </v-card-text>
             <v-divider></v-divider>
-            <v-list min-height="200px" dense>
+            <v-list
+              min-height="200"
+              dense
+              max-height="200"
+              style="overflow:auto"
+            >
               <v-list-item-group>
                 <draggable
                   v-model="categories"
                   group="categories"
                   :style="{
-                    minHeight: `200px`,
+                    minHeight: `150px`,
                   }"
                 >
                   <v-list-item
diff --git a/frontend/src/components/Settings/General/index.vue b/frontend/src/components/Settings/General/index.vue
index 16f4f8bcc..0ed822a71 100644
--- a/frontend/src/components/Settings/General/index.vue
+++ b/frontend/src/components/Settings/General/index.vue
@@ -5,8 +5,8 @@
       <v-spacer></v-spacer>
       <span>
         <v-btn class="pt-1" text href="/docs">
-          <v-icon left>mdi-link</v-icon>
           {{ $t("settings.local-api") }}
+          <v-icon right>mdi-open-in-new</v-icon>
         </v-btn>
       </span>
     </v-card-title>
diff --git a/frontend/src/components/Settings/Webhook/index.vue b/frontend/src/components/Settings/Webhook/index.vue
index 6d74b0e8e..5d37ce198 100644
--- a/frontend/src/components/Settings/Webhook/index.vue
+++ b/frontend/src/components/Settings/Webhook/index.vue
@@ -4,14 +4,14 @@
       {{ $t("settings.webhooks.meal-planner-webhooks") }}
     </v-card-title>
     <v-card-text>
-      <p
-        v-html="
+      <p>
+        {{
           $t(
-            'settings.webhooks.the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at',
-            { time: time }
+            "settings.webhooks.the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at"
           )
-        "
-      ></p>
+        }}
+        <strong>{{ time }}</strong>
+      </p>
 
       <v-row dense align="center">
         <v-col cols="12" md="2" sm="5">
diff --git a/frontend/src/components/UI/CardSection.vue b/frontend/src/components/UI/CardSection.vue
index 08614f03d..5a4f92c43 100644
--- a/frontend/src/components/UI/CardSection.vue
+++ b/frontend/src/components/UI/CardSection.vue
@@ -5,7 +5,7 @@
         <v-row>
           <v-col>
             <v-btn-toggle group>
-              <v-btn text :to="`/recipes/category/${title.toLowerCase()}`">
+              <v-btn text :to="`/recipes/${title.toLowerCase()}`">
                 {{ title.toUpperCase() }}
               </v-btn>
             </v-btn-toggle>
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 20c9a1140..89543f0a8 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -122,7 +122,7 @@
     },
     "webhooks": {
       "meal-planner-webhooks": "Meal Planner Webhooks",
-      "the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at": "The URLs listed below will receive webhooks containing the recipe data for the meal plan on it's scheduled day. Currently Webhooks will execute at <strong>{ time }</strong>",
+      "the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at": "The URLs listed below will receive webhooks containing the recipe data for the meal plan on it's scheduled day. Currently Webhooks will execute at",
       "test-webhooks": "Test Webhooks",
       "webhook-url": "Webhook URL"
     },