feat: made timeline view full-width

ActivityWatch · Nov 8, 2020 · bba8b35 · bba8b35
1 parent f0e8b4c
commit bba8b35
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 34 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -2,11 +2,12 @@
 div#wrapper
   aw-header
 
-  div.container.aw-container.my-3.py-3
-    error-boundary
-      user-satisfaction-poll
-      new-release-notification(v-if="isNewReleaseCheckEnabled")
-      router-view
+  div(:class="{'container': !fullContainer, 'container-fluid': fullContainer}")
+    div.aw-container.my-3.p-3
+      error-boundary
+        user-satisfaction-poll
+        new-release-notification(v-if="isNewReleaseCheckEnabled")
+        router-view
 
   div.container(style="color: #555")
     div(style="float: left")
@@ -49,6 +50,12 @@ export default {
     };
   },
 
+  computed: {
+    fullContainer() {
+      return this.$route.meta.fullContainer;
+    },
+  },
+
   mounted: async function () {
     this.$aw.getInfo().then(
       info => {
@@ -62,31 +69,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-$textcolor: #000;
-
-html,
-body,
-button {
-  color: $textcolor;
-  font-family: 'Varela Round', sans-serif !important;
-}
-
-body {
-  background-color: #eee;
-}
-
-.fa-icon {
-  margin-top: -0.125em;
-  margin-left: 4px;
-  margin-right: 4px;
-  vertical-align: middle;
-}
-
-.aw-container {
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 5px 5px 5px 5px;
-}
-</style>
diff --git a/src/main.js b/src/main.js
@@ -20,6 +20,8 @@ if (!('startOfDay' in localStorage)) {
 // Load the Varela Round font
 import 'typeface-varela-round';
 
+import './style/style.scss';
+
 // Loads all the filters
 import './util/filters.js';
 

diff --git a/src/route.js b/src/route.js
@@ -42,7 +42,7 @@ const router = new VueRouter({
     },
     { path: '/buckets', component: Buckets },
     { path: '/buckets/:id', component: Bucket, props: true },
-    { path: '/timeline', component: Timeline },
+    { path: '/timeline', component: Timeline, meta: { fullContainer: true } },
     { path: '/query', component: QueryExplorer },
     { path: '/settings', component: Settings },
     { path: '/stopwatch', component: Stopwatch },

diff --git a/src/style/_container.scss b/src/style/_container.scss
@@ -0,0 +1,5 @@
+.aw-container {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
diff --git a/src/style/globalvars.scss → src/style/_globalvars.scss b/src/style/globalvars.scss → src/style/_globalvars.scss
diff --git a/src/style/style.scss b/src/style/style.scss
@@ -0,0 +1,23 @@
+@import 'globalvars';
+@import 'container';
+
+$textcolor: #000;
+
+html,
+body,
+button {
+  color: $textcolor;
+  font-family: 'Varela Round', sans-serif !important;
+}
+
+body {
+  background-color: #eee;
+}
+
+// To make icons a little less crowded
+.fa-icon {
+  margin-top: -0.125em;
+  margin-left: 4px;
+  margin-right: 4px;
+  vertical-align: middle;
+}