From 2092473cf3780d7ade87154cad76e4d73c4cefb1 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Sun, 31 Aug 2025 15:11:01 +0200
Subject: [PATCH] =?UTF-8?q?Verbessert=20die=20Mitgliederansicht=20in=20Mem?=
 =?UTF-8?q?bersView.vue,=20indem=20inaktive=20Mitglieder=20visuell=20hervo?=
 =?UTF-8?q?rgehoben=20werden.=20F=C3=BCgt=20CSS-Klassen=20hinzu,=20um=20di?=
 =?UTF-8?q?e=20Darstellung=20inaktiver=20Mitglieder=20zu=20optimieren,=20e?=
 =?UTF-8?q?inschlie=C3=9Flich=20einer=20inaktiven=20Auszeichnung=20und=20e?=
 =?UTF-8?q?iner=20durchgestrichenen=20Schriftart=20f=C3=BCr=20inaktive=20G?=
 =?UTF-8?q?eschlechtssymbole=20und=20-bezeichnungen.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/MembersView.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/MembersView.vue b/frontend/src/views/MembersView.vue
index a609290..ec805f4 100644
--- a/frontend/src/views/MembersView.vue
+++ b/frontend/src/views/MembersView.vue
@@ -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>