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

@@ -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));