@necrolab/dashboard 0.4.221 → 0.5.2

package/src/components/Tasks/QuickSettings.vue

@@ -9,63 +9,71 @@
             <div
                 v-for="(value, keyName) in category"
                 :key="keyName"
-                class="text-white bg-dark-500 mb-3 rounded border-dark-550 border-2 px-3 flex items-center justify-between h-10"
+                class="input-container"
             >
-                <span class="w-1/3">{{ keyName }}</span>
-                <input
-                    type="text"
-                    class="transparent w-2/3 bg-transparent border-none text-white placeholder-light-400"
-                    :placeholder="`Enter ${keyName} key`"
-                    v-model="quickConfig.keys[categoryName][keyName]"
-                />
+                <span class="w-1/3 text-light-300 font-medium text-xs">{{ keyName }}</span>
+                <div class="w-2/3 h-full flex items-center">
+                    <input
+                        type="text"
+                        class="quick-settings-input"
+                        :placeholder="`Enter ${keyName} key`"
+                        v-model="quickConfig.keys[categoryName][keyName]"
+                    />
+                </div>
             </div>
         </div>
 
-        <div
-            class="text-white bg-dark-500 mb-3 px-3 rounded border-dark-550 border-2 flex items-center justify-between h-10"
-        >
-            <span class="w-1/3">Checkout Proxies</span>
+        <div class="text-light-400 mb-2 mt-4">Proxy Lists</div>
+
+        <div class="input-container relative-positioned z-tooltip">
+            <span class="w-1/3 text-light-300 font-medium text-xs">Checkout Proxies</span>
             <Dropdown
-                class="transparent !w-2/3 !px-0 bg-transparent border-none text-white z-50"
+                class="!w-2/3"
+                variant="transparent"
                 :default="ui.profile.proxyList?.checkout || proxyLists[0]"
+                :value="ui.profile.proxyList?.checkout"
                 :options="proxyLists"
                 :onClick="(f) => saveProxyListUpate('checkout', f)"
                 :allowDefault="false"
-                rightAmount="right-3"
             />
         </div>
 
-        <div
-            class="text-white bg-dark-500 mb-3 px-3 rounded border-dark-550 border-2 flex items-center justify-between h-10"
-        >
-            <span class="w-1/3">Queue Proxies</span>
+                    <div class="input-container relative-positioned z-dropdown">
+            <span class="w-1/3 text-light-300 font-medium text-xs">Queue Proxies</span>
             <Dropdown
-                class="transparent !w-2/3 !px-0 bg-transparent border-none text-white z-30"
+                class="!w-2/3"
+                variant="transparent"
                 :default="ui.profile.proxyList?.queue || proxyLists[0]"
-                :onClick="(f) => saveProxyListUpate('queue', f)"
+                :value="ui.profile.proxyList?.queue"
                 :options="proxyLists"
+                :onClick="(f) => saveProxyListUpate('queue', f)"
                 :allowDefault="false"
-                rightAmount="right-3"
             />
         </div>
-        <div class="flex mt-5 justify-between flex-row items-center">
-            <div>
-                <p class="text-light-400 text-sm">Dashboard: v{{ version }}</p>
-                <p class="text-light-400 text-sm">Bot: v{{ ui.botVersion }}</p>
+        <div class="flex mt-5 justify-between flex-row items-center quicksettings-bottom">
+            <div class="flex gap-3 items-center quicksettings-versions">
+                <div class="version-badge">
+                    <span class="version-label">Dashboard</span>
+                    <span class="version-number">v{{ version }}</span>
+                </div>
+                <div class="version-badge">
+                    <span class="version-label">Bot</span>
+                    <span class="version-number">v{{ ui.botVersion }}</span>
+                </div>
             </div>
 
-            <div class="flex gap-5">
+            <div class="flex gap-3 quicksettings-buttons">
                 <button
-                    class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-24 text-xs flex items-center justify-center gap-x-2"
+                    class="quicksettings-btn bg-dark-400 flex items-center justify-center gap-x-2"
                     @click="checkBalances()"
                 >
-                    Balances <img src="@/assets/img/sell.svg" width="14" />
+                    Balances <img src="@/assets/img/sell.svg" width="12" />
                 </button>
                 <button
-                    class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-24 text-xs flex items-center justify-center gap-x-2"
+                    class="quicksettings-btn bg-dark-400 flex items-center justify-center gap-x-2"
                     @click="done(true)"
                 >
-                    Save <img src="/img/save.svg" width="14" class="invert" />
+                    Save <img src="/img/save.svg" width="12" class="invert" />
                 </button>
             </div>
         </div>
@@ -81,6 +89,167 @@
 .transparent {
     background: transparent !important;
 }
