Enhance OverviewView component to conditionally display character avatar and house: Introduce a new image container for character representation, ensuring it only renders when a character is present. Refactor existing code to remove duplicate avatar rendering logic and maintain a clean overview layout.

This commit is contained in:
Torsten Schulz (local)
2026-03-19 15:07:53 +01:00
parent 9d44a265ca
commit 2c58ef37c4

View File

@@ -9,6 +9,20 @@
</div> </div>
</section> </section>
<div v-if="falukantUser?.character" class="imagecontainer">
<div :style="getAvatarStyle" class="avatar"></div>
<div class="house-with-character">
<div :style="getHouseStyle" class="house"></div>
<div class="character-foreground">
<Character3D
:gender="falukantUser.character.gender"
:age="falukantUser.character.age"
:no-background="true"
/>
</div>
</div>
</div>
<section v-if="falukantUser?.character" class="falukant-summary-grid"> <section v-if="falukantUser?.character" class="falukant-summary-grid">
<article class="summary-card surface-card"> <article class="summary-card surface-card">
<span class="summary-card__label">Niederlassungen</span> <span class="summary-card__label">Niederlassungen</span>
@@ -67,7 +81,7 @@
</div> </div>
<!-- Normale Übersicht wenn Charakter vorhanden --> <!-- Normale Übersicht wenn Charakter vorhanden -->
<div v-else class="overviewcontainer"> <div v-if="falukantUser?.character" class="overviewcontainer">
<div> <div>
<h3>{{ $t('falukant.overview.metadata.title') }}</h3> <h3>{{ $t('falukant.overview.metadata.title') }}</h3>
<table> <table>
@@ -155,19 +169,6 @@
</table> </table>
</div> </div>
</div> </div>
<div v-if="falukantUser?.character" class="imagecontainer">
<div :style="getAvatarStyle" class="avatar"></div>
<div class="house-with-character">
<div :style="getHouseStyle" class="house"></div>
<div class="character-foreground">
<Character3D
:gender="falukantUser.character.gender"
:age="falukantUser.character.age"
:no-background="true"
/>
</div>
</div>
</div>
</div> </div>
</template> </template>