fix banner readability

vuetifyjs · Sep 16, 2024 · 8372b58 · 8372b58
1 parent 3aa4fde
commit 8372b58
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 11 deletions.
diff --git a/lib/components/notifications/VoNotificationsBanner.vue b/lib/components/notifications/VoNotificationsBanner.vue
@@ -63,7 +63,6 @@
           v-if="banner.metadata.closable"
           class="ms-6 me-2"
           density="comfortable"
-          :disabled="demo"
           icon="$clear"
           size="small"
           variant="plain"
@@ -99,6 +98,7 @@
   })
 
   function onClose () {
+    if (props.demo) return
     if (!banner.value) return
 
     user.notifications.last.banner.push(banner.value.slug)
@@ -152,7 +152,36 @@
 </script>
 
 <style scoped>
-.v-app-bar :deep(.v-toolbar__content) {
-  backdrop-filter: blur(3px);
+.v-app-bar :deep(.v-toolbar__image)::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  backdrop-filter: blur(calc(v-bind('banner?.metadata.bg_blur') * 1px));
+  /* https://non-boring-gradients.netlify.app/
+     15deg, easeOutQuad, rgba(0,0,0,0.65) to rgba(0,0,0,0) */
+  background: linear-gradient(
+    15deg,
+    rgb(0% 0% 0% / 0.65) 0%,
+    rgb(0% 0% 0% / 0.5712890625) 6.25%,
+    rgb(0% 0% 0% / 0.49765625) 12.5%,
+    rgb(0% 0% 0% / 0.4291015625) 18.75%,
+    rgb(0% 0% 0% / 0.36562500000000003) 25%,
+    rgb(0% 0% 0% / 0.3072265625) 31.25%,
+    rgb(0% 0% 0% / 0.25390625) 37.5%,
+    rgb(0% 0% 0% / 0.20566406250000002) 43.75%,
+    rgb(0% 0% 0% / 0.16249999999999998) 50%,
+    rgb(0% 0% 0% / 0.12441406249999998) 56.25%,
+    rgb(0% 0% 0% / 0.09140625000000002) 62.5%,
+    rgb(0% 0% 0% / 0.0634765625) 68.75%,
+    rgb(0% 0% 0% / 0.04062500000000002) 75%,
+    rgb(0% 0% 0% / 0.022851562499999978) 81.25%,
+    rgb(0% 0% 0% / 0.010156249999999978) 87.5%,
+    rgb(0% 0% 0% / 0.002539062500000022) 93.75%,
+    rgb(0% 0% 0% / 0) 100%
+  );
+}
+.v-list-item-subtitle {
+  color: currentColor;
+  opacity: var(--v-high-emphasis-opacity);
 }
 </style>
diff --git a/lib/stores/banners.ts b/lib/stores/banners.ts
@@ -30,6 +30,7 @@ export interface Banner {
     attributes: Record<string, any>
     start_date: string
     end_date: string
+    bg_blur: number | null
     images: {
       bg: {
         url: string
@@ -79,6 +80,7 @@ export const DEFAULT_BANNER: Banner = {
     attributes: {},
     start_date: '',
     end_date: '',
+    bg_blur: null,
     images: {
       bg: {
         url: '',

diff --git a/src/components/banners/BannersForm.vue b/src/components/banners/BannersForm.vue
@@ -151,11 +151,14 @@
           </v-col>
 
           <v-col cols="4">
-            <v-text-field
-              v-model.number="banners.record.metadata.height"
+            <v-number-input
+              v-model="banners.record.metadata.height"
               clearable
+              control-variant="stacked"
               label="Height"
+              :min="0"
               name="metadata[height]"
+              suffix="px"
               type="number"
             />
           </v-col>
@@ -225,12 +228,27 @@
               />
             </div>
 
-            <v-file-input
-              accept="image/*"
-              label="Upload background"
-              name="metadata[images][bg]"
-              @update:model-value="onUpdateBg"
-            />
+            <v-row dense>
+              <v-col>
+                <v-file-input
+                  accept="image/*"
+                  label="Upload background"
+                  name="metadata[images][bg]"
+                  @update:model-value="onUpdateBg"
+                />
+              </v-col>
+              <v-col cols="auto">
+                <v-number-input
+                  v-model="banners.record.metadata.bg_blur"
+                  control-variant="stacked"
+                  label="Blur"
+                  :max="24"
+                  :min="0"
+                  :step="1"
+                  suffix="px"
+                />
+              </v-col>
+            </v-row>
           </v-col>
         </v-row>
       </v-card-text>

diff --git a/vite.config.mts b/vite.config.mts
@@ -65,6 +65,9 @@ export default defineConfig({
       vueTemplate: true,
     }),
   ],
+  optimizeDeps: {
+    exclude: ['vuetify'],
+  },
   define: { 'process.env': {} },
   resolve: {
     alias: {