+
+.input-container {
+    @apply text-white bg-dark-500 mb-3 px-3 rounded-lg border-dark-550 border-2 flex items-center justify-between h-10;
+    overflow: visible;
+}
+
+.quick-settings-input {
+    @apply w-full h-full text-sm text-white bg-transparent border-0 outline-none px-2 py-1 transition-colors duration-150;
+
+    &:focus {
+        @apply outline-none border-0 shadow-none bg-transparent;
+    }
+
+    &:hover:not(:focus) {
+        background: transparent;
+    }
+
+    &::placeholder {
+        color: oklch(0.50 0 0);
+    }
+}
+
+.input-container:hover {
+    border-color: oklch(0.30 0 0);
+}
+
+.input-container:focus-within {
+    border-color: oklch(0.72 0.15 145) !important;
+    outline: 1px solid oklch(0.72 0.15 145);
+    outline-offset: 0;
+}
+
+/* iPhone portrait mode fixes */
+@media (max-width: 430px) and (orientation: portrait) {
+    .quicksettings-bottom {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: stretch;
+    }
+    
+    .quicksettings-versions {
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+    
+    .quicksettings-versions > div {
+        flex: 1;
+        min-width: 120px;
+        text-align: center;
+    }
+    
+    .quicksettings-buttons {
+        justify-content: center;
+        gap: 0.75rem;
+    }
+    
+    .quicksettings-buttons button {
+        width: 5rem;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+        gap: 0.25rem;
+    }
+    
+    .quicksettings-buttons button img {
+        width: 12px;
+    }
+}
+
+/* Dropdowns are teleported to body, so modal can scroll normally */
+
+/* Dropdown styling fixes */
+:deep(.dropdown) {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    height: 40px !important;
+}
+
+:deep(.dropdown:hover),
+:deep(.dropdown:focus-within) {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+
+:deep(.dropdown-display) {
+    height: 100%;
+    padding: 0.625rem;
+}
+
+:deep(.dropdown-value) {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+
+:deep(.dropdown-menu-portal) {
+    z-index: 26000 !important;
+    max-height: 200px !important;
+    overflow-y: auto !important;
+    overscroll-behavior: contain !important;
+    touch-action: pan-y !important;
+    -webkit-overflow-scrolling: touch !important;
+    border: 1px solid oklch(0.26 0 0) !important;
+    background: linear-gradient(135deg, oklch(0.18 0 0) 0%, oklch(0.20 0 0) 100%) !important;
+}
+
+:deep(.dropdown-item) {
+    padding: 0.625rem 1rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+
+/* Ensure proper z-index stacking */
+.z-tooltip {
+    z-index: 100 !important;
+}
+
+.z-dropdown {
+    z-index: 90 !important;
+}
+
+/* QuickSettings compact buttons */
+.quicksettings-btn {
+    @apply rounded transition-all duration-150;
+    background: oklch(0.2046 0 0);
+    border: 2px solid oklch(0.2809 0 0);
+    color: oklch(0.90 0 0);
+    height: 2.5rem;
+    width: 6.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+
+    &:hover {
+        border-color: oklch(0.72 0.15 145);
+    }
+
+    &:active, &:focus {
+        border-color: oklch(0.72 0.15 145);
+        outline: 1px solid oklch(0.72 0.15 145);
+        outline-offset: 0;
+    }
+}
+
+/* Version badges */
+.version-badge {
+    @apply flex items-center gap-x-2 px-3 py-2 rounded-lg border;
+    background: oklch(0.2046 0 0);
+    border-color: oklch(0.2809 0 0);
+
+    .version-label {
+        @apply text-xs font-medium;
+        color: oklch(0.65 0 0);
+    }
+
+    .version-number {
+        @apply text-xs font-bold;
+        color: oklch(0.72 0.15 145);
+    }
+}
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";

package/src/components/Tasks/ScrapeVenue.vue

@@ -4,19 +4,18 @@
         <!-- Event ID -->
         <div class="input-wrapper mt-7 mb-4">
             <label class="label-override mb-2">Event ID or URL <StadiumIcon /></label>
-            <div class="input-default">
+            <div class="input-default required">
                 <input
                     :placeholder="!isEU(ui.currentCountry.siteId) ? '102PDA9125510GYU' : '529171'"
                     v-model="eventId"
                 />
-                <span class="text-red-400 my-auto mr-2 mt-3">* </span>
             </div>
         </div>
         <button
-            class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-48 text-xs flex items-center justify-center gap-x-2 ml-auto"
-            @click="done()"
-        >
-            Scrape Venue <ScrapeIcon />
+            class="button-default ml-auto mt-4 flex w-48 items-center justify-center gap-x-2 bg-dark-400 text-xs"
+            @click="done()">
+            Scrape Venue
+            <ScrapeIcon />
         </button>
     </Modal>
 </template>

package/src/components/Tasks/Stats.vue

@@ -1,43 +1,53 @@
 <template>
-    <div class="flex text-white font-bold lg:gap-5 gap-1" v-if="show" :key="key">
+    <div class="flex items-center gap-1 font-bold text-white lg:gap-3" v-if="ui.queueStats.show" :key="key">
         <div
             v-if="ui.queueStats.total"
-            class="bg-dark-500 mb-5 text-sm rounded-lg lg:p-2 p-1 lg:gap-3 gap-2 flex justify-between"
-        >
-            <h2 class="font-bold text-sm flex items-center gap-1 scale-100">
-                <img width="14px" src="@/assets/img/wildcard.svg" />Total MQM
+            class="stats-card flex h-10 min-w-0 items-center justify-between gap-2 rounded-lg px-3 text-sm">
+            <h2 class="flex items-center gap-1 whitespace-nowrap text-sm font-bold">
+                <img width="14px" src="@/assets/img/wildcard.svg" />
+                <span class="hidden md:inline">Total</span>
             </h2>
-            <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.total }} </span>
+            <span class="flex items-center justify-center whitespace-nowrap text-xs font-black text-light-400">
+                {{ ui.queueStats.total }}
+            </span>
         </div>
         <div
             v-if="ui.queueStats.queued"
-            class="bg-dark-500 mb-5 text-sm rounded-lg lg:p-2 p-1 lg:gap-3 gap-2 flex justify-between"
-        >
-            <h2 class="font-bold text-sm flex items-center gap-1"><SkiIcon />Queued</h2>
-            <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.queued }} </span>
+            class="stats-card flex h-10 min-w-0 items-center justify-between gap-2 rounded-lg px-3 text-sm">
+            <h2 class="flex items-center gap-1 whitespace-nowrap text-sm font-bold">
+                <SkiIcon />
+                <span class="hidden md:inline">Queued</span>
+            </h2>
+            <span class="flex items-center justify-center whitespace-nowrap text-xs font-black text-light-400">
+                {{ ui.queueStats.queued }}
+            </span>
         </div>
         <div
             v-if="ui.queueStats.sleeping"
