diff options
Diffstat (limited to 'src/components/attachment/attachment.vue')
| -rw-r--r-- | src/components/attachment/attachment.vue | 188 |
1 files changed, 105 insertions, 83 deletions
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index a1b35d91..2cc1ee57 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,5 +1,8 @@ <template> - <div class="attachment base03-border" :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 class="base03-border" 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 class="base03" 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> @@ -40,104 +43,123 @@ max-height: 300px; max-width: 100%; } - + + .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-style: solid; - border-width: 1px; - border-radius: 5px; - overflow: hidden; - - // fixes small gap below video - &.video { - line-height: 0; - } + flex: 1 0 30%; + margin: 0.5em 0.7em 0.6em 0.0em; + align-self: flex-start; + + border-style: solid; + border-width: 1px; + border-radius: 5px; + overflow: hidden; + } + // 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; + } - video { - max-height: 500px; - height: 100%; - width: 100%; - z-index: 0; - } + .small { + max-height: 100px; + } + 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 { + .oembed { + width: 100%; + margin-right: 15px; + display: flex; + + img { width: 100%; - margin-right: 15px; - display: flex; + } + .image { + flex: 1; img { - width: 100%; - } - - .image { - flex: 1; - img { - border: 0px; - border-radius: 5px; - 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%; - } + .still-image { + width: 100%; + height: 100%; + } - 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; - } + .small { + img { + 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; } } } |