@necrolab/dashboard 0.4.47 → 0.4.49

package/src/views/Profiles.vue

@@ -68,13 +68,13 @@
                     @change="(f) => (ui.search.profiles.tag = f)"
                 /> -->
                 <Dropdown
-                    class="rounded-r-lg w-32 bg-dark-500 relative z-50 border-2 border-dark-600 search-dropdown"
-                    style="margin-left: 0 !important; border-width: 2px !important"
+                    class="dropdown-base rounded-r-lg w-32 relative z-50 search-dropdown"
                     rightAmount="right-1"
                     default="Any"
                     :value="ui.search.profiles.tag"
                     :onClick="(f) => (ui.search.profiles.tag = f)"
                     :options="allTags"
+                    :includeAdjacentButtons="true"
                     :capitalize="true"
                 />
             </div>

package/src/views/Tasks.vue

@@ -1,157 +1,185 @@
 <template>
-    <div class="tasks-page">
-        <div class="flex-between pt-5 pb-2">
-            <div class="flex-center gap-4">
-                <GearIcon class="w-5 cursor-pointer smooth-hover" @click="ui.toggleModal('quick-settings')" />
-                <h4 class="text-heading">
-                    Tasks
-                    <span class="text-subheading pl-1">{{ taskCount }}</span>
-                </h4>
-            </div>
-            <ul class="mobile-icons mobile-header-controls">
-                <li>
-                    <button @click="ui.startTasks()"><PlayIcon class="w-4 h-4" /></button>
-                </li>
-                <li>
-                    <button @click="ui.stopTasks()"><PauseIcon class="w-4 h-4" /></button>
-                </li>
-                <li>
-                    <button
-                        class="text-sm"
-                        :disabled="ui.disabledButtons['add-tasks']"
-                        @click="ui.toggleModal('create-task')"
-                    >
-                        <PlusIcon class="w-4 h-4" />
-                    </button>
-                </li>
-                <li>
-                    <button @click="ui.deleteTasks()"><TrashIcon class="h-3.5 w-3.5" /></button>
-                </li>
-            </ul>
-        </div>
+  <div class="tasks-page">
+    <div class="flex-between pt-5 pb-2">
+      <div class="flex-center gap-4">
+        <GearIcon
+          class="w-5 cursor-pointer smooth-hover"
+          @click="ui.toggleModal('quick-settings')"
+        />
+        <h4 class="text-heading">
+          Tasks
+          <span class="text-subheading pl-1">{{ taskCount }}</span>
+        </h4>
+      </div>
+      <ul class="mobile-icons mobile-header-controls">
+        <li>
+          <button @click="ui.startTasks()"><PlayIcon class="w-4 h-4" /></button>
+        </li>
+        <li>
+          <button @click="ui.stopTasks()"><PauseIcon class="w-4 h-4" /></button>
+        </li>
+        <li>
+          <button
+            class="text-sm"
+            :disabled="ui.disabledButtons['add-tasks']"
+            @click="ui.toggleModal('create-task')"
+          >
+            <PlusIcon class="w-4 h-4" />
+          </button>
+        </li>
+        <li>
+          <button @click="ui.deleteTasks()"><TrashIcon class="h-3.5 w-3.5" /></button>
+        </li>
+      </ul>
+    </div>
 
-        <Stats class="stats-component" />
+    <div class="controls-wrapper">
+      <Stats class="stats-component" />
 
-        <div class="controls-wrapper lg:mb-6 mb-3">
-            <DesktopControls
-                class="desktop-controls-hide"
-                @stopAll="ui.stopTasks()"
-                @startAll="ui.startTasks()"
-                @deleteAll="ui.deleteTasks()"
-            />
-        </div>
+      <div class="controls-wrapper lg:mb-3">
+        <DesktopControls
+          class="desktop-controls-hide"
+          @stopAll="ui.stopTasks()"
+          @startAll="ui.startTasks()"
+          @deleteAll="ui.deleteTasks()"
+        />
+      </div>
 
