diff options
| author | Julien Veyssier <eneiluj@posteo.net> | 2022-08-30 12:43:08 +0300 |
|---|---|---|
| committer | Julien Veyssier <eneiluj@posteo.net> | 2022-09-06 15:44:54 +0300 |
| commit | 82b41eb238330089d9ab29c2373517f22efd04d2 (patch) | |
| tree | c3a6c58935807414559d069ffe489c6340660436 /src/nodes/ImageView.vue | |
| parent | d4ed466689b2e335a094f5a73fb1358ff7f30abd (diff) | |
add border to media attachment
Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
Diffstat (limited to 'src/nodes/ImageView.vue')
| -rw-r--r-- | src/nodes/ImageView.vue | 62 |
1 files changed, 37 insertions, 25 deletions
diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue index e07069f71..b391802e8 100644 --- a/src/nodes/ImageView.vue +++ b/src/nodes/ImageView.vue @@ -36,17 +36,19 @@ <template v-if="!failed"> <div v-if="isMediaAttachment" class="media"> - <img v-show="loaded" - :src="imageUrl" - class="image__main" - @load="onLoaded"> - <div class="metadata"> - <span class="name"> - {{ alt }} - </span> - <span class="size"> - {{ attachmentMetadata.size }} - </span> + <div class="media__wrapper"> + <img v-show="loaded" + :src="imageUrl" + class="image__main" + @load="onLoaded"> + <div class="metadata"> + <span class="name"> + {{ alt }} + </span> + <span class="size"> + {{ attachmentMetadata.size }} + </span> + </div> </div> <div v-if="showDeleteIcon" class="buttons"> @@ -373,25 +375,35 @@ export default { display: flex; align-items: center; justify-content: left; - img { - width: 44px; - height: 44px; - } - .metadata { - margin-left: 8px; + .media__wrapper { display: flex; - flex-direction: column; - align-items: start; - span { - line-height: 20px; - font-weight: normal; - &.size { - color: var(--color-text-maxcontrast); + border: 2px solid var(--color-border); + border-radius: var(--border-radius-large); + padding: 8px; + + img { + width: 44px; + height: 44px; + } + + .metadata { + margin-left: 8px; + display: flex; + flex-direction: column; + align-items: start; + + span { + line-height: 20px; + font-weight: normal; + + &.size { + color: var(--color-text-maxcontrast); + } } } } .buttons { - margin-left: 12px; + margin-left: 8px; } } |