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

Update AppHeader and FamilyView components for improved styling and layout

Browse Source 
- Changed background color in AppHeader.vue for enhanced visual appeal.
- Refactored FamilyView.vue to improve layout by introducing a flexbox structure for better alignment of relationship details and 3D character models.
- Added new CSS classes to support the updated layout and ensure responsive design.
This commit is contained in:
Torsten Schulz (local)
2026-01-22 12:49:48 +01:00
parent 30e1df0dd8
commit dc08da211f
2 changed files with 68 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/AppHeader.vue
View File

@@ -47,7 +47,7 @@ header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 10px; padding: 10px;
background-color: #f8a22b; background-color: #FF8C5A;
} }
.logo, .title, .advertisement { .logo, .title, .advertisement {
text-align: center; text-align: center;

118
frontend/src/views/falukant/FamilyView.vue
View File

@@ -16,58 +16,59 @@
<div class="spouse-section"> <div class="spouse-section">
<h3>{{ $t('falukant.family.spouse.title') }}</h3> <h3>{{ $t('falukant.family.spouse.title') }}</h3>
<div v-if="relationships.length > 0" class="relationship-container"> <div v-if="relationships.length > 0" class="relationship-container">
<!-- 3D-Modell für Partner rechts neben Beziehung --> <div class="relationship-row">
<div class="partner-character-3d"> <div class="relationship">
<Character3D <table>
:gender="relationships[0].character2.gender" <tr>
:age="relationships[0].character2.age" <td>{{ $t('falukant.family.relationships.name') }}</td>
/> <td>
{{ $t('falukant.titles.' + relationships[0].character2.gender + '.' +
relationships[0].character2.nobleTitle) }}
{{ relationships[0].character2.firstName }}
</td>
</tr>
<tr>
<td>{{ $t('falukant.family.spouse.age') }}</td>
<td>{{ relationships[0].character2.age }}</td>
</tr>
<tr>
<td>{{ $t('falukant.family.spouse.mood') }}</td>
<td>{{ $t(`falukant.mood.${relationships[0].character2.mood.tr}`) }}</td>
</tr>
<tr>
<td>{{ $t('falukant.family.spouse.status') }}</td>
<td>{{ $t('falukant.family.statuses.' + relationships[0].relationshipType) }}</td>
</tr>
<tr v-if="relationships[0].relationshipType === 'wooing'">
<td>{{ $t('falukant.family.spouse.progress') }}</td>
<td>
<div class="progress">
<div class="progress-inner" :style="{
width: relationships[0].progress + '%',
backgroundColor: progressColor(relationships[0].progress)
}"></div>
</div>
</td>
</tr>
<tr v-if="relationships[0].relationshipType === 'engaged'" colspan="2">
<button @click="jumpToPartyForm">{{ $t('falukant.family.spouse.jumpToPartyForm')
}}</button>
</tr>
</table>
<ul>
<li v-for="trait in relationships[0].character2.traits" :key="trait.id">
{{ $t(`falukant.character.${trait.tr}`) }}
</li>
</ul>
</div>
<div class="partner-character-3d">
<Character3D
:gender="relationships[0].character2.gender"
:age="relationships[0].character2.age"
/>
</div>
</div> </div>
<div class="relationship"> <div v-if="relationships[0].relationshipType === 'wooing'" class="gifts-section">
<table>
<tr>
<td>{{ $t('falukant.family.relationships.name') }}</td>
<td>
{{ $t('falukant.titles.' + relationships[0].character2.gender + '.' +
relationships[0].character2.nobleTitle) }}
{{ relationships[0].character2.firstName }}
</td>
</tr>
<tr>
<td>{{ $t('falukant.family.spouse.age') }}</td>
<td>{{ relationships[0].character2.age }}</td>
</tr>
<tr>
<td>{{ $t('falukant.family.spouse.mood') }}</td>
<td>{{ $t(`falukant.mood.${relationships[0].character2.mood.tr}`) }}</td>
</tr>
<tr>
<td>{{ $t('falukant.family.spouse.status') }}</td>
<td>{{ $t('falukant.family.statuses.' + relationships[0].relationshipType) }}</td>
</tr>
<tr v-if="relationships[0].relationshipType === 'wooing'">
<td>{{ $t('falukant.family.spouse.progress') }}</td>
<td>
<div class="progress">
<div class="progress-inner" :style="{
width: relationships[0].progress + '%',
backgroundColor: progressColor(relationships[0].progress)
}"></div>
</div>
</td>
</tr>
<tr v-if="relationships[0].relationshipType === 'engaged'" colspan="2">
<button @click="jumpToPartyForm">{{ $t('falukant.family.spouse.jumpToPartyForm')
}}</button>
</tr>
</table>
<ul>
<li v-for="trait in relationships[0].character2.traits" :key="trait.id">
{{ $t(`falukant.character.${trait.tr}`) }}
</li>
</ul>
</div>
<div v-if="relationships[0].relationshipType === 'wooing'">
<h3>{{ $t('falukant.family.spouse.wooing.gifts') }}</h3> <h3>{{ $t('falukant.family.spouse.wooing.gifts') }}</h3>
<table class="spouse-table"> <table class="spouse-table">
<thead> <thead>
@@ -472,11 +473,21 @@ export default {
} }
.relationship-container { .relationship-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.relationship-row {
display: flex; display: flex;
gap: 20px; gap: 20px;
align-items: flex-start; align-items: flex-start;
} }
.relationship {
flex: 1;
}
.partner-character-3d { .partner-character-3d {
width: 200px; width: 200px;
height: 280px; height: 280px;
@@ -486,6 +497,11 @@ export default {
flex-shrink: 0; flex-shrink: 0;
} }
.gifts-section {
width: 100%;
margin-top: 10px;
}
.children-container { .children-container {
display: flex; display: flex;
gap: 20px; gap: 20px;