@necrolab/dashboard 0.5.20 → 0.5.22

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.20",
+    "version": "0.5.22",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && vite build && npx workbox-cli generateSW workbox-config.cjs",

package/src/components/Filter/Filter.vue

@@ -292,15 +292,7 @@ props.filterBuilder.onUpdate(() => {
 
 <style scoped>
 .filter-card {
-    @apply bg-dark-500 border border-dark-625/30 relative mb-2 transition-all duration-200;
-}
-
-.filter-card:hover {
-    transform: scale(1.03);
-}
-
-.filter-card:active {
-    transform: scale(0.98);
+    @apply bg-dark-500 border border-dark-625/30 relative mb-2 transition-colors duration-200;
 }
 
 .filter-card:hover:not(.expanded-filter) {
@@ -353,17 +345,29 @@ props.filterBuilder.onUpdate(() => {
 
 .drag-btn {
     @apply text-light-500;
+    transition: all 0.2s ease;
 
     &:hover {
         @apply bg-dark-300 border-dark-550 text-yellow-400 shadow-md;
+        transform: scale(1.1);
+    }
+
+    &:active {
+        transform: scale(0.95);
     }
 }
 
 .delete-btn {
     @apply bg-error-500/30 border-error-400/50 text-error-300;
+    transition: all 0.2s ease;
 
     &:hover {
         @apply bg-error-400/80 border-error-500 text-white shadow-md;
+        transform: scale(1.1);
+    }
+
+    &:active {
+        transform: scale(0.95);
     }
 }
 

package/src/libs/Filter.js

@@ -3,8 +3,8 @@ const log = (...args) => DEBUG && console.log("[filter]", ...args);
 
 const colors = {
     HIGHLIGHT: "#d3f8e2",
-    SELECTED: "#a9def9",
-    SELECTED_EXPANDED: "#6bb6ff",
+    SELECTED: "#7bc999",
+    SELECTED_EXPANDED: "#a0ddb5",
     EXCLUDED: "#f694c1",
     EXCLUDED_EXPANDED: "#f472b6",
     UNSELECTABLE: "#311432"
@@ -363,14 +363,16 @@ export default class FilterBuilder {
         this.filters.forEach((filter) => {
             if (!this.isForCurrentEvent(filter)) return;
 
-            const tryFindRealName = Object.entries(gaSectionNameMapping).find(
-                ([, v]) => v === filter.section && v.includes(" ")
+            // Try to find the short name (attribute name) from the real name (stored in filter)
+            const shortName = Object.entries(gaSectionNameMapping).find(
+                ([, v]) => v === filter.section
             )?.[0];
 
-            if (tryFindRealName) {
-                log(`Real name for ${filter.section}: ${tryFindRealName}`);
-            } else {
-                log(filter.section, "is already real name", gaSectionNameMapping);
+            // Check if this is a GA section by looking for paths with this name attribute
+            const isGA = shortName && document.querySelectorAll(`path[name="${shortName}"][generaladmission="true"]`)?.length > 0;
+
+            if (shortName && isGA) {
+                log(`GA section detected: ${filter.section} -> short name: ${shortName}`);
             }
 
             const type = this.getFilterType(filter);
@@ -386,11 +388,11 @@ export default class FilterBuilder {
                 case this.filterTypes.NORMAL:
                     // If it has no 'rows' property
                     if (!Array.isArray(filter.rows)) {
-                        const isGA = document.querySelectorAll(`path[section='${filter.section}']`)?.length === 0;
-
-                        if (isGA && tryFindRealName) {
-                            this.cssClasses += `.svg-wrapper path[name="${tryFindRealName}"] {fill: ${color} !important;}\n`;
+                        if (isGA && shortName) {
+                            // GA sections use 'name' attribute and 'fill' for styling
+                            this.cssClasses += `.svg-wrapper path[name="${shortName}"][generaladmission="true"] {fill: ${color} !important;}\n`;
                         } else {
+                            // Regular sections use 'section' attribute and 'stroke' for styling
                             this.cssClasses += `.svg-wrapper path[section="${filter.section}"] {stroke: ${color} !important;}\n`;
                         }
                     } else {

package/src/views/FilterBuilder.vue

@@ -1,18 +1,19 @@
 <template>
     <div class="flex w-full flex-col">
-        <div class="page-header">
+        <div class="page-header flex-wrap gap-3">
             <div class="page-header-card flex-shrink-0">
                 <FilterIcon />
                 <h4>Filter creator</h4>
             </div>
-            <div class="unified-search-group flex w-auto items-center">
+            <div class="unified-search-group flex w-full flex-1 items-center md:w-auto md:flex-initial md:min-w-64">
                 <input
-                    class="h-10 w-32 flex-1 px-3 text-sm text-white placeholder-light-500 sm:w-48 md:w-64"
+                    class="flex-1 h-10 px-3 text-sm text-white placeholder-light-500"
                     placeholder="Event ID"
                     v-model="eventId"
                     aria-label="Event ID" />
                 <button
-                    class="transition-standard hover:bg-dark-450 flex h-10 w-9 flex-shrink-0 items-center justify-center bg-dark-400 text-white"
+                    class="hover:bg-dark-450 flex h-10 w-10 flex-shrink-0 items-center justify-center bg-dark-400 text-white"
+                    style="transition: all 0.2s ease"
                     @click="updateShownVenue"
                     aria-label="Load venue">
                     <ReloadIcon class="icon-md" />
@@ -21,26 +22,29 @@
         </div>
 
         <div
-            class="mb-3 flex flex-1 flex-col overflow-hidden rounded border border-dark-650 bg-dark-400 p-3 shadow-sm md:mb-4">
-            <div class="flex h-full w-full flex-col gap-3 lg:flex-row lg:gap-4">
+            class="mb-3 flex flex-1 flex-col overflow-hidden rounded border border-dark-650 bg-dark-400 p-2 shadow-sm md:p-3 md:mb-4"
+            style="max-height: calc(100vh - 200px);">
+            <div class="flex h-full w-full flex-col gap-2 md:gap-3 lg:flex-row lg:gap-4">
                 <div
-                    class="min-h-75 lg:min-h-125 relative flex w-full min-w-0 flex-col overflow-hidden rounded-lg lg:w-3/5">
-                    <div v-if="svg" class="flex-gap-2 mb-2 items-center">
+                    class="relative flex w-full min-w-0 flex-col overflow-hidden rounded-lg flex-1 lg:w-3/5 svg-container"
+                    :class="{ 'has-svg': svg }">
+                    <div v-if="svg" class="flex-gap-2 mb-2 flex-shrink-0 items-center">
                         <button @click="handleZoom(true)" class="btn-icon-small" aria-label="Zoom in">+</button>
                         <button @click="handleZoom(false)" class="btn-icon-small" aria-label="Zoom out">-</button>
                         <button @click="handleZoom('r')" class="btn-icon-small" aria-label="Reset zoom">
                             <ReloadIcon class="icon-md text-white" />
                         </button>
                     </div>
-                    <div class="selecto-wrapper flex-1 overflow-hidden">
+                    <div class="selecto-wrapper flex-1 overflow-hidden" style="max-height: 100%;">
                         <div
                             v-if="svg"
-                            class="hidden-scrollbars min-h-87.5 relative h-full w-full overflow-auto rounded border border-dark-550 bg-dark-500 p-2 shadow">
+                            class="hidden-scrollbars relative h-full w-full overflow-auto rounded border border-dark-550 bg-dark-500 p-1 md:p-2 shadow">
                             <div class="svg-wrapper" id="svg-wrapper" v-html="svg"></div>
                         </div>
                         <div
                             v-else
-                            class="min-h-87.5 relative flex h-full w-full items-center justify-center rounded border border-dark-550 bg-dark-500 p-2 shadow">
+                            class="relative flex h-full w-full items-center justify-center rounded border border-dark-550 bg-dark-500 p-2 shadow"
+                            style="min-height: 200px;">
                             <div class="text-center">
                                 <FilterIcon class="empty-state-icon mx-auto" />
                                 <p class="text-sm text-light-400">No Map</p>
@@ -51,8 +55,8 @@
                         </div>
                     </div>
                 </div>
-                <div class="min-h-75 lg:min-h-125 flex w-full min-w-0 flex-col lg:w-2/5">
-                    <div class="mb-2 flex flex-shrink-0 flex-wrap items-center gap-2 text-white" v-if="hasLoaded">
+                <div class="flex w-full min-w-0 flex-col flex-1 lg:w-2/5 filters-container">
+                    <div class="mb-2 flex flex-shrink-0 flex-wrap items-center gap-1.5 md:gap-2 text-white text-xs md:text-sm" v-if="hasLoaded">
                         <PriceSortToggle
                             :current="filterBuilder.globalFilter.priceSort"
                             class="smooth-hover h-8"
@@ -71,8 +75,9 @@
                             placeholder="999" />
                     </div>
                     <div
-                        class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border border-dark-550 bg-dark-500 shadow-sm">
-                        <div class="flex-shrink-0 border-b border-dark-550 bg-dark-300 px-4 py-3 text-xs text-white">
+                        class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border border-dark-550 bg-dark-500 shadow-sm"
+                        style="max-height: 100%;">
+                        <div class="flex-shrink-0 border-b border-dark-550 bg-dark-300 px-2 md:px-4 py-2 md:py-3 text-xs text-white">
                             <div class="flex w-full items-center justify-between gap-2">
                                 <div class="flex-gap-2 items-center">
                                     <span class="text-sm font-medium text-white">Filters</span>
@@ -98,8 +103,8 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="hidden-scrollbars flex-1 overflow-auto bg-dark-400">
-                            <draggable
+                        <div class="hidden-scrollbars flex-1 overflow-y-auto overflow-x-hidden bg-dark-400" style="max-height: 100%; min-height: 150px;">
+                            <Draggable
                                 v-if="filterBuilder.filters.length"
                                 v-model="draggableFilters"
                                 handle=".handle"
@@ -117,7 +122,7 @@
                                         :filterBuilder="filterBuilder"
                                         class="!p-1 !text-xs" />
                                 </template>
-                            </draggable>
+                            </Draggable>
                             <div v-else class="empty-state flex flex-col items-center justify-center py-8 text-center">
                                 <FilterIcon class="empty-state-icon" />
                                 <p class="text-sm text-light-400">No filters yet</p>
@@ -129,9 +134,10 @@
                         <button
                             @click="addWildcardFilter"
                             :disabled="hasWildcardFilter"
-                            class="filter-wildcard-btn"
+                            class="filter-action-btn"
                             :title="hasWildcardFilter ? 'Wildcard filter already exists' : 'Add wildcard filter'">
-                            * Wildcard
+                            <WildcardIcon class="h-3 w-3 flex-shrink-0" />
+                            <span>* Wildcard</span>
                         </button>
                         <button @click="ui.toggleModal('preview-filter')" class="filter-action-btn">
                             <CameraIcon class="h-3 w-3" />
@@ -149,11 +155,11 @@
 </template>
 
 <script setup>
-import draggable from "vuedraggable";
-import { ref, computed, defineAsyncComponent, watch, nextTick } from "vue";
+import Draggable from "vuedraggable";
+import { ref, computed, defineAsyncComponent, watch, nextTick, onMounted } from "vue";
 import { useFilterCSS } from "@/composables/useFilterCSS";
 import Filter from "@/components/Filter/Filter.vue";
-import { FilterIcon } from "@/components/icons";
+import { FilterIcon, WildcardIcon } from "@/components/icons";
 import { ReloadIcon, TrashIcon, EditIcon, CameraIcon } from "@/components/icons";
 import { sendSaveFilter } from "@/stores/requests";
 import PriceSortToggle from "@/components/Filter/PriceSortToggle.vue";
@@ -190,6 +196,8 @@ const draggableFilters = computed({
     get: () => filterBuilder.value.filters,
     set: (value) => {
         filterBuilder.value.filters = value;
+        filterBuilder.value.updateCss();
+        filterBuilder.value.updateHooks.forEach((fn) => fn());
     }
 });
 
@@ -262,9 +270,9 @@ const updateShownVenue = async () => {
         renderer = rendererFactory.createRenderer(eventId.value, {
             proxy: "",
             country: country,
-            seatColor: "#0557ae",
-            nonAvSeatColor: "#dadcde",
-            highlightedSeatColor: "#d0006f"
+            seatColor: "#6b9b82",
+            nonAvSeatColor: "#4b4b4b",
+            highlightedSeatColor: "#7bc999"
         });
 
         filterBuilder.value.highlightedSeatColor = renderer.config.highlightedSeatColor;
@@ -414,13 +422,120 @@ watch(renderSeats, async () => {
 }
 
 .svg-wrapper path[generaladmission] {
-    pointer-events: auto;
-    cursor: pointer;
+    pointer-events: auto !important;
+    cursor: pointer !important;
+}
+
+/* Hover effects */
+.svg-wrapper path:hover {
+    opacity: 0.8;
 }
 
-/* Hover effects for general admission seats */
 .svg-wrapper path[generaladmission]:hover {
-    pointer-events: all;
-    cursor: pointer;
+    opacity: 1;
+    fill: #7ee8fa !important;
+}
+
+/* Mobile responsiveness - bulletproof on all devices */
+@media (max-width: 768px) {
+    .page-header {
+        flex-direction: column;
+        align-items: stretch !important;
+        gap: 0.75rem;
+    }
+
+    .unified-search-group {
+        width: 100% !important;
+        min-width: 100% !important;
+    }
+}
+
+@media (max-width: 1024px) {
+    .flex.w-full.min-w-0.flex-col.flex-1 {
+        min-height: 350px !important;
+    }
+}
+
+@media (max-width: 768px) {
+    .page-header {
+        flex-direction: column !important;
+    }
+}
+
+@media (max-width: 480px) {
+    .page-header {
+        padding-bottom: 0.75rem;
+    }
+
+    .unified-search-group input {
+        min-width: 0;
+        font-size: 13px;
+    }
+
+    .filter-action-btn {
+        font-size: 11px;
+        padding: 0.25rem 0.5rem;
+    }
+
+    .btn-icon-small {
+        width: 1.75rem;
+        height: 1.75rem;
+        font-size: 12px;
+    }
+
+    .flex.w-full.min-w-0.flex-col.flex-1 {
+        min-height: 400px !important;
+    }
+}
+
+/* SVG and Filters container responsive sizing */
+.svg-container {
+    min-height: 250px;
+    max-height: 50%;
+}
+
+.svg-container.has-svg {
+    min-height: 400px;
+    max-height: 55%;
+}
+
+.filters-container {
+    min-height: 350px;
+    max-height: 100%;
+}
+
+@media (min-width: 1024px) {
+    .svg-container {
+        min-height: 400px;
+        max-height: 100%;
+    }
+
+    .svg-container.has-svg {
+        min-height: 400px;
+        max-height: 100%;
+    }
+
+    .filters-container {
+        min-height: 400px;
+        max-height: 100%;
+    }
+}
+
+/* Ensure filters list always scrolls */
+.hidden-scrollbars::-webkit-scrollbar {
+    width: 4px;
+}
+
+.hidden-scrollbars::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.hidden-scrollbars::-webkit-scrollbar-thumb {
+    background: oklch(0.35 0 0);
+    border-radius: 4px;
+}
+
+.hidden-scrollbars::-webkit-scrollbar-thumb:hover {
+    background: oklch(0.45 0 0);
 }
 </style>