simon987/sist2
1
0
Fork 0
mirror of https://github.com/simon987/sist2.git synced 2025-04-10 14:06:45 +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
hasThumbnail: boolean
hasVidPreview: boolean
imageAspectRatio: number
/** Number of thumbnails available */
tnNum: number
}
@ -155,6 +156,9 @@ class Sist2Api {
&& hit._source.videoc !== "raw" && hit._source.videoc !== "ppm") {
hit._props.isPlayableImage = true;
}
if ("width" in hit._source && "height" in hit._source) {
hit._props.imageAspectRatio = hit._source.width / hit._source.height;
}
break;
case "video":
if ("videoc" in hit._source) {

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

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

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

@ -6,13 +6,13 @@
</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="{'small-badge': smallBadge}">
<span class="badge badge-resolution">{{ `${doc._source.width}x${doc._source.height}` }}</span>
</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="{'small-badge': smallBadge}">
<span class="badge badge-resolution">{{ humanTime(doc._source.duration) }}</span>
@ -152,17 +152,18 @@ export default {
}
.badge-resolution {
color: #212529;
background-color: #FFC107;
color: #c6c6c6;
background-color: #272727CC;
padding: 2px 3px;
}
.card-img-overlay {
pointer-events: none;
padding: 0.75rem;
bottom: unset;
top: 0;
padding: 2px 6px;
bottom: 4px;
top: unset;
left: unset;
right: unset;
right: 0;
}
.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 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}`;
}