-        <div class="flex items-center justify-between gap-2 lg:mb-2 mb-1">
-            <div v-if="uniqEventIds.length > 1" class="flex-1 md:min-w-96 md:max-w-96 md:flex-none">
-                <Dropdown
-                    :onClick="(f) => ui.setCurrentEvent(f)"
-                    default="All events"
-                    :chosen="ui.currentEvent"
-                    :options="uniqEventIds"
-                    :allowDefault="true"
-                    class="input-default w-full hover:bg-dark-400 h-10"
-                    rightAmount="right-2"
-                />
-            </div>
-            <PriceSortToggle
-                class="min-w-24 max-w-28 flex-shrink-0"
-                :options="['All', 'Checkout']"
-                :darker="true"
-                :current="ui.taskFilter"
-                @change="(e) => ui.setTaskFilter(e)"
-            />
+      <div class="flex items-center justify-between gap-2 lg:mb-2 mb-1 filter-controls">
+        <div
+          v-if="uniqEventIds.length > 1"
+          class="flex-1 md:min-w-96 md:max-w-96 md:flex-none min-w-0"
+        >
+          <Dropdown
+            :onClick="(f) => ui.setCurrentEvent(f)"
+            default="All events"
+            :chosen="ui.currentEvent"
+            :options="uniqEventIds"
+            :allowDefault="true"
+            class="input-default w-full hover:bg-dark-400 event-dropdown"
+            rightAmount="right-2"
+          />
         </div>
+        <PriceSortToggle
+          class="min-w-24 max-w-28 flex-shrink-0"
+          :options="['All', 'Checkout']"
+          :darker="true"
+          :current="ui.taskFilter"
+          @change="(e) => ui.setTaskFilter(e)"
+        />
+      </div>
 
-        <TaskView class="lg:mb-6 mb-3" :tasks="ui.tasks" />
+      <TaskView class="lg:mb-6 mb-3" :tasks="ui.tasks" />
 
-        <Utilities class="utilities-section" />
-
-        <transition-group name="fade">
-            <CreateTaskTM v-if="ui.currentModule == 'TM' && activeModal === 'create-task'" @new="ui.addNewTask" />
-            <CreateTaskAXS v-if="ui.currentModule == 'AXS' && activeModal === 'create-task'" @new="ui.addNewTask" />
-            <CheckStock v-if="activeModal === 'check-stock'" />
-            <ScrapeVenue v-if="activeModal === 'scrape-venue'" />
-            <MassEditPresaleCode v-if="activeModal === 'mass-edit-presale-code'" />
-            <QuickSettings v-if="activeModal === 'quick-settings'" />
-        </transition-group>
+      <Utilities class="utilities-section" />
     </div>
+
+    <transition-group name="fade">
+      <CreateTaskTM
+        v-if="ui.currentModule == 'TM' && activeModal === 'create-task'"
+        @new="ui.addNewTask"
+      />
+      <CreateTaskAXS
+        v-if="ui.currentModule == 'AXS' && activeModal === 'create-task'"
+        @new="ui.addNewTask"
+      />
+      <CheckStock v-if="activeModal === 'check-stock'" />
+      <ScrapeVenue v-if="activeModal === 'scrape-venue'" />
+      <MassEditPresaleCode v-if="activeModal === 'mass-edit-presale-code'" />
+      <QuickSettings v-if="activeModal === 'quick-settings'" />
+    </transition-group>
+  </div>
 </template>
 <style lang="scss" scoped>
 .custom-dropdown-content {
-    top: 2.6rem !important;
-    left: -13px;
-    @apply border border-dark-650;
+  top: 2.6rem !important;
+  left: -13px;
+  @apply border border-dark-650;
 }
 
+/* ==========================================================================
+   TASKS PAGE RESPONSIVE LAYOUT - MOBILE FIRST
+   ========================================================================== */
+
+/* Default mobile layout */
 .desktop-controls-hide {
-    display: none !important;
+  display: none;
 }
 
 .mobile-header-controls {
-    display: flex !important;
+  display: flex;
 }
 
