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:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user