From e654fead23ebb457f81e8642c65e1f3e98ee0027 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 17 Jun 2021 16:29:46 +0300 Subject: refactored attachments and gallery. All attachments now are in gallery. --- src/components/attachment/attachment.js | 41 ++++- src/components/attachment/attachment.vue | 307 ++++++++----------------------- 2 files changed, 103 insertions(+), 245 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 8849f501..06928ca6 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -11,7 +11,9 @@ import { faImage, faVideo, faPlayCircle, - faTimes + faTimes, + faStop, + faSearchPlus } from '@fortawesome/free-solid-svg-icons' library.add( @@ -20,7 +22,9 @@ library.add( faImage, faVideo, faPlayCircle, - faTimes + faTimes, + faStop, + faSearchPlus ) const Attachment = { @@ -28,7 +32,6 @@ const Attachment = { 'attachment', 'nsfw', 'size', - 'allowPlay', 'setMedia', 'naturalSizeLoad' ], @@ -40,7 +43,8 @@ const Attachment = { loading: false, img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'), modalOpen: false, - showHidden: false + showHidden: false, + flashLoaded: false } }, components: { @@ -49,9 +53,22 @@ const Attachment = { VideoAttachment }, computed: { + classNames () { + return [ + { + '-loading': this.loading, + '-nsfw-placeholder': this.hidden + }, + '-' + this.type, + `-${this.useContainFit ? 'contain' : 'cover'}-fit` + ] + }, usePlaceholder () { return this.size === 'hide' || this.type === 'unknown' }, + useContainFit () { + return this.$store.getters.mergedConfig.useContainFit + }, placeholderName () { if (this.attachment.description === '' || !this.attachment.description) { return this.type.toUpperCase() @@ -79,10 +96,6 @@ const Attachment = { isSmall () { return this.size === 'small' }, - fullwidth () { - if (this.size === 'hide') return false - return this.type === 'html' || this.type === 'audio' || this.type === 'unknown' - }, useModal () { const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio'] : this.mergedConfig.playVideosInModal @@ -100,12 +113,20 @@ const Attachment = { }, openModal (event) { if (this.useModal) { - event.stopPropagation() - event.preventDefault() this.setMedia() this.$store.dispatch('setCurrent', this.attachment) } }, + openModalForce (event) { + this.setMedia() + this.$store.dispatch('setCurrent', this.attachment) + }, + stopFlash () { + this.$refs.flash.closePlayer() + }, + setFlashLoaded (event) { + this.flashLoaded = event + }, toggleHidden (event) { if ( (this.mergedConfig.useOneClickNsfw && !this.showHidden) && diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index f80badfd..fe9e9398 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,7 +1,8 @@ - + -- cgit v1.2.3-70-g09d2 From 90345f158ff2eb12e619dbd7406f2fa81c379637 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 18 Jun 2021 02:01:37 +0300 Subject: gallery now supports flash, fixes for flash component. refactored media modal --- src/components/attachment/attachment.js | 9 +++++---- src/components/flash/flash.vue | 21 ++++++++++++--------- src/components/media_modal/media_modal.js | 8 +++++--- src/components/media_modal/media_modal.vue | 7 +++++++ src/components/status_content/status_content.js | 6 ------ src/components/status_content/status_content.vue | 2 +- src/components/user_card/user_card.js | 2 +- src/modules/media_viewer.js | 9 +++++---- 8 files changed, 36 insertions(+), 28 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 06928ca6..3ea96a7a 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -113,13 +113,14 @@ const Attachment = { }, openModal (event) { if (this.useModal) { - this.setMedia() - this.$store.dispatch('setCurrent', this.attachment) + this.$emit('setMedia') + this.$store.dispatch('setCurrentMedia', this.attachment) } }, openModalForce (event) { - this.setMedia() - this.$store.dispatch('setCurrent', this.attachment) + this.$emit('setMedia') + this.$store.dispatch('setCurrentMedia', this.attachment) + }, }, stopFlash () { this.$refs.flash.closePlayer() diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue index 5a77d235..95f71950 100644 --- a/src/components/flash/flash.vue +++ b/src/components/flash/flash.vue @@ -44,8 +44,9 @@ diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js index e7384c93..b6919366 100644 --- a/src/components/media_modal/media_modal.js +++ b/src/components/media_modal/media_modal.js @@ -3,6 +3,7 @@ import VideoAttachment from '../video_attachment/video_attachment.vue' import Modal from '../modal/modal.vue' import fileTypeService from '../../services/file_type/file_type.service.js' import GestureService from '../../services/gesture_service/gesture_service' +import Flash from 'src/components/flash/flash.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { faChevronLeft, @@ -18,7 +19,8 @@ const MediaModal = { components: { StillImage, VideoAttachment, - Modal + Modal, + Flash }, computed: { showing () { @@ -67,13 +69,13 @@ const MediaModal = { goPrev () { if (this.canNavigate) { const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1) - this.$store.dispatch('setCurrent', this.media[prevIndex]) + this.$store.dispatch('setCurrentMedia', this.media[prevIndex]) } }, goNext () { if (this.canNavigate) { const nextIndex = this.currentIndex === this.media.length - 1 ? 0 : (this.currentIndex + 1) - this.$store.dispatch('setCurrent', this.media[nextIndex]) + this.$store.dispatch('setCurrentMedia', this.media[nextIndex]) } }, handleKeyupEvent (e) { diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index 54bc5335..a578bc71 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -28,6 +28,13 @@ :title="currentMedia.description" controls /> +
- - - -
- - - -
- - - - + :title="attachment.description" + @click.prevent.stop="toggleHidden" + > + + + +
+ + + + +
- - - - + + + - - + + + + + + + -
- -
-
- -

{{ attachment.oembed.title }}

-
- +
+ +
+
+ +

{{ attachment.oembed.title }}

+
+ +
-
- + + +
+
- - + +

+ {{ localDescription }} +

+
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index 134ea77e..cca67dbd 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -4,9 +4,15 @@ import { sumBy } from 'lodash' const Gallery = { props: [ 'attachments', + 'limitRows', + 'descriptions', 'nsfw', 'setMedia', - 'size' + 'size', + 'editable', + 'removeAttachment', + 'editAttachment', + 'maxPerRow' ], data () { return { @@ -20,24 +26,19 @@ const Gallery = { if (!this.attachments) { return [] } - console.log(this.size) if (this.size === 'hide') { return this.attachments.map(item => ({ minimal: true, items: [item] })) } const rows = this.attachments.reduce((acc, attachment, i) => { + if (this.size === 'small' && acc.length === 2) return acc if (attachment.mimetype.includes('audio')) { return [...acc, { audio: true, items: [attachment] }, { items: [] }] } - const maxPerRow = 3 - const attachmentsRemaining = this.attachments.length - i - 1 + const maxPerRow = this.maxPerRow || 3 + const attachmentsRemaining = this.attachments.length - i + 1 const currentRow = acc[acc.length - 1].items - if ( - currentRow.length <= maxPerRow || - attachmentsRemaining === 1 - ) { - currentRow.push(attachment) - } - if (currentRow.length === maxPerRow && attachmentsRemaining > 1) { + currentRow.push(attachment) + if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) { return [...acc, { items: [] }] } else { return acc @@ -51,7 +52,9 @@ const Gallery = { }, 0) }, tooManyAttachments () { - if (this.size === 'hide') { + if (this.editable || this.size === 'small') { + return false + } else if (this.size === 'hide') { return this.attachments.length > 8 } else { return this.attachmentsDimensionalScore > 1 @@ -59,8 +62,8 @@ const Gallery = { } }, methods: { - onNaturalSizeLoad (id, size) { - this.$set(this.sizes, id, size) + onNaturalSizeLoad ({ id, width, height }) { + this.$set(this.sizes, id, { width, height }) }, rowStyle (row) { if (row.audio) { @@ -81,8 +84,11 @@ const Gallery = { this.hidingLong = event }, openGallery () { - this.setMedia() - this.$store.dispatch('setCurrent', this.attachments[0]) + this.$store.dispatch('setMedia', this.attachments) + this.$store.dispatch('setCurrentMedia', this.attachments[0]) + }, + onMedia () { + this.$store.dispatch('setMedia', this.attachments) } } } diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index 8e08e514..cedf64d3 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -17,13 +17,18 @@ v-for="attachment in row.items" class="gallery-item" :key="attachment.id" - :set-media="setMedia" :nsfw="nsfw" :attachment="attachment" :allow-play="false" :size="size" - :natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)" + :editable="editable" + :remove="removeAttachment" + :edit="editAttachment" + :description="descriptions && descriptions[attachment.id]" + :hideDescription="tooManyAttachments && hidingLong" :style="itemStyle(attachment.id, row.items)" + @setMedia="onMedia" + @naturalSizeLoad="onNaturalSizeLoad" />
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 5342894f..1a12db9c 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -4,6 +4,7 @@ import ScopeSelector from '../scope_selector/scope_selector.vue' import EmojiInput from '../emoji_input/emoji_input.vue' import PollForm from '../poll/poll_form.vue' import Attachment from '../attachment/attachment.vue' +import Gallery from 'src/components/gallery/gallery.vue' import StatusContent from '../status_content/status_content.vue' import fileTypeService from '../../services/file_type/file_type.service.js' import { findOffset } from '../../services/offset_finder/offset_finder.service.js' @@ -85,7 +86,8 @@ const PostStatusForm = { Checkbox, Select, Attachment, - StatusContent + StatusContent, + Gallery }, mounted () { this.updateIdempotencyKey() @@ -388,6 +390,10 @@ const PostStatusForm = { this.newStatus.files.splice(index, 1) this.$emit('resize') }, + editAttachment (fileInfo, newText) { + console.log(fileInfo, newText) + this.newStatus.mediaDescriptions[fileInfo.id] = newText + }, uploadFailed (errString, templateArgs) { templateArgs = templateArgs || {} this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs) diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index fbda41d6..c6f84a4b 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -287,32 +287,21 @@ @click="clearError" /> -
-
- - - -
-
+
video { - line-height: 0; - max-height: 200px; - max-width: 100%; -} -- cgit v1.2.3-70-g09d2 From bfe31e20eaddaa9435c98962c53c35f4184ed5fe Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 18 Jun 2021 14:12:50 +0300 Subject: better compact attachments --- src/components/attachment/attachment.js | 17 +++++++++++++---- src/components/gallery/gallery.vue | 5 ++++- src/components/status_body/status_body.scss | 6 +++--- src/components/status_content/status_content.vue | 5 ----- 4 files changed, 20 insertions(+), 13 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index a80c5c2e..84656ffa 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -68,6 +68,7 @@ const Attachment = { '-nsfw-placeholder': this.hidden }, '-' + this.type, + '-' + this.size, `-${this.useContainFit ? 'contain' : 'cover'}-fit` ] }, @@ -102,10 +103,18 @@ const Attachment = { return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown' }, useModal () { - const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio'] - : this.mergedConfig.playVideosInModal - ? ['image', 'video'] - : ['image'] + let modalTypes = [] + switch (this.size) { + case 'hide': + case 'small': + modalTypes = ['image', 'video', 'audio', 'flash'] + break + default: + modalTypes = this.mergedConfig.playVideosInModal + ? ['image', 'video', 'flash'] + : ['image'] + break + } return modalTypes.includes(this.type) }, ...mapGetters(['mergedConfig']) diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index a1f1c26c..65175366 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -95,7 +95,10 @@ height: 0; width: 100%; flex-grow: 1; - margin-top: 0.5em; + + &:not(:first-child) { + margin-top: 0.5em; + } } &.-long { diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 5be21171..f261108e 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -123,6 +123,7 @@ } &.-compact { + align-items: top; flex-direction: row; --emoji-size: 16px; @@ -140,9 +141,7 @@ mask-size: auto 3.5em, auto auto; mask-position: 0 0, 0 0; mask-repeat: repeat-x, repeat; - mask-image: - linear-gradient(to top, white 0.5em, transparent 2.5em), - linear-gradient(to top, white, white); + mask-image: linear-gradient(to bottom, white 2em, transparent 3em); /* Autoprefixed seem to ignore this one, and also syntax is different */ -webkit-mask-composite: xor; @@ -154,6 +153,7 @@ flex: 1 1 0; min-width: 5em; height: 100%; + margin-left: 0.5em; } .summary-wrapper { diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index 90ce130d..573eadf5 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -51,10 +51,5 @@ $status-margin: 0.75em; .StatusContent { flex: 1; min-width: 0; - &.-compact { - flex { - display: flex; - } - } } -- cgit v1.2.3-70-g09d2 From 8bab8658e8efd5b8b9f8de9311432c814fa2ef9c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 18 Jun 2021 16:11:16 +0300 Subject: better handling of unknown files, better upload display --- src/components/attachment/attachment.js | 7 ++--- src/components/attachment/attachment.vue | 31 +++++++++++++++++++++- src/components/gallery/gallery.js | 17 +++++++++++- .../post_status_form/post_status_form.vue | 4 +++ 4 files changed, 54 insertions(+), 5 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 84656ffa..bd424087 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -65,10 +65,11 @@ const Attachment = { return [ { '-loading': this.loading, - '-nsfw-placeholder': this.hidden + '-nsfw-placeholder': this.hidden, + '-editable': this.edit !== undefined }, - '-' + this.type, - '-' + this.size, + '-type-' + this.type, + this.size && '-size-' + this.size, `-${this.useContainFit ? 'contain' : 'cover'}-fit` ] }, diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 9b1e83a7..b8be82da 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -15,8 +15,37 @@ @click.prevent="" > - {{ nsfw ? "NSFW / " : "" }}{{ placeholderName }} + {{ nsfw ? "NSFW / " : "" }}{{ this.edit ? '' : placeholderName }} +
+ +
+
+ +

+ {{ localDescription }} +

+
{ - return acc + (row.audio ? 0.25 : (1 / (row.items.length + 0.6))) + let size = 0 + if (row.minimal) { + size += 1 / 8 + } else if (row.audio) { + size += 1 / 4 + } else { + size += 1 / (row.items.length + 0.6) + } + return acc + size }, 0) }, tooManyAttachments () { diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 88ca4c9c..5078ad5f 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -338,6 +338,10 @@ .post-status-form { position: relative; + .attachments { + margin-bottom: 0.5em; + } + .form-bottom { display: flex; justify-content: space-between; -- cgit v1.2.3-70-g09d2 From 6b8b9c017f5f07ad1b7c6692393554e5bf5d0f45 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 18 Jun 2021 17:39:29 +0300 Subject: whoops --- src/components/attachment/attachment.scss | 271 ++++++++++++++++++++++++++++++ 1 file changed, 271 insertions(+) create mode 100644 src/components/attachment/attachment.scss (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss new file mode 100644 index 00000000..f902f37d --- /dev/null +++ b/src/components/attachment/attachment.scss @@ -0,0 +1,271 @@ +@import '../../_variables.scss'; + +.Attachment { + display: inline-flex; + flex-direction: column; + position: relative; + align-self: flex-start; + line-height: 0; + height: 100%; + 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); + z-index: 1; + + .attachment-wrapper { + flex: 1 1 auto; + height: 100%; + position: relative; + overflow: hidden; + z-index: 2; + } + + .description-container { + flex: 0 1 0; + display: flex; + padding-top: 0.5em; + + p { + flex: 1; + text-align: center; + line-height: 1.5; + padding: 0.5em; + margin: 0; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + &.-static { + position: absolute; + left: 0; + right: 0; + top: 0; + z-index: 1; + background: var(--popover); + box-shadow: var(--popupShadow); + opacity: 0; + transition: 0.35s all; + transition-timing-function: cubic-bezier(0, 1, 0.5, 1); + } + } + + &:hover { + .description-container.-static { + opacity: 1; + transform: translateY(-3em); + } + } + + .description-field { + flex: 1; + min-width: 0; + } + + & .image-container, + & .audio-container, + & .video-container, + & .flash-container, + & .oembed-container { + display: flex; + justify-content: center; + width: 100%; + height: 100%; + } + + .image-container { + .image { + width: 100%; + height: 100%; + } + } + + & .flash-container, + & .video-container { + & .flash, + & video { + max-width: 100%; + max-height: 100%; + object-fit: contain; + align-self: center; + z-index: 0; + } + } + + .audio-container { + display: flex; + align-items: flex-end; + + audio { + width: 100%; + height: 100%; + } + } + + .play-icon { + position: absolute; + font-size: 64px; + top: calc(50% - 32px); + left: calc(50% - 32px); + color: rgba(255, 255, 255, 0.75); + text-shadow: 0 0 2px rgba(0, 0, 0, 0.4); + + &::before { + margin: 0; + } + } + + .attachment-buttons { + display: flex; + position: absolute; + right: 0; + top: 0; + z-index: 2; + margin-top: 0.5em; + margin-right: 0.5em; + + .attachment-button { + padding: 0; + z-index: 4; + border-radius: $fallback--tooltipRadius; + border-radius: var(--tooltipRadius, $fallback--tooltipRadius); + text-align: center; + width: 2em; + height: 2em; + margin-left: 0.5em; + font-size: 1.25em; + // TODO: theming? hard to theme with unknown background image color + background: rgba(230, 230, 230, 0.7); + + .svg-inline--fa { + color: rgba(0, 0, 0, 0.6); + } + + &:hover .svg-inline--fa { + color: rgba(0, 0, 0, 0.9); + } + } + } + + .oembed-container { + line-height: 1.2em; + flex: 1 0 100%; + width: 100%; + margin-right: 15px; + display: flex; + + img { + width: 100%; + } + + .image { + flex: 1; + img { + 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; + } + } + } + + &.-size-small { + .play-icon { + zoom: 0.5; + opacity: 0.7; + } + + .attachment-buttons { + zoom: 0.7; + opacity: 0.5; + } + } + + &.-editable { + padding: 0.5em; + + & .description-container, + & .attachment-buttons { + margin: 0; + } + } + + &.-placeholder { + display: inline-block; + color: $fallback--link; + color: var(--postLink, $fallback--link); + overflow: hidden; + white-space: nowrap; + height: auto; + line-height: 1.5; + + &:not(.-editable) { + border: none; + } + + &.-editable { + display: flex; + flex-direction: row; + align-items: baseline; + + & .description-container, + & .attachment-buttons { + margin: 0; + padding: 0; + position: relative; + } + + .description-container { + flex: 1; + padding-left: 0.5em; + } + + .attachment-buttons { + order: 99; + align-self: center; + } + } + + a { + display: inline-block; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + } + + svg { + color: inherit; + } + } + + &.-loading { + cursor: progress; + } + + &.-contain-fit { + img, + canvas { + object-fit: contain; + } + } + + &.-cover-fit { + img, + canvas { + object-fit: cover; + } + } +} -- cgit v1.2.3-70-g09d2 From 4016182b89dacbc9095ee7f4d2e021bb9fad65d0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 22 Jun 2021 20:32:55 +0300 Subject: fix z-indexes --- src/components/attachment/attachment.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index f902f37d..b4a81a08 100644 --- a/src/components/attachment/attachment.scss +++ b/src/components/attachment/attachment.scss @@ -13,14 +13,12 @@ border-radius: var(--attachmentRadius, $fallback--attachmentRadius); border-color: $fallback--border; border-color: var(--border, $fallback--border); - z-index: 1; .attachment-wrapper { flex: 1 1 auto; height: 100%; position: relative; overflow: hidden; - z-index: 2; } .description-container { @@ -44,7 +42,6 @@ left: 0; right: 0; top: 0; - z-index: 1; background: var(--popover); box-shadow: var(--popupShadow); opacity: 0; @@ -91,7 +88,6 @@ max-height: 100%; object-fit: contain; align-self: center; - z-index: 0; } } @@ -123,13 +119,12 @@ position: absolute; right: 0; top: 0; - z-index: 2; margin-top: 0.5em; margin-right: 0.5em; + z-index: 1; .attachment-button { padding: 0; - z-index: 4; border-radius: $fallback--tooltipRadius; border-radius: var(--tooltipRadius, $fallback--tooltipRadius); text-align: center; -- cgit v1.2.3-70-g09d2 From 4ba8d95a10fdf22a7cefc56ea0515b7c30ee53ff Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 22 Jun 2021 20:33:57 +0300 Subject: fix videos and related not having working drag controls --- src/components/attachment/attachment.vue | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index b8be82da..e1e700c4 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -127,7 +127,7 @@ /> - - + - - +
- - +
Date: Tue, 22 Jun 2021 20:35:34 +0300 Subject: fix videos not stretching to container --- src/components/attachment/attachment.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index b4a81a08..0cb23a37 100644 --- a/src/components/attachment/attachment.scss +++ b/src/components/attachment/attachment.scss @@ -84,8 +84,8 @@ & .video-container { & .flash, & video { - max-width: 100%; - max-height: 100%; + width: 100%; + height: 100%; object-fit: contain; align-self: center; } -- cgit v1.2.3-70-g09d2 From a2f21f4e131e03240699017ef92b7dba38c4fb44 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 22 Jun 2021 20:42:52 +0300 Subject: fix description colliding with extra-long text --- src/components/attachment/attachment.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index 0cb23a37..33e058e7 100644 --- a/src/components/attachment/attachment.scss +++ b/src/components/attachment/attachment.scss @@ -25,6 +25,7 @@ flex: 0 1 0; display: flex; padding-top: 0.5em; + z-index: 1; p { flex: 1; -- cgit v1.2.3-70-g09d2 From b67db47c888dd45c49a49b82e7922c2bf40ed61c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 22 Jun 2021 20:47:35 +0300 Subject: lint --- src/components/attachment/attachment.vue | 16 ++++++++-------- src/components/gallery/gallery.vue | 12 ++++++------ src/components/post_status_form/post_status_form.vue | 4 ++-- src/components/status_body/status_body.vue | 6 +++--- src/components/status_content/status_content.js | 1 - src/components/status_content/status_content.vue | 12 ++++++------ 6 files changed, 25 insertions(+), 26 deletions(-) (limited to 'src/components/attachment') diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index e1e700c4..98d9c3ec 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -15,12 +15,12 @@ @click.prevent="" > - {{ nsfw ? "NSFW / " : "" }}{{ this.edit ? '' : placeholderName }} + {{ nsfw ? "NSFW / " : "" }}{{ edit ? '' : placeholderName }}
+ class="attachment-buttons" + >
+ class="attachment-buttons" + >