MediaWiki:Common.js: Difference between revisions

No edit summary
Add Life Planning hero CSS; move all 8 cards to ID-based grid fixer
 
(2 intermediate revisions by the same user not shown)
Line 11: Line 11:
     gridContainer.style.gridTemplateColumns = 'repeat(2, 1fr)';
     gridContainer.style.gridTemplateColumns = 'repeat(2, 1fr)';
     gridContainer.style.gap = '14px';
     gridContainer.style.gap = '14px';
     // Collect the 8 category hero cards by their hero div IDs
     // Collect cards by hero IDs
     var heroIds = ['ax-sexual-health-hero','ax-dating-hero','ax-kink-hero','ax-culture-hero','ax-fashion-hero'];
     var heroIds = ['ax-sexual-health-hero','ax-dating-hero','ax-kink-hero','ax-culture-hero','ax-fashion-hero','ax-community-hero','ax-drugs-hero','ax-life-hero'];
    // Also collect the non-hero category cards (Community, Drugs, Life Planning)
    // They follow the hero cards in the DOM
     var allKnowledgeCards = [];
     var allKnowledgeCards = [];
     heroIds.forEach(function(id) {
     heroIds.forEach(function(id) {
Line 20: Line 18:
       if (h) { var c = h.closest('.ax-card'); if (c) allKnowledgeCards.push(c); }
       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
     // Find remaining 3 knowledge cards by keyword match (Community, Drugs, Life Planning)
     var parent = gridContainer.parentElement;
    // These have no hero images. Identify by checking they are NOT Start Learning or Featured
     Array.from(parent.querySelectorAll('.ax-card')).forEach(function(c) {
     var keywords = [];
       if (allKnowledgeCards.indexOf(c) < 0) {
     Array.from(document.querySelectorAll('.ax-card')).forEach(function(c) {
        var heroInside = c.querySelector('[id*="-hero"]');
       if (allKnowledgeCards.indexOf(c) >= 0) return;
         if (!heroInside) allKnowledgeCards.push(c);
      var txt = c.innerText || '';
       }
      keywords.forEach(function(kw) {
         if (txt.indexOf(kw) >= 0 && allKnowledgeCards.indexOf(c) < 0) {
          allKnowledgeCards.push(c);
        }
       });
     });
     });
     // Move all 8 cards into the grid container
     // Move all knowledge cards into grid
     allKnowledgeCards.forEach(function(c) {
     allKnowledgeCards.forEach(function(c) {
       if (c.parentElement !== gridContainer) gridContainer.appendChild(c);
       if (c.parentElement !== gridContainer) gridContainer.appendChild(c);
Line 43: Line 45:
(function() {
(function() {
   var style = document.createElement('style');
   var style = document.createElement('style');
   style.textContent = '#ax-sexual-health-hero { background-image: url("https://alphax.wiki/images/4/43/Sexual_Health_Hero.jpg"); background-size: cover; background-position: center center; } #ax-dating-hero { background-image: url("https://alphax.wiki/images/0/0b/Dating_Sex_Relationships_Hero.png"); background-size: cover; background-position: center center; } #ax-kink-hero { background-image: url("https://alphax.wiki/images/e/e5/Kink_BDSM_Hero.png"); background-size: cover; background-position: center center; } #ax-culture-hero { background-image: url("https://alphax.wiki/images/2/25/Culture_History_Politics_Hero.png"); background-size: cover; background-position: center center; } #ax-fashion-hero { background-image: url("https://alphax.wiki/images/4/4b/Fashion_Visual_Signaling_Hero.png"); background-size: cover; background-position: center top; }';
   style.textContent = '#ax-sexual-health-hero { background-image: url("https://alphax.wiki/images/4/43/Sexual_Health_Hero.jpg"); background-size: cover; background-position: center center; } #ax-dating-hero { background-image: url("https://alphax.wiki/images/0/0b/Dating_Sex_Relationships_Hero.png"); background-size: cover; background-position: center center; } #ax-kink-hero { background-image: url("https://alphax.wiki/images/e/e5/Kink_BDSM_Hero.png"); background-size: cover; background-position: center center; } #ax-culture-hero { background-image: url("https://alphax.wiki/images/2/25/Culture_History_Politics_Hero.png"); background-size: cover; background-position: center center; } #ax-fashion-hero { background-image: url("https://alphax.wiki/images/4/4b/Fashion_Visual_Signaling_Hero.png"); background-size: cover; background-position: center top; } #ax-community-hero { background-image: url("https://alphax.wiki/images/e/ed/Community_Identity_Hero.png"); background-size: cover; background-position: center center; } #ax-drugs-hero { background-image: url("https://alphax.wiki/images/c/c7/Drugs_Party_Culture_Hero.jpg"); background-size: cover; background-position: center center; } #ax-life-hero { background-image: url("https://alphax.wiki/images/7/74/Life_Planning_Hero.jpg"); background-size: cover; background-position: center top; }';
   document.head.appendChild(style);
   document.head.appendChild(style);
})();
})();