feat(i18n, frontend): add 'acknowledgeHelp' translations and UI enhancements
All checks were successful
Deploy to production / deploy (push) Successful in 2m56s

- Introduced 'acknowledgeHelp' translations in Cebuano, German, English, and Spanish to provide users with context about the implications of acknowledging relationships.
- Updated the FamilyView component to display the new 'acknowledgeHelp' information, enhancing user understanding of relationship dynamics.
- Improved styling for the acknowledgment help section to ensure clarity and visibility within the user interface.
This commit is contained in:
Torsten Schulz (local)
2026-04-10 10:29:20 +02:00
parent 7e0821c96b
commit 9582e7b900
5 changed files with 58 additions and 6 deletions

View File

@@ -342,6 +342,11 @@
<!-- Liebhaber / Geliebte -->
<div class="lovers-section">
<h3>{{ $t('falukant.family.lovers.title') }}</h3>
<div class="lovers-acknowledge-help">
<strong>{{ $t('falukant.family.lovers.acknowledgeHelp.title') }}</strong>
<p>{{ $t('falukant.family.lovers.acknowledgeHelp.meaning') }}</p>
<p>{{ $t('falukant.family.lovers.acknowledgeHelp.tradeoff') }}</p>
</div>
<p v-if="politicalFreeLoverSlots > 0" class="lovers-political-hint">
{{ $t('falukant.family.lovers.politicalFreeSlotsHint', { count: politicalFreeLoverSlots }) }}
</p>
@@ -393,7 +398,11 @@
</div>
</dl>
<div class="lover-card__meta">
<span v-if="lover.acknowledged" class="lover-meta-badge">
<span
v-if="lover.acknowledged"
class="lover-meta-badge"
:title="$t('falukant.family.lovers.acknowledgeHelp.meaning')"
>
{{ $t('falukant.family.lovers.acknowledged') }}
</span>
<span v-if="lover.monthsUnderfunded > 0" class="lover-meta-badge lover-meta-badge--warning">
@@ -414,6 +423,7 @@
v-if="!lover.acknowledged"
class="button button--secondary"
@click="acknowledgeLover(lover)"
:title="$t('falukant.family.lovers.acknowledgeHelp.buttonHint')"
>
{{ $t('falukant.family.lovers.actions.acknowledge') }}
</button>
@@ -1540,6 +1550,25 @@ export default {
color: var(--color-text-secondary);
margin: 0 0 12px 0;
}
.lovers-acknowledge-help {
margin: 0 0 12px 0;
padding: 10px 12px;
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
background: rgba(255, 250, 243, 0.6);
}
.lovers-acknowledge-help strong {
display: block;
margin-bottom: 4px;
}
.lovers-acknowledge-help p {
margin: 4px 0;
color: var(--color-text-secondary);
font-size: 0.9rem;
}
.lover-political-free {
display: block;
font-size: 0.85rem;