something smething blah blah blah

Author: drewngyen

quasar.conf.js

@@ -78,15 +78,15 @@ module.exports = function (ctx) {
       // analyze: true,
       // extractCSS: false,
       extendWebpack (cfg) {
-        // cfg.module.rules.push({
-        //   enforce: 'pre',
-        //   test: /\.(js|vue)$/,
-        //   loader: 'eslint-loader',
-        //   exclude: /node_modules/,
-        //   options: {
-        //     formatter: require('eslint').CLIEngine.getFormatter('stylish')
-        //   }
-        // })
+        cfg.module.rules.push({
+          enforce: 'pre',
+          test: /\.(js|vue)$/,
+          loader: 'eslint-loader',
+          exclude: /node_modules/,
+          options: {
+            formatter: require('eslint').CLIEngine.getFormatter('stylish')
+          }
+        })
       }
     },
 

src/components/CodeSnippet.vue

@@ -7,7 +7,7 @@
       language="js"
       :line-numbers="lineNumbers"
       class="code-editor"
-      :style="{ height: `${height}vh` }"
+      :style="{ height: `${height}vh`}"
     />
   </div>
 </template>
@@ -121,5 +121,6 @@ export default {
 <style lang="stylus" scoped>
 // resize handled by vue lifecycle methods
 .code-editor {
+  font-size: 11px;
 }
 </style>

src/components/ComponentDisplay.vue

@@ -139,5 +139,6 @@ export default {
 
 .active {
   background-color: rgba(57, 63, 84, 0.5);
+  border: 10px dashed rgb(227, 203, 71);
 }
 </style>

src/components/HomeSideDropDownItems/ComponentList.vue

@@ -69,6 +69,7 @@ export default {
 .q-list {
   margin-bottom: 0.5rem;
   border-radius: 5px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.13);
 }
 .component-info {
   margin: auto 0;

src/components/Routes.vue

@@ -1,29 +1,19 @@
 <template>
-<div>
-  <!--<div class="route-view">-->
+  <div class="home-sidebar" >
     <a
       :class="route === activeRoute ? 'panel-block is-active' : 'panel-block'"
       v-for="route in Object.keys(routes)"
       :key="route"
       @click="handleClick(route)"
       v-on:keyup.delete="deleteSelectedRoute(route)"
     >
-<!--
-      <span class="panel-icon">
-        <i class="fas fa-location-arrow" aria-hidden="true"></i>
-      </span>
-      -->
-         <q-list bordered separator>
-      <q-item clickable v-ripple>
-        <q-item-section>{{route}}</q-item-section>
-
-      </q-item>
-
-    </q-list>
-
+      <q-list bordered separator>
+        <q-item clickable v-ripple>
+          <q-item-section>{{route}}</q-item-section>
+        </q-item>
+      </q-list>
     </a>
   </div>
-
 </template>
 
 <script>

src/css/app.styl

@@ -6,4 +6,4 @@ main {
   background: black;
   // background: rgb(22,108,105);
   // background: linear-gradient(36deg, rgba(22,108,105,1) 0%, rgba(20,32,23,1) 100%);
-}
+}

src/layouts/MyLayout.vue

@@ -70,4 +70,16 @@ export default {
   // background: white;
   background: #272822;
 }
+body::-webkit-scrollbar {
+    width: 1em;
+}
+
+body::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: darkgrey;
+  outline: 1px solid slategrey;
+}
 </style>