diff options
Diffstat (limited to 'src/components/attachment/attachment.vue')
| -rw-r--r-- | src/components/attachment/attachment.vue | 167 |
1 files changed, 94 insertions, 73 deletions
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 04f6add4..ff34663d 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,5 +1,8 @@ <template> - <div class="attachment" :class="{[type]: true, loading}" v-show="!isEmpty"> + <div v-if="size==='hide'"> + <a class="placeholder" v-if="type !== 'html'" :href="attachment.url">[{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]</a> + </div> + <div v-else class="attachment base03-border" :class="{[type]: true, loading, 'small-attachment': isSmall}" v-show="!isEmpty"> <a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()"> <img :key="nsfwImage" :src="nsfwImage"/> </a> @@ -8,10 +11,10 @@ </div> <a v-if="type === 'image' && !hidden" class="image-attachment" :href="attachment.url" target="_blank"> - <StillImage referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/> + <StillImage :class="{'small': isSmall}" class="base03-border" referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/> </a> - <video v-if="type === 'video' && !hidden" :src="attachment.url" controls loop></video> + <video :class="{'small': isSmall}" class="base03" v-if="type === 'video' && !hidden" :src="attachment.url" controls loop></video> <audio v-if="type === 'audio'" :src="attachment.url" controls></audio> @@ -41,110 +44,128 @@ flex: 0 0 auto; max-height: 300px; max-width: 100%; - line-height: 0; + } - video { - max-height: 300px; + .placeholder { + margin-right: 0.5em; + } + + .small-attachment { + &.image, &.video { + max-width: 35%; } + max-height: 100px; } .attachment { flex: 1 0 30%; margin: 0.5em 0.7em 0.6em 0.0em; align-self: flex-start; - border-color: $fallback--border; - border-color: var(--border, $fallback--border); border-style: solid; border-width: 1px; border-radius: $fallback--attachmentRadius; border-radius: var(--attachmentRadius, $fallback--attachmentRadius); + border-color: $fallback--border; + border-color: var(--border, $fallback--border); overflow: hidden; + } + // fixes small gap below video + &.video { + line-height: 0; + } - // fixes small gap below video - &.video { - line-height: 0; - } + &.html { + flex-basis: 90%; + width: 100%; + display: flex; + } - &.html { - flex-basis: 90%; - width: 100%; - display: flex; - } + &.loading { + cursor: progress; + } - &.loading { - cursor: progress; - } + .hider { + position: absolute; + margin: 10px; + padding: 5px; + background: rgba(230,230,230,0.6); + font-weight: bold; + z-index: 4; + } - .hider { - position: absolute; - margin: 10px; - padding: 5px; - background: rgba(230,230,230,0.6); - font-weight: bold; - z-index: 4; - } + .small { + max-height: 100px; + } + video { + max-height: 500px; + height: 100%; + width: 100%; + z-index: 0; + } - video { - max-height: 500px; - height: 100%; - width: 100%; - z-index: 0; - } + audio { + width: 100%; + } - audio { - width: 100%; - } + img.media-upload { + margin-bottom: -2px; + max-height: 300px; + max-width: 100%; + } - img.media-upload { - margin-bottom: -2px; - max-height: 300px; - max-width: 100%; - } + .oembed { + width: 100%; + margin-right: 15px; + display: flex; - .oembed { + img { width: 100%; - margin-right: 15px; - display: flex; + } + .image { + flex: 1; img { - width: 100%; - } - - .image { - flex: 1; - img { - border: 0px; - border-radius: $fallback--attachmentRadius; - border-radius: var(--attachmentRadius, $fallback--attachmentRadius); - height: 100%; - object-fit: cover; - } + border: 0px; + border-radius: 5px; + height: 100%; + object-fit: cover; } + } - .text { - flex: 2; - margin: 8px; - word-break: break-all; - h1 { - font-size: 14px; - margin: 0px; - } + .text { + flex: 2; + margin: 8px; + word-break: break-all; + h1 { + font-size: 14px; + margin: 0px; } } + } - a.image-attachment { - display: flex; - flex: 1; + .image-attachment { + display: flex; + flex: 1; + + .still-image { + width: 100%; + height: 100%; + } + .small { img { - object-fit: contain; - width: 100%; - height: 100%; /* If this isn't here, chrome will stretch the images */ - max-height: 500px; - image-orientation: from-image; + max-height: 100px; } } + + img { + object-fit: contain; + width: 100%; + height: 100%; /* If this isn't here, chrome will stretch the images */ + max-height: 500px; + image-orientation: from-image; + } } } </style> |