From 5130f85300acc0b3af2362ed076a88e5cf702813 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sat, 17 Sep 2022 14:24:05 +0300
Subject: [PATCH] feat: check screen size to enable or disable settings

+ redesign (again!) the playlist cards
---
 src/App.vue                                   |  5 +--
 src/assets/scss/Global/app-grid.scss          |  9 +++--
 src/assets/scss/_variables.scss               |  2 +-
 src/components/PlaylistsList/PlaylistCard.vue | 36 +++++++++----------
 src/components/SettingsView/Group.vue         |  2 +-
 src/composables/useBreakpoints.ts             | 10 ++++--
 src/interfaces/settings.ts                    |  2 +-
 src/settings/general/extend-width.ts          |  3 +-
 src/settings/general/now-playing.ts           |  2 +-
 src/settings/general/sidebar.ts               |  2 +-
 src/stores/content-width.ts                   |  3 +-
 src/stores/settings/index.ts                  |  8 +++--
 src/views/PlaylistList.vue                    |  2 +-
 13 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 02828a4e..75fe3efa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,8 +8,9 @@
     :class="{
       showAltNP: settings.use_sidebar && settings.use_alt_np,
       disableSidebar: !settings.use_sidebar,
-      extendWidth: settings.extend_width,
+      extendWidth: settings.extend_width && settings.extend_width_enabled,
       isSmall: !xl,
+      addBorderRight: xxl,
     }"
   >
     <LeftSidebar />
@@ -33,7 +34,7 @@ import useQStore from "@/stores/queue";
 import useModalStore from "@/stores/modal";
 import useContextStore from "@/stores/context";
 import useSettingsStore from "@/stores/settings";
-import { xl } from "./composables/useBreakpoints";
+import { xl, xxl } from "./composables/useBreakpoints";
 import handleShortcuts from "@/composables/useKeyboard";
 import { readLocalStorage, writeLocalStorage } from "@/utils";
 
diff --git a/src/assets/scss/Global/app-grid.scss b/src/assets/scss/Global/app-grid.scss
index fb884abd..dc63bc4c 100644
--- a/src/assets/scss/Global/app-grid.scss
+++ b/src/assets/scss/Global/app-grid.scss
@@ -13,8 +13,8 @@
   margin: 0 auto;
   margin-top: -$small;
   max-width: 1720px;
-  padding-right: $medium;
-  border-right: solid 1px $gray4;
+  // padding-right: $medium;
+  // border-right: solid 1px $gray4;
   padding-top: $small;
 }
 
@@ -24,6 +24,11 @@
   max-width: 100%;
 }
 
+#app-grid.addBorderRight {
+  border-right: solid 1px $gray4;
+  padding-right: $medium;
+}
+
 #app-grid.isSmall {
   grid-template-columns: min-content 1fr;
   grid-template-areas:
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index aaa19b8a..810e3ecc 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -45,7 +45,7 @@ $secondary: $gray5;
 $danger: $red;
 $track-hover: $gray4;
 $context: black;
-$playlist-card-bg: #46474C;
+$playlist-card-bg: $gray4;
 
 // SVG COLORS
 $default: $accent;
diff --git a/src/components/PlaylistsList/PlaylistCard.vue b/src/components/PlaylistsList/PlaylistCard.vue
index a5595af3..69232b4d 100644
--- a/src/components/PlaylistsList/PlaylistCard.vue
+++ b/src/components/PlaylistsList/PlaylistCard.vue
@@ -1,21 +1,23 @@
 <template>
   <router-link
-    :to="{ name: 'PlaylistView', params: { pid: props.playlist.playlistid } }"
-    :playlist="props.playlist"
+    :to="{ name: 'PlaylistView', params: { pid: playlist.playlistid } }"
     class="p-card rounded noscroll"
   >
-    <img :src="imguri + props.playlist.thumb" />
-    <div class="overlay rounded pad-lg">
+    <img
+      :src="imguri + playlist.thumb"
+      class="rounded border"
+      :class="{ noimg: !playlist.thumb }"
+    />
+    <div class="overlay rounded">
       <div class="p-name ellip">{{ playlist.name }}</div>
       <div class="p-count">
-        {{ playlist.count + ` ${playlist.count == 1 ? "Track" : "Tracks"}` }}
+        {{ playlist.count + ` ${playlist.count === 1 ? "Track" : "Tracks"}` }}
       </div>
     </div>
   </router-link>
 </template>
 
 <script setup lang="ts">
-import play from "@/composables/usePlayFrom";
 import { paths } from "../../config";
 import { Playlist } from "../../interfaces";
 
@@ -28,28 +30,24 @@ const props = defineProps<{
 
 <style lang="scss">
 .p-card {
-  position: relative;
   background-color: $playlist-card-bg;
-  height: 10rem;
+  display: grid;
+  grid-template-rows: 1fr max-content;
+  padding: 1rem;
+  gap: $small;
 
   img {
     width: 100%;
-    height: 100%;
-    aspect-ratio: 1/1.2;
+    aspect-ratio: 1;
     object-fit: cover;
     transition: all 0.5s ease;
   }
 
+  img.noimg {
+    outline: 1px solid $gray2;
+  }
+
   .overlay {
-    position: absolute;
-    top: 0;
-    background-image: linear-gradient(
-      to top,
-      rgba(0, 0, 0, 0.55),
-      transparent 60%
-    );
-    height: 100%;
-    width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
diff --git a/src/components/SettingsView/Group.vue b/src/components/SettingsView/Group.vue
index ab549041..712958b5 100644
--- a/src/components/SettingsView/Group.vue
+++ b/src/components/SettingsView/Group.vue
@@ -15,7 +15,7 @@
         </div>
         <div class="options">
           <Switch
-            v-if="setting.type == SettingType.switch"
+            v-if="setting.type == SettingType.binary"
             @click="setting.action()"
             :state="setting.source()"
           />
diff --git a/src/composables/useBreakpoints.ts b/src/composables/useBreakpoints.ts
index 9f7175e1..03c182aa 100644
--- a/src/composables/useBreakpoints.ts
+++ b/src/composables/useBreakpoints.ts
@@ -1,7 +1,11 @@
-import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
+import { useBreakpoints } from "@vueuse/core";
 
-const breakpoints = useBreakpoints(breakpointsTailwind);
+const breakpoints = useBreakpoints({
+  xl: 1536,
+  xxl: 1720,
+});
 
 const xl = breakpoints.greater("xl");
+const xxl = breakpoints.greater("xxl");
 
-export { xl };
+export { xl, xxl };
diff --git a/src/interfaces/settings.ts b/src/interfaces/settings.ts
index 76ccf0be..8ce63cfd 100644
--- a/src/interfaces/settings.ts
+++ b/src/interfaces/settings.ts
@@ -2,7 +2,7 @@ export enum SettingType {
   text,
   select,
   multiselect,
-  switch,
+  binary,
 }
 
 export interface SettingOption {
diff --git a/src/settings/general/extend-width.ts b/src/settings/general/extend-width.ts
index d296588a..6654221d 100644
--- a/src/settings/general/extend-width.ts
+++ b/src/settings/general/extend-width.ts
@@ -5,9 +5,10 @@ const settings = useSettingsStore;
 
 const extend_to_full_width: Setting = {
   title: "Extend app to full screen width",
-  type: SettingType.switch,
+  type: SettingType.binary,
   source: () => settings().extend_width,
   action: () => settings().toggleExtendWidth(),
+  inactive: () => !settings().extend_width_enabled,
 };
 
 export default [extend_to_full_width];
diff --git a/src/settings/general/now-playing.ts b/src/settings/general/now-playing.ts
index 32347bc0..a0841517 100644
--- a/src/settings/general/now-playing.ts
+++ b/src/settings/general/now-playing.ts
@@ -5,7 +5,7 @@ const settings = useSettingsStore;
 
 const use_alt_np: Setting = {
   title: "Use alternate now playing card",
-  type: SettingType.switch,
+  type: SettingType.binary,
   source: () => settings().use_alt_np,
   inactive: () => settings().disable_show_alt_np,
   action: () => settings().toggleUseRightNP(),
diff --git a/src/settings/general/sidebar.ts b/src/settings/general/sidebar.ts
index b62cd298..977ed1dd 100644
--- a/src/settings/general/sidebar.ts
+++ b/src/settings/general/sidebar.ts
@@ -5,7 +5,7 @@ const settings = useSettingsStore;
 
 const use_sidebar: Setting = {
   title: "Use right sidebar",
-  type: SettingType.switch,
+  type: SettingType.binary,
   source: () => settings().use_sidebar,
   action: () => settings().toggleDisableSidebar(),
 };
diff --git a/src/stores/content-width.ts b/src/stores/content-width.ts
index 63092b6c..cfbe528d 100644
--- a/src/stores/content-width.ts
+++ b/src/stores/content-width.ts
@@ -2,9 +2,10 @@ import { computed } from "vue";
 import { ref } from "@vue/reactivity";
 
 const content_width = ref(0);
+const window_width = ref(0);
 
 const isSmall = computed(() => {
   return content_width.value < 700;
 });
 
-export { content_width, isSmall };
+export { content_width, window_width, isSmall };
diff --git a/src/stores/settings/index.ts b/src/stores/settings/index.ts
index 415fd242..1f17121e 100644
--- a/src/stores/settings/index.ts
+++ b/src/stores/settings/index.ts
@@ -1,3 +1,4 @@
+import { xxl, xl } from "@/composables/useBreakpoints";
 import { defineStore } from "pinia";
 
 export default defineStore("settings", {
@@ -20,17 +21,20 @@ export default defineStore("settings", {
   },
   getters: {
     show_alt_np(): boolean {
-      return this.use_sidebar && this.use_alt_np;
+      return xl.value && this.use_sidebar && this.use_alt_np;
     },
     show_default_np(): boolean {
       return !this.show_alt_np;
     },
     disable_show_alt_np(): boolean {
-      return !this.use_sidebar;
+      return !xl.value || !this.use_sidebar;
     },
     hide_queue_page(): boolean {
       return this.use_sidebar;
     },
+    extend_width_enabled(): boolean {
+     return xxl.value
+    },
   },
   persist: true,
 });
diff --git a/src/views/PlaylistList.vue b/src/views/PlaylistList.vue
index 938d6db0..7b71017a 100644
--- a/src/views/PlaylistList.vue
+++ b/src/views/PlaylistList.vue
@@ -24,7 +24,7 @@ const pStore = usePStore();
   scrollbar-color: $gray2 transparent;
 
   .grid {
-    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
     gap: 1rem;
   }
 }