feat(TeamManagement): enhance TeamListCard and TeamManagementOverview with improved accessibility and styling
All checks were successful
Deploy tt-tagebuch / deploy (push) Successful in 34s
All checks were successful
Deploy tt-tagebuch / deploy (push) Successful in 34s
- Updated TeamListCard to include keyboard accessibility features, allowing users to trigger edit actions via keyboard events. - Refactored TeamListCard layout for better visual organization, including a new league row for improved information display. - Enhanced styling for TeamListCard, including hover and focus states for better user interaction. - Adjusted grid layout in TeamManagementOverview for improved responsiveness and spacing. - Removed redundant styles from TeamManagementView, centralizing styling in TeamListCard for consistency.
This commit is contained in:
Torsten Schulz (local)
@@ -1,10 +1,21 @@
|
||||
<template>
|
||||
<div class="team-card" :class="{ active }" @click="$emit('edit')">
|
||||
<div
|
||||
class="team-card"
|
||||
:class="{ active }"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:title="$t('teamManagement.openInWorkspace')"
|
||||
@click="$emit('edit')"
|
||||
@keydown.enter.prevent="$emit('edit')"
|
||||
@keydown.space.prevent="$emit('edit')"
|
||||
>
|
||||
<div class="team-header">
|
||||
<div class="team-header-copy">
|
||||
<h4>{{ team.name }}</h4>
|
||||
<span class="team-league-inline">{{ leagueName }}</span>
|
||||
<span class="team-open-hint">{{ $t('teamManagement.openInWorkspace') }}</span>
|
||||
<div class="team-league-row">
|
||||
<span class="team-league-inline">{{ leagueName }}</span>
|
||||
<span class="team-open-hint">{{ $t('teamManagement.openInWorkspace') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-actions">
|
||||
<button @click.stop="$emit('delete')" class="btn-delete" :title="$t('teamManagement.delete')">
|
||||
@@ -72,3 +83,208 @@ export default {
|
||||
emits: ['edit', 'delete', 'show-code-list', 'show-pin-list']
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.team-card {
|
||||
background: var(--background-light, #fff);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.team-card:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: var(--shadow-small, 0 4px 12px rgba(0, 0, 0, 0.08));
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.team-card.active {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 1px var(--primary-light);
|
||||
}
|
||||
|
||||
.team-card:focus-visible {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.team-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 0.5rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.team-header-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.team-header h4 {
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.team-league-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.team-league-inline {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.team-open-hint {
|
||||
font-size: 0.78rem;
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.team-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.team-actions button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
border-radius: var(--border-radius-small);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background: #fee;
|
||||
}
|
||||
|
||||
.team-card-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.28rem 0.78rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.status-badge.complete {
|
||||
background: rgba(47, 122, 95, 0.12);
|
||||
color: #1f5f49;
|
||||
border-color: rgba(47, 122, 95, 0.24);
|
||||
}
|
||||
|
||||
.status-badge.partial {
|
||||
background: rgba(181, 110, 65, 0.14);
|
||||
color: #8a4f28;
|
||||
border-color: rgba(181, 110, 65, 0.28);
|
||||
}
|
||||
|
||||
.status-badge.missing {
|
||||
background: rgba(200, 74, 56, 0.12);
|
||||
color: #8b3327;
|
||||
border-color: rgba(200, 74, 56, 0.24);
|
||||
}
|
||||
|
||||
.status-badge.neutral {
|
||||
background: var(--surface-muted, #f3f4f6);
|
||||
color: var(--text-muted);
|
||||
border-color: var(--border-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.team-card-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.team-card-meta-item {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.team-documents {
|
||||
margin-top: 0.2rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.documents-label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.document-icons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.document-icon {
|
||||
background: none;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--border-radius-small);
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-size: 1.25rem;
|
||||
transition: var(--transition);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.document-icon:hover {
|
||||
border-color: var(--primary-color);
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.code-list-icon:hover {
|
||||
border-color: #4caf50;
|
||||
background: #4caf50;
|
||||
}
|
||||
|
||||
.pin-list-icon:hover {
|
||||
border-color: #ff9800;
|
||||
background: #ff9800;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.team-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.team-actions {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -247,8 +247,9 @@ export default {
|
||||
|
||||
.teams-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 0.85rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.1rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.team-filter-chips {
|
||||
|
||||
@@ -2727,99 +2727,6 @@ export default {
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.teams-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.team-card {
|
||||
background: white;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.team-card.active {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 1px var(--primary-light);
|
||||
}
|
||||
|
||||
.team-card:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: var(--shadow-small);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.team-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.team-header-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.team-header h4 {
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.team-league-inline {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.team-open-hint {
|
||||
font-size: 0.78rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.team-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.team-actions button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
border-radius: var(--border-radius-small);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background: #fee;
|
||||
}
|
||||
|
||||
.team-card-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.team-card-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.team-card-meta-item {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.workspace-panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -2959,18 +2866,6 @@ export default {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.teams-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.team-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.team-actions {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
/* Upload-Buttons Styles */
|
||||
@@ -3319,57 +3214,6 @@ export default {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Team-Dokumente Styles */
|
||||
.team-documents {
|
||||
margin-top: 0.2rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.documents-label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.document-icons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.document-icon {
|
||||
background: none;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--border-radius-small);
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-size: 1.25rem;
|
||||
transition: var(--transition);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.document-icon:hover {
|
||||
border-color: var(--primary-color);
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.code-list-icon:hover {
|
||||
border-color: #4CAF50;
|
||||
background: #4CAF50;
|
||||
}
|
||||
|
||||
.pin-list-icon:hover {
|
||||
border-color: #FF9800;
|
||||
background: #FF9800;
|
||||
}
|
||||
|
||||
/* PDF-Dialog Styles */
|
||||
.pdf-dialog-overlay {
|
||||
position: fixed;
|
||||
|
||||
Reference in New Issue
Block a user