crappy styling

Author: drewngyen

src/components/ComponentDisplay.vue

@@ -18,11 +18,11 @@
      <div class="component-title">
         <p>{{ componentData.componentName }}</p>
       </div>
-      <div class="component-children">
-        <p># of children: {{ componentMap[componentData.componentName].children.length }} </p>
-        <p>children: {{ componentMap[componentData.componentName].children }}</p>
+      <ul class="component-children">
+        <li># of children: {{ componentMap[componentData.componentName].children.length }} </li>
+        <li>children: {{ componentMap[componentData.componentName].children }}</li>
          <!-- <p v-for="child in childList" :key="childList.indexOf(child)"> {{ child.text }}</p> -->
-      </div>
+      </ul>
       <q-menu context-menu>
         <q-list>
           <q-item clickable v-ripple v-close-popup @click="handleAddChild">
@@ -179,13 +179,14 @@ export default {
   top: 0rem;
   left: 2px;
   color: black;
+  list-style: none;
 }
 .component-display {
   /* border: 3px dashed rgb(159, 122, 122); */
   /* height: 500px; */
   /* width: 500px; */
-  /* original is 70vh */
-  height: 95vh;
+  /* original is 70 */
+  height: 90vh;
   width: 100%;
   position: relative;
   background: darkslategray;

src/components/RouteDisplay.vue

@@ -1,16 +1,15 @@
 <template>
-<div>
-       <q-input
-        @keyup.enter.native="handleEnterKeyPress"
-        standout="bg-secondary text-white"
-        bottom-slots
-        v-model="newRoute"
-        label="Enter new route"
-        :dense="dense"
-        class="input-add"
-      >
-      </q-input>
-  <!--<div class="route-display">-->
+  <div>
+    <q-input
+      @keyup.enter.native="handleEnterKeyPress"
+      standout="bg-secondary text-white"
+      bottom-slots
+      v-model="newRoute"
+      label="Enter new route"
+      :dense="dense"
+      class="input-add"
+    ></q-input>
+    <!--<div class="route-display">-->
     <!--
 
     -->
@@ -19,34 +18,34 @@
 </template>
 
 <script>
-import Routes from './Routes'
-import { mapState, mapActions } from 'vuex'
+import Routes from "./Routes";
+import { mapState, mapActions } from "vuex";
 
 export default {
-  name: 'RouteDisplay',
+  name: "RouteDisplay",
   components: {
     Routes
   },
   computed: {
-    ...mapState(['routes'])
+    ...mapState(["routes"])
   },
-  data () {
+  data() {
     return {
-      newRoute: ''
-    }
+      newRoute: ""
+    };
   },
   methods: {
-    ...mapActions(['addRouteToRouteMap', 'setRoutes']),
-    handleEnterKeyPress () {
+    ...mapActions(["addRouteToRouteMap", "setRoutes"]),
+    handleEnterKeyPress() {
       this.addRouteToRouteMap(this.newRoute)
         .then(() => {
-          this.newRoute = ''
+          this.newRoute = "";
         })
 
-        .catch(err => console.log(err))
+        .catch(err => console.log(err));
     }
   }
-}
+};
 </script>
 
 <style scoped>

src/components/Routes.vue

@@ -1,6 +1,6 @@
 <template>
 
-<div>
+<div class="home-sidebar">
   <!--<div class="route-view">-->
     <a
       :class="route === activeRoute ? 'panel-block is-active' : 'panel-block'"

src/components/Tree.vue

@@ -65,7 +65,7 @@ export default {
       this.tree = build['App']
     }
   },
-  mounted () {
+  created () {
     this.buildTree()
   }
 }

src/css/app.styl

@@ -2,9 +2,13 @@
 main {
   background: #f2f6f5;
   overflow: auto;
+
 }
 .gradient {
   background: black;
   // background: rgb(22,108,105);
   // background: linear-gradient(36deg, rgba(22,108,105,1) 0%, rgba(20,32,23,1) 100%);
 }
+// ::-webkit-scrollbar {
+//   width: 2px;
+// }