From 5af6b1175c66dda19d4e692d34276db1b8cd016a Mon Sep 17 00:00:00 2001 From: dskvr Date: Thu, 12 Jan 2023 13:34:08 +0100 Subject: [PATCH 1/4] add dark mode --- package.json | 3 + src/components/layout/HeaderComponent.vue | 4 + src/components/relays/blocks/MapSummary.vue | 16 +-- .../relays/blocks/RelaysResultTable.vue | 2 +- src/components/relays/nav/RelaysFindNav.vue | 2 +- src/components/relays/pages/RelaysFind.vue | 2 +- src/components/relays/pages/RelaysSingle.vue | 30 ++--- src/styles/main.scss | 82 ++++++++++++ yarn.lock | 117 +++++++++++++++--- 9 files changed, 209 insertions(+), 49 deletions(-) diff --git a/package.json b/package.json index b94dbdf..7735832 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@heroicons/vue": "2.0.13", "@popperjs/core": "2.11.6", "@vue-leaflet/vue-leaflet": "0.6.1", + "@vueuse/core": "9.10.0", "@vueuse/head": "1.0.22", "array-timsort": "1.0.3", "country-code-emoji": "2.3.0", @@ -48,6 +49,7 @@ "vue-meta": "3.0.0-alpha.8", "vue-router": "4.1.6", "vue-tailwind": "2.5.1", + "vue-use": "0.2.0", "vue3-storage": "0.1.11", "webpack": "5.75.0", "write-yaml-file": "4.2.0" @@ -80,6 +82,7 @@ "style-loader": "3.3.1", "tailwindcss": "3.2.4", "vue-cli-plugin-yaml-loader": "~1.0.0", + "vue-template-compiler": "2.7.14", "webpack-cli": "5.0.0", "yaml-loader": "^0.6.0" }, diff --git a/src/components/layout/HeaderComponent.vue b/src/components/layout/HeaderComponent.vue index 3f28f94..95787c1 100644 --- a/src/components/layout/HeaderComponent.vue +++ b/src/components/layout/HeaderComponent.vue @@ -53,6 +53,8 @@
+ + @@ -167,6 +169,7 @@ import UserLib from '@/shared/user-lib.js' // import PreferencesComponent from '@/components/PreferencesComponent.vue' import AuthComponent from '@/components/user/AuthComponent.vue' +import DarkMode from '@/components/partials/DarkMode.vue' import {version} from '../../../package.json' @@ -177,6 +180,7 @@ export default defineComponent({ components: { // PreferencesComponent, AuthComponent, + DarkMode, Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems, Bars3Icon, XMarkIcon }, diff --git a/src/components/relays/blocks/MapSummary.vue b/src/components/relays/blocks/MapSummary.vue index a7e342b..5cfd568 100644 --- a/src/components/relays/blocks/MapSummary.vue +++ b/src/components/relays/blocks/MapSummary.vue @@ -51,7 +51,7 @@ - + @@ -306,7 +306,7 @@ export default defineComponent({ \ No newline at end of file diff --git a/src/shared/layout.js b/src/shared/layout.js new file mode 100644 index 0000000..4a1fb76 --- /dev/null +++ b/src/shared/layout.js @@ -0,0 +1,39 @@ +import tw from '../../tailwind.config.js' + +/** + * + * Find out if a tailwind screen value matches the current window + * + * @param {string} screen + * + * @return {Object|Boolean} + */ +export const screenIs = (screen = '') => { + // "Theme" is an alias to where you keep your tailwind.config.js - most likely your project root + const screens = tw.theme.extend.screens + + console.log(screens) + + // create a keyed object of screens that match + const matches = Object.entries(screens).reduce((results, [name, size]) => { + const mediaQuery = typeof size === 'string' ? `(min-width: ${size})` : `(max-width: ${size.max})`; + + results[name] = window.matchMedia(mediaQuery).matches; + + return results; + }, {}); + + // show all matches when there is no screen choice + if (screen === '') { + return matches; + } + + // invalid screen choice + if (!screens[screen]) { + console.error(`No match for "${screen}"`); + + return false; + } + + return matches[screen]; +}; \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index fca29a8..c93ae67 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -7,11 +7,6 @@ --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7); } -body[theme=dark] { - -} - - body[theme=dark] { background: #16171d; color: #fff; From 8f070c11751675aaa6d26749f8a3327cdd1bf163 Mon Sep 17 00:00:00 2001 From: dskvr Date: Thu, 12 Jan 2023 13:59:07 +0100 Subject: [PATCH 3/4] fix dark mode toggle btn --- src/components/layout/HeaderComponent.vue | 89 ++++++++++------------- src/components/partials/DarkMode.vue | 6 +- src/styles/main.scss | 9 ++- 3 files changed, 52 insertions(+), 52 deletions(-) diff --git a/src/components/layout/HeaderComponent.vue b/src/components/layout/HeaderComponent.vue index 95787c1..2dca6f6 100644 --- a/src/components/layout/HeaderComponent.vue +++ b/src/components/layout/HeaderComponent.vue @@ -3,59 +3,50 @@
-
- - - Open main menu - -
- - nostr.watch - {{ version }} - -
- +
+ + + Open main menu + +
+ + nostr.watch + {{ version }} + +
+ Relays + + + Feedback + + + Git + +
-
- - +
+
+ + diff --git a/src/components/partials/DarkMode.vue b/src/components/partials/DarkMode.vue index fffea61..e76feed 100644 --- a/src/components/partials/DarkMode.vue +++ b/src/components/partials/DarkMode.vue @@ -1,10 +1,12 @@ diff --git a/src/components/relays/pages/RelaysFind.vue b/src/components/relays/pages/RelaysFind.vue index 62d1e7e..6887958 100644 --- a/src/components/relays/pages/RelaysFind.vue +++ b/src/components/relays/pages/RelaysFind.vue @@ -7,8 +7,10 @@ :activeSubsectionProp="activeSubsection" />
-
@@ -145,6 +147,7 @@ export default defineComponent({ }, async mounted() { + console.log('map expanded', this.store.layout.mapIsExpanded, 'is dark', localStorage.getItem('isDark')) //console.log("findrelays mounted", this.results) this.navSubsection.forEach( item => this.relaysCount[item.slug] = 0 ) //move this @@ -168,6 +171,9 @@ export default defineComponent({ return this.store.relays.getAll.filter( (relay) => this.results?.[relay]?.aggregate == subsection).length } }, + isMapDark: function(){ + // return this.store.layout.mapIsExpanded && this.$storage.('isDark') == true + }, parseHash }), diff --git a/src/styles/main.scss b/src/styles/main.scss index 4d58bcc..2a2b1f2 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -12,11 +12,17 @@ height:32px; } +#subsection_header { + background-color: rgba(255,255,255, .5) +} + body[theme=dark] { background: #16171d; color: #fff; - + #subsection_header { + background-color: rgba(22, 23, 29, .5) + } #relays_list_wrapper { @apply bg-black/20 rounded-lg