torsten/trainingstagebuch
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Verbessert die Mitgliederansicht in MembersView.vue, indem inaktive Mitglieder visuell hervorgehoben werden. Fügt CSS-Klassen hinzu, um die Darstellung inaktiver Mitglieder zu optimieren, einschließlich einer inaktiven Auszeichnung und einer durchgestrichenen Schriftart für inaktive Geschlechtssymbole und -bezeichnungen.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-08-31 15:11:01 +02:00
parent c00849a154
commit 2092473cf3
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/views/MembersView.vue
View File

@@ -65,7 +65,7 @@
</thead>
<tbody>
<template v-for="member in members" :key="member.id">
<tr v-if="member.active || showInactiveMembers" class="member-row" @click="editMember(member)">
<tr v-if="member.active || showInactiveMembers" class="member-row" :class="{ 'row-inactive': !member.active }" @click="editMember(member)">
<td>
<img v-if="member.imageUrl" :src="member.imageUrl" alt="Mitgliedsbild"
style="max-width: 50px; max-height: 50px;"
@@ -74,9 +74,10 @@
</td>
<td>{{ member.testMembership ? '*' : '' }}</td>
<td>
<span class="gender-symbol" :class="'gender-' + (member.gender || 'unknown')" :title="labelGender(member.gender)">{{ genderSymbol(member.gender) }}</span>
<span class="gender-name" :class="'gender-' + (member.gender || 'unknown')">
<span class="gender-symbol" :class="['gender-' + (member.gender || 'unknown'), { 'is-inactive': !member.active }]" :title="labelGender(member.gender)">{{ genderSymbol(member.gender) }}</span>
<span class="gender-name" :class="['gender-' + (member.gender || 'unknown'), { 'is-inactive': !member.active }]">
{{ member.lastName }}, {{ member.firstName }}
<span v-if="!member.active && showInactiveMembers" class="inactive-badge">inaktiv</span>
</span>
</td>
<td>{{ member.street }}, {{ member.city }}</td>
@@ -485,4 +486,7 @@ table td {
.gender-symbol.gender-diverse { color: #6a1b9a; }
.gender-symbol.gender-unknown { color: #444; }
.gender-symbol { margin-right: .35rem; opacity: .9; font-size: 1.05em; display: inline-block; width: 1.1em; text-align: center; }
.row-inactive { opacity: .6; }
.is-inactive { text-decoration: line-through; }
.inactive-badge { margin-left: .5rem; font-size: .85em; color: #666; text-transform: lowercase; }
</style>