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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user