Added pagination size

javascripts/collection.js

@@ -7,8 +7,8 @@ Vue.createApp({
             total: 0,
             // eslint-disable-next-line no-undef
             page: query.page || 1,
+            limit: 16,
             totalPages: 1,
-            limit: 24,
             artist: "",
             format: "",
             year: "",
@@ -69,7 +69,7 @@ Vue.createApp({
 
             this.sortOrder = `${sortOrder.sort}-${sortOrder.order}`;
 
-            let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
+            let url = `/api/v1/albums?page=${this.page}&sort=${this.sort}&order=${this.order}`;
             if (this.artist) {
                 url += `&artist=${this.formatParams(this.artist)}`;
             }
@@ -94,6 +94,7 @@ Vue.createApp({
                 .get(url)
                 .then((response) => {
                     this.items = response.data.rows;
+                    this.limit = response.data.limit;
                     this.total = response.data.count || 0;
                     this.totalPages =
                         parseInt(response.data.count / this.limit, 10) +

javascripts/mon-compte/index.js

@@ -11,6 +11,8 @@ if (typeof email !== "undefined" && typeof username !== "undefined") {
                     password: "",
                     passwordConfirm: "",
                     // eslint-disable-next-line no-undef
+                    pagination,
+                    // eslint-disable-next-line no-undef
                     mastodon: mastodon || {
                         publish: false,
                         url: "",
@@ -56,7 +58,7 @@ if (typeof email !== "undefined" && typeof username !== "undefined") {
             // eslint-disable-next-line no-unused-vars
             async updateProfil() {
                 this.errors = [];
-                const { oldPassword, password, passwordConfirm, mastodon } =
+                const { oldPassword, password, passwordConfirm, mastodon, pagination } =
                     this.formData;
 
                 if (password && !oldPassword) {
@@ -82,6 +84,8 @@ if (typeof email !== "undefined" && typeof username !== "undefined") {
                     data.oldPassword = oldPassword;
                 }
 
+                data.pagination = pagination;
+
                 try {
                     await axios.patch(`/api/v1/me`, data);
 

sass/box.scss

@@ -5,15 +5,19 @@
     color: var(--font-color);
     display: block;
     padding: 1.25rem;
-    width: calc(100% - 2rem);
+
-    margin: auto;
     @include transition() {}
 
-    @include respond-to("small-up") {
+    &.mini {
-       width: 65%;
+        margin: auto;
-    }
+        width: calc(100% - 2rem);
-    @include respond-to("medium-up") {
+
-       width: 35%;
+        @include respond-to("small-up") {
+           width: 65%;
+        }
+        @include respond-to("medium-up") {
+           width: 35%;
+        }
     }
 
     h1 {

sass/colors.scss

@@ -45,6 +45,7 @@ $close-background-dark: rgba(240,240,240,.6);
     --bg-color: #{darken($white, 5%)};
     --bg-alternate-color: #{darken($white, 8%)};
     --font-color: #{$nord3};
+    --hover-font-color: #{lighten($nord3, 16%)};
     --footer-color: #{$darken-white};
     --link-color: #{$nord1};
 
@@ -88,6 +89,7 @@ $close-background-dark: rgba(240,240,240,.6);
     --bg-color: #{lighten($nord0, 2%)};
     --bg-alternate-color: #{lighten($nord3, 8%)};
     --font-color: #{$nord6};
+    --hover-font-color: #{darken($nord6, 16%)};
     --footer-color: #{$nord1};
     --link-color: #{$nord4};
 

sass/navbar.scss

@@ -117,7 +117,6 @@
             @include respond-to("medium-up") {
                 display: flex;
                 align-items: stretch;
-                color: rgba(0,0,0,.7);
 
                 .navbar-dropdown {
                     background-color: var(--default-color);
@@ -127,7 +126,6 @@
                     box-shadow: 0 8px 8px rgba(10,10,10,.1);
                     display: none;
                     font-size: .875rem;
-                    left: 0;
                     min-width: 100%;
                     position: absolute;
                     top: 100%;
@@ -138,7 +136,7 @@
 
                     .navbar-link {
                         background-color: var(--default-hl-color);
-                        color: rgba(0,0,0,.7);
+                        color: var(--hover-font-color);
                     }
 
                     .navbar-dropdown {
@@ -167,6 +165,29 @@
         @include respond-to("medium-up") {
             display: flex;
             align-items: center;
+
+            &::after {
+                border: 3px solid transparent;
+                border-radius: 2px;
+                border-right: 0;
+                border-top: 0;
+                content: " ";
+                display: block;
+                height: .625em;
+                pointer-events: none;
+                position: absolute;
+                top: 50%;
+                transform: rotate(-45deg);
+                transform-origin: center;
+                width: .625em;
+                border-color: var(--secondary-color);
+                margin-top: -0.375em;
+                right: 1.125em;
+
+                @include respond-to("medium-up") {
+                    border-color: var(--font-color);
+                }
+            }
         }
 
         .icon {
@@ -177,28 +198,7 @@
             width: 1.5rem;
         }
 
-        &::after {
-            border: 3px solid transparent;
-            border-radius: 2px;
-            border-right: 0;
-            border-top: 0;
-            content: " ";
-            display: block;
-            height: .625em;
-            pointer-events: none;
-            position: absolute;
-            top: 50%;
-            transform: rotate(-45deg);
-            transform-origin: center;
-            width: .625em;
-            border-color: var(--secondary-color);
-            margin-top: -0.375em;
-            right: 1.125em;
 
-            @include respond-to("medium-up") {
-                border-color: rgba(0,0,0,.7);
-            }
-        }
     }
 
     .navbar-menu {
@@ -260,7 +260,7 @@
             background-color: var(--font-color);
             border: none;
             height: 2px;
-            margin: .5rem 0;
+            margin: .5rem 0 0 1.5rem;
         }
 
         .navbar-item {
@@ -277,11 +277,15 @@
             box-shadow: 0 8px 8px rgba(10,10,10,.1);
             display: none;
             font-size: .875rem;
-            left: 0;
+            right: 0;
             min-width: 100%;
             position: absolute;
             top: 100%;
 
+            hr {
+                margin: 0.5rem 0;
+            }
+
             .navbar-item {
                 white-space: nowrap;
                 padding: .375rem 1rem;

src/middleware/Albums.js

@@ -192,7 +192,6 @@ Publié automatiquement via #musictopus`;
     async getAll() {
         const {
             page,
-            limit,
             exportFormat = "json",
             sort = "artists_sort",
             order = "asc",
@@ -206,6 +205,8 @@ Publié automatiquement via #musictopus`;
             discogsId,
         } = this.req.query;
 
+        const limit = this.req.user?.pagination || 16;
+
         let userId = this.req.user?._id;
 
         const where = {};
@@ -303,6 +304,7 @@ Publié automatiquement via #musictopus`;
             default:
                 return {
                     rows,
+                    limit,
                     count,
                 };
         }

src/middleware/Me.js

@@ -16,6 +16,7 @@ class Me extends Pages {
         const { _id } = this.req.user;
 
         const schema = Joi.object({
+            pagination: Joi.number(),
             isPublicCollection: Joi.boolean(),
             oldPassword: Joi.string(),
             password: Joi.string(),
@@ -45,6 +46,10 @@ class Me extends Pages {
             user.salt = value.password;
         }
 
+        if (value.pagination) {
+            user.pagination = value.pagination;
+        }
+
         if (value.isPublicCollection !== undefined) {
             user.isPublicCollection = value.isPublicCollection;
         }

src/models/users.js

@@ -25,6 +25,10 @@ const UserSchema = new mongoose.Schema(
         },
         hash: String,
         salt: String,
+        pagination: {
+            type: Number,
+            default: 16,
+        },
         isPublicCollection: {
             type: Boolean,
             default: false,

views/pages/composants.ejs

@@ -238,7 +238,7 @@
     </div>
 
     <h2 id="boites">Les boites</h2>
-    <div class="box">
+    <div class="box mini">
         <form method="POST">
             <h1>
                 Connexion

views/pages/connexion.ejs

@@ -1,4 +1,4 @@
-<div class="box">
+<div class="box mini">
     <form method="POST">
         <h1>
             Connexion

views/pages/inscription/index.ejs

@@ -1,4 +1,4 @@
-<div class="box">
+<div class="box mini">
     <form method="POST">
         <h1>
             Inscription

views/pages/mon-compte/index.ejs

@@ -5,7 +5,7 @@
 
     <form method="POST" @submit.prevent="updateProfil">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
-            <div>
+            <div class="box">
                 <h2>Mes données personnelles</h2>
                 <div>
                     <div class="field">
@@ -68,7 +68,7 @@
                     </div>
                 </div>
             </div>
-            <div>
+            <div class="box">
                 <h2>Mon activité</h2>
                 <div>
                     <div class="field">
@@ -126,6 +126,22 @@
                     </button>
                 </div>
             </div>
+            <div class="box">
+                <h2>Mes préférences</h2>
+                <div>
+                    <div class="field">
+                        <label for="pagination">Pagination</label>
+                        <select id="pagination" v-model="formData.pagination">
+                            <option value="16">16 albums/page</option>
+                            <option value="24">24 albums/page</option>
+                            <option value="32">32 albums/page</option>
+                            <option value="48">48 albums/page</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <div></div>
 
             <button type="submit" class="button is-primary mt-10" :disabled="loading">
                 <span v-if="!loading">Mettre à jour</span>
@@ -139,5 +155,6 @@
 <script>
     const email = '<%= user.email %>';
     const username = '<%= user.username %>';
+    const pagination = "<%= user.pagination || 16 %>";
     const mastodon = <%- JSON.stringify(user.mastodon || {publish: false, url: '', token: '', message: ''}) %>;
 </script>

views/pages/nous-contacter.ejs

@@ -1,4 +1,4 @@
-<section class="box" id="contact">
+<section class="box mini" id="contact">
     <h1>Nous contacter</h1>
     <form @submit="send" <% if (config.mailMethod === 'formspree' ) { %> id="contact" method="POST" action="https://formspree.io/f/<%= config.formspreeId %>" <% } %>>
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">