torsten/yourpart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(PoliticsView): enhance UI layout and styling for political information display
All checks were successful
Deploy to production / deploy (push) Successful in 2m52s
Details

Browse Source 
- Improved the layout of the political information section by introducing a structured row format for better readability.
- Updated CSS styles to enhance the visual hierarchy and alignment of labels and values, ensuring a more user-friendly interface.
- Adjusted the display of benefits and term end information to provide clearer context and organization within the PoliticsView component.
This commit is contained in:
Torsten Schulz (local)
2026-04-02 16:09:52 +02:00
parent 56be4b76c0
commit e063df5cbe
1 changed files with 68 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
frontend/src/views/falukant/PoliticsView.vue
View File

@@ -16,28 +16,37 @@
<span>{{ pos.region.name }}</span>
</div>
<div class="politics-card__meta">
<span>
{{ $t('falukant.politics.current.holder') }}:
<template v-if="pos.character">
{{ pos.character.definedFirstName.name }} {{ pos.character.definedLastName.name }}
</template>
<template v-else>—</template>
</span>
<span>
{{ $t('falukant.politics.current.benefit') }}:
<template v-if="politicsBenefitItems(pos).length">
<template v-for="(b, i) in politicsBenefitItems(pos)" :key="i">
<span>{{ formatPoliticsBenefitItem(b) }}</span>
<span v-if="i < politicsBenefitItems(pos).length - 1">, </span>
<div class="politics-card__meta-row">
<span class="politics-card__meta-label">{{ $t('falukant.politics.current.holder') }}:</span>
<span class="politics-card__meta-value">
<template v-if="pos.character">
{{ pos.character.definedFirstName.name }} {{ pos.character.definedLastName.name }}
</template>
</template>
<template v-else>—</template>
</span>
<span>
{{ $t('falukant.politics.current.termEnds') }}:
<template v-if="pos.termEnds">{{ formatDate(pos.termEnds) }}</template>
<template v-else>—</template>
</span>
<template v-else>—</template>
</span>
</div>
<div class="politics-card__meta-row politics-card__meta-row--benefits">
<span class="politics-card__meta-label">{{ $t('falukant.politics.current.benefit') }}:</span>
<ul
v-if="politicsBenefitItems(pos).length"
class="politics-benefit-list"
>
<li
v-for="(b, i) in politicsBenefitItems(pos)"
:key="i"
>
{{ formatPoliticsBenefitItem(b) }}
</li>
</ul>
<span v-else class="politics-card__meta-value">—</span>
</div>
<div class="politics-card__meta-row">
<span class="politics-card__meta-label">{{ $t('falukant.politics.current.termEnds') }}:</span>
<span class="politics-card__meta-value">
<template v-if="pos.termEnds">{{ formatDate(pos.termEnds) }}</template>
<template v-else>—</template>
</span>
</div>
</div>
</article>
</div>
@@ -680,11 +689,46 @@ export default {
.politics-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
flex-direction: column;
align-items: flex-start;
gap: 12px;
color: var(--color-text-secondary);
}
.politics-card__meta-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
width: 100%;
}
.politics-card__meta-label {
font-weight: 600;
color: var(--color-text-muted, var(--color-text-secondary));
}
.politics-card__meta-value {
line-height: 1.45;
}
.politics-benefit-list {
margin: 0;
padding-left: 1.25rem;
line-height: 1.5;
list-style: disc;
}
.politics-benefit-list li {
margin: 0.2em 0;
padding-inline-start: 0.15em;
}
.politics-card__meta-row--benefits .politics-benefit-list {
width: 100%;
max-width: 100%;
}
.politics-card__checkbox {
display: inline-flex;
align-items: center;
@@ -720,8 +764,7 @@ export default {
}
@media (max-width: 900px) {
.politics-card__header,
.politics-card__meta {
.politics-card__header {
flex-direction: column;
align-items: flex-start;
}