Collection browser: improve display on mobile

front/src/CollectionListElement.vue

@@ -16,11 +16,18 @@ function goToCollection() {
   router.push(`/collection/${props.id}`)
 }
 
-function setBookOpacity(index) {
+function setBookOpacityClass(index) {
-  if (props.books.length > 7 && index > 3) {
+  const length = props.books.length
-    return 'opacity: ' + (100 - index * 13) + '%;'
+  if (length < 5) {
-  } else {
     return ''
+  } else if (length < 8) {
+    if (index < 4) {
+      return 'opacity-' + index
+    } else {
+      return ''
+    }
+  } else {
+    return 'opacity-' + index
   }
 }
 </script>
@@ -33,9 +40,14 @@ function setBookOpacity(index) {
       </h2>
     </div>
     <div class="collectionpreviewbooks" v-if="props.books && props.books.length > 0">
-      <div class="bookpreview mx-1" v-for="(book, index) in props.books" :key="book.id">
+      <div
+        :class="index > 3 ? 'is-hidden-touch' : ''"
+        class="bookpreview mx-1"
+        v-for="(book, index) in props.books"
+        :key="book.id"
+      >
         <img
-          :style="setBookOpacity(index)"
+          :class="setBookOpacityClass(index)"
           v-bind:src="getImagePathOrDefault(book.coverPath)"
           v-bind:alt="book.title"
         />
@@ -68,20 +80,67 @@ img {
   display: flex;
   justify-content: center;
   align-items: center;
+  text-align: center;
 }
 
 .collectionpreviewbooks {
   flex: 6;
   display: flex;
+  align-items: center;
+}
+
+.opacity-1 {
+  opacity: 100%;
+}
+
+.opacity-2 {
+  opacity: 100%;
+}
+
+.opacity-3 {
+  opacity: 100%;
+}
+
+.opacity-4 {
+  opacity: 70%;
+}
+
+.opacity-5 {
+  opacity: 40%;
+}
+
+.opacity-6 {
+  opacity: 20%;
+}
+
+.opacity-7 {
+  opacity: 10%;
 }
 
 @media (max-width: 1024px) {
   img {
-    max-height: 50px;
+    max-height: 75px;
-    max-width: 50px;
+    max-width: 75px;
   }
   .collectionpreviewbooks {
-    flex: 2;
+    flex: 1;
+    margin-top: 20px;
+    justify-content: center;
+  }
+  .collectioncontainer {
+    flex-direction: column;
+  }
+
+  .opacity-1 {
+    opacity: 70%;
+  }
+
+  .opacity-2 {
+    opacity: 40%;
+  }
+
+  .opacity-3 {
+    opacity: 10%;
   }
 }
 </style>