Merge branch 'stretchMockup' of https://github.com/JojuOlaode/OverVue into visualStretch

Author: keliphan

src/components/ComponentDisplay.vue

@@ -18,7 +18,6 @@
       @deactivated="onDeactivated(componentData)"
       @dragging="onDrag"
       @resizing="onResize"
-      @dblclick.native="onDoubleClick(componentData)"
       @dragstop="finishedDrag"
       @resizestop="finishedResize"
       :onDragStart="recordInitialPosition"
@@ -177,7 +176,29 @@ export default {
       console.log('mockBg is working', this.imagePath[this.activeRoute])
       return this.imagePath[this.activeRoute]
         ? {
-          background: `url("${this.userImage}") center/contain no-repeat`
+          background: `url("${this.userImage}") center/contain no-repeat rgba(223, 218, 218, 0.886)`,
+          // 'background-color': 'rgba(223, 218, 218, 0.886)',
+          // 'background-size': '100px 100px, 100px 100px, 20px 20px, 20px 20px',
+          // 'background-position':' -2px -2px, -2px -2px, -1px -1px, -1px -1px',
+          // 'background-image': `-webkit-linear-gradient(white 2px, transparent 2px),
+          // -webkit-linear-gradient(0, white 2px, transparent 2px),
+          // -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
+          // -webkit-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px)`,
+          // 'background-image': `-moz-linear-gradient(white 2px, transparent 2px),
+          // -moz-linear-gradient(0, white 2px, transparent 2px),
+          // -moz-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
+          // -moz-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px)`,
+          // 'background-image': `linear-gradient(white 2px, transparent 2px),
+          // linear-gradient(90deg, white 2px, transparent 2px),
+          // linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
+          // linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px)`,
+          // '-pie-background': `linear-gradient(white 2px, transparent 2px) -2px -2px / 100px,
+          // linear-gradient(90deg, white 2px, transparent 2px) -2px -2px / 100px,
+          // linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
+          // 20px, linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
+          // 20px, #269`,
+          // 'background-image': `url(${this.userImage})`,
+          // behavior: 'url(/pie/PIE.htc)',
         }
         : {}
     }
@@ -346,12 +367,6 @@ export default {
       //   console.log("We just clicked without making a new active component")
       // }
     },
-    onDoubleClick (compData) {
-      if (!(componentData.componentName === this.activeComponent)) {
-        this.setActiveComponent(componentData.componentName)
-      }
-      this.activeComponentData.isActive = true
-    },
     handleAddChild () {
       // render modal with childrenmultiselect in it
       this.modalOpen = true
@@ -374,11 +389,6 @@ export default {
       if (e.target.innerText === '-' && payload.z > 0) payload.z--
       this.updateComponentLayer(payload)
     },
-    //       @dblclick.native="onDoubleClick(componentData)"
-    // onDoubleClick (compData) {
-    //   this.setActiveComponent(compData.componentName)
-    //   this.activeComponentData.isActive = true
-    // }
     handleClick (event) {
       if (event.target.className === 'component-display grid-bg') {
         if (!(this.activeComponent === '')) this.setActiveComponent('')
@@ -395,11 +405,9 @@ export default {
   top: -18px;
   left: 2px;
   color: black;
+  -webkit-text-stroke: 0.4px white;
   font-weight: 800;
-  /* background: rgba(0, 0, 0, 0.678); */
-  /* width: 1rem; */
   line-height: 1.2;
-  /* margin: 10px; */
   z-index: -1;
 }
 .component-children {

src/components/Footer.vue

@@ -22,7 +22,7 @@
         <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">
+      <q-tab-panels v-model="tab" animated class="html-bg text-white" >
         <q-tab-panel name="code">
           <CodeSnippet />
         </q-tab-panel>
@@ -35,7 +35,7 @@
           <Tree />
         </q-tab-panel>
 
-        <q-tab-panel name="html">
+        <q-tab-panel name="html" :style="{height: `${height}vh`}">
           <HomeQueue />
         </q-tab-panel>
       </q-tab-panels>
@@ -172,14 +172,18 @@ i {
   background: black;
 }
 
-.full-footer {
-  // height: 100vh;
-  padding-bottom: 0px;
-}
+// .full-footer {
+//   // height: 100vh;
+
+// }
 
 #footer-cards {
   height: 100%;
   border-radius: 0px;
   background: #737578;
 }
+.html-bg {
+  // give html background color of grey
+  background-color: #202122;
+}
 </style>

src/components/HomeQueue.vue

@@ -137,7 +137,8 @@ export default {
 
 <style lang="stylus" scoped>
 .home-queue {
-  height: 100%;
+  overflow: scroll;
+  padding-bottom: 40px;
 }
 li {
   list-style-type: none;
@@ -149,6 +150,7 @@ li {
 .list-group-item {
   display: inline-block;
   margin: 2px 1.5%;
+  min-width: 145px;
   width: 30%;
   border-radius: 0.5cm;
   border: 2px solid $secondary;

src/components/HomeSideDropDown.vue

@@ -2,18 +2,18 @@
   <div class="q-pa-md" style="max-width: 350px">
     <q-list padding bordered class="rounded-borders drawer-menu">
       <q-expansion-item dense dense-toggle expand-separator label="Components">
-        <q-card>
-          <q-card-section>
-            <div class="input-container">
-              <ComponentList />
-            </div>
-          </q-card-section>
-        </q-card>
+          <q-card>
+            <q-card-section>
+              <div class="input-container" style='height: 130px'>
+                <ComponentList />
+              </div>
+            </q-card-section>
+          </q-card>
       </q-expansion-item>
       <q-expansion-item dense dense-toggle expand-separator label="Routes">
         <q-card>
           <q-card-section>
-            <div class="input-container">
+            <div class="input-container" style='height: 150px'>
               <RouteDisplay />
               <br />
             </div>
@@ -48,13 +48,15 @@ export default {
 </script>
 
 <style lang="stylus">
+
 .input-add {
   margin: 0em 1em 0em 1em;
 }
 
 .input-container {
   margin-top: 1rem;
   background: $subsecondary;
+  overflow-y: auto;
 }
 
 .red {

src/layouts/MyLayout.vue

@@ -141,8 +141,4 @@ export default {
   background: $subprimary;
   // background: #272822;
 }
-
-::-webkit-scrollbar {
-  display: none;
-}
 </style>