tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move dimension-related CSS vars to their own file

This commit is contained in:
Alicia Sykes 2021-06-17 22:24:34 +01:00
parent c92083f88f
commit 69dbb4d3ad
9 changed files with 56 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/backup-restore.md
View File

@ -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

1
src/components/Settings/ThemeSelector.vue
View File

@ -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');

20
src/components/Workspace/SideBar.vue
View File

@ -1,13 +1,7 @@
<template>
<nav class="side-bar">
<div v-for="(section, index) in sections" :key="index">
<SideBarItem
class="item"
:icon="section.icon"
:title="section.name"
:click="launchItem"
/>
<SideBarSection v-if="isOpen" :items="section.items" />
<SideBarItem class="item" :icon="section.icon" :title="section.title" />
</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>

18
src/components/Workspace/SideBarItem.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="side-bar-item" @click="click()">
<Icon v-if="icon" :icon="icon" size="small" :url="url" />
<div class="side-bar-item">
<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>

52
src/components/Workspace/SideBarSection.vue
View File

@ -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>

17
src/styles/color-palette.scss
View File

@ -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);
}

26
src/styles/dimensions.scss Normal file
View File

@ -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
}

15
src/views/About.vue
View File

@ -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;
margin: 1rem auto 2.5rem auto;
max-width: 800px;
margin: 1rem auto;
padding: 1rem;
border: 1px solid var(--about-page-accent);
border-radius: var(--curve-factor);

25
src/views/Workspace.vue
View File

@ -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>