Skip to content

Commit 8b5a375

Browse files
MalteSchwittersMalteSchwitters
committed
rework tables and fix some alignments
1 parent 9c22b1d commit 8b5a375

26 files changed

+451
-295
lines changed

‎frontend/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" href="/favicon.png" />
66
<link rel="manifest" href="/manifest.json" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
88
<title>Lissi</title>
99
</head>
1010
<body>

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

-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import type { AccountRepository } from '@/application';
2-
import type { Config } from '@/application/values/Config';
3-
import { Timer } from '@/common';
42
import type { SignedInUser } from '@/domain';
53
import type { Permission, Role } from '@/domain';
64

‎frontend/src/application/usecases/AuthUseCase.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@ export class AuthUseCase {
6565
}
6666

6767
public impersonateUser(userKey: UserKey): void {
68-
// TODO
68+
localStorage.setItem('eventplanner.overrideSignedInUserKey', userKey);
69+
window.location.reload();
6970
}
7071

7172
public isLoggedIn(): boolean | null {

‎frontend/src/application/usecases/ErrorHandlingUseCase.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,18 @@ export class ErrorHandlingUseCase {
1515
}
1616

1717
public handleError(error: ErrorDetails): void {
18+
console.error(error.error);
1819
if (this.errorHandler) {
1920
this.errorHandler(error);
20-
} else {
21-
console.error(error.error);
2221
}
2322
}
2423

24+
public handleRawError(e: unknown | Error | Response): void {
25+
this.handleError({
26+
error: e,
27+
});
28+
}
29+
2530
public handleUnexpectedError(e: unknown | Error | Response): void {
2631
this.handleError({
2732
error: e,

‎frontend/src/application/usecases/EventUseCase.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { AuthService } from '@/application';
2-
import type { AccountRepository } from '@/application/ports/AccountRepository';
32
import type { EventRepository } from '@/application/ports/EventRepository';
43
import type { EventCachingService } from '@/application/services/EventCachingService';
54
import { DateFormatter } from '@/common/date';

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

-69
This file was deleted.

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -71,17 +71,17 @@ button:disabled {
7171

7272
.btn-ghost {
7373
@apply flex items-center justify-center;
74-
@apply text-sm font-bold uppercase text-primary-700;
74+
@apply text-sm font-black text-primary-700 hover:text-primary-800;
7575
@apply rounded-lg px-4 py-2 hover:bg-primary-50;
7676
@apply hover:no-underline;
7777
}
7878

7979
.bg-primary-50 .btn-ghost {
80-
@apply text-primary-900 hover:bg-primary-100;
80+
@apply text-primary-700 hover:bg-primary-100;
8181
}
8282

8383
.bg-primary-200 .btn-ghost {
84-
@apply text-primary-900 hover:bg-primary-300;
84+
@apply text-primary-800 hover:bg-primary-300 hover:text-primary-900;
8585
}
8686

8787
.btn-back {

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

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
1-
@import '@/ui/assets/css/lib/pagination.css';
2-
31
.pagination {
4-
@apply items-stretch space-x-2 px-6 py-2;
5-
@apply fixed bottom-0 left-0 right-0 bg-primary-50 md:right-8 xl:absolute xl:right-12;
2+
@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;
5+
}
6+
7+
.pagination-page {
8+
@apply w-8 px-2 py-2 font-semibold opacity-50;
69
}
710

811
.pagination-page.enabled {
12+
@apply opacity-100;
913
@apply flex w-10 items-center justify-center rounded-lg py-1;
1014
@apply hover:bg-primary-100 hover:text-primary-600;
1115
}
1216

1317
.pagination-page.active {
1418
@apply bg-primary-100 font-bold text-blue-600 shadow-none;
15-
@apply no-underline;
1619
}

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

+90-12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,63 @@
1-
@import '@/ui/assets/css/lib/table.css';
1+
table.v-table {
2+
@apply w-full;
3+
margin-left: -1rem;
4+
margin-right: -1rem;
5+
width: calc(100% + 2rem);
6+
}
7+
8+
@media (min-width: 768px) {
9+
table.v-table {
10+
margin-left: -2rem;
11+
margin-right: -2rem;
12+
width: calc(100% + 4rem);
13+
}
14+
}
15+
16+
.v-table thead tr {
17+
@apply bg-transparent text-sm font-bold text-primary-600;
18+
}
19+
20+
.v-table th {
21+
@apply font-bold;
22+
@apply px-4 py-4 text-left;
23+
}
24+
25+
.v-table th[data-sortby] {
26+
white-space: nowrap;
27+
cursor: pointer;
28+
padding-right: 2em;
29+
}
30+
31+
.v-table th[data-sortby]:after {
32+
content: '▼';
33+
width: 1em;
34+
font-size: 0.675em;
35+
margin-left: 0.75em;
36+
margin-top: 0.15em;
37+
overflow: hidden;
38+
opacity: 0.2;
39+
}
40+
41+
.v-table th[data-sortby]:hover:after {
42+
content: '▼';
43+
opacity: 1;
44+
}
45+
46+
.v-table th.sort.asc:after {
47+
content: '▼';
48+
opacity: 1;
49+
}
50+
51+
.v-table th.sort.desc:after {
52+
content: '▲';
53+
opacity: 1;
54+
}
55+
56+
.v-table td {
57+
@apply px-4 py-4 text-left;
58+
}
259

3-
.v-table {
4-
@apply mb-16;
60+
.v-table tbody td {
561
}
662

763
.v-table.sticky-table-header th {
@@ -14,25 +70,47 @@
1470
@apply border-b border-primary-100;
1571
}
1672

17-
.v-table tbody tr {
18-
@apply border-b border-primary-100 bg-transparent even:bg-transparent;
19-
}
20-
2173
.v-table th:first-child,
2274
.v-table td:first-child {
23-
@apply pl-0;
75+
@apply w-0 border-none pl-0 pr-4 md:pr-8;
76+
}
77+
78+
.v-table td:first-child::before {
79+
@apply rounded-l-2xl;
2480
}
2581

2682
.v-table th:last-child,
2783
.v-table td:last-child {
84+
@apply w-0 border-none pl-4 pr-0 md:pl-8;
85+
}
86+
87+
.v-table th:nth-child(2),
88+
.v-table td:nth-child(2) {
89+
@apply pl-0;
90+
}
91+
92+
.v-table th:nth-last-child(2),
93+
.v-table td:nth-last-child(2) {
2894
@apply pr-0;
2995
}
3096

31-
.v-table thead tr,
32-
.v-table th {
33-
@apply bg-transparent pt-0 text-sm font-bold text-primary-600;
97+
.v-table.no-header thead {
98+
@apply hidden;
3499
}
35100

36101
.v-table.interactive-table tbody tr {
37-
@apply cursor-pointer hover:bg-primary-100;
102+
@apply relative z-10;
103+
}
104+
105+
.v-table.interactive-table tbody tr:not(.no-data) {
106+
@apply cursor-pointer hover:text-primary-600;
107+
}
108+
109+
.v-table.interactive-table tbody tr td:first-child::before {
110+
content: '';
111+
@apply absolute bottom-1 left-1 right-1 top-1 -z-10 rounded-xl bg-primary-100 bg-opacity-50;
112+
}
113+
114+
.v-table.interactive-table tbody tr:not(.no-data):hover td:first-child::before {
115+
@apply bg-primary-200 shadow-lg;
38116
}

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,9 @@ code {
4848

4949
@font-face {
5050
font-family: 'Comfortaa';
51-
src: url("../../fonts/Comfortaa-VariableFont_wght.woff2") format("woff2 supports variations"),
52-
url("../../fonts/Comfortaa-VariableFont_wght.woff2") format("woff2-variations");
51+
src: url('../../fonts/Comfortaa-VariableFont_wght.woff2') format('woff2 supports variations');
52+
src: url('../../fonts/Comfortaa-VariableFont_wght.woff2') format('woff2-variations');
53+
src: url('../../fonts/Comfortaa-VariableFont_wght.woff2') format('woff2') tech('variations');
5354
font-weight: 100 1000;
55+
font-stretch: 25% 151%;
5456
}

‎frontend/src/ui/components/common/buttons/ContextMenuButton.vue

+5-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,11 @@ const open = ref<boolean>(false);
2929

3030
<style>
3131
.context-menu-item {
32-
@apply -mx-4 flex cursor-pointer items-center px-4 py-3 hover:bg-primary-200 md:py-2;
32+
@apply -mx-4 flex cursor-pointer items-center px-4 py-3 hover:bg-primary-200 hover:no-underline md:py-2;
33+
}
34+
35+
.context-menu-item.disabled {
36+
@apply pointer-events-none opacity-50;
3337
}
3438
3539
.context-menu-item > i,

‎frontend/src/ui/components/common/dialog/VErrorDialog.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@
3535
import { computed, ref } from 'vue';
3636
import type { Dialog } from '@/ui/components/common';
3737
import { VDialog } from '@/ui/components/common';
38-
import { useErrorHandlingUseCase } from '@/ui/composables/Application';
38+
import { useErrorHandling } from '@/ui/composables/Application';
3939
import type { ErrorDialogMessage } from './ErrorDialog';
4040
41-
const errorHandlingUseCase = useErrorHandlingUseCase();
41+
const errorHandlingUseCase = useErrorHandling();
4242
const dlg = ref<Dialog<void, ErrorDialogMessage> | null>(null);
4343
const error = ref<ErrorDialogMessage>({});
4444

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

+9-3
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,41 @@
33
<table :class="$attrs.class" class="v-table">
44
<thead>
55
<tr ref="head">
6+
<th></th>
67
<slot name="head" :sort-by="sortCol" :sort-direction="sortDir > 0 ? 'asc' : 'desc'"></slot>
8+
<th></th>
79
</tr>
810
</thead>
911
<!-- loading -->
1012
<tbody v-if="loading">
1113
<slot name="loading" :colspan="columnCount">
1214
<tr>
15+
<td></td>
1316
<td :colspan="columnCount" class="italic">Wird geladen...</td>
17+
<td></td>
1418
</tr>
1519
</slot>
1620
</tbody>
1721
<!-- no data -->
1822
<tbody v-else-if="empty">
1923
<tr class="no-data">
24+
<td></td>
2025
<slot name="no-data" :colspan="columnCount">
21-
<td :colspan="columnCount" class="italic">
22-
Keine Daten gefunden. Versuche einen anderen Filter, oder lege einen neuen Datensatz an.
23-
</td>
26+
<td :colspan="columnCount" class="italic">Keine Daten.</td>
2427
</slot>
28+
<td></td>
2529
</tr>
2630
</tbody>
2731
<!-- data -->
2832
<tbody v-else>
2933
<tr v-for="(row, index) in pagedItems" :key="index" @click="emit('click', row)">
34+
<td></td>
3035
<slot name="row" :item="row" :index="index">
3136
<td v-for="(val, colIndex) in Object.values(row)" :key="colIndex">
3237
{{ val }}
3338
</td>
3439
</slot>
40+
<td></td>
3541
</tr>
3642
</tbody>
3743
</table>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
</div>
2121
<div v-if="props.modelValue && $slots[props.modelValue]" class="flex-1 px-8 py-4 md:px-16 md:py-8 xl:px-20">
2222
<template v-for="tab in props.tabs" :key="tab">
23-
<div v-show="tab === props.modelValue">
23+
<div v-show="tab === props.modelValue" class="h-full">
2424
<slot :name="tab" :active="tab === props.modelValue" />
2525
</div>
2626
</template>

‎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 print:hidden">
3+
<nav class="fixed top-0 z-40 w-screen overflow-x-hidden overflow-y-scroll print:hidden">
44
<div
55
:class="meta.hasTransparentHeader ? 'sm:bg-navbar' : 'bg-navbar'"
66
class="h-nav flex items-center text-white shadow"

0 commit comments

Comments
 (0)