uploads: show videos and ugoiras on upload page.

* On the upload page, show the video when uploading a video or ugoira.
* On the upload page, show the filesize and resolution beneath the
  image, instead of above it.
* On the media asset show page, show the full video or ugoira instead of
  just the thumbnail.
This commit is contained in:
evazion
2022-01-30 22:27:07 -06:00
parent 5d2996d0c2
commit 4ad554e28b
12 changed files with 161 additions and 86 deletions

View File

@@ -13,6 +13,8 @@ $spacer: 0.25rem; /* 4px */
.font-bold { font-weight: bold; }
.cursor-pointer { cursor: pointer; }
.cursor-zoom-in { cursor: zoom-in; }
.cursor-zoom-out { cursor: zoom-out; }
.hidden { display: none !important; }
.inline-block { display: inline-block; }
@@ -36,6 +38,8 @@ $spacer: 0.25rem; /* 4px */
.break-all { word-break: break-all; }
.whitespace-nowrap { white-space: nowrap; }
.pointer-events-none { pointer-events: none; }
.select-none { user-select: none; }
.leading-none { line-height: 1; }
.absolute { position: absolute; }
@@ -83,6 +87,7 @@ $spacer: 0.25rem; /* 4px */
.p-0 { padding: 0; }
.p-px { padding: 1px; }
.p-0\.5 { padding: 0.5 * $spacer; }
.p-1 { padding: 1 * $spacer; }
.p-4 { padding: 4 * $spacer; }
.px-4 { padding-left: 4 * $spacer; padding-right: 4 * $spacer; }
@@ -116,6 +121,7 @@ $spacer: 0.25rem; /* 4px */
.max-h-270px { max-height: 270px; }
.max-h-360px { max-height: 360px; }
.max-h-720px { max-height: 720px; }
.max-h-screen { max-height: 100vh; }
.space-x-1 > * + * { margin-left: 1 * $spacer; }
.space-x-2 > * + * { margin-left: 2 * $spacer; }

View File

@@ -1,35 +1,5 @@
div#c-uploads {
div#a-show {
&[data-image-size="small"] {
#image {
cursor: zoom-in;
}
a#upload-image-view-small {
font-weight: bold;
}
}
&[data-image-size="large"] {
#image {
cursor: zoom-out;
}
a#upload-image-view-large {
font-weight: bold;
}
}
&[data-image-size="full"] {
#image {
cursor: zoom-out;
}
a#upload-image-view-full {
font-weight: bold;
}
}
.artist-commentary {
margin-top: 1em;
}
@@ -42,7 +12,7 @@ div#c-uploads {
margin-bottom: 2em;
}
ul#upload-image-metadata, ul#links {
ul#links {
margin-bottom: 1em;
}