Refactor feedback handling across components: Replace alert and confirm calls with centralized feedback functions for improved user experience. Update various components to utilize showError, showSuccess, and confirmAction for consistent messaging and confirmation dialogs. Enhance UI responsiveness and maintainability by streamlining feedback logic.

This commit is contained in:
Torsten Schulz (local)
2026-03-19 16:18:51 +01:00
parent 56610dfa4e
commit 814837f47c
35 changed files with 1097 additions and 1017 deletions

View File

@@ -47,22 +47,20 @@
<h3>{{ $t('socialnetwork.usersearch.results_title') }}</h3>
<span class="results-count">{{ searchResults.length }} Treffer</span>
</div>
<table>
<thead>
<tr>
<th>{{ $t("socialnetwork.usersearch.result.nick") }}</th>
<th>{{ $t("socialnetwork.usersearch.result.gender") }}</th>
<th>{{ $t("socialnetwork.usersearch.result.age") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="result in searchResults" :key="result.id">
<td><span @click.prevent="openUserProfile(result.id)" :class="'clickable g-' + result.gender">{{ result.username }}</span></td>
<td>{{ result.gender }}</td>
<td>{{ result.age }}</td>
</tr>
</tbody>
</table>
<div class="result-cards">
<article v-for="result in searchResults" :key="result.id" class="result-card">
<div class="result-card__main">
<span @click.prevent="openUserProfile(result.id)" :class="'clickable g-' + result.gender">{{ result.username }}</span>
<div class="result-card__meta">
<span>{{ $t("socialnetwork.usersearch.result.gender") }}: {{ result.gender }}</span>
<span>{{ $t("socialnetwork.usersearch.result.age") }}: {{ result.age }}</span>
</div>
</div>
<button type="button" class="button-secondary" @click="openUserProfile(result.id)">
Profil öffnen
</button>
</article>
</div>
</section>
<div v-else class="no-results surface-card">
{{ $t('socialnetwork.usersearch.no_results') }}
@@ -211,26 +209,34 @@ label {
font-weight: 700;
}
table {
width: 100%;
margin: 0.5em 0;
padding: 0;
border-collapse: collapse;
background: rgba(255, 255, 255, 0.62);
.result-cards {
display: grid;
gap: 12px;
}
.result-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
background: rgba(255, 255, 255, 0.66);
}
thead {
color: #42634e;
.result-card__main {
display: flex;
flex-direction: column;
gap: 6px;
}
th, td {
padding: 12px 14px;
}
tbody tr + tr td {
border-top: 1px solid var(--color-border);
.result-card__meta {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
color: var(--color-text-secondary);
font-size: 0.92rem;
}
.clickable {
@@ -259,5 +265,10 @@ tbody tr + tr td {
.age-range {
flex-wrap: wrap;
}
.result-card {
flex-direction: column;
align-items: flex-start;
}
}
</style>