Skip to content

Commit be91935

Browse files
MalteSchwittersMalteSchwitters
committed
improve table scroll behavior
1 parent f5b0e93 commit be91935

File tree

16 files changed

+381
-252
lines changed

16 files changed

+381
-252
lines changed

‎frontend/src/adapter/rest/EventRestRepository.ts

+19-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { getCsrfToken } from '@/adapter/util/Csrf';
22
import type { EventRepository } from '@/application';
3+
import { DateUtils } from '@/common';
34
import type { Event, EventKey, EventState, ImportError, PositionKey, UserKey } from '@/domain';
45
import { EventType, SlotCriticality } from '@/domain';
56

@@ -72,9 +73,9 @@ interface ImportErrorRepresentation {
7273

7374
export class EventRestRepository implements EventRepository {
7475
public static mapEventToDomain(eventRepresentation: EventRepresentation): Event {
75-
return {
76+
const event: Event = {
7677
key: eventRepresentation.key,
77-
type: EventType.VOYAGE,
78+
type: EventType.MultiDayEvent,
7879
name: eventRepresentation.name,
7980
description: eventRepresentation.description,
8081
state: eventRepresentation.state as EventState,
@@ -99,6 +100,22 @@ export class EventRestRepository implements EventRepository {
99100
})),
100101
assignedUserCount: eventRepresentation.registrations.filter((it) => it.slotKey).length,
101102
};
103+
event.type = EventRestRepository.mapEventType(event);
104+
return event;
105+
}
106+
107+
private static mapEventType(event: Event): EventType {
108+
const start = DateUtils.cropToPrecision(event.start, 'days');
109+
const end = DateUtils.cropToPrecision(event.end, 'days');
110+
const durationDays = new Date(event.end.getTime() - event.start.getTime()).getDate();
111+
112+
if (start.getTime() === end.getTime()) {
113+
return EventType.SingleDayEvent;
114+
}
115+
if (durationDays <= 3) {
116+
return EventType.WeekendEvent;
117+
}
118+
return EventType.MultiDayEvent;
102119
}
103120

104121
public async findAll(year: number): Promise<Event[]> {

‎frontend/src/domain/values/EventType.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export enum EventType {
2-
WorkEvent = 'work',
3-
VOYAGE = 'voyage',
4-
SINGLE_DAY_VOYAGE = 'single-day-voyage',
2+
WorkEvent = 'work-event',
3+
SingleDayEvent = 'single-day-event',
4+
WeekendEvent = 'weekend-event',
5+
MultiDayEvent = 'multi-day-event',
56
}

‎frontend/src/ui/assets/css/styling/buttons.css

+24-2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ button:disabled {
99
@apply px-4 py-2;
1010
@apply font-bold;
1111
@apply flex items-center space-x-4;
12+
@apply whitespace-nowrap;
1213
}
1314

1415
.btn-primary {
@@ -85,6 +86,27 @@ button:disabled {
8586
}
8687

8788
.btn-back {
88-
@apply btn-ghost;
89-
@apply rounded-full p-3 text-base;
89+
@apply flex items-center justify-center;
90+
@apply font-black text-primary-700 hover:text-primary-800;
91+
@apply rounded-full p-3;
92+
@apply hover:no-underline;
93+
@apply relative;
94+
}
95+
96+
.btn-back:before {
97+
content: '';
98+
@apply pointer-events-none absolute bg-primary-100;
99+
top: 50%;
100+
left: 50%;
101+
right: 50%;
102+
bottom: 50%;
103+
transition: top, left, right, bottom;
104+
transition-duration: 100ms;
105+
transition-timing-function: ease-in-out;
106+
border-radius: inherit;
107+
z-index: -1;
108+
}
109+
110+
.btn-back:hover:before {
111+
@apply bottom-0 left-0 right-0 top-0;
90112
}

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
.pagination {
22
@apply flex items-stretch justify-end space-x-2;
3-
@apply px-6 py-2 md:pr-12 xl:pr-16;
4-
@apply fixed bottom-0 left-0 right-0 z-10 bg-primary-50 xl:absolute xl:pr-12;
3+
@apply px-8 py-2 md:px-16 xl:pr-20;
4+
@apply sticky bottom-0 left-0 z-10 bg-primary-50 xl:px-20;
55
}
66

77
.pagination-page {
8-
@apply w-8 px-2 py-2 font-semibold opacity-50;
8+
@apply w-8 rounded-lg px-2 py-2 font-semibold opacity-25;
9+
@apply flex items-center justify-center;
910
}
1011

1112
.pagination-page.enabled {
1213
@apply opacity-100;
13-
@apply flex w-10 items-center justify-center rounded-lg py-1;
1414
@apply hover:bg-primary-100 hover:text-primary-600;
1515
}
1616

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

+8-8
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ table.v-table {
1414
}
1515

1616
.v-table thead tr {
17-
@apply bg-transparent text-sm font-bold text-primary-600;
17+
@apply bg-transparent text-sm font-bold text-primary-700 text-opacity-50;
1818
}
1919

2020
.v-table th {
2121
@apply font-bold;
22-
@apply px-4 py-4 text-left;
22+
@apply px-4 pb-4 pt-8 text-left;
2323
}
2424

2525
.v-table th[data-sortby] {
@@ -60,11 +60,11 @@ table.v-table {
6060
.v-table tbody td {
6161
}
6262

63-
.v-table.sticky-table-header th {
63+
.sticky-table-header .v-table th {
6464
@apply sticky top-12 z-10 bg-primary-50 pt-4 xl:top-0;
6565
}
6666

67-
.v-table.sticky-table-header th:before {
67+
.sticky-table-header .v-table th:before {
6868
content: '';
6969
@apply absolute bottom-0 left-0 right-0 top-0;
7070
@apply border-b border-primary-100;
@@ -94,15 +94,15 @@ table.v-table {
9494
@apply pr-0;
9595
}
9696

97-
.v-table.no-header thead {
97+
.no-header .v-table thead {
9898
@apply hidden;
9999
}
100100

101-
.v-table.interactive-table tbody tr {
101+
.v-table tbody tr {
102102
@apply relative z-10;
103103
}
104104

105-
.v-table.interactive-table:not(.loading) tbody tr:not(.no-data) {
105+
.interactive-table .v-table:not(.loading) tbody tr:not(.no-data) {
106106
@apply cursor-pointer hover:text-primary-600;
107107
}
108108

@@ -111,6 +111,6 @@ table.v-table {
111111
@apply absolute bottom-1 left-0 right-0 top-1 -z-10 rounded-xl bg-primary-100 bg-opacity-50;
112112
}
113113

114-
.v-table.interactive-table:not(.loading) tbody tr:not(.no-data):hover td:first-child::before {
114+
.interactive-table:not(.loading) .v-table tbody tr:not(.no-data):hover td:first-child::before {
115115
@apply bg-primary-100 bg-opacity-100;
116116
}

‎frontend/src/ui/components/common/table/VPagination.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const props = defineProps<Props>();
5454
// eslint-disable-next-line @typescript-eslint/no-unused-vars
5555
const emit = defineEmits<Emits>();
5656
57-
const visiblePagesCount = ref<number>(7);
57+
const visiblePagesCount = ref<number>(8);
5858
const pageSize = computed<number>(() => props.pageSize || 10);
5959
const pageCount = computed<number>(() => Math.ceil(props.count / pageSize.value));
6060

‎frontend/src/ui/components/common/table/VTable.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div class="">
3-
<table :class="$attrs.class + ' ' + classes.join(' ')" class="v-table">
2+
<div :class="$attrs.class + ' ' + classes.join(' ')">
3+
<table class="v-table">
44
<thead>
55
<tr ref="head">
66
<th></th>

‎frontend/src/ui/components/common/tabs/VTabs.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div :class="$attrs.class">
33
<h2
4-
class="scrollbar-invisible flex space-x-8 overflow-x-auto border-b border-gray-300 px-8 text-base font-semibold md:px-16 xl:px-20"
4+
class="scrollbar-invisible flex space-x-8 overflow-x-auto border-b border-primary-200 px-8 text-base font-semibold md:px-16 xl:px-20"
55
>
66
<button
77
v-for="tab in props.tabs"

‎frontend/src/ui/components/partials/AppNavbar.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<!-- Desktop navbar-->
3-
<nav class="fixed top-0 z-40 w-screen overflow-x-hidden overflow-y-scroll print:hidden">
3+
<nav class="fixed top-0 z-40 w-screen print:hidden">
44
<div
55
:class="meta.hasTransparentHeader ? 'sm:bg-navbar' : 'bg-navbar'"
66
class="h-nav flex items-center text-white shadow"

‎frontend/src/ui/components/partials/DetailsPage.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</div>
1515

1616
<div
17-
class="pointer-events-none sticky bottom-0 z-10 flex items-stretch justify-end space-x-2 pb-4 pr-3 pt-6 md:pr-14 lg:pointer-events-auto lg:justify-start lg:border-t lg:border-gray-300 lg:bg-primary-50 lg:px-16 lg:pb-8 xl:px-20"
17+
class="pointer-events-none sticky bottom-0 z-10 flex items-stretch justify-end space-x-2 pb-4 pr-3 pt-6 md:pr-14 lg:pointer-events-auto lg:justify-start lg:border-t lg:border-primary-200 lg:bg-primary-50 lg:px-16 lg:pb-8 xl:px-20"
1818
>
1919
<div class="details-page-primary-button w-auto">
2020
<slot name="primary-button" />

‎frontend/src/ui/views/admin/events/edit/EventEditView.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@
3737
v-model="event.type"
3838
:options="[
3939
{ value: EventType.WorkEvent, label: 'Arbeitsdienst' },
40-
{ value: EventType.VOYAGE, label: 'Mehrtagesreise' },
40+
{ value: EventType.SingleDayEvent, label: 'Tagesfahrt' },
41+
{ value: EventType.WeekendEvent, label: 'Wochenendreise' },
42+
{ value: EventType.MultiDayEvent, label: 'Mehrtagesfahrt' },
4143
]"
4244
required
4345
/>

‎frontend/src/ui/views/admin/events/list/CreateEventDlg.vue

+4-3
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@
1515
v-model="event.type"
1616
:options="[
1717
{ value: EventType.WorkEvent, label: 'Arbeitsdienst' },
18-
{ value: EventType.SINGLE_DAY_VOYAGE, label: 'Tagesfahrt' },
19-
{ value: EventType.VOYAGE, label: 'Mehrtagesfahrt' },
18+
{ value: EventType.SingleDayEvent, label: 'Tagesfahrt' },
19+
{ value: EventType.WeekendEvent, label: 'Wochenendreise' },
20+
{ value: EventType.MultiDayEvent, label: 'Mehrtagesfahrt' },
2021
]"
2122
required
2223
/>
@@ -100,7 +101,7 @@ const event = ref<Event>({
100101
key: '',
101102
name: '',
102103
description: '',
103-
type: EventType.VOYAGE,
104+
type: EventType.WeekendEvent,
104105
state: EventState.Draft,
105106
start: new Date(),
106107
end: new Date(),

0 commit comments

Comments
 (0)