Merge branch 'TeamUI/Flex' of https://github.com/oslabs-beta/OverVue into TeamUI/Flex

Author: sn163

src/components/ComponentDisplay.vue

@@ -12,7 +12,7 @@ Description:
     v-on:click="handleClick"
   >
     <!-- This is the actual component box -->
-  <!-- https://www.npmjs.com/package/vue-draggable-resizable -->
+    <!-- https://www.npmjs.com/package/vue-draggable-resizable -->
     <VueDraggableResizable
       class-name="component-box"
       v-for="componentData in activeRouteArray"
@@ -207,7 +207,7 @@ export default {
       return this.imagePath[this.activeRoute]
         ? {
           background: `url("${this.userImage}") center/contain no-repeat rgba(223, 218, 218, 0.886)`
-      }
+        }
         : {};
     }
   },
@@ -471,6 +471,7 @@ export default {
 .menu {
   margin-bottom: 0px !important;
 }
+
 .component-box {
   color: white;
   border: 1.2px dashed rgb(231, 203, 75);

src/components/dashboard_items/ComponentDetails.vue

@@ -8,7 +8,7 @@ Description:
   -->
 
 <template>
-  <div class="container">
+  <div class="inner-div">
     <q-card id="store-cards" v-if="this.activeComponentObj">
       <q-tabs
         v-model="tab"
@@ -147,16 +147,25 @@ i
   background black
 
 #store-cards
-  height 80%
+  height 100%
   border-radius 0
   background #737578
 
 #blank-card
-  height 80%
+  height 100%
   border-radius 0
   background-color #202122
 
 .html-bg
   // give html background color of grey
   background-color #202122
+
+
+  .inner-div {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-content: stretch;
+  height: 100%;
+}
 </style>

src/components/dashboard_items/Dashboard.vue

@@ -7,42 +7,44 @@ Description:
 
 <template>
 
-  <div class="home-sidebar drawer-menu">
-
-    <q-card id="dashboard-cards" style="fill">
+    <q-card id="dashboard-cards" class="bord">
       <q-tabs
         v-model="tab"
         dense
-        class="bg-subaccent text-white"
+        class="bg-subaccent text-white "
         active-color="secondary"
         indicator-color="secondary"
         align="left"
       >
-        <q-tab name="detail" id="label-text"><i class="fas fa-code"></i></q-tab>
-        <q-tab name="tree" id="label-text"><i class="fas fa-code-branch fa-flip-vertical" /></q-tab>
-        <q-tab name="store" id="label-text" ><i class="fas fa-store-alt"></i></q-tab>
+        
+        <q-tab name="detail" id="label-text" style="border-right: 3px solid black"><i class="fas fa-code"></i></q-tab>
+        <q-tab name="tree" id="label-text"
+          ><i class="fas fa-code-branch fa-flip-vertical"
+        /></q-tab>
+        <q-tab name="store" id="label-text" style="border-left: 3px solid black"
+          ><i class="fas fa-store-alt"></i
+        ></q-tab>
       </q-tabs>
-      <q-tab-panels v-model="tab" animated class="html-bg text-white ">
+      <q-tab-panels v-model="tab" animated class="html-bg text-white">
         <q-tab-panel name="detail">
           <ComponentDetails />
         </q-tab-panel>
-        <q-tab-panel name="tree" >
+        <q-tab-panel name="tree">
           <Tree />
         </q-tab-panel>
         <q-tab-panel name="store">
           <VuexStore />
         </q-tab-panel>
       </q-tab-panels>
     </q-card>
-     </div>
 
 </template>
 
 <script>
 import { mapState, mapActions } from "vuex";
-import Tree from "./Tree";
+import Tree from "./Tree.vue";
 import VuexStore from "./DashboardVuexStore.vue";
-import ComponentDetails from "./ComponentDetails";
+import ComponentDetails from "./ComponentDetails.vue";
 
 export default {
   components: {
@@ -173,29 +175,41 @@ i {
 .q-tab-panel {
   // matchs the code editor bg
   background: $subprimary;
+  
 }
 
 // changes the length of the tab panels
 .q-tab-panels {
-  height: 87vh;
-  padding: 0px !important;
+padding: 0px !important;
+border-top: 3px solid black;
 }
 
 .q-tabs {
-  background: #11120F;
+  background: #11120F
 }
 
 .toolbar-background {
   background: black;
 }
 
 #dashboard-cards {
-  height: 80%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   border-radius: 0px;
   background: #737578;
 }
 .html-bg {
   // give html background color of grey
   background-color: #202122;
 }
+
+.inner-div {
+  height: 100%;
+}
+
+.bord { 
+  border-left: 3px solid black;
+  border-right: 3px solid black;
+}
 </style>

src/components/home_sidebar_items/ComponentTab/ComponentTab.vue

@@ -37,7 +37,7 @@ export default {
 .html-bg 
   background-color: #202122
 
-#store-cards 
+#store-cards
   height: 100%
   border-radius: 0px
   background-color: #202122
@@ -50,7 +50,6 @@ export default {
 // changes the length of the tab panels
 .q-tab-panels
   height 100%
-  padding 0 !important
 
 .q-tabs
   background #11120F

src/components/home_sidebar_items/ComponentTab/CreateComponent.vue

@@ -5,7 +5,7 @@ Description:
   -->
 <!-- 4.0 adjustment: conditional render to switch between new comp name input and editing active comp name, moved from EditDeleteComponents -->
 <template>
-  <div class="home-sidebar drawer-menu">
+  <div class="inner-div drawer-menu">
     <br />
     <form
       v-on:submit.prevent="createComponent"
@@ -128,9 +128,13 @@ export default {
   margin: 0.75rem;
   width: 90%;
 }
-.home-sidebar {
-  margin: 0.5rem;
-  padding: 0.5rem;
-  border-radius: 5px;
+
+.inner-div {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding-left: 15px;
+  padding-right: 15px;
+  height: 100%;
 }
 </style>