hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'proper-attachments' into shigusegubu

Browse source 
* proper-attachments:
  don't stretch columns when uploading media
  fix videos not stretching to container
  fix videos and related not having working drag controls
  fix z-indexes
This commit is contained in:
Henry Jameson 2021-06-22 20:37:29 +03:00
commit ed9091082a
3 changed files with 10 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/attachment/attachment.scss
View file

@ -13,14 +13,12 @@
border-radius: var(--attachmentRadius, $fallback--attachmentRadius); border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
z-index: 1;
.attachment-wrapper { .attachment-wrapper {
flex: 1 1 auto; flex: 1 1 auto;
height: 100%; height: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
z-index: 2;
} }
.description-container { .description-container {
@ -44,7 +42,6 @@
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
z-index: 1;
background: var(--popover); background: var(--popover);
box-shadow: var(--popupShadow); box-shadow: var(--popupShadow);
opacity: 0; opacity: 0;
@ -87,11 +84,10 @@
& .video-container { & .video-container {
& .flash, & .flash,
& video { & video {
max-width: 100%; width: 100%;
max-height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
align-self: center; align-self: center;
z-index: 0;
} }
} }
@ -123,13 +119,12 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
z-index: 2;
margin-top: 0.5em; margin-top: 0.5em;
margin-right: 0.5em; margin-right: 0.5em;
z-index: 1;
.attachment-button { .attachment-button {
padding: 0; padding: 0;
z-index: 4;
border-radius: $fallback--tooltipRadius; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center; text-align: center;

12
src/components/attachment/attachment.vue
View file

@ -127,7 +127,7 @@
/> />
</a> </a>
<a <span
v-if="type === 'video' && !hidden" v-if="type === 'video' && !hidden"
class="video-container" class="video-container"
:href="attachment.url" :href="attachment.url"
@ -145,9 +145,9 @@
class="play-icon" class="play-icon"
icon="play-circle" icon="play-circle"
/> />
</a> </span>
<a <span
v-if="type === 'audio' && !hidden" v-if="type === 'audio' && !hidden"
class="audio-container" class="audio-container"
:href="attachment.url" :href="attachment.url"
@ -162,7 +162,7 @@
@play="$emit('play')" @play="$emit('play')"
@pause="$emit('pause')" @pause="$emit('pause')"
/> />
</a> </span>
<div <div
v-if="type === 'html' && attachment.oembed" v-if="type === 'html' && attachment.oembed"
@ -183,7 +183,7 @@
</div> </div>
</div> </div>
<a <span
v-if="type === 'flash' && !hidden" v-if="type === 'flash' && !hidden"
class="flash-container" class="flash-container"
:href="attachment.url" :href="attachment.url"
@ -196,7 +196,7 @@
@playerOpened="setFlashLoaded(true)" @playerOpened="setFlashLoaded(true)"
@playerClosed="setFlashLoaded(false)" @playerClosed="setFlashLoaded(false)"
/> />
</a> </span>
</div> </div>
<div <div
v-if="size !== 'hide' && !hideDescription && (edit || localDescription)" v-if="size !== 'hide' && !hideDescription && (edit || localDescription)"

2
src/components/gallery/gallery.vue
View file

@ -166,7 +166,7 @@
display: grid; display: grid;
grid-column-gap: 0.5em; grid-column-gap: 0.5em;
grid-row-gap: 0.5em; grid-row-gap: 0.5em;
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
.gallery-item { .gallery-item {
margin: 0; margin: 0;