From 26931c734b552303b66e91dd35b2232c76589ca5 Mon Sep 17 00:00:00 2001
From: Arthur Lefebvre <artlef@protonmail.com>
Date: Wed, 8 Apr 2026 14:36:40 +0200
Subject: [PATCH] Improve collections view

- Add opacity on book covers
- Enlarge book covers
---
 front/src/CollectionListElement.vue | 21 +++++++++++++++++----
 internal/query/query.go             |  4 ++--
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/front/src/CollectionListElement.vue b/front/src/CollectionListElement.vue
index 1689024..c678d60 100644
--- a/front/src/CollectionListElement.vue
+++ b/front/src/CollectionListElement.vue
@@ -6,6 +6,7 @@ const props = defineProps({
   id: Number,
   name: String,
   books: Array,
+  count: Number,
 })
 
 const router = useRouter()
@@ -14,6 +15,14 @@ function goToCollection() {
   const collectionId = props.id
   router.push(`/collection/${props.id}`)
 }
+
+function setBookOpacity(index) {
+  if (props.books.length > 7 && index > 3) {
+    return 'opacity: ' + (100 - index * 13) + '%;'
+  } else {
+    return ''
+  }
+}
 </script>
 
 <template>
@@ -24,8 +33,12 @@ function goToCollection() {
       </h2>
     </div>
     <div class="collectionpreviewbooks" v-if="props.books && props.books.length > 0">
-      <div class="bookpreview mx-1" v-for="book in props.books" :key="book.id">
-        <img v-bind:src="getImagePathOrDefault(book.coverPath)" v-bind:alt="book.title" />
+      <div class="bookpreview mx-1" v-for="(book, index) in props.books" :key="book.id">
+        <img
+          :style="setBookOpacity(index)"
+          v-bind:src="getImagePathOrDefault(book.coverPath)"
+          v-bind:alt="book.title"
+        />
       </div>
     </div>
   </div>
@@ -33,8 +46,8 @@ function goToCollection() {
 
 <style scoped>
 img {
-  max-height: 100px;
-  max-width: 100px;
+  max-height: 150px;
+  max-width: 150px;
   height: auto;
   width: auto;
 }
diff --git a/internal/query/query.go b/internal/query/query.go
index 827d75b..e441607 100644
--- a/internal/query/query.go
+++ b/internal/query/query.go
@@ -215,8 +215,8 @@ func FetchAllCollections(db *gorm.DB, userId uint, limit int, offset int) ([]Col
 		return collections, res.Error
 	}
 	for _, collectionId := range collectionIds {
-		//only takes first 5 books
-		queryResults, err := fetchCollectionItemBook(db, collectionId.ID, 5, 0)
+		//only takes first 8 books
+		queryResults, err := fetchCollectionItemBook(db, collectionId.ID, 8, 0)
 		if err != nil {
 			return collections, res.Error
 		}