Optimiert die Darstellung von vordefinierten Aktivitäten in DiaryView.vue, indem die Logik zur Anzeige von Aktivitätsnamen und -codes verbessert wird. Aktualisiert das Styling der Bildsymbole und passt die Positionierung der Bilder an, um eine bessere Benutzererfahrung zu gewährleisten.
This commit is contained in:
@@ -126,13 +126,13 @@
|
||||
</span>
|
||||
<span v-else @click="startActivityEdit(item)" class="clickable activity-label"
|
||||
:title="item.predefinedActivity && item.predefinedActivity.name ? item.predefinedActivity.name : ''">
|
||||
{{ (item.predefinedActivity && item.predefinedActivity.code && item.predefinedActivity.code.trim() !== '')
|
||||
? item.predefinedActivity.code
|
||||
: (item.predefinedActivity ? item.predefinedActivity.name : item.activity) }}
|
||||
<span v-if="item.predefinedActivity && item.predefinedActivity.imageLink"
|
||||
@click.stop="showActivityImage(item.predefinedActivity.imageLink)"
|
||||
class="image-icon"
|
||||
title="Bild anzeigen">🖼️</span>
|
||||
{{ (item.predefinedActivity && item.predefinedActivity.code && item.predefinedActivity.code.trim() !== '')
|
||||
? item.predefinedActivity.code
|
||||
: (item.predefinedActivity ? item.predefinedActivity.name : item.activity) }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ item.groupActivity ? item.groupActivity.name : '' }}</td>
|
||||
@@ -161,13 +161,13 @@
|
||||
<td></td>
|
||||
<td>
|
||||
<span class="activity-label" :title="(groupItem.groupPredefinedActivity && groupItem.groupPredefinedActivity.name) ? groupItem.groupPredefinedActivity.name : ''">
|
||||
{{ (groupItem.groupPredefinedActivity && groupItem.groupPredefinedActivity.code && groupItem.groupPredefinedActivity.code.trim() !== '')
|
||||
? groupItem.groupPredefinedActivity.code
|
||||
: groupItem.groupPredefinedActivity.name }}
|
||||
<span v-if="groupItem.groupPredefinedActivity && groupItem.groupPredefinedActivity.imageLink"
|
||||
@click.stop="showActivityImage(groupItem.groupPredefinedActivity.imageLink)"
|
||||
class="image-icon"
|
||||
title="Bild anzeigen">🖼️</span>
|
||||
{{ (groupItem.groupPredefinedActivity && groupItem.groupPredefinedActivity.code && groupItem.groupPredefinedActivity.code.trim() !== '')
|
||||
? groupItem.groupPredefinedActivity.code
|
||||
: groupItem.groupPredefinedActivity.name }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ groupItem.groupsGroupActivity.name }}</td>
|
||||
@@ -1756,19 +1756,21 @@ img {
|
||||
|
||||
.memberImage {
|
||||
position: fixed;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
top: calc(50% - 250px);
|
||||
left: calc(50% - 250px);
|
||||
border: 2px solid #555;
|
||||
box-shadow: 4px 4px 3px #aaa;
|
||||
overflow: hidden;
|
||||
padding: 3px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.memberImage>img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.groups {
|
||||
@@ -1840,7 +1842,7 @@ img {
|
||||
}
|
||||
|
||||
.image-icon {
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
opacity: 0.7;
|
||||
|
||||
Reference in New Issue
Block a user