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 2c58ef37c4
commit 1774d7df88
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>