MediaWiki:Common.js: Difference between revisions

Line 2:

(function() {

function fixKnowledgeGrid() {

~~// Find all divs containing ax-card children with hero divs~~

~~// The grid container is the parent of the first ax-card that has a hero image div~~

var heroDiv = document.getElementById('ax-sexual-health-hero');

if (!heroDiv) return;

Line 10:

Line 8:

var gridContainer = firstCard.parentElement;

if (!gridContainer) return;

~~// Apply 2-column grid layout~~

gridContainer.style.display = 'grid';

gridContainer.style.gridTemplateColumns = 'repeat(2, 1fr)';

gridContainer.style.gap = '14px';

// Collect the 8 category hero cards by their hero div IDs

var heroIds = ['ax-sexual-health-hero','ax-dating-hero','ax-kink-hero','ax-culture-hero','ax-fashion-hero'];

// Also collect the non-hero category cards (Community, Drugs, Life Planning)

// They follow the hero cards in the DOM

var allKnowledgeCards = [];

heroIds.forEach(function(id) {

var h = document.getElementById(id);

if (h) { var c = h.closest('.ax-card'); if (c) allKnowledgeCards.push(c); }

});

// Find remaining category cards (no hero) - they are siblings after the grid

var parent = gridContainer.parentElement;

Array.from(parent.querySelectorAll('.ax-card')).forEach(function(c) {

if (allKnowledgeCards.indexOf(c) < 0) {

var heroInside = c.querySelector('[id*="-hero"]');

if (!heroInside) allKnowledgeCards.push(c);

}

});

// Move all 8 cards into the grid container

allKnowledgeCards.forEach(function(c) {

if (c.parentElement !== gridContainer) gridContainer.appendChild(c);

});

}

if (document.readyState === 'loading') {

@@ Line 2: / Line 2: @@
 (function() {
    function fixKnowledgeGrid() {
-    // Find all divs containing ax-card children with hero divs
-    // The grid container is the parent of the first ax-card that has a hero image div
      var heroDiv = document.getElementById('ax-sexual-health-hero');
      if (!heroDiv) return;
@@ Line 10: / Line 8: @@
      var gridContainer = firstCard.parentElement;
      if (!gridContainer) return;
-    // Apply 2-column grid layout
      gridContainer.style.display = 'grid';
      gridContainer.style.gridTemplateColumns = 'repeat(2, 1fr)';
      gridContainer.style.gap = '14px';
+    // Collect the 8 category hero cards by their hero div IDs
+    var heroIds = ['ax-sexual-health-hero','ax-dating-hero','ax-kink-hero','ax-culture-hero','ax-fashion-hero'];
+    // Also collect the non-hero category cards (Community, Drugs, Life Planning)
+    // They follow the hero cards in the DOM
+    var allKnowledgeCards = [];
+    heroIds.forEach(function(id) {
+      var h = document.getElementById(id);
+      if (h) { var c = h.closest('.ax-card'); if (c) allKnowledgeCards.push(c); }
+    });
+    // Find remaining category cards (no hero) - they are siblings after the grid
+    var parent = gridContainer.parentElement;
+    Array.from(parent.querySelectorAll('.ax-card')).forEach(function(c) {
+      if (allKnowledgeCards.indexOf(c) < 0) {
+        var heroInside = c.querySelector('[id*="-hero"]');
+        if (!heroInside) allKnowledgeCards.push(c);
+      }
+    });
+    // Move all 8 cards into the grid container
+    allKnowledgeCards.forEach(function(c) {
+      if (c.parentElement !== gridContainer) gridContainer.appendChild(c);
+    });
    }
    if (document.readyState === 'loading') {