From 88e1e9cadd60d8ce053c2255e288ae29a674e63c Mon Sep 17 00:00:00 2001 From: Shiny Nematoda Date: Wed, 19 Mar 2025 07:24:09 +0000 Subject: [PATCH] enh: improve compact ui --- src/App.vue | 7 +++++-- src/assets/base.css | 8 ++++---- src/components/AlbumItem.vue | 6 +++--- src/components/Artist.vue | 1 + src/components/Prefs.vue | 18 ++++++++---------- src/components/SongItem.vue | 17 +++++++++++++---- src/stores/misc.js | 23 ++++++++++++++--------- 7 files changed, 48 insertions(+), 32 deletions(-) diff --git a/src/App.vue b/src/App.vue index 72f1e26..ae852d2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -131,10 +131,13 @@ onBeforeMount(() => { if (store.theme) document.body.setAttribute('data-theme', useAutoTheme(store.theme)); - if (store.compact == 'true') document.body.setAttribute('data-compact', ''); + if (store.compact == 'true') document.body.classList.add('compact'); /* Prefers Reduced Motion */ - if (store.prm == 'true' || matchMedia('(prefers-reduced-motion)').matches) + if ( + store.prm !== 'false' && + (store.prm === 'true' || matchMedia('(prefers-reduced-motion)').matches) + ) document.body.classList.add('prm'); /* Set the default locale if set */ diff --git a/src/assets/base.css b/src/assets/base.css index b2b6c0c..470e82f 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -385,7 +385,7 @@ img { display: grid; } @media (max-width: 530px) { - [data-compact] .grid-3 { + body.compact .grid-3 { --col: 2; } } @@ -393,7 +393,7 @@ img { .grid-3 { --col: 2; } - [data-compact] .grid-3 { + body.compact .grid-3 { --col: 3; } } @@ -405,7 +405,7 @@ img { .grid-3 { --col: 3; } - [data-compact] .grid-3 { + body.compact .grid-3 { --col: 4; } } @@ -416,7 +416,7 @@ img { .grid-3 { --col: 4; } - [data-compact] .grid-3 { + body.compact .grid-3 { --col: 5; } } diff --git a/src/components/AlbumItem.vue b/src/components/AlbumItem.vue index b336eeb..544ca2d 100644 --- a/src/components/AlbumItem.vue +++ b/src/components/AlbumItem.vue @@ -50,15 +50,15 @@ defineEmits(['open-album']); cursor: default; } -[data-compact] .card { +body.compact .card { min-height: 12rem; width: 10rem; } -[data-compact] .card-bg { +body.compact .card-bg { width: 7rem; height: 7rem; } -[data-compact] .card-text { +body.compact .card-text { margin-top: 0.25rem; } diff --git a/src/components/Artist.vue b/src/components/Artist.vue index 5f53538..a917223 100644 --- a/src/components/Artist.vue +++ b/src/components/Artist.vue @@ -83,6 +83,7 @@ p { --line: 3; display: -webkit-box; -webkit-line-clamp: var(--line); + line-clamp: var(--line); -webkit-box-orient: vertical; hyphens: auto; margin: 1rem; diff --git a/src/components/Prefs.vue b/src/components/Prefs.vue index a078af5..34796d4 100644 --- a/src/components/Prefs.vue +++ b/src/components/Prefs.vue @@ -78,10 +78,9 @@ function setCodec(codec) { window.audioPlayer.configure('preferredAudioCodecs', codec.split(':')); } -function setPRM(prm) { - setStore('prm', prm); - if (prm) document.body.classList.add('prm'); - else document.body.classList.remove('prm'); +function setStoreAndClass(key, val) { + setStore(key, val); + document.body.classList[val ? 'add' : 'remove'](key); } function setPitch(pitch) { @@ -119,7 +118,7 @@ async function setAuth(e) { } function setStreamApi(e) { - if (e.target.value) store.setItem('streamapi', e.target.value) + if (e.target.value) store.setItem('streamapi', e.target.value); else store.removeItem('streamapi'); } @@ -144,7 +143,7 @@ onMounted(() => { getStoreBool('next', next, true); getStoreBool('hls', hls, false); getStoreBool('compact', compact, false); - getStoreBool('prm', prm, false); + getStoreBool('prm', prm, matchMedia('(prefers-reduced-motion)').matches); getStoreBool('cc', cc, false); }); @@ -175,7 +174,7 @@ onMounted(() => { name="pref-chk-compact" id="pref-chk-compact" class="input" - @change="setStore('compact', $event.target.checked)" + @change="setStoreAndClass('compact', $event.target.checked)" v-model="compact" /> @@ -186,7 +185,7 @@ onMounted(() => { name="pref-chk-prm" id="pref-chk-prm" class="input" - @change="setPRM($event.target.checked)" + @change="setStoreAndClass('prm', $event.target.checked)" v-model="prm" /> @@ -418,8 +417,7 @@ onMounted(() => { type="text" @change="setStreamApi" :value="getStore('streamapi') || ''" - placeholder="Default (Piped API)" - /> + placeholder="Default (Piped API)" />
diff --git a/src/components/SongItem.vue b/src/components/SongItem.vue index e265f49..4c403c5 100644 --- a/src/components/SongItem.vue +++ b/src/components/SongItem.vue @@ -186,7 +186,7 @@ span.content { padding: 1rem; flex-direction: column; align-items: flex-start; - flex-basis: calc(calc(100% - 120px) - 4rem); + flex-grow: 1; } span.bi-three-dots-vertical { margin: 2rem; @@ -214,15 +214,24 @@ button.bi-three-dots-vertical { color: indianred; } -[data-compact] .card { +body.compact .card { margin: 0; + padding: 0 0.5rem; } -[data-compact] .song-bg { +body.compact .song-bg { width: 70px; height: 70px; } +body.compact .content :is(h4, a) { + overflow: hidden; + line-clamp: 1; + -webkit-line-clamp: 1; + display: -webkit-box; + hyphens: auto; + -webkit-box-orient: vertical; +} -.prm .card { +body.prm .card { margin: 0; padding: 0.5rem; } diff --git a/src/stores/misc.js b/src/stores/misc.js index a8b6db6..086baef 100644 --- a/src/stores/misc.js +++ b/src/stores/misc.js @@ -3,7 +3,7 @@ import { defineStore } from 'pinia'; import en from '@/locales/en.json'; -export const SUPPORTED_LOCALES = [ +export const SUPPORTED_LOCALES = Object.freeze([ { code: 'ar', name: 'عربي', @@ -147,7 +147,7 @@ export const SUPPORTED_LOCALES = [ code: 'zh_Hant', name: '中文（繁體)', }, -]; +]); export const useNav = defineStore('nav', () => { const state = reactive({ @@ -176,21 +176,26 @@ export const useI18n = defineStore('i18n', () => { } function setupLocale(code) { + if (code === 'en') return setLocale('en'); if (SUPPORTED_LOCALES.some(i => i.code == code)) import(`@/locales/${code}.json`) .then(mod => mod.default) .then(mod => { map.value[code] = mod; - locale.value = code; - localStorage.locale ??= code; - if (localStorage.to_cc == 'true') { - const cc = SUPPORTED_LOCALES.find(i => i.code == code).cc; - if (cc) localStorage.cc = cc; - else localStorage.cc = ''; - } else localStorage.cc = ''; + setLocale(code); }); } + function setLocale(code) { + locale.value = code; + localStorage.locale ??= code; + if (localStorage.to_cc == 'true') { + const cc = SUPPORTED_LOCALES.find(i => i.code == code).cc; + if (cc) localStorage.cc = cc; + else localStorage.cc = ''; + } else localStorage.cc = ''; + } + return { locale, map, t, setupLocale }; });