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}&sort=${this.sort}&order=${this.order}`;
+            let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
             if (this.artist) {
                 url += `&artist=${this.formatParams(this.artist)}`;
             }
@@ -94,7 +94,6 @@ 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,8 +11,6 @@ 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: "",
@@ -58,7 +56,7 @@ if (typeof email !== "undefined" && typeof username !== "undefined") {
             // eslint-disable-next-line no-unused-vars
             async updateProfil() {
                 this.errors = [];
-                const { oldPassword, password, passwordConfirm, mastodon, pagination } =
+                const { oldPassword, password, passwordConfirm, mastodon } =
                     this.formData;
 
                 if (password && !oldPassword) {
@@ -84,8 +82,6 @@ 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,19 +5,15 @@
     color: var(--font-color);
     display: block;
     padding: 1.25rem;
-
+    width: calc(100% - 2rem);
+    margin: auto;
     @include transition() {}
 
-    &.mini {
+    @include respond-to("small-up") {
-        margin: auto;
+       width: 65%;
-        width: calc(100% - 2rem);
+    }
-
+    @include respond-to("medium-up") {
-        @include respond-to("small-up") {
+       width: 35%;
-           width: 65%;
-        }
-        @include respond-to("medium-up") {
-           width: 35%;
-        }
     }
 
     h1 {

sass/colors.scss

@@ -45,7 +45,6 @@ $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};
 
@@ -89,7 +88,6 @@ $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,6 +117,7 @@
             @include respond-to("medium-up") {
                 display: flex;
                 align-items: stretch;
+                color: rgba(0,0,0,.7);
 
                 .navbar-dropdown {
                     background-color: var(--default-color);
@@ -126,6 +127,7 @@
                     box-shadow: 0 8px 8px rgba(10,10,10,.1);
                     display: none;
                     font-size: .875rem;
+                    left: 0;
                     min-width: 100%;
                     position: absolute;
                     top: 100%;
@@ -136,7 +138,7 @@
 
                     .navbar-link {
                         background-color: var(--default-hl-color);
-                        color: var(--hover-font-color);
+                        color: rgba(0,0,0,.7);
                     }
 
                     .navbar-dropdown {
@@ -165,29 +167,6 @@
         @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 {
@@ -198,7 +177,28 @@
             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 0 1.5rem;
+            margin: .5rem 0;
         }
 
         .navbar-item {
@@ -277,15 +277,11 @@
             box-shadow: 0 8px 8px rgba(10,10,10,.1);
             display: none;
             font-size: .875rem;
-            right: 0;
+            left: 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,6 +192,7 @@ Publié automatiquement via #musictopus`;
     async getAll() {
         const {
             page,
+            limit,
             exportFormat = "json",
             sort = "artists_sort",
             order = "asc",
@@ -205,8 +206,6 @@ Publié automatiquement via #musictopus`;
             discogsId,
         } = this.req.query;
 
-        const limit = this.req.user?.pagination || 16;
-
         let userId = this.req.user?._id;
 
         const where = {};
@@ -304,7 +303,6 @@ Publié automatiquement via #musictopus`;
             default:
                 return {
                     rows,
-                    limit,
                     count,
                 };
         }

src/middleware/Me.js

@@ -16,7 +16,6 @@ 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(),
@@ -46,10 +45,6 @@ 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,10 +25,6 @@ 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 mini">
+    <div class="box">
         <form method="POST">
             <h1>
                 Connexion

views/pages/connexion.ejs

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

views/pages/inscription/index.ejs

@@ -1,4 +1,4 @@
-<div class="box mini">
+<div class="box">
     <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 class="box">
+            <div>
                 <h2>Mes données personnelles</h2>
                 <div>
                     <div class="field">
@@ -68,7 +68,7 @@
                     </div>
                 </div>
             </div>
-            <div class="box">
+            <div>
                 <h2>Mon activité</h2>
                 <div>
                     <div class="field">
@@ -126,22 +126,6 @@
                     </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>
@@ -155,6 +139,5 @@
 <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 mini" id="contact">
+<section class="box" 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">