Enhance usability and localization across components: Update USABILITY_CONCEPT.md with new focus areas, improve user feedback in AppFooter and FamilyView components, and refine text in various UI elements for better clarity and consistency. Replace console logs with user-friendly messages, correct German translations, and streamline interaction logic in multiple components.

This commit is contained in:
Torsten Schulz (local)
2026-03-20 09:41:03 +01:00
parent 1774d7df88
commit c7d33525ff
48 changed files with 1161 additions and 481 deletions

View File

@@ -279,7 +279,6 @@ export default {
setDropTarget(index) {
if (this.draggedIndex !== null && this.draggedIndex !== index) {
this.dragOverIndex = index;
console.log('[Dashboard Drag] setDropTarget:', index, '→ dragOverIndex =', index);
}
},
clearDropTarget() {
@@ -315,16 +314,13 @@ export default {
}
if (to == null) to = this.dragOverIndex != null ? this.dragOverIndex : this.widgets.length;
const from = this.draggedIndex;
console.log('[Dashboard Drag] onAnyDrop — Maus:', x, y, '→ to:', to, 'from:', from, 'event.target:', e?.target?.className);
if (from === to || to < 0 || to > this.widgets.length) {
console.log('[Dashboard Drag] onAnyDrop — abgebrochen');
this.draggedIndex = null;
this.dragOverIndex = null;
return;
}
const item = this.widgets.splice(from, 1)[0];
this.widgets.splice(to, 0, item);
console.log('[Dashboard Drag] onAnyDrop — erledigt. Neue Reihenfolge:', this.widgets.map(w => w.title));
this.draggedIndex = null;
this.dragOverIndex = null;
await this.saveConfig();

View File

@@ -55,8 +55,13 @@
<div class="login-panel">
<span class="panel-kicker">Direkt starten</span>
<h2>{{ $t('home.nologin.login.submit') }}</h2>
<p class="login-panel__hint">Mit bestehendem Konto direkt einloggen oder alternativ ohne Konto den Random-Chat testen.</p>
<div class="quick-access-actions">
<button type="button" class="primary-action" @click="doLogin">{{ $t('home.nologin.login.submit') }}</button>
<button type="button" class="secondary-action" @click="openRegisterDialog">{{ $t('home.nologin.login.register') }}</button>
</div>
<div class="login-fields">
<input v-model="username" size="20" type="text" :placeholder="$t('home.nologin.login.name')"
<input ref="usernameInput" v-model="username" size="20" type="text" :placeholder="$t('home.nologin.login.name')"
:title="$t('home.nologin.login.namedescription')" @keydown.enter="focusPassword">
<input v-model="password" size="20" type="password"
:placeholder="$t('home.nologin.login.password')"
@@ -69,7 +74,6 @@
<span>{{ $t('home.nologin.login.stayLoggedIn') }}</span>
</label>
</div>
<button type="button" class="primary-action" @click="doLogin">{{ $t('home.nologin.login.submit') }}</button>
</div>
<div class="access-split">
@@ -150,6 +154,11 @@ export default {
this.$root.$refs.errorDialog.open(`tr:error.${errorKey}`);
}
}
},
mounted() {
this.$nextTick(() => {
this.$refs.usernameInput?.focus?.();
});
}
};
</script>
@@ -292,6 +301,18 @@ export default {
margin-bottom: 1rem;
}
.login-panel__hint {
margin: 0 0 0.9rem;
color: var(--color-text-secondary);
}
.quick-access-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 0.9rem;
}
.login-fields {
display: grid;
gap: 0.8rem;
@@ -302,10 +323,6 @@ export default {
align-self: flex-start;
}
.primary-action {
margin-top: 0.8rem;
}
.access-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));