-            class="bg-dark-500 mb-5 text-sm rounded-lg lg:p-2 p-1 lg:gap-3 gap-2 flex justify-between"
-        >
-            <h2 class="font-bold text-sm flex items-center gap-1"><TimerIcon />Sleeping</h2>
-            <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.sleeping }} </span>
+            class="stats-card flex h-10 min-w-0 items-center justify-between gap-2 rounded-lg px-3 text-sm">
+            <h2 class="flex items-center gap-1 whitespace-nowrap text-sm font-bold">
+                <TimerIcon />
+                <span class="hidden md:inline">Sleeping</span>
+            </h2>
+            <span class="flex items-center justify-center whitespace-nowrap text-xs font-black text-light-400">
+                {{ ui.queueStats.sleeping }}
+            </span>
         </div>
         <div
             v-if="ui.queueStats.nextQueuePasses.length > 0"
-            class="bg-dark-500 mb-5 rounded-lg text-sm flex justify-between lg:p-2 p-1 lg:gap-3 gap-2"
-        >
-            <h2 class="font-bold flex text-sm items-center gap-1">
-                <CartIcon /><span class="sm:block hidden">Next Passes</span>
-                <span class="sm:hidden block">Pass</span>
+            class="stats-card mb-2 flex h-8 min-w-0 items-center justify-between gap-2 rounded-xl p-2 text-sm lg:mb-5 lg:gap-3 lg:p-3">
+            <h2 class="flex items-center gap-1 whitespace-nowrap text-sm font-bold">
+                <CartIcon />
+                <span class="hidden sm:block">Next Passes</span>
+                <span class="block sm:hidden">Pass</span>
             </h2>
-            <span class="text-light-400 text-sm font-black">{{
-                ui.queueStats.nextQueuePasses.slice(0, queuePassAmount).join(", ")
-            }}</span>
+            <span class="flex items-center truncate text-right text-xs font-black text-light-400">
+                {{ ui.queueStats.nextQueuePasses.slice(0, queuePassAmount).join(", ") }}
+            </span>
         </div>
         <!-- <div
             v-if="ui.queueStats.carts"
-            class="bg-dark-500 mb-5 text-sm rounded-lg lg:p-2 p-1 lg:gap-3 gap-2 flex justify-between"
+            class="bg-dark-500 mb-2 text-sm rounded-lg lg:p-2 p-1 lg:gap-3 gap-2 flex justify-between"
         >
             <h2 class="font-bold text-sm flex items-center gap-1"><CartIcon />Carts</h2>
             <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.sleeping }} </span>
@@ -58,9 +68,25 @@ const getQueuePassAmount = (width) => {
     return 1;
 };
 
-let show = ref(true);
 let key = ref(0);
 let queuePassAmount = ref(getQueuePassAmount(window.innerWidth));
 
 window.addEventListener("resize", () => (queuePassAmount.value = getQueuePassAmount(window.innerWidth)));
 </script>
+<style lang="scss" scoped>
+.stats-card {
+    @apply rounded;
+    background: oklch(0.2046 0 0);
+    border: 2px solid oklch(0.2809 0 0);
+
+    h2 {
+        font-weight: 600;
+        color: oklch(0.90 0 0);
+    }
+
+    span {
+        font-weight: 700;
+        color: oklch(0.90 0 0);
+    }
+}
+</style>