-@media (min-width: 650px) {
-    .desktop-controls-hide {
-        display: flex !important;
-    }
+/* Event dropdown base styling */
+.event-dropdown {
+  min-width: 0;
+  /* Match PriceSortToggle height instead of input-default */
+  height: 40px !important;
+}
+
+.event-dropdown .dropdown-value {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-    .mobile-header-controls {
-        display: none !important;
-    }
+/* Small mobile screens (portrait) */
+@media (max-width: 480px) and (orientation: portrait) {
+  .event-dropdown {
+    height: 40px !important; /* Match PriceSortToggle height exactly */
+  }
+  
+  .event-dropdown .dropdown-value {
+    max-width: calc(100vw - 140px);
+    font-size: 0.875rem;
+  }
+
+  .event-dropdown .dropdown-display {
+    padding-right: 2rem;
+  }
+}
+
+/* Extra small screens */
+@media (max-width: 375px) and (orientation: portrait) {
+  .event-dropdown {
+    height: 40px !important; /* Maintain 40px height to match PriceSortToggle */
+  }
+  
+  .event-dropdown .dropdown-value {
+    max-width: calc(100vw - 120px);
+    font-size: 0.8rem;
+  }
+}
+
+/* Mobile landscape - hide non-essential elements */
+@media (max-height: 500px) and (orientation: landscape) {
+  .stats-component,
+  .utilities-section,
+  .filter-controls {
+    display: none;
+  }
+
+  .flex-between.pt-5.pb-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
 }
 
-/* iPhone landscape mode optimizations */
-@media screen and (max-height: 500px) and (orientation: landscape) {
-    /* Hide Stats component */
-    .stats-component {
-        display: none !important;
-    }
-    
-    /* Hide Utilities section (Scrape Venue, Check Stock) */
-    .utilities-section {
-        display: none !important;
-    }
-    
-    /* Hide event filter and price sort toggle row */
-    .flex.items-center.justify-between.gap-2 {
-        display: none !important;
-    }
-    
-    /* Hide desktop controls and show mobile controls */
-    .desktop-controls-hide {
-        display: none !important;
-    }
-    
-    .mobile-header-controls {
-        display: flex !important;
-    }
-    
-    /* Hide the controls-wrapper completely */
-    .controls-wrapper {
-        display: none !important;
-    }
-    
-    /* Reduce all margins to save space but keep proper navbar spacing */
-    .lg\\:mb-6, .mb-3 {
-        margin-bottom: 0.25rem !important;
-    }
-    
-    /* Make header more compact but keep safe distance from navbar */
-    .flex-between.pt-5.pb-2 {
-        padding-top: 1rem !important; // Keep distance from navbar
-        padding-bottom: 0.5rem !important;
-        margin-bottom: 0.5rem !important;
-    }
-    
-    /* Ensure task view has proper spacing */
-    .lg\\:mb-6.mb-3 {
-        margin-bottom: 0.25rem !important;
-    }
+/* Tablet and small desktop - show desktop controls */
+@media (min-width: 650px) {
+  .desktop-controls-hide {
+    display: flex;
+  }
+
+  .mobile-header-controls {
+    display: none;
+  }
 }
 </style>
 <script setup>
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
 import { DesktopControls } from "@/components/Tasks/Controls";
 import TaskView from "@/components/Tasks/TaskView.vue";
 import Utilities from "@/components/Tasks/Utilities.vue";
@@ -172,14 +200,19 @@ const activeModal = computed(() => ui.activeModal);
 const taskCount = computed(() => Object.keys(ui.getSelectedTasks()).length);
 ui.refreshQueueStats();
 
+// Ensure "All events" is always selected on page load
+onMounted(() => {
+  ui.setCurrentEvent("");
+});
+
 const uniqEventIds = computed(() => {
-    const ids = [
-        ...new Set(
-            Object.values(ui.tasks)
-                .filter((t) => t.siteId === ui.currentCountry.siteId && !t.eventId.includes("@"))
-                .map((v) => `${v.eventName} (${v.eventId})`)
-        )
-    ];
-    return ids;
+  const ids = [
+    ...new Set(
+      Object.values(ui.tasks)
+        .filter((t) => t.siteId === ui.currentCountry.siteId && !t.eventId.includes("@"))
+        .map((v) => `${v.eventName} (${v.eventId})`)
+    ),
+  ];
+  return ids;
 });
 </script>

package/tailwind.config.js

@@ -5,7 +5,7 @@ export default {
         colors: {
             transparent: "transparent",
             white: "#ffffff",
-            pure: "#ffffff", 
+            pure: "#ffffff",
             lightgray: "#e5e7eb",
             green: {
                 300: "#4ade80",
@@ -29,10 +29,10 @@ export default {
             },
             dark: {
                 50: "#f8fafc",
-                100: "#f1f5f9", 
+                100: "#f1f5f9",
                 200: "#e2e8f0",
                 300: "#1a1b1e", // Deep charcoal base
-                400: "#242529", // Card backgrounds  
+                400: "#242529", // Card backgrounds
                 500: "#2e2f34", // Input backgrounds
                 550: "#35363c", // Subtle elevation
                 600: "#3d3e44", // Borders
@@ -41,18 +41,18 @@ export default {
                 750: "#52535a", // Selected states
                 800: "#13141a", // Deep background
                 850: "#0d0e14", // Deepest background
-                900: "#06070d"  // Ultra deep
+                900: "#06070d" // Ultra deep
             },
             light: {
                 100: "#f6f8fa",
-                200: "#e1e4e8", 
+                200: "#e1e4e8",
                 300: "#e2e2e5", // Primary text
                 400: "#d0d0d3", // Secondary text
                 500: "#a0a0a6", // Muted text
                 600: "#71717a", // Disabled text
                 700: "#57575f", // Very muted
                 800: "#3e3e46", // Dark muted
-                900: "#27272d"  // Darkest muted
+                900: "#27272d" // Darkest muted
             },
             gray: {
                 50: "#f9fafb",
@@ -68,7 +68,7 @@ export default {
             },
             accent: {
                 blue: "#6b7a9a",
-                purple: "#b794c0", 
+                purple: "#b794c0",
                 pink: "#d16d9e",
                 orange: "#d4976e",
                 yellow: "#e6d192",
@@ -77,24 +77,50 @@ export default {
             border: "#3d3e44"
         },
         screens: {
-            xs: "500px",
-            sm: "640px",
-            // => @media (min-width: 640px) { ... }
+            // Mobile first approach
+            xs: "480px", // Small mobile landscape / large mobile portrait
+            sm: "640px", // Tablet portrait
+            md: "768px", // Tablet landscape / small desktop
+            lg: "1024px", // Desktop
+            xl: "1280px", // Large desktop
 
-            md: "768px",
-            // => @media (min-width: 768px) { ... }
+            // Device-specific breakpoints
+            tablet: "768px", // Tablet-specific styling
+            desktop: "1024px", // Desktop-specific styling
 
-            ipadlg: "1000px",
-            lg: "1030px",
-            // => @media (min-width: 1024px) { ... }
-
-            xl: "1280px",
-            // => @media (min-width: 1280px) { ... }
-
-            "2xl": "1536px",
-            // => @media (min-width: 1536px) { ... }
+            // Orientation-based breakpoints
             landscape: {
                 raw: "(orientation: landscape)"
+            },
+            portrait: {
+                raw: "(orientation: portrait)"
+            },
+
+            // Height-based breakpoints for better mobile experience
+            "h-sm": {
+                raw: "(max-height: 500px)"
+            },
+            "h-md": {
+                raw: "(min-height: 600px)"
+            },
+            "h-lg": {
+                raw: "(min-height: 900px)"
+            },
+
+            // Combined orientation and size breakpoints
+            "mobile-landscape": {
+                raw: "(max-width: 896px) and (orientation: landscape) and (max-height: 500px)"
+            },
+            "mobile-portrait": {
+                raw: "(max-width: 480px) and (orientation: portrait)"
+            },
+
+            // Touch device detection
+            touch: {
+                raw: "(hover: none) and (pointer: coarse)"
+            },
+            "no-touch": {
+                raw: "(hover: hover) and (pointer: fine)"
             }
         }
     },