Skip to content

Commit 360aa06

Browse files
MalteSchwittersMalteSchwitters
committed
small visual improvements
1 parent 4a5cf57 commit 360aa06

File tree

6 files changed

+39
-24
lines changed

6 files changed

+39
-24
lines changed

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ button:disabled {
1717
@apply bg-primary-200 text-primary-900;
1818
}
1919

20-
a.btn-primary .btn-primary {
20+
a.btn-primary,
21+
.btn-primary:enabled {
2122
@apply bg-primary-200 hover:bg-primary-300 hover:shadow;
2223
}
2324

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -38,19 +38,19 @@ async function showNotification(
3838
let icon = '';
3939
switch (type) {
4040
case 'success':
41-
icon = 'fa-check-circle';
41+
icon = 'fa-check';
4242
break;
4343
case 'info':
44-
icon = 'fa-info-circle';
44+
icon = 'fa-info';
4545
break;
4646
case 'warning':
4747
icon = 'fa-warning';
4848
break;
4949
case 'error':
50-
icon = 'fa-exclamation-circle';
50+
icon = 'fa-exclamation';
5151
break;
5252
default:
53-
icon = 'fa-check-circle';
53+
icon = 'fa-check';
5454
break;
5555
}
5656
const notification: Notification = {

‎frontend/src/ui/composables/Validation.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,9 @@ export function useValidation<T>(t: Ref<T>, validationFunction: (t: T) => Record
1717
return showErrors.value && !isValid.value;
1818
});
1919

20-
return { errors, isValid, showErrors, disableSubmit };
20+
function reset(): void {
21+
showErrors.value = false;
22+
}
23+
24+
return { errors, isValid, showErrors, disableSubmit, reset };
2125
}

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

+1
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@ async function submitIfValid(submitFun: () => void) {
179179
}
180180
181181
async function open(): Promise<Event> {
182+
validation.reset();
182183
await dlg.value?.open();
183184
if (template.value) {
184185
event.value.slots = template.value.slots.map((slot) => ({

‎frontend/src/ui/views/events/details/EventDetailsView.vue

+24-16
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,25 @@
99
class="gap-x-20 gap-y-8 space-y-8 px-8 pb-8 pt-6 md:grid md:grid-cols-2 md:space-y-0 md:px-16 xl:px-20"
1010
>
1111
<!-- state info banner -->
12-
<section v-if="state" class="sticky left-4 right-4 top-14 col-start-2 -mx-4 md:static xl:mx-0">
13-
<div class="overflow-hidden rounded-2xl bg-white">
14-
<div :class="state.color">
15-
<div class="flex items-center space-x-4 px-4 py-4 lg:px-8">
16-
<i :class="state.icon" class="fa-solid" />
17-
<!-- eslint-disable-next-line vue/no-v-html -->
18-
<p class="text-sm font-bold" v-html="state.text"></p>
19-
</div>
12+
<section
13+
v-if="event.signedInUserAssignedPosition"
14+
class="sticky left-4 right-4 top-14 col-start-2 -mx-4 md:static xl:mx-0"
15+
>
16+
<div class="overflow-hidden rounded-2xl bg-green-100 text-green-800">
17+
<div class="flex items-center space-x-4 px-4 py-4 lg:px-8">
18+
<i class="fa-solid fa-check" />
19+
<p class="text-sm font-bold">Du bist für diese Reise eingeplant</p>
20+
</div>
21+
</div>
22+
</section>
23+
<section
24+
v-else-if="event.signedInUserWaitingListPosition"
25+
class="sticky left-4 right-4 top-14 col-start-2 -mx-4 md:static xl:mx-0"
26+
>
27+
<div class="overflow-hidden rounded-2xl bg-yellow-100 text-yellow-800">
28+
<div class="flex items-center space-x-4 px-4 py-4 lg:px-8">
29+
<i class="fa-solid fa-hourglass-half" />
30+
<p class="text-sm font-bold">Du stehst für diese Reise auf der Warteliste</p>
2031
</div>
2132
</div>
2233
</section>
@@ -39,10 +50,6 @@
3950
<i class="fa-solid fa-clock w-4 text-gray-700" />
4051
<span>Crew an Board: 16:00 Uhr</span>
4152
</p>
42-
<!-- <p class="flex items-center space-x-4">-->
43-
<!-- <i class="fa-solid fa-route w-4 text-gray-700" />-->
44-
<!-- <span>300 Seemeilen (geschätzt)</span>-->
45-
<!-- </p>-->
4653
<p class="flex items-center space-x-4">
4754
<i class="fa-solid fa-users w-4 text-gray-700" />
4855
<span v-if="event.assignedUserCount && waitingListCount">
@@ -66,7 +73,8 @@
6673
</h2>
6774
<div class="space-y-1 rounded-2xl bg-primary-100 p-4 lg:px-8">
6875
<p v-if="event.locations.length === 0" class="text-sm">
69-
Für diese Reise wurde noch keine Reiseroute angegeben.
76+
Für diese Reise wurde noch keine Reiseroute bekannt gegeben. Sobald diese Informationen
77+
verfügbar sind, kannst du sie hier sehen.
7078
</p>
7179
<div
7280
v-for="(stop, portIndex) in event.locations"
@@ -109,14 +117,14 @@
109117
<span>Anmeldungen</span>
110118
</h2>
111119
<div
112-
v-if="team.length === 0"
120+
v-if="team.length === 0 && waitingListCount === 0"
113121
class="rounded-2xl bg-primary-100 px-4 md:-mx-4 md:-mt-4 lg:-mx-8 lg:px-8"
114122
>
115123
<div class="flex items-center py-8">
116124
<div class="mr-4">
117125
<h3 class="mb-4 text-base">
118126
<i class="fa-solid fa-trophy opacity-75"></i>
119-
Du könntest der erste sein!
127+
<span class="ml-4">Du könntest der erste sein!</span>
120128
</h3>
121129
<p class="text-sm">
122130
Für diese Reise hat sich bisher noch niemand angemeldet. Du kannst den Anfang machen
@@ -127,7 +135,7 @@
127135
<div></div>
128136
</div>
129137
<ul class="pb-8 opacity-20">
130-
<li v-for="i in 5" :key="i" class="flex items-center space-x-4 rounded-xl py-2">
138+
<li v-for="i in 10" :key="i" class="flex items-center space-x-4 rounded-xl py-1">
131139
<i class="fa-solid fa-circle text-gray-400"></i>
132140
<span class="mx-2 inline-block h-4 w-64 rounded-full bg-gray-400"> </span>
133141
<span class="flex-grow"></span>

‎frontend/src/ui/views/home/EventCard.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</span>
2323
<span>{{ props.event.assignedUserCount }} Crew</span>
2424
</p>
25-
<div class="flex flex-col flex-wrap justify-between">
25+
<div class="flex flex-wrap">
2626
<div
2727
v-for="(location, index) in props.event.locations"
2828
:key="index"
@@ -35,6 +35,7 @@
3535
:country="location.country"
3636
class="border border-gray-200"
3737
/>
38+
<span class="pr-2">↣</span>
3839
</div>
3940
</div>
4041

@@ -43,7 +44,7 @@
4344
class="-mx-4 mt-6 flex rounded-xl bg-blue-500 bg-opacity-15 px-4 py-2"
4445
>
4546
<p class="flex items-center space-x-2 text-blue-700">
46-
<i class="fa-solid fa-circle-info w-4" />
47+
<i class="fa-solid fa-hourglass-half w-4" />
4748
<span class="text-sm font-bold">{{ $t('app.event-details.note-waitinglist') }}</span>
4849
</p>
4950
</div>

0 commit comments

Comments
 (0)