feature/editor-improvements (#289)

* pin editor buttons on scroll

* scaler scratch

* fix langauge assignment 1st pass

* set lang on navigate

* refactor/breakup router

* unify style for language selectro

* refactor/code-cleanup

* refactor/page specific components to page folder

* Fix time card layout issue

* fix timecard display

* update mobile cards / fix overflow errors

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/components/UI/CardSection.vue

@@ -73,6 +73,7 @@
             :slug="recipe.slug"
             :rating="recipe.rating"
             :image="recipe.image"
+            :tags="recipe.tags"
           />
         </v-col>
       </v-row>

frontend/src/components/UI/DatePicker.vue

@@ -1,31 +0,0 @@
-<template>
-    <v-date-picker
-        :first-day-of-week="firstDayOfWeek"
-        v-on="$listeners"
-    ></v-date-picker>
-</template>
-
-<script>
-import { api } from "@/api";
-
-export default {
-  data() {
-    return {
-       firstDayOfWeek: 0,
-    };
-  },
-  mounted() {
-    this.getOptions();
-  },
-
-  methods: {
-    async getOptions() {
-      const settings = await api.siteSettings.get();
-      this.firstDayOfWeek = settings.firstDayOfWeek;
-    },
-  },
-}
-</script>
-
-<style>
-</style>

frontend/src/components/UI/Dialogs/ConfirmationDialog.vue

@@ -8,7 +8,7 @@
     @keydown.esc="cancel"
   >
     <v-card>
-      <v-app-bar v-if="Boolean(title)" :color="color" dense flat dark>
+      <v-app-bar v-if="Boolean(title)" :color="color" dense  dark>
         <v-icon v-if="Boolean(icon)" left> {{ icon }}</v-icon>
         <v-toolbar-title v-text="title" />
       </v-app-bar>
@@ -36,13 +36,13 @@
 const CLOSE_EVENT = "close";
 const OPEN_EVENT = "open";
 /**
- * Confirmation Component used to add a second validaion step to an action.
+ * ConfirmationDialog Component used to add a second validaion step to an action.
  * @version 1.0.1
  * @author [zackbcom](https://github.com/zackbcom)
  * @since Version 1.0.0
  */
 export default {
-  name: "Confirmation",
+  name: "ConfirmationDialog",
   props: {
     /**
      * Message to be in body.

frontend/src/components/UI/LanguageMenu.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="text-center">
-    <v-menu
-      transition="slide-x-transition"
-      bottom
-      right
-      offset-y
-      close-delay="200"
-    >
-      <template v-slot:activator="{ on, attrs }">
-        <v-btn v-bind="attrs" v-on="on" icon>
-          <v-icon>mdi-translate</v-icon>
-        </v-btn>
-      </template>
-
-      <v-list>
-        <v-list-item-group v-model="selectedItem" color="primary">
-          <v-list-item
-            v-for="(item, i) in allLanguages"
-            :key="i"
-            link
-            @click="setLanguage(item.value)"
-          >
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ item.name }}
-              </v-list-item-title>
-            </v-list-item-content>
-          </v-list-item>
-        </v-list-item-group>
-      </v-list>
-    </v-menu>
-  </div>
-</template>
-
-<script>
-const SELECT_EVENT = "select-lang";
-export default {
-  props: {
-    siteSettings: {
-      default: false,
-    },
-  },
-  data: function() {
-    return {
-      selectedItem: 0,
-      items: [
-        {
-          name: "English",
-          value: "en-US",
-        },
-      ],
-    };
-  },
-  mounted() {
-    let active = this.$store.getters.getActiveLang;
-    this.allLanguages.forEach((element, index) => {
-      if (element.value === active) {
-        this.selectedItem = index;
-        return;
-      }
-    });
-  },
-  computed: {
-    allLanguages() {
-      return this.$store.getters.getAllLangs;
-    },
-  },
-
-  methods: {
-    setLanguage(selectedLanguage) {
-      if (this.siteSettings) {
-        this.$emit(SELECT_EVENT, selectedLanguage);
-      } else {
-        this.$store.dispatch("setLang", { 
-          currentVueComponent: this, 
-          language: selectedLanguage });
-      }
-    },
-  },
-};
-</script>
-<style>
-.menu-text {
-  text-align: left !important;
-}
-</style>

frontend/src/components/UI/SuccessFailureAlert.vue

@@ -1,66 +0,0 @@
-<template>
-  <v-dialog
-    v-model="dialog"
-    max-width="900px"
-    :fullscreen="$vuetify.breakpoint.xsOnly"
-  >
-    <v-card>
-      <v-toolbar dark color="primary" v-show="$vuetify.breakpoint.xsOnly">
-        <v-btn icon dark @click="dialog = false">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
-        <v-toolbar-title>{{ title }}</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-toolbar-items></v-toolbar-items>
-      </v-toolbar>
-      <v-card-title v-show="$vuetify.breakpoint.smAndUp">
-        {{ title }}
-      </v-card-title>
-      <v-card-text class="mt-3">
-        <v-row>
-          <v-col>
-            <v-alert outlined dense type="success">
-              <h4>{{ successHeader }}</h4>
-              <p v-for="success in this.success" :key="success" class="my-1">
-                - {{ success }}
-              </p>
-            </v-alert>
-          </v-col>
-          <v-col>
-            <v-alert v-if="failed[0]" outlined dense type="error">
-              <h4>{{ failedHeader }}</h4>
-              <p v-for="fail in this.failed" :key="fail" class="my-1">
-                - {{ fail }}
-              </p>
-            </v-alert>
-          </v-col>
-        </v-row>
-      </v-card-text>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script>
-export default {
-  props: {
-    title: String,
-    successHeader: String,
-    success: Array,
-    failedHeader: String,
-    failed: Array,
-  },
-  data() {
-    return {
-      dialog: false,
-    };
-  },
-  methods: {
-    open() {
-      this.dialog = true;
-    },
-  },
-};
-</script>
-
-<style>
-</style>

frontend/src/components/UI/TheAppBar.vue

@@ -35,7 +35,7 @@
         <v-icon>mdi-magnify</v-icon>
       </v-btn>
 
-      <SiteMenu />
+      <TheSiteMenu />
     </v-app-bar>
     <v-app-bar
       v-else
@@ -67,13 +67,13 @@
         <v-icon>mdi-magnify</v-icon>
       </v-btn>
 
-      <SiteMenu />
+      <TheSiteMenu />
     </v-app-bar>
   </div>
 </template>
 
 <script>
-import SiteMenu from "@/components/UI/SiteMenu";
+import TheSiteMenu from "@/components/UI/TheSiteMenu";
 import SearchBar from "@/components/UI/Search/SearchBar";
 import SearchDialog from "@/components/UI/Search/SearchDialog";
 import { user } from "@/mixins/user";
@@ -82,7 +82,7 @@ export default {
 
   mixins: [user],
   components: {
-    SiteMenu,
+    TheSiteMenu,
     SearchBar,
     SearchDialog,
   },