@necrolab/dashboard 0.4.48 → 0.4.50

package/src/views/Login.vue

@@ -1,149 +1,95 @@
 <template>
-    <div class="login-container" v-once>
-        <div class="login-card">
-            <div class="flex justify-center mb-8">
-                <img src="@/assets/img/logo_trans.png" class="h-16 object-cover" alt="Logo: Necro" />
-            </div>
-            <h2 class="text-l text-white text-center font-bold mb-6">Please login to proceed</h2>
-
-            <LoginForm />
-        </div>
+  <div class="login-container" v-once>
+    <div class="login-card">
+      <div class="flex justify-center mb-8">
+        <img
+          src="@/assets/img/logo_trans.png"
+          class="h-16 object-cover"
+          alt="Logo: Necro"
+        />
+      </div>
+      <h2 class="text-l text-white text-center font-bold mb-6">
+        Please login to proceed
+      </h2>
+
+      <LoginForm />
     </div>
+  </div>
 </template>
 <script setup>
 import LoginForm from "@/components/Auth/LoginForm.vue";
 </script>
 <style lang="scss" scoped>
 .login-container {
-    @apply flex flex-col items-center justify-center min-h-screen px-4;
-    padding-top: 5vh;
-    padding-bottom: 20vh;
-
-    // Portrait mobile devices
-    @media (max-width: 480px) and (orientation: portrait) {
-        padding-top: 7vh;
-        padding-bottom: 10vh;
-        @apply px-4;
-    }
-
-    // Landscape mobile devices
-    @media (max-width: 896px) and (orientation: landscape) and (max-height: 500px) {
-        padding-top: 5vh;
-        padding-bottom: 5vh;
-        @apply px-6;
-    }
-
-    // Tablets portrait
-    @media (min-width: 481px) and (max-width: 768px) and (orientation: portrait) {
-        padding-top: 8vh;
-        padding-bottom: 15vh;
-        @apply px-8;
-    }
-
-    // Tablets landscape
-    @media (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
-        padding-top: 4vh;
-        padding-bottom: 10vh;
-        @apply px-12;
-    }
-
-    // Desktop
-    @media (min-width: 1025px) {
-        padding-top: 8vh;
-        padding-bottom: 22vh;
-    }
-
-    // Very short screens (landscape phones, short laptops)
-    @media (max-height: 600px) {
-        padding-top: 3vh;
-        padding-bottom: 3vh;
-    }
-
-    // Very tall screens
-    @media (min-height: 900px) {
-        padding-top: 10vh;
-        padding-bottom: 30vh;
-    }
+  @apply flex flex-col items-center min-h-screen px-4;
+  margin-top: 3vh;
+
+  // Mobile devices
+  @media (max-width: 480px) {
+    margin-top: 2vh;
+  }
+
+  // Landscape mode
+  @media (orientation: landscape) {
+    margin-top: 1vh;
+    justify-content: flex-start;
+    min-height: 100vh;
+    min-height: 100dvh;
+  }
 }
 
 .login-card {
-    @apply bg-dark-400 border border-dark-650 rounded-lg shadow-xl;
-    backdrop-filter: blur(10px);
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-    width: 100%;
-    max-width: 420px;
-    padding: 2rem;
+  @apply bg-dark-400 border border-dark-650 rounded-lg shadow-xl;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  width: 100%;
+  max-width: 420px;
+  padding: 1.75rem;
 
-    // Small mobile devices
-    @media (max-width: 380px) {
-        max-width: 340px;
-        padding: 1.5rem;
-        @apply rounded-md;
-    }
-
-    // Large mobile devices
-    @media (min-width: 381px) and (max-width: 480px) {
-        max-width: 380px;
-        padding: 1.75rem;
-    }
-
-    // Tablets and up
-    @media (min-width: 481px) {
-        max-width: 420px;
-        padding: 2rem;
-    }
-
-    // Landscape mobile - make card more compact
-    @media (max-height: 500px) and (orientation: landscape) {
-        padding: 1.25rem;
-
-        h2 {
-            @apply text-xl mb-4;
-        }
+  // Mobile devices
+  @media (max-width: 480px) {
+    max-width: 380px;
+    padding: 1.5rem;
+  }
 
-        .flex.justify-center {
-            @apply mb-4;
+  // Landscape mode
+  @media (orientation: landscape) {
+    padding: 1.25rem;
+    margin: 0.25rem 0;
 
-            img {
-                @apply h-12;
-            }
-        }
+    h2 {
+      @apply text-lg mb-2;
     }
 
-    // Very small screens (iPhone SE, etc.)
-    @media (max-width: 320px) {
-        max-width: 300px;
-        padding: 1.25rem;
+    .flex.justify-center {
+      @apply mb-2;
 
-        h2 {
-            @apply text-lg;
-        }
-
-        img {
-            @apply h-12;
-        }
+      img {
+        @apply h-10;
+      }
     }
+  }
 }
 
 // Logo responsive sizing
 .login-card img {
-    @media (max-width: 480px) {
-        @apply h-14;
-    }
+  @media (max-width: 480px) {
+    @apply h-12;
+  }
 
-    @media (max-height: 500px) and (orientation: landscape) {
-        @apply h-10;
-    }
+  @media (orientation: landscape) {
+    @apply h-10;
+  }
 }
 
 // Title responsive sizing
 .login-card h2 {
-    @media (max-width: 480px) {
-        @apply text-xl mb-4;
-    }
+  @media (max-width: 480px) {
+    @apply text-lg mb-3;
+  }
 
-    @media (max-height: 500px) and (orientation: landscape) {
-        @apply text-lg mb-3;
-    }
+  @media (orientation: landscape) {
+    @apply text-base mb-2;
+  }
 }
 </style>

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 pb-2" style="padding-top: 1.5rem">
+      <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;
+}
+
+/* Small mobile screens (portrait) */
+@media (max-width: 480px) and (orientation: portrait) {
+  .event-dropdown {
+    height: 40px !important; /* Match PriceSortToggle height exactly */
+  }
 
-    .mobile-header-controls {
-        display: none !important;
-    }
+  .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;
+  }
 }
 
-/* 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;
-    }
+/* Mobile landscape - hide non-essential elements */
+@media (max-height: 500px) and (orientation: landscape) {
+  .stats-component,
+  .utilities-section,
+  .filter-controls {
+    display: none;
+  }
+
+  .flex-between.pb-2 {
+    padding-top: 1rem !important;
+    padding-bottom: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+}
+
+/* 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>