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

feat(match-report): replace player selection divs with buttons for improved accessibility and interaction
All checks were successful
Deploy tt-tagebuch / deploy (push) Successful in 1m3s
Details

Browse Source
This commit is contained in:
Torsten Schulz (local)
2026-09-14 07:36:41 +02:00
parent acbb6c56ee
commit 47bbc0d766
1 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/components/MatchReportApiDialog.vue
View File

@@ -294,7 +294,7 @@
<div class="players-grid">
<div v-for="player in meetingDetails.teamLineupHomePlayers.filter(p => p.isSelected && p.nuLigaPersonId > 0 && isSingleLineupPlayer(p))"
:key="player.nuLigaPersonId" class="player-card selected">
<div class="player-main" @click="togglePlayerSelection(player, 'home')">
<button type="button" class="player-main" @click="togglePlayerSelection(player, 'home')">
<div class="player-name">{{ player.firstname }} {{ player.lastname }}</div>
<div class="player-details">
<span class="player-rank">{{ $t('matchReportApi.rank') }}: {{ player.rank }}</span>
@@ -305,7 +305,7 @@
</span>
</div>
<div class="player-action">👆 {{ $t('matchReportApi.clickToRemove') }}</div>
</div>
</button>
<div class="double-selection">
<button class="double-btn d1-btn"
:class="{ active: player.positionDouble === 1 }"
@@ -346,14 +346,14 @@
<div class="players-grid">
<div v-for="player in meetingDetails.teamLineupHomePlayers.filter(p => !p.isSelected && p.nuLigaPersonId > 0)"
:key="player.nuLigaPersonId" class="player-card available clickable">
<div @click="togglePlayerSelection(player, 'home')">
<button type="button" class="player-main" @click="togglePlayerSelection(player, 'home')">
<div class="player-name">{{ player.firstname }} {{ player.lastname }}</div>
<div class="player-details">
<span class="player-rank">{{ $t('matchReportApi.rank') }}: {{ player.rank }}</span>
<span class="player-position">Verfügbar</span>
</div>
<div class="player-action">👆 Klicken zum Hinzufügen</div>
</div>
</button>
<div class="double-selection">
<button class="double-btn d1-btn"
:class="{ active: player.positionDouble === 1 }"
@@ -413,7 +413,7 @@
<div class="players-grid">
<div v-for="player in meetingDetails.teamLineupGuestPlayers.filter(p => p.isSelected && p.nuLigaPersonId > 0 && isSingleLineupPlayer(p))"
:key="player.nuLigaPersonId" class="player-card selected">
<div class="player-main" @click="togglePlayerSelection(player, 'guest')">
<button type="button" class="player-main" @click="togglePlayerSelection(player, 'guest')">
<div class="player-name">{{ player.firstname }} {{ player.lastname }}</div>
<div class="player-details">
<span class="player-rank">{{ $t('matchReportApi.rank') }}: {{ player.rank }}</span>
@@ -424,7 +424,7 @@
</span>
</div>
<div class="player-action">👆 {{ $t('matchReportApi.clickToRemove') }}</div>
</div>
</button>
<div class="double-selection">
<button class="double-btn d1-btn"
:class="{ active: player.positionDouble === 1 }"
@@ -465,14 +465,14 @@
<div class="players-grid">
<div v-for="player in meetingDetails.teamLineupGuestPlayers.filter(p => !p.isSelected && p.nuLigaPersonId > 0)"
:key="player.nuLigaPersonId" class="player-card available clickable">
<div @click="togglePlayerSelection(player, 'guest')">
<button type="button" class="player-main" @click="togglePlayerSelection(player, 'guest')">
<div class="player-name">{{ player.firstname }} {{ player.lastname }}</div>
<div class="player-details">
<span class="player-rank">{{ $t('matchReportApi.rank') }}: {{ player.rank }}</span>
<span class="player-position">Verfügbar</span>
</div>
<div class="player-action">👆 Klicken zum Hinzufügen</div>
</div>
</button>
<div class="double-selection">
<button class="double-btn d1-btn"
:class="{ active: player.positionDouble === 1 }"
@@ -6496,19 +6496,19 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
background-color: white;
}
.player-card.available>div:first-child {
.player-card.available>.player-main {
flex: 1;
cursor: pointer;
transition: all 0.2s ease;
padding: 12px;
}
.player-card.available>div:first-child:hover {
.player-card.available>.player-main:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.player-card.available>div:first-child:active {
.player-card.available>.player-main:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
@@ -6544,9 +6544,17 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
.player-main {
flex: 1;
width: 100%;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: all 0.2s ease;
padding: 12px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.player-main:hover {