Merge pull request #122 from MetRonnie/sticky-toolbar

Simplify sticky toolbar styling

Author: oliver-sanders

src/components/cylc/gscan/GScan.vue

@@ -99,7 +99,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :workflows="workflows"
         :node-filter-func="filterNode"
         tree-item-component="GScanTreeItem"
-        class="c-gscan-workflow"
+        class="c-gscan-workflow pa-0"
         ref="tree"
         v-bind="{ filterState }"
       />

src/components/cylc/table/Table.vue

@@ -26,6 +26,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     density="compact"
     v-model:page="page"
     v-model:items-per-page="itemsPerPage"
+    fixed-header
   >
     <template v-slot:item.task.name="{ item }">
       <div

src/components/cylc/tree/Tree.vue

@@ -16,18 +16,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <v-container
-    fluid
-    class="pa-0"
-  >
+  <div>
     <component
       :is="treeItemComponent"
       v-for="child of rootChildren"
       :key="child.id"
       :node="child"
       v-bind="{ hoverable, cyclePointsOrderDesc, expandAll, filteredOutNodesCache, flat }"
     />
-  </v-container>
+  </div>
 </template>
 
 <script>

src/views/Table.vue

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <v-container
     fluid
-    class="c-table ma-0 pa-2 h-100 flex-column d-flex"
+    class="c-table pa-2 pb-0 h-100 flex-column d-flex"
   >
     <ViewToolbar
       :groups="controlGroups"
@@ -28,6 +28,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <TableComponent
         :tasks="filteredTasks"
         v-model:initial-options="dataTableOptions"
+        class="mh-100"
       />
     </div>
   </v-container>

src/views/Tree.vue

@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="h-100 c-tree">
+  <div class="c-tree h-100 overflow-auto">
     <ViewToolbar
       class="toolbar"
       :groups="controlGroups"
@@ -356,16 +356,13 @@ export default {
   .toolbar {
     position: sticky;
     top: 0;
-    height: 4em;
     padding: 0.5em;
     background: white;
     z-index: 1;
   }
   .tree {
-    height: calc(100% - 4.1em);
     width: 100%;
-    padding-left: 0.5em !important;
-    overflow-y: scroll;
+    padding: 0 0.5em;
   }
 }
 </style>