@necrolab/dashboard 0.4.32 → 0.4.34

package/src/components/Editors/Profile/Profile.vue

@@ -77,28 +77,76 @@ h4 {
     @apply text-center;
 }
 .task-buttons {
-    @apply flex mx-auto gap-x-2;
-    
+    @apply flex items-center justify-center mx-auto;
+    background: linear-gradient(135deg, rgba(45, 47, 74, 0.8), rgba(32, 32, 54, 0.9));
+    border: 1px solid rgba(74, 74, 97, 0.3);
+    border-radius: 10px;
+    padding: 2px;
+    gap: 1px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(8px);
+
     button {
-        @apply p-1 rounded transition-colors hover:bg-dark-500;
+        @apply flex items-center justify-center text-white transition-all duration-150 border-0 outline-0 relative;
+        background: transparent;
+        border-radius: 7px;
+        width: 28px;
+        height: 28px;
+        position: relative;
+
+        &:hover {
+            background: rgba(74, 74, 97, 0.3);
+            transform: scale(1.05);
+        }
+
+        &:active {
+            background: rgba(74, 74, 97, 0.5);
+            transform: scale(0.95);
+        }
     }
-    
+
     svg {
-        @apply w-4 h-4;
+        width: 14px;
+        height: 14px;
+        position: relative;
+        z-index: 1;
+        
+        path {
+            fill: currentColor;
+        }
     }
-    
+
     img {
-        @apply w-4 h-4;
+        width: 14px;
+        height: 14px;
+        position: relative;
+        z-index: 1;
     }
 }
 
+// Tablet optimization
 @media (max-width: 1024px) {
     h4 {
         font-size: 10px !important;
     }
+    
     .task-buttons {
-        @apply gap-x-3;
+        padding: 2px;
+        gap: 1px;
+        border-radius: 8px;
+        
+        button {
+            width: 26px;
+            height: 26px;
+            border-radius: 6px;
+        }
+
+        svg, img {
+            width: 13px;
+            height: 13px;
+        }
     }
+    
     .task-id {
         font-size: 6px !important;
         margin-right: -12px;
@@ -108,6 +156,51 @@ h4 {
         font-size: 7px !important;
     }
 }
+
+// Mobile optimization
+@media (max-width: 768px) {
+    .task-buttons {
+        padding: 1px;
+        gap: 0;
+        border-radius: 7px;
+        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+        
+        button {
+            width: 22px;
+            height: 22px;
+            border-radius: 5px;
+        }
+
+        svg, img {
+            width: 11px;
+            height: 11px;
+        }
+    }
+}
+
+// iPhone vertical (portrait) specific
+@media (max-width: 480px) and (orientation: portrait) {
+    .task-buttons {
+        padding: 1px;
+        gap: 0;
+        border-radius: 6px;
+        
+        button {
+            width: 18px;
+            height: 18px;
+            border-radius: 4px;
+            
+            &:hover {
+                transform: scale(1.1);
+            }
+        }
+
+        svg, img {
+            width: 9px;
+            height: 9px;
+        }
+    }
+}
 </style>
 <script setup>
 import { Row } from "@/components/Table";

package/src/components/Editors/Profile/ProfileView.vue

@@ -6,6 +6,7 @@
                     class="mr-3"
                     :toggled="ui.mainCheckbox.profiles"
                     @valueUpdate="ui.toggleMainCheckbox('profiles')"
+                    :isHeader="true"
                 />
                 <div class="mx-auto flex items-center" @click="ui.toggleSort('eventId')">
                     <ProfileIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />

package/src/components/Filter/Filter.vue

@@ -288,11 +288,23 @@ props.filterBuilder.onUpdate(() => {
 
 <style scoped>
 .filter-card {
-    @apply bg-dark-500 border border-dark-550 mb-1 shadow-sm relative;
+    @apply bg-dark-500 border-dark-550 relative;
+    border: 1px solid rgba(74, 74, 97, 0.3);
+    margin-bottom: 8px;
+    transition: all 0.15s ease-out;
 }
 
-.filter-card:not(:last-child) {
-    border-bottom: 2px solid #1B1C2B;
+.filter-card:hover:not(.expanded-filter) {
+    border-color: rgba(74, 74, 97, 0.6);
+    background-color: rgba(45, 47, 74, 0.8);
+}
+
+.expanded-filter:hover {
+    border-color: rgba(74, 74, 97, 0.8);
+}
+
+.filter-card + .filter-card {
+    border-top: 1px solid rgba(74, 74, 97, 0.2);
 }
 
 .filter-type-badge {

package/src/components/Tasks/Stats.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="flex text-white font-bold lg:gap-5 gap-1" v-if="show" :key="key">
+    <div class="flex text-white font-bold lg:gap-5 gap-1 lg:mb-2 mb-1" v-if="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"
+            class="bg-dark-500 lg:mb-2 mb-1 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
@@ -11,21 +11,21 @@
         </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"
+            class="bg-dark-500 lg:mb-2 mb-1 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>
         </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"
+            class="bg-dark-500 lg:mb-2 mb-1 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>
         </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"
+            class="bg-dark-500 lg:mb-5 mb-2 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>
@@ -37,7 +37,7 @@
         </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>

package/src/components/Tasks/Task.vue

@@ -1,26 +1,25 @@
 <template>
-    {{ console.log(task) }}
     <Row
         class="relative text-white grid-cols-12 gap-2"
         @click="ui.setOpenContextMenu('')"
         @click.right.prevent="ui.setOpenContextMenu('')"
     >
-        <div class="block md:hidden absolute left-1 top-0">
-            <h4 class="text-xs task-id text-white">
+        <div class="block md:hidden absolute left-1 top-1">
+            <h4 class="text-xs task-id text-white font-bold">
                 {{ props.task.taskId }}
             </h4>
         </div>
-        <div class="col-span-1 lg:col-span-2 flex">
+        <div class="col-span-1 lg:col-span-2 flex items-center justify-start">
             <Checkbox
-                class="ml-0 mr-4"
+                class="ml-2 mr-4 flex-shrink-0"
                 :toggled="props.task.selected"
                 @valueUpdate="ui.toggleTaskSelected(props.task.taskId)"
             />
-            <h4 class="task-id-alt mx-auto hidden md:block text-white" @click="copy(props.task.eventId)">
+            <h4 class="task-event-id mx-auto hidden lg:block text-white cursor-pointer hover:text-light-300" @click="copy(props.task.eventId)">
                 {{ props.task.eventId }}
             </h4>
         </div>
-        <div class="col-span-2 hidden md:block">
+        <div class="col-span-2 hidden lg:block">
             <h4 class="text-white">{{ props.task.quantity }}</h4>
         </div>
         <div class="col-span-2">
@@ -86,12 +85,9 @@
                         <TrashIcon />
                     </button>
                 </li>
-                <li
-                    class="text-xl -mt-2"
-                    @click.right.prevent="window.setTimeout(() => ui.setOpenContextMenu(task.taskId), 10)"
-                >
-                    <button class="mt-1" @click="props.task.isExpanded = !props.task.isExpanded">
-                        <span>{{ props.task.isExpanded ? "-" : "+" }}</span>
+                <li @click.right.prevent="window.setTimeout(() => ui.setOpenContextMenu(task.taskId), 10)">
+                    <button @click="props.task.isExpanded = !props.task.isExpanded">
+                        <span>{{ props.task.isExpanded ? "−" : "+" }}</span>
                     </button>
                 </li>
             </ul>
@@ -129,7 +125,6 @@
                 />
                 <TaskLabel v-if="!props.task.email && !props.task.password" image="mail" text="No account chosen yet" />
                 <TaskLabel v-if="props.task.profileName" image="profile" :text="props.task.profileName" />
-                <TaskLabel image="camera" :text="props.task.proxy" @click="copy(props.task.proxy)" />
                 <TaskLabel image="timer" :text="props.task.smartTimer ? 'On' : 'Off'" />
                 <TaskLabel image="groups" :text="props.task.loginAfterCart ? 'On' : 'Off'" />
                 <TaskLabel image="hand" :text="props.task.manual ? 'On' : 'Off'" />
@@ -184,18 +179,73 @@ h4 {
 }
 
 .task-buttons {
-    @apply flex mx-auto gap-x-2;
+    @apply flex items-center justify-center mx-auto;
+    background: linear-gradient(135deg, rgba(45, 47, 74, 0.8), rgba(32, 32, 54, 0.9));
+    border: 1px solid rgba(74, 74, 97, 0.3);
+    border-radius: 10px;
+    padding: 2px;
+    gap: 1px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(8px);
 
     button {
-        @apply p-1 rounded transition-colors hover:bg-dark-500;
-    }
+        @apply flex items-center justify-center text-white transition-all duration-150 border-0 outline-0 relative;
+        background: transparent;
+        border-radius: 7px;
+        width: 28px;
+        height: 28px;
 
-    svg {
-        @apply w-4 h-4;
+        &:hover {
+            background: rgba(74, 74, 97, 0.3);
+            transform: scale(1.05);
+        }
+
+        &:active {
+            background: rgba(74, 74, 97, 0.5);
+            transform: scale(0.95);
+        }
     }
 
+    svg,
     img {
-        @apply w-4 h-4;
+        width: 14px;
+        height: 14px;
+        position: relative;
+        z-index: 1;
+    }
+
+    svg path {
+        fill: currentColor;
+    }
+
+    span {
+        @apply text-sm font-medium relative z-[1];
+    }
+}
+
+.task-id {
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    margin: 0;
+    color: #a7a8af;
+}
+
+.task-id-alt {
+    font-size: 7px;
+}
+
+.task-event-id {
+    font-size: 11px;
+    font-weight: 500;
+    text-align: center;
+    
+    @media (max-width: 1024px) {
+        font-size: 10px;
+    }
+    
+    @media (max-width: 768px) {
+        font-size: 9px;
     }
 }
 
@@ -205,15 +255,81 @@ h4 {
     }
 
     .task-buttons {
-        @apply gap-x-1;
+        padding: 2px;
+        gap: 1px;
+        border-radius: 8px;
+
+        button {
+            width: 26px;
+            height: 26px;
+            border-radius: 6px;
+        }
+        svg,
+        img {
+            width: 13px;
+            height: 13px;
+        }
     }
 
     .task-id {
-        font-size: 6px;
+        font-size: 8px;
+    }
+}
+
+@media (max-width: 768px) {
+    .task-buttons {
+        padding: 1px;
+        gap: 0;
+        border-radius: 7px;
+        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+
+        button {
+            width: 22px;
+            height: 22px;
+            border-radius: 5px;
+        }
+        svg,
+        img {
+            width: 11px;
+            height: 11px;
+        }
+        span {
+            font-size: 10px;
+        }
     }
+}
+
+@media (max-width: 480px) and (orientation: portrait) {
+    .task-id {
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.4px;
+        color: #c9cad1;
+    }
+
+    .task-buttons {
+        padding: 1px;
+        gap: 0;
+        border-radius: 6px;
+
+        button {
+            width: 18px;
+            height: 18px;
+            border-radius: 4px;
+
+            &:hover {
+                transform: scale(1.1);
+            }
+        }
 
-    .task-id-alt {
-        font-size: 7px;
+        svg,
+        img {
+            width: 9px;
+            height: 9px;
+        }
+        span {
+            font-size: 9px;
+        }
     }
 }
 </style>

package/src/components/Tasks/TaskView.vue

@@ -1,16 +1,21 @@
 <template>
     <Table>
         <Header class="text-center grid-cols-12 gap-2">
-            <div class="col-span-1 lg:col-span-2 flex">
-                <Checkbox class="mr-3" :toggled="ui.mainCheckbox.tasks" @valueUpdate="ui.toggleMainCheckbox('tasks')" />
-                <div class="mx-auto hidden md:flex items-center" @click="ui.toggleSort('eventId')">
+            <div class="col-span-1 lg:col-span-2 flex items-center justify-start">
+                <Checkbox
+                    class="ml-2 mr-4"
+                    :toggled="ui.mainCheckbox.tasks"
+                    @valueUpdate="ui.toggleMainCheckbox('tasks')"
+                    :isHeader="true"
+                />
+                <div class="mx-auto hidden lg:flex items-center" @click="ui.toggleSort('eventId')">
                     <EventIcon class="ipadlg:mr-3" />
                     <h4 class="hidden ipadlg:flex">Event</h4>
                     <DownIcon v-if="ui.sortData.sortBy === 'eventId' && !ui.sortData.reversed" class="ml-1" />
                     <UpIcon v-if="ui.sortData.sortBy === 'eventId' && ui.sortData.reversed" class="ml-1" />
                 </div>
             </div>
-            <div class="col-span-2 items-center justify-center hidden md:flex" v-once>
+            <div class="col-span-2 items-center justify-center hidden lg:flex" v-once>
                 <CartIcon class="mr-0 ipadlg:mr-3" />
 
                 <h4 class="hidden ipadlg:flex">Quantity</h4>
@@ -39,14 +44,20 @@
             </div>
         </Header>
         <div
-            class="flex flex-col divide-y-2 divide-border overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan max-h-big tasks-table-height"
+            class="flex flex-col divide-y-2 divide-border overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan border-l-2 border-r-2 border-b-2 border-border"
+            :style="{ maxHeight: dynamicTableHeight }"
         >
-            <div v-for="(task, i) in getTasksInOrder()" :key="i">
-                <Task :task="task" :class="[i % 2 == 1 ? 'bg-dark-500' : 'bg-dark-550']" />
+            <div 
+                v-for="(task, i) in getTasksInOrder()" 
+                :key="task.taskId" 
+                :class="[i % 2 == 1 ? 'bg-dark-500' : 'bg-dark-550']"
+                class="task-row-container"
+            >
+                <Task :task="task" />
             </div>
             <div
                 v-if="getTasksInOrder().length === 0"
-                class="flex justify-center text-light-400 py-2 bg-dark-500 border-b-2 border-border"
+                class="flex justify-center text-light-400 py-2 bg-dark-500"
             >
                 <span v-if="ui.queueStats.total === 0"> No tasks yet.</span>
                 <span v-else>{{ ui.queueStats.total }} hidden task{{ ui.queueStats.total === 1 ? "" : "s" }}</span>
@@ -63,23 +74,17 @@ h4 {
     touch-action: pan-y pan-up pan-down;
 }
 
-.tasks-table-height {
-    max-height: 33rem !important;
-}
-
-@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
-    .tasks-table-height {
-        max-height: 45vh !important;
-    }
-}
-
-@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
-    .tasks-table-height {
-        max-height: 58vh !important;
+.task-row-container {
+    min-height: 69px;
+    flex-shrink: 0;
+    
+    @media (max-width: 768px) {
+        min-height: 58px;
     }
 }
 </style>
 <script setup>
+import { computed, ref, onMounted, onUnmounted } from "vue";
 import { Table, Header } from "@/components/Table";
 import { EventIcon, CartIcon, TicketIcon, StatusIcon, ClickIcon, DownIcon, UpIcon } from "@/components/icons";
 import Task from "./Task.vue";
@@ -123,4 +128,46 @@ const getTasksInOrder = () => {
     });
     return out;
 };
+
+// Dynamic height calculation to prevent page scrolling
+const windowHeight = ref(window.innerHeight);
+const windowWidth = ref(window.innerWidth);
+
+const updateDimensions = () => {
+    windowHeight.value = window.innerHeight;
+    windowWidth.value = window.innerWidth;
+};
+
+onMounted(() => {
+    window.addEventListener('resize', updateDimensions);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', updateDimensions);
+});
+
+const dynamicTableHeight = computed(() => {
+    // Calculate available space for table
+    const headerHeight = 60; // Header + navbar
+    const titleHeight = 50; // Tasks title and mobile controls
+    const statsHeight = 50; // Queue stats
+    const controlsHeight = windowWidth.value >= 650 ? 60 : 0; // Desktop controls
+    const filtersHeight = 50; // Event dropdown and filter toggle
+    const utilitiesHeight = windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 150 : 200; // Reduce utilities height in mobile portrait
+    const margins = windowWidth.value >= 1024 ? 40 : (windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 15 : 20); // Reduce margins in mobile portrait
+    
+    const totalUsedSpace = headerHeight + titleHeight + statsHeight + controlsHeight + filtersHeight + utilitiesHeight + margins;
+    const availableHeight = windowHeight.value - totalUsedSpace;
+    
+    // Calculate row height based on screen size
+    const rowHeight = windowWidth.value <= 768 ? 58 : 69; // Mobile vs desktop row height
+    const minRowsToShow = 2; // Always show at least 2 rows
+    const minHeight = minRowsToShow * rowHeight;
+    
+    // Calculate how many complete rows can fit
+    const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight);
+    const exactHeight = maxCompleteRows * rowHeight;
+    
+    return exactHeight + 'px';
+});
 </script>

package/src/components/Tasks/Utilities.vue

@@ -2,15 +2,13 @@
     <div class="grid grid-cols-1 gap-3 lg:grid-cols-1" v-once v-if="ui.currentModule == 'TM'">
         <div class="lg:justify-self-end">
             <h4 class="hidden lg:block text-white opacity-40 uppercase font-medium">Utils</h4>
-            <div class="flex gap-3">
+            <div class="flex gap-3 justify-between lg:justify-start">
                 <button class="button-default active:opacity-50 w-44" @click="ui.toggleModal('scrape-venue')">
-                    <ScrapeIcon />
-                    Scrape Venue
+                    <ScrapeIcon />Scrape Venue
                 </button>
                 <button class="button-default w-44" @click="ui.toggleModal('check-stock')">
                     <BoxIcon />Check Stock
                 </button>
-                <!-- Mobile Label -->
             </div>
             <h4 class="text-white opacity-40 uppercase font-medium block lg:hidden">Utils</h4>
         </div>
@@ -24,9 +22,10 @@ const ui = useUIStore();
 </script>
 <style lang="scss" scoped>
 button {
-    height: 50px;
     @apply bg-dark-400 text-xs flex items-center justify-center gap-x-2 border border-light-300 hover:border-light-400;
+    height: 50px;
 }
+
 h4 {
     font-size: 12px;
 }

package/src/components/ui/Modal.vue

@@ -33,6 +33,7 @@ onClickOutside(target, (event) => {
     background-color: rgba(17, 17, 17, 0.85);
     backdrop-filter: blur(4px);
 }
+
 .component-modal {
     margin: auto;
     width: 640px;
@@ -50,12 +51,22 @@ onClickOutside(target, (event) => {
         @apply flex flex-col;
     }
 }
+
 @media (max-width: 810px) {
+    .modal-mask {
+        @apply items-start pt-4;
+        padding-bottom: 2rem;
+    }
+    
     .component-modal {
         width: calc(100vw - 2rem);
-        max-height: calc(100vh - 2rem);
+        max-height: calc(100vh - 6rem);
         overflow-y: auto;
         margin: 1rem;
     }
+    
+    .modal-body {
+        padding-bottom: 1rem;
+    }
 }
 </style>