Merge pull request #25 from keliphan/visualStretch

styling fixes

Author: JojuOlaode

src/components/HomeQueue.vue

@@ -5,23 +5,25 @@
     <span class='list-title' v-else-if='this.activeComponent !==""'> Viewing Elements in '{{ this.activeComponent }}' </span>
     <span class='list-title' v-else> Elements in Queue </span>
     <hr>
-    <draggable
+    <div
       v-model="renderList"
       group="people"
       class="list-group"
-      ghost-class="ghost"
-      @start="drag = true"
-      @end="drag = false"
     >
-      <div :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'" @dblclick.self="setActiveElement(element)" v-for="(element) in renderList" :key="element[1] + Date.now()">
+    
+      <div
+      :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
+      @dblclick.self="setActiveElement(element)"
+      v-for="(element) in renderList" :key="element[1] + Date.now()"
+      >
         <!-- <i class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i> -->
         <i v-if='activeComponent === "" ' class="fas fa fa-angle-double-down fa-md" id="unavailable"></i>
         <i v-else class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i>
-        <!-- <i class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i> -->
         {{ element[0] }}
         <i class="fas fa fa-trash fa-md" @click.self="deleteElement([element[1],element[2]])"></i>
       </div>
-    </draggable>
+
+    </div>
   </section>
 </template>
 
@@ -90,7 +92,9 @@ export default {
       else this.$store.dispatch(deleteFromComponentHtmlList, id[1])
     },
     setActiveElement (element) {
-      this.setActiveHTML(element)
+      if (this.activeComponent !== '') {
+        this.setActiveHTML(element)
+      }
     },
     setLayer (element) {
       this.setActiveLayer(element)
@@ -110,15 +114,12 @@ export default {
       this.depth = newTitle
     },
     handleClick (event) {
-      console.log(event.target)
+      // console.log(event.target)
       if (event.target.className === 'home-queue') {
         if (!(this.activeHTML === '')) this.setActiveHTML([''])
       }
     }
   },
-  components: {
-    draggable
-  },
   watch: {
     activeComponent: function () {
       // console.log('watching activeComponent in HomeQueue')
@@ -210,7 +211,7 @@ li {
 }
 
 #unavailable {
-  color: grey;
+  color: #686868;
   cursor: default
 }
 

src/css/app.styl

@@ -27,21 +27,30 @@ main {
   // 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;
-// }
 
-::-webkit-scrollbar {
-    width: 12px;
+::-webkit-scrollbar
+{
+	width: 10px;
+	background-color: $subsecondary;
 }
- 
-::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
-    border-radius: 10px;
+
+::-webkit-scrollbar-track
+{
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	border-radius: 10px;
+	background-color: $subsecondary;
 }
- 
-::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+
+::-webkit-scrollbar-thumb
+{
+	border-radius: 10px;
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+	background-color: #303030;
 }
 
+::-webkit-scrollbar-thumb:hover
+{
+	border-radius: 10px;
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+	background-color: #404040;
+}