« MediaWiki:Common.js » : différence entre les versions

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 254 : / Ligne 254 : @@
 /* === fin Modèle:Règle === */
 /* MiniCard Grid - Ajustement dynamique des colonnes */
 ( function () {
      'use strict';
+    var MIN_CARD_WIDTH = 140; /* Largeur minimale acceptable par carte en px */
+    var GAP = 12;
      function adjustMiniCardGrids() {
@@ Ligne 267 : / Ligne 269 : @@
              var containerWidth = grid.offsetWidth;
-            var minCardWidth = 130; /* largeur minimale souhaitée par carte */
-            var gap = 12;
-             /* Nombre max de colonnes qui tiennent dans le conteneur */
+             /* Nombre max de colonnes qui respectent la largeur minimale */
-             var maxCols = Math.floor(
+             var maxColsByWidth = Math.floor(
-                 ( containerWidth + gap ) / ( minCardWidth + gap )
+                 ( containerWidth + GAP ) / ( MIN_CARD_WIDTH + GAP )
              );
-             maxCols = Math.max( 1, Math.min( maxCols, total ) );
+             maxColsByWidth = Math.max( 1, Math.min( maxColsByWidth, total ) );
-             /* On cherche le diviseur de total le plus proche de maxCols */
+             /* On cherche le meilleur diviseur de total <= maxColsByWidth */
              var bestCols = 1;
-             for ( var n = 1; n <= maxCols; n++ ) {
+             for ( var n = 1; n <= maxColsByWidth; n++ ) {
                  if ( total % n === 0 ) {
                      bestCols = n;
@@ Ligne 284 : / Ligne 284 : @@
              }
-             /* Si aucun diviseur exact, on prend maxCols directement */
+             /* Si aucun diviseur exact trouvé au-delà de 1, on prend maxColsByWidth */
-            /* (dernière ligne incomplète inévitable, mais on maximise l'usage) */
+             if ( bestCols === 1 && maxColsByWidth > 1 ) {
-             if ( bestCols === 1 && maxCols > 1 ) {
+                 bestCols = maxColsByWidth;
-                 bestCols = maxCols;
              }
              grid.style.gridTemplateColumns = 'repeat(' + bestCols + ', 1fr)';
+            /* Ajustement hauteur sur mobile */
+            var cardWidth = ( containerWidth - ( bestCols - 1 ) * GAP ) / bestCols;
+            if ( cardWidth < 120 ) {
+                grid.style.gridAutoRows = '48px';
+                grid.querySelectorAll( '.minicard' ).forEach( function ( c ) {
+                    c.style.height = '48px';
+                } );
+            } else if ( cardWidth < 160 ) {
+                grid.style.gridAutoRows = '52px';
+                grid.querySelectorAll( '.minicard' ).forEach( function ( c ) {
+                    c.style.height = '52px';
+                } );
+            } else {
+                grid.style.gridAutoRows = '60px';
+                grid.querySelectorAll( '.minicard' ).forEach( function ( c ) {
+                    c.style.height = '60px';
+                } );
+            }
          } );
      }
-    /* Debounce pour éviter trop d'appels au resize */
      var resizeTimer;
      function onResize() {
@@ Ligne 301 : / Ligne 318 : @@
      }
-    /* Init au chargement */
      if ( document.readyState === 'loading' ) {
          document.addEventListener( 'DOMContentLoaded', adjustMiniCardGrids );