Improve collections view

- Add opacity on book covers
- Enlarge book covers

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;
 }

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
 		}