fixed footer styling, and added lodash to latest version

Author: drewngyen

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.0.0",
+    "lodash": ">=4.17.13",
     "fs-extra": "^8.1.0",
     "localforage": "^1.7.3",
     "mousetrap": "^1.6.3",

src/components/Footer.vue

@@ -2,11 +2,11 @@
   <q-footer reveal class="gradient text-white" :style="{ height: `${height}vh` }">
     <q-toolbar class="toolbar-background">
       <q-btn flat color="subaccent" round @click="openBottomDrawer">
-        <i :class="[open ? down : up]" id="btn" ></i>
+        <i :class="[open ? down : up]" id="btn"></i>
       </q-btn>
-      <q-toolbar-title >Dashboard</q-toolbar-title>
+      <q-toolbar-title>Dashboard</q-toolbar-title>
     </q-toolbar>
-    <q-card>
+    <q-card id="footer-cards">
       <q-tabs
         v-model="tab"
         dense
@@ -15,10 +15,10 @@
         indicator-color="secondary"
         align="left"
       >
-        <q-tab name="code" label="Code Snippet" id="label-text"/>
-        <q-tab name="detail" label="Component Details" id="label-text"/>
-        <q-tab name="tree" label="Project Tree" id="label-text"/>
-        <q-tab name="html" label="HTML Elements" id="label-text"/>
+        <q-tab name="code" label="Code Snippet" id="label-text" />
+        <q-tab name="detail" label="Component Details" id="label-text" />
+        <q-tab name="tree" label="Project Tree" id="label-text" />
+        <q-tab name="html" label="HTML Elements" id="label-text" />
       </q-tabs>
 
       <q-tab-panels v-model="tab" animated class="bg-primary text-white full-footer">
@@ -27,8 +27,7 @@
         </q-tab-panel>
 
         <q-tab-panel name="detail">
-          <div class="text-h6">Vuex</div>
-          Component Info Here
+          <div class="text-h6">Vuex</div>Component Info Here
         </q-tab-panel>
 
         <q-tab-panel name="tree">
@@ -44,46 +43,49 @@
 </template>
 
 <script>
-import Tree from './Tree'
-import HomeQueue from './HomeQueue'
-import CodeSnippet from './CodeSnippet'
+import Tree from "./Tree";
+import HomeQueue from "./HomeQueue";
+import CodeSnippet from "./CodeSnippet";
 
 export default {
   components: {
     Tree,
     HomeQueue,
     CodeSnippet
   },
-  data () {
+  data() {
     return {
-      tab: 'code',
+      tab: "code",
       open: true,
       height: 40,
-      up: 'fas fa-chevron-up',
-      down: 'fas fa-chevron-down'
-    }
+      up: "fas fa-chevron-up",
+      down: "fas fa-chevron-down"
+    };
   },
   methods: {
-    openBottomDrawer () {
+    openBottomDrawer() {
       // 15in mb pro - 1027 px 3.75
       // big ass screens 2.5
-      let minHeight = (window.outerHeight < 900) ? 4.5 : (window.outerHeight < 1035) ? 3.75 : 2.5
-      this.height === 40 ? (this.height = minHeight) : (this.height = 40)
-      this.open === true ? this.open = false : this.open = true
+      let minHeight =
+        window.outerHeight < 900 ? 4.5 : window.outerHeight < 1035 ? 3.75 : 2.5;
+      this.height === 40 ? (this.height = minHeight) : (this.height = 40);
+      this.open === true ? (this.open = false) : (this.open = true);
     }
   }
-}
+};
 </script>
 
 <style lang="stylus" scoped>
 i {
   font-size: 11px;
 }
+
 .q-btn {
   // background: $secondary;
   font-size: 8px;
   margin: 5px;
 }
+
 // styling for the entire footer
 .q-footer {
   // height: 35vh;
@@ -92,48 +94,63 @@ i {
   // background: #313131;
   background: #272822;
 }
+
 // changes the footer toolbar height
 .q-toolbar {
   min-height: 25px !important;
   padding: 0 6px !important;
 }
+
 .q-toolbar__title {
-  font-size 14px;
+  font-size: 14px;
   text-transform: uppercase;
   // font-weight: 700;
   padding: 5px;
 }
+
 // this class selector does not change anything
 .q-tab__label {
   // font-size not changing
   font-size: 10px !important;
   line-height: 1.718em;
   font-weight: 500;
 }
+
 // changes the tab label styling
 #label-text {
   font-size: 4px !important;
   text-transform: capitalize;
 }
+
 .q-tab-panel {
   // matchs the code editor bg
-  background: #272822
+  background: #272822;
   // background: rgb(69,77,102);
   // background: linear-gradient(180deg, rgba(69,77,102,1) 0%, rgba(54,60,78,1) 100%);
 }
+
 // changes the length of the tab panels
 .q-tab-panels {
-  height: 31vh;
+  height: 90%;
   padding: 0px !important;
 }
+
 .q-tabs {
   background: #11120F;
 }
+
 .toolbar-background {
   background: black;
 }
+
 .full-footer {
   // height: 100vh;
   padding-bottom: 0px;
 }
+
+#footer-cards {
+  height: 100%;
+  border-radius: 0px;
+  background: #737578;
+}
 </style>