Move dimension-related CSS vars to their own file

docs/backup-restore.md

@@ -49,20 +49,6 @@ Maximum of 24mb of storage per user. Please do not repeatedly hit the endpoint,
 - Add your `zone_id` (found in the Overview tab of your desired domain on Cloudflare)
 - Add your `route`, which should be a domain or host, supporting a wildcard
 
-```toml
-name = "dashy-worker"
-type = "javascript"
-
-workers_dev = true
-route = "example.com/*"
-zone_id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
-account_id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
-
-kv_namespaces = [
-  { binding = "DASHY_CLOUD_BACKUP", id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" }
-]
-```
-
 #### Complete `index.js`
 - Write code to handle your requests, and interact with any other data sources in this file
 - Generally, this is done within an event listener for 'fetch', and returns a promise
@@ -80,7 +66,7 @@ async function handleRequest(request) {
 }
 ```
 
-- For the code used for Dashy's cloud service, see [here](https://gist.github.com/Lissy93/d19b43d50f30e02fa25f349cf5cb5ed8#file-index-js)
+- For the code used for Dashy's cloud service, see [here](https://notes.aliciasykes.com/p/j2F1deljv1)
 
 
 #### Commands

src/components/Settings/ThemeSelector.vue

@@ -54,7 +54,6 @@ export default {
     }
   },
   methods: {
-    /* Sets the theme, by updating data-theme attribute on the html tag */
     setLocalTheme(newTheme) {
       const htmlTag = document.getElementsByTagName('html')[0];
       if (htmlTag.hasAttribute('data-theme')) htmlTag.removeAttribute('data-theme');

src/components/Workspace/SideBar.vue

@@ -1,13 +1,7 @@
 <template>
   <nav class="side-bar">
     <div v-for="(section, index) in sections" :key="index">
-      <SideBarItem
+      <SideBarItem class="item" :icon="section.icon" :title="section.title" />
-        class="item"
-        :icon="section.icon"
-        :title="section.name"
-        :click="launchItem"
-      />
-      <SideBarSection v-if="isOpen" :items="section.items" />
     </div>
   </nav>
 </template>
@@ -15,7 +9,6 @@
 <script>
 
 import SideBarItem from '@/components/Workspace/SideBarItem.vue';
-import SideBarSection from '@/components/Workspace/SideBarSection.vue';
 
 export default {
   name: 'SideBar',
@@ -23,19 +16,8 @@ export default {
   props: {
     sections: Array,
   },
-  data: () => ({
-    isOpen: false,
-  }),
   components: {
     SideBarItem,
-    SideBarSection,
-  },
-  methods: {
-    launchItem() {
-      this.isOpen = !this.isOpen;
-      // Open SideBarSection, passing in items[]
-      // this.$emit('launch', url);
-    },
   },
 };
 </script>

src/components/Workspace/SideBarItem.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="side-bar-item" @click="click()">
+  <div class="side-bar-item">
-    <Icon v-if="icon" :icon="icon" size="small" :url="url" />
+    <Icon v-if="icon" :icon="icon" size="small" />
     <p v-else>{{ title }}</p>
   </div>
 </template>
@@ -8,6 +8,7 @@
 <script>
 
 import Icon from '@/components/LinkItems/ItemIcon.vue';
+import Defaults from '@/utils/defaults';
 
 export default {
   name: 'SideBarItem',
@@ -15,12 +16,21 @@ export default {
   props: {
     icon: String,
     title: String,
-    url: String,
+  },
-    click: Function,
+  mounted() {
+    this.initiateFontAwesome();
   },
   components: {
     Icon,
   },
+  methods: {
+    initiateFontAwesome() {
+      const fontAwesomeScript = document.createElement('script');
+      const faKey = this.config.appConfig.fontAwesomeKey || Defaults.fontAwesomeKey;
+      fontAwesomeScript.setAttribute('src', `https://kit.fontawesome.com/${faKey}.js`);
+      document.head.appendChild(fontAwesomeScript);
+    },
+  },
 };
 </script>
 

src/components/Workspace/SideBarSection.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="sub-side-bar">
-    <div v-for="(item, index) in items" :key="index">
-      <SideBarItem
-        class="item"
-        :icon="item.icon"
-        :title="item.title"
-        :url="item.url"
-        :click="launchItem"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-
-import SideBarItem from '@/components/Workspace/SideBarItem.vue';
-
-export default {
-  name: 'SideBarSection',
-  inject: ['config'],
-  props: {
-    items: Array,
-  },
-  components: {
-    SideBarItem,
-  },
-  methods: {
-    launchItem(url) {
-      this.$emit('launch', url);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '@/styles/media-queries.scss';
-@import '@/styles/style-helpers.scss';
-
-div.sub-side-bar {
-  display: flex;
-  flex-direction: column;
-  background: var(--side-bar-background);
-  color: var(--side-bar-color);
-  border: 1px dashed red;
-  text-align: center;
-  .item:not(:last-child) {
-    border-bottom: 1px dashed var(--side-bar-color);
-  }
-}
-
-</style>

src/styles/color-palette.scss

@@ -31,22 +31,6 @@
   --transparent-white-50: #ffffff80;
   --transparent-white-30: #ffffff4d;
 
-  /* Other Variables */
-  --outline-color: none;
-  --curve-factor: 5px; // Border radius for most components
-  --curve-factor-navbar: 16px; // Border radius for header
-  --dimming-factor: 0.7; // Opacity for semi-transparent components
-
-  /* Settings for specific components */
-  --scroll-bar-width: 8px;
-  --item-group-padding: 5px; // Determines width of item-group outline
-  --item-shadow: 1px 1px 2px #130f23;
-  --item-hover-shadow: 1px 2px 4px #373737;
-  --item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
-  --item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
-  --item-group-shadow: var(--item-shadow);
-  --settings-container-shadow: none;
-
   /* Color variables for specific components
   * all variables are optional, since they inherit initial values from above*
   * Using specific variables makes overriding for custom themes really easy */
@@ -88,5 +72,6 @@
   --about-page-background: #0b1021;
   --about-page-accent: var(--primary);
   --side-bar-background: var(--background-darker);
+  --side-bar-background-lighter: var(--background);
   --side-bar-color: var(--primary);
 }

src/styles/dimensions.scss

@@ -0,0 +1,26 @@
+
+:root {
+  /* General Variables */
+  --outline-color: none;
+  --curve-factor: 5px; // Border radius for most components
+  --curve-factor-navbar: 16px; // Border radius for header
+  --dimming-factor: 0.7; // Opacity for semi-transparent components
+
+  /* Basic Page Components */
+  --scroll-bar-width: 8px;
+  --header-height: 6.3rem;
+
+  /* Section & Item dimensions */
+  --item-group-padding: 5px; // Determines width of item-group outline
+  --item-shadow: 1px 1px 2px #130f23;
+  --item-hover-shadow: 1px 2px 4px #373737;
+  --item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
+  --item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
+  --item-group-shadow: var(--item-shadow);
+
+  /* Settings and config menu */
+  --settings-container-shadow: none;
+
+  /* Workspace View */
+  --side-bar-width: 3.5rem; // The width of the sidebar
+}

src/views/About.vue

@@ -9,6 +9,15 @@
         highly customizable and functianl dashboard, in order to improvde productivity
         and enable easy organisation of running services or web links.
       </p>
+      <p>
+        Dashy is a web-based project with PWA mobile support. It's written in TypeScript,
+        and using the Vue.js framework, with a simple Node.js backend.
+        It can be run in a light-weight Alpine Docker container, with support for
+        healthcheck monitoring, self-updating and automatic restarting. Configuration
+        is done with a single YAML file, that is merged with the application when it
+        is built / compiled. The configuration can me modified using the UI, and then
+        exported back into the main config file.
+      </p>
     </section>
 
     <section>
@@ -42,7 +51,7 @@
         <img class="aht-pic" src="https://i.ibb.co/FnxqTfx/aht-bot-round.png" alt="Alicia Sykes">
       </a>
       Dashy is developed an maintained by <a href="https://aliciasykes.com">Alicia Sykes</a>
-      (<a href="https://github.com/lissy93">@Lissy93</a>), with support from the community.
+      (<a href="https://github.com/lissy93">@Lissy93</a>).
       <ul>
         <li><b>PGP Key</b> - <a href="https://keybase.io/aliciasykes/pgp_keys.asc?fingerprint=0688f8d34587d954e9e51fb8fedb68f55c0283a7"><code>0688 F8D3 4587 D954 E9E5  1FB8 FEDB 68F5 5C02 83A7</code></a></li>
         <li><b>BTC Address</b> - <code>3853bSxupMjvxEYfwGDGAaLZhTKxB2vEVC</code></li>
@@ -92,8 +101,8 @@ article.about {
   background: var(--about-page-background);
   color: var(--about-page-color);
   width: 80%;
-  max-width: 1000px;
+  max-width: 800px;
-  margin: 1rem auto 2.5rem auto;
+  margin: 1rem auto;
   padding: 1rem;
   border: 1px solid var(--about-page-accent);
   border-radius: var(--curve-factor);

src/views/Workspace.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="work-space">
-    <SideBar :sections="sections" @launch="launchService" />
+    <SideBar :sections="sections" />
     <WebContent :url="url" />
   </div>
 </template>
@@ -9,13 +9,11 @@
 
 import SideBar from '@/components/Workspace/SideBar';
 import WebContent from '@/components/Workspace/WebContent';
-import Defaults, { localStorageKeys } from '@/utils/defaults';
 
 export default {
   name: 'Workspace',
   props: {
     sections: Array,
-    appConfig: Object,
   },
   data: () => ({
     url: '',
@@ -24,27 +22,6 @@ export default {
     SideBar,
     WebContent,
   },
-  methods: {
-    launchService(url) {
-      this.url = url;
-    },
-    setTheme() {
-      const theme = localStorage[localStorageKeys.THEME] || this.confTheme || Defaults.theme;
-      const htmlTag = document.getElementsByTagName('html')[0];
-      if (htmlTag.hasAttribute('data-theme')) htmlTag.removeAttribute('data-theme');
-      htmlTag.setAttribute('data-theme', theme);
-    },
-    initiateFontAwesome() {
-      const fontAwesomeScript = document.createElement('script');
-      const faKey = this.appConfig.fontAwesomeKey || Defaults.fontAwesomeKey;
-      fontAwesomeScript.setAttribute('src', `https://kit.fontawesome.com/${faKey}.js`);
-      document.head.appendChild(fontAwesomeScript);
-    },
-  },
-  mounted() {
-    this.setTheme();
-    this.initiateFontAwesome();
-  },
 };
 
 </script>