Merge pull request #28 from oslabs-beta/megan/layerBugFix

Layer bug fix and styling updates

Author: Kerolos-Nesem

src/components/ComponentDisplay.vue

@@ -135,14 +135,16 @@
                     ></q-input>
                     <q-btn 
                     id="comp-btn"
+                    class="sidebar-btn"
                     color="secondary"
                     label="Submit Note"
                     :disable="noteText.length > 0 ? false : true"
                     @click="submitNote"
                     />
                     <q-btn
                     id="note-btn-close"
-                    label="Exit Notes"
+                    class="sidebar-btn closeAction"
+                    label="Close"
                     @click="this.openNoteModal"
                     />
                 </q-form>
@@ -446,7 +448,7 @@ export default {
         z: this.activeComponentData.z,
       };
       if (e.target.innerText === "+") payload.z++;
-      if (e.target.innerText === "-" && payload.z > 0) payload.z--;
+      if (e.target.innerText === "–" && payload.z > 0) payload.z--;
       this.updateComponentLayer(payload);
     },
     // if user clicks on display grid, resets active component to ''
@@ -511,7 +513,7 @@ li:hover{
   margin-right: 10px;
 }
 .noteBox{
-  background-color: $subprimary;
+  background-color: $subsecondary;
   color: $menutext;
   width: 65%;
   padding: 15px;
@@ -524,7 +526,7 @@ li:hover{
 #noteDelete{
   background-color: $secondary;
   width: 20px;
-  height: 20px;
+  min-height: 42px;
   display: flex;
   justify-content: center;
   align-self: flex-end;
@@ -666,7 +668,7 @@ li:hover{
   position: absolute;
 }
 .active {
-  background-color: $accent;
+  background-color: rgba($secondary, .42);
   border: 1px dashed $accent;
 }
 .minorAction {
@@ -708,9 +710,6 @@ li:hover{
 }
 
 #note-btn-close {
-  background-color: rgba($negative, .2);
-  border: 1px solid $negative;
-  color: $negative;
   width: 100%;
   margin-top: 10px;
   margin-bottom: 10px;

src/components/dashboard_items/ComponentDetails.vue

@@ -9,7 +9,7 @@ Description:
 
 <template>
   <div class="inner-div">
-    <q-card id="store-cards" v-if="this.activeComponentObj">
+    <q-card id="store-cards" class="no-shadow" v-if="this.activeComponentObj">
       <q-tabs
         v-model="tab"
         dense
@@ -142,7 +142,7 @@ i {
 .q-tab-panel {
   height: 100%;
   background: $subprimary;
-  padding-top: 20px;
+  padding-top: 20px !important;
 }
 
 // changes the length of the tab panels

src/components/dashboard_items/Dashboard.vue

@@ -167,7 +167,6 @@ export default {
   height: 100%;
   border-radius: 0px;
   background: $subprimary;
-  padding: 16px;
 }
 
 .inner-div {

src/components/dashboard_items/HTMLQueue.vue

@@ -9,10 +9,10 @@ Description:
     <span class='list-title' v-if='this.activeLayer.id !== ""'>
       <i class="fas fa fa-chevron-up fa-md" @click="setParentLayer"></i>
       <!-- <button v-if='this.activeLayer.id' @click="upOneLayer">Up</button>  -->
-      &nbsp; &nbsp; Viewing Elements in '{{ depth }}' 
+      &nbsp; &nbsp; Viewing Elements in '{{ depth }}'
+      <hr> 
     </span>
     <span class='list-title' v-else-if='!this.activeComponent'></span>
-    <hr>
     <div
       group="people"
       class="list-group"

src/components/dashboard_items/RouteDisplay.vue

@@ -19,7 +19,7 @@ Includes functionality to:
       class="input-add"
       @click="resetActiveComponent"
       reactive-rules
-      :rules="[val => !Object.keys(this.componentMap).includes(val) || 'A component with this name already exists' ]"
+      :rules="[val => !Object.keys(this.componentMap).includes(val) || 'A component/route with this name already exists' ]"
     >
     <template v-slot:append>
       <q-btn
@@ -82,7 +82,6 @@ export default {
 <style scoped>
 .route-display {
   overflow: auto;
-  padding: 1rem;
 }
 
 i:hover {

src/components/dashboard_items/Routes.vue

@@ -13,11 +13,17 @@ Description:
       @click="selectRoute(route)"
     >
       <q-list bordered separator class="list-item">
-        <q-item clickable v-ripple :class="route === activeRoute ? 'panel-block is-active list-item' : 'panel-block list-item'">
-          <q-item-section>{{route}}</q-item-section>
-          <span v-if="route !== 'HomeView'">
-            <q-btn round flat icon="highlight_off" v-on:click.stop="deleteSelectedRoute(route)" />
-          </span>
+        <q-item clickable dense v-ripple :class="route === activeRoute ? 'panel-block is-active list-item' : 'panel-block list-item'">
+          <q-item-section>
+            <div class="block-container">
+              <div class="block-info">
+              {{route}}
+              </div>
+              <span v-if="route !== 'HomeView'">
+              <q-btn round flat icon="highlight_off" v-on:click.stop="deleteSelectedRoute(route)" />
+              </span>
+            </div>
+          </q-item-section>
         </q-item>
       </q-list>
     </a>
@@ -47,9 +53,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+ 
   .panel-block {
     background: $secondary !important;
-    color: $menutext !important;;
+    color: $menutext !important;
+    min-height: 45px;
   }
   .is-active {
     background: $secondary !important;

src/components/dashboard_items/tutorial/Landing.vue

@@ -9,8 +9,7 @@
       @click="nextTab"
     />
       <q-btn
-      class="tut-btn"
-      id="closeTutorialButton"
+      class="tut-btn closeAction"
       label="Close Tutorial"
       @click="toggleTutorial"
     />
@@ -52,10 +51,4 @@ export default {
   height: auto;
 }
 
-#closeTutorialButton {
-  background-color: $subprimary;
-  color: $menutext;
-  border: 1px solid $menutext;
-}
-
 </style>

src/components/file_system_interface/ExportProject.vue

@@ -522,11 +522,8 @@ export default {
 };
 </script>
 
-<style>
-.nav-btn {
-  min-height: 30px !important;
-  text-transform: capitalize;
-}
+<style scoped>
+
 .center{
   display:inline-block;
   text-align: center;

src/components/home_sidebar_items/ComponentTab/ComponentTab.vue

@@ -1,7 +1,7 @@
 <!-- Component Tab Container that holds components for creating components, editing and deleting, and adding props.
 Functionality includes: if active component is selected, will switch view to editing mode. If not, it will be in create mode -->
 <template>
-  <q-card id="store-cards">
+  <q-card id="store-cards" class="no-shadow">
     <CreateComponent v-if="activeComponent === ''"/>
     <EditDeleteComponents v-if="activeComponent !== ''"/>
   </q-card>

src/components/home_sidebar_items/ComponentTab/CreateComponent.vue

@@ -27,7 +27,7 @@ Description:
           class="input-add"
           no-error-icon
           reactive-rules
-          :rules="[ val => val.length != 0 || 'Please set a component name', val => !Object.keys(this.componentMap).includes(val) || 'A component with this name already exists' ]"
+          :rules="[ val => val.length != 0 || 'Please set a component name', val => !Object.keys(this.componentMap).includes(val) || 'A component/route with this name already exists' ]"
         ></q-input>
       </form>
 
@@ -49,6 +49,7 @@ Description:
 
       <q-btn
         id="create-component-btn"
+        class="sidebar-btn"
         v-if="activeComponent === ''"
         color="secondary"
         label="Create Component"
@@ -180,6 +181,7 @@ export default {
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
+    margin: 4px;
   }
   .create-component-form {
     display: flex;