[Android] Remote access: improve the cards UI

[Nicolas Pomepuy]

vlc-android | branch: master | Nicolas Pomepuy <nicolas at videolabs.io> | Mon Feb  5 09:53:12 2024 +0100| [3bce2d2ec663316b8c13969abfa21497b692fd22] | committer: Nicolas Pomepuy

Remote access: improve the cards UI

> https://code.videolan.org/videolan/vlc-android/commit/3bce2d2ec663316b8c13969abfa21497b692fd22
---

 .../src/components/MediaItem.vue                   | 26 ++++++++++++++--------
 .../network-sharing-server/src/pages/VideoList.vue |  1 -
 .../network-sharing-server/src/scss/app.scss       | 21 +++++++++++++++--
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/buildsystem/network-sharing-server/src/components/MediaItem.vue b/buildsystem/network-sharing-server/src/components/MediaItem.vue
index 963f6db9d0..8d417d8ab4 100644
--- a/buildsystem/network-sharing-server/src/components/MediaItem.vue
+++ b/buildsystem/network-sharing-server/src/components/MediaItem.vue
@@ -1,5 +1,5 @@
 <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
diff --git a/buildsystem/network-sharing-server/src/pages/VideoList.vue b/buildsystem/network-sharing-server/src/pages/VideoList.vue
index 9a3d706575..29f3c77e29 100644
--- a/buildsystem/network-sharing-server/src/pages/VideoList.vue
+++ b/buildsystem/network-sharing-server/src/pages/VideoList.vue
@@ -135,7 +135,6 @@ export default {
     position: absolute;
     bottom: 0;
     top: auto;
-    border-radius: 6px;
     overflow: hidden;
 }
 
diff --git a/buildsystem/network-sharing-server/src/scss/app.scss b/buildsystem/network-sharing-server/src/scss/app.scss
index e7f5047b8e..d1b5ed2e75 100644
--- a/buildsystem/network-sharing-server/src/scss/app.scss
+++ b/buildsystem/network-sharing-server/src/scss/app.scss
@@ -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;
 }