Skip to content
Snippets Groups Projects
Commit 3bce2d2e authored by Nicolas Pomepuy's avatar Nicolas Pomepuy
Browse files

Remote access: improve the cards UI

parent 28850285
No related branches found
No related tags found
1 merge request!1833Implement the video grouping in the remote access
<template>
<div v-if="(isCard)" >
<div v-if="(isCard)" class="card">
<div v-on:click="manageClick" class="ratio clickable" v-bind:class="(mainImgClasses())">
<img v-lazy="$getImageUrl(media, this.mediaType)" class="media-img-top">
<div class="media-overlay" v-show="!isBrowse()">
......@@ -14,11 +14,12 @@
<div class="card-progress" v-bind:style="(getProgressStyle())"></div>
</div>
</div>
<div class="d-flex">
<div class="d-flex align-items-end">
<div class="card-body media-text flex1">
<h6 class="card-title text-truncate">{{ media.title }}</h6>
<p class="card-text text-truncate card-desc" v-bind:class="((!this.getDescription()) ? 'empty-desc' : '')">
<h6 class="text-truncate" data-bs-toggle="tooltip" data-bs-placement="left"
:title="(media.title)">{{ media.title }}</h6>
<p class="card-text text-truncate subtitle" v-bind:class="((!this.getDescription()) ? 'empty-desc' : '')">
{{ getDescription() }}
</p>
......@@ -83,6 +84,7 @@
<script>
import ImageButton from './ImageButton.vue'
import { Tooltip } from 'bootstrap';
export default {
components: {
ImageButton,
......@@ -109,6 +111,7 @@ export default {
if (this.mediaType == 'video') {
return `${this.$readableDuration(this.media.length)} · ${this.media.resolution}`
} else {
if (this.isCard && this.media.artist == " ") return '\xa0'
return this.media.artist
}
},
......@@ -134,6 +137,14 @@ export default {
default: false
}
},
mounted() {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new Tooltip(tooltipTriggerEl, {
trigger: 'hover'
})
})
}
}
</script>
......@@ -141,10 +152,6 @@ export default {
<style lang='scss'>
@import '../scss/colors.scss';
.card-desc {
margin-top: 4px;
}
.empty-desc {
background: $hover-grey;
width: 100%;
......@@ -180,4 +187,5 @@ export default {
100% {
transform: translateX(100%);
}
}</style>
\ No newline at end of file
}
</style>
\ No newline at end of file
......@@ -135,7 +135,6 @@ export default {
position: absolute;
bottom: 0;
top: auto;
border-radius: 6px;
overflow: hidden;
}
......
......@@ -16,6 +16,10 @@ $breadcrumb-border-radius: 8px;
$breadcrumb-padding-y: 6px;
$dropdown-link-active-bg: #ff7700;
$card-spacer-y: 0.5rem;
$card-spacer-x: 0.5rem;
$card-bg: $lighter-grey;
@import "~bootstrap/scss/_maps";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/mixins";
......@@ -179,6 +183,11 @@ body {
align-items: center;
justify-content: center;
cursor: pointer;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.media-img-list-tr .media-overlay {
border-radius: 6px;
}
......@@ -186,6 +195,11 @@ body {
width: 100%;
height: 100%;
object-fit: cover;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.media-img-list-tr .media-img-top {
border-radius: 6px;
}
......@@ -240,8 +254,6 @@ body {
}
.card-body.media-text {
margin-top: 0.5em;
margin-bottom: 0.5em;
min-width: 0;
}
......@@ -273,6 +285,11 @@ body {
.audio-img-container {
background-color: $hover-grey;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.media-img-list-tr .audio-img-container {
border-radius: 6px;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment