diff options
| -rw-r--r-- | css/Properties/PropertyTitle.scss | 6 | ||||
| -rw-r--r-- | src/components/Properties/PropertyTitle.vue | 8 |
2 files changed, 9 insertions, 5 deletions
diff --git a/css/Properties/PropertyTitle.scss b/css/Properties/PropertyTitle.scss index 63c30c66..aaa92304 100644 --- a/css/Properties/PropertyTitle.scss +++ b/css/Properties/PropertyTitle.scss @@ -27,10 +27,14 @@ opacity: 0.6; user-select: none; + .property__title--right { + display: flex; + justify-content: space-between; + } .property__title--icon { background-position: center right; } .property__title--icon-details { margin-left: 7px; } -}
\ No newline at end of file +} diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue index 44a73a22..56d64b8f 100644 --- a/src/components/Properties/PropertyTitle.vue +++ b/src/components/Properties/PropertyTitle.vue @@ -23,11 +23,11 @@ <template> <h3 class="property__title property__row"> <div :class="icon" class="property__label property__title--icon" /> - <span class="property__value"> - {{ readableName }} + <span class="property__value property__title--right"> + <div>{{ readableName }}</div> + <!-- display tooltip with hint if available --> + <div v-if="info" v-tooltip.auto="info" class="property__title--icon-details icon-details" /> </span> - <!-- display tooltip with hint if available --> - <div v-if="info" v-tooltip.auto="info" class="property__title--icon-details icon-details" /> </h3> </template> |