improve pagination on user and event list

Author: MalteSchwitters

frontend/src/ui/assets/css/styling/pagination.css

@@ -1,7 +1,7 @@
 .pagination {
     @apply flex items-stretch justify-end space-x-2;
     @apply px-8 py-2 md:px-16 xl:pr-20;
-    @apply sticky bottom-0 left-0 z-10 bg-primary-50 xl:px-20;
+    @apply bg-primary-50 xl:px-20;
 }
 
 .pagination-page {

frontend/src/ui/assets/css/styling/table.css

@@ -7,19 +7,19 @@ table.v-table {
 
 @media (min-width: 768px) {
     table.v-table {
-        margin-left: -2rem;
-        margin-right: -2rem;
-        width: calc(100% + 4rem);
+        margin-left: -1.5rem;
+        margin-right: -1.5rem;
+        width: calc(100% + 3rem);
     }
 
     .v-table th:first-child,
     .v-table td:first-child {
-        padding-right: 2rem !important;
+        padding-right: 1.5rem !important;
     }
 
     .v-table th:last-child,
     .v-table td:last-child {
-        padding-left: 2rem !important;
+        padding-left: 1.5rem !important;
     }
 }
 

frontend/src/ui/views/admin/events/list/EventsAdminView.vue

@@ -3,9 +3,7 @@
         <teleport to="#nav-right">
             <NavbarFilter v-model="filter" placeholder="Events durchsuchen" />
         </teleport>
-        <div
-            class="sticky top-12 z-20 hidden bg-primary-50 px-4 pb-8 pt-4 md:pl-12 md:pr-16 md:pt-8 xl:top-0 xl:block xl:pl-16 xl:pr-20"
-        >
+        <div class="top-0 hidden bg-primary-50 px-4 pb-8 pl-16 pr-20 pt-8 xl:block">
             <div class="flex items-center space-x-4">
                 <VInputText v-model="filter" class="input-search w-96" placeholder="Reisen filtern">
                     <template #before>
@@ -28,12 +26,12 @@
             </div>
         </div>
 
-        <VTabs v-model="tab" :tabs="tabs" class="sticky top-12 z-20 bg-primary-50 pt-4 xl:top-[6.625rem]" />
+        <VTabs v-model="tab" :tabs="tabs" class="sticky top-12 z-20 bg-primary-50 pt-4 xl:top-0 xl:pt-8" />
         <div class="w-full">
             <VTable
                 :items="filteredEvents"
-                :page-size="-1"
-                class="interactive-table scrollbar-invisible overflow-x-auto px-8 md:px-16 xl:px-20"
+                :page-size="20"
+                class="interactive-table no-header scrollbar-invisible overflow-x-auto px-8 pt-4 md:px-16 xl:px-20"
                 @click="editEvent($event)"
             >
                 <template #head>

frontend/src/ui/views/admin/users/list/UsersListView.vue

@@ -3,9 +3,7 @@
         <teleport to="#nav-right">
             <NavbarFilter v-model="filter" placeholder="Nutzer durchsuchen" />
         </teleport>
-        <div
-            class="sticky left-0 top-12 z-20 hidden border-b border-primary-200 bg-primary-50 px-4 pb-8 pt-4 md:pl-12 md:pr-16 md:pt-8 xl:top-0 xl:block xl:pl-16 xl:pr-20"
-        >
+        <div class="top-0 hidden bg-primary-50 px-4 pb-8 pl-16 pr-20 pt-8 xl:block">
             <div class="flex items-center space-x-4">
                 <VInputText v-model="filter" class="input-search w-96" placeholder="Nutzer filtern">
                     <template #before>
@@ -22,12 +20,13 @@
                 </div>
             </div>
         </div>
+        <VTabs v-model="tab" :tabs="tabs" class="sticky top-12 z-20 bg-primary-50 pt-4 xl:top-0 xl:pt-8" />
         <div class="w-full">
             <VTable
                 :items="filteredUsers"
                 :page-size="20"
                 :query="true"
-                class="interactive-table scrollbar-invisible overflow-x-auto px-8 md:px-16 xl:px-20"
+                class="interactive-table no-header scrollbar-invisible overflow-x-auto px-8 pt-4 md:px-16 xl:px-20"
                 @click="editUser($event)"
             >
                 <template #head>
@@ -201,6 +200,7 @@ import { ArrayUtils } from '@/common';
 import type { Position, User } from '@/domain';
 import { EventType } from '@/domain';
 import type { Dialog } from '@/ui/components/common';
+import { VTabs } from '@/ui/components/common';
 import { ContextMenuButton, VInputCheckBox, VInputText, VTable } from '@/ui/components/common';
 import NavbarFilter from '@/ui/components/utils/NavbarFilter.vue';
 import { useAuthUseCase, useEventUseCase, useUsersUseCase } from '@/ui/composables/Application';
@@ -231,6 +231,8 @@ const usersService = useUserService();
 const authUseCase = useAuthUseCase();
 const router = useRouter();
 
+const tab = ref<string>('Alle Nutzer');
+const tabs = ref<string[]>(['Alle Nutzer']);
 const filter = ref<string>('');
 const filterOnlyActive = ref<boolean>(false);
 const users = ref<UserRegistrations[] | undefined>(undefined);