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

Enhance TournamentsView with diagonal cell styling for match rankings

Browse Source 
Updated the TournamentsView to include a new CSS class for diagonal cells, improving the visual representation of match rankings. The diagonal cells now have distinct styling to indicate active matches, enhancing user interaction and clarity in tournament displays.
This commit is contained in:
Torsten Schulz (local)
2025-11-05 08:49:27 +01:00
parent d0e3ae3610
commit 6500493314
1 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/views/TournamentsView.vue
View File

@@ -133,7 +133,7 @@
</td>
<td v-for="(opponent, oppIdx) in groupRankings[group.groupId]"
:key="`match-${pl.id}-${opponent.id}`"
:class="['match-cell', { 'clickable': idx !== oppIdx, 'active-group-cell': activeGroupCells.includes(`match-${pl.id}-${opponent.id}`) }]"
:class="['match-cell', { 'clickable': idx !== oppIdx, 'active-group-cell': activeGroupCells.includes(`match-${pl.id}-${opponent.id}`), 'diagonal-cell': idx === oppIdx }]"
@click="idx !== oppIdx ? highlightMatch(pl.id, opponent.id, group.groupId) : null">
<span v-if="idx === oppIdx" class="diagonal"></span>
<span v-else-if="getMatchLiveResult(pl.id, opponent.id, group.groupId)"
@@ -1774,13 +1774,22 @@ button {
margin-left: 0.5em;
}
.match-cell.diagonal-cell {
position: relative;
padding: 0;
}
.diagonal {
background-color: #000;
color: #000;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
min-height: 20px;
}
.match-result {