jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

posts: show length of videos and animations in thumbnails.

Browse Source 
Show the length of videos and animated posts in the thumbnail. The
length is shown the top left corner in MM:SS format. This replaces the
play button icon.

Show a speaker icon instead of a music note icon for posts with sound.

Doing this requires doing `.includes(:media_asset)` in a bunch of
places to avoid N+1 queries when we access the post's duration.
This commit is contained in:
evazion
2021-10-25 01:31:47 -05:00
parent be505920d1
commit f1b5c34b4d
31 changed files with 111 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/javascript/src/styles/common/utilities.scss
View File

@@ -17,8 +17,18 @@ $spacer: 0.25rem; /* 4px */
.text-center { text-align: center; }
.text-muted { color: var(--muted-text-color); }
.text-xs { font-size: var(--text-xs); }
.leading-none { line-height: 1; }
.absolute { position: absolute; }
.top-0\.5 { top: 0.5 * $spacer; }
.left-0\.5 { left: 0.5 * $spacer; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-2 { margin-left: 2 * $spacer; margin-right: 2 * $spacer; }
.mx-0\.5 { margin-left: 0.5 * $spacer; margin-right: 0.5 * $spacer; }
.mx-2 { margin-left: 2 * $spacer; margin-right: 2 * $spacer; }
.mt-2 { margin-top: 2 * $spacer; }
.mt-4 { margin-top: 4 * $spacer; }
@@ -30,11 +40,13 @@ $spacer: 0.25rem; /* 4px */
.ml-4 { margin-left: 4 * $spacer; }
.p-0\.5 { padding: 0.5 * $spacer; }
.p-4 { padding: 4 * $spacer; }
.w-1\/4 { width: 25%; }
.w-full { width: 100%; }
.h-3 { height: 3 * $spacer; }
.h-10 { height: 10 * $spacer; }
.space-x-1 > * + * { margin-left: 1 * $spacer; }
@@ -45,6 +57,7 @@ $spacer: 0.25rem; /* 4px */
.divide-y-1 > * + * { border-top: 1px solid var(--divider-border-color); }
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.flex-auto { flex: 1 1 auto; }
.items-center { align-items: center; }