simon987/sist2
1
0
Fork 0
mirror of https://github.com/simon987/sist2.git synced 2025-04-19 18:26:43 +00:00
Code Issues Projects Releases Wiki Activity

Rework duration/resolution badge style

Browse Source
This commit is contained in:
simon987 2023-02-07 20:39:12 -05:00
parent 587c9a2c90
commit 6f759642fc
4 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
sist2-vue/src/Sist2Api.ts
View File

@ -61,6 +61,7 @@ export interface EsHit {
isAudio: boolean isAudio: boolean
hasThumbnail: boolean hasThumbnail: boolean
hasVidPreview: boolean hasVidPreview: boolean
imageAspectRatio: number
/** Number of thumbnails available */ /** Number of thumbnails available */
tnNum: number tnNum: number
} }
@ -155,6 +156,9 @@ class Sist2Api {
&& hit._source.videoc !== "raw" && hit._source.videoc !== "ppm") { && hit._source.videoc !== "raw" && hit._source.videoc !== "ppm") {
hit._props.isPlayableImage = true; hit._props.isPlayableImage = true;
} }
if ("width" in hit._source && "height" in hit._source) {
hit._props.imageAspectRatio = hit._source.width / hit._source.height;
}
break; break;
case "video": case "video":
if ("videoc" in hit._source) { if ("videoc" in hit._source) {

4
sist2-vue/src/components/DocCard.vue
View File

@ -133,4 +133,8 @@ export default {
.sub-document .fit { .sub-document .fit {
padding: 4px 4px 0 4px; padding: 4px 4px 0 4px;
} }
.featured-line {
font-size: 92%;
}
</style> </style>

17
sist2-vue/src/components/FullThumbnail.vue
View File

@ -6,13 +6,13 @@
</div> </div>
<div <div
v-if="doc._props.isImage && !hover && doc._props.tnW / doc._props.tnH < 5" v-if="doc._props.isImage && doc._props.imageAspectRatio < 5"
class="card-img-overlay" class="card-img-overlay"
:class="{'small-badge': smallBadge}"> :class="{'small-badge': smallBadge}">
<span class="badge badge-resolution">{{ `${doc._source.width}x${doc._source.height}` }}</span> <span class="badge badge-resolution">{{ `${doc._source.width}x${doc._source.height}` }}</span>
</div> </div>
<div v-if="(doc._props.isVideo || doc._props.isGif) && doc._source.duration > 0 && !hover" <div v-if="(doc._props.isVideo || doc._props.isGif) && doc._source.duration > 0"
class="card-img-overlay" class="card-img-overlay"
:class="{'small-badge': smallBadge}"> :class="{'small-badge': smallBadge}">
<span class="badge badge-resolution">{{ humanTime(doc._source.duration) }}</span> <span class="badge badge-resolution">{{ humanTime(doc._source.duration) }}</span>
@ -152,17 +152,18 @@ export default {
} }
.badge-resolution { .badge-resolution {
color: #212529; color: #c6c6c6;
background-color: #FFC107; background-color: #272727CC;
padding: 2px 3px;
} }
.card-img-overlay { .card-img-overlay {
pointer-events: none; pointer-events: none;
padding: 0.75rem; padding: 2px 6px;
bottom: unset; bottom: 4px;
top: 0; top: unset;
left: unset; left: unset;
right: unset; right: 0;
} }
.small-badge { .small-badge {

8
sist2-vue/src/util.ts
View File

@ -57,6 +57,14 @@ export function humanTime(sec_num: number): string {
const minutes = Math.floor((sec_num - (hours * 3600)) / 60); const minutes = Math.floor((sec_num - (hours * 3600)) / 60);
const seconds = sec_num - (hours * 3600) - (minutes * 60); const seconds = sec_num - (hours * 3600) - (minutes * 60);
if (sec_num < 60) {
return `${sec_num}s`
}
if (sec_num < 3600) {
return `${minutes < 10 ? "0" : ""}${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
}
return `${hours < 10 ? "0" : ""}${hours}:${minutes < 10 ? "0" : ""}${minutes}:${seconds < 10 ? "0" : ""}${seconds}`; return `${hours < 10 ? "0" : ""}${hours}:${minutes < 10 ? "0" : ""}${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
} }