MediaWiki:Common.js: Difference between revisions
No edit summary |
Add Life Planning hero CSS; move all 8 cards to ID-based grid fixer |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
// Knowledge Areas grid layout fixer | |||
(function() { | |||
function fixKnowledgeGrid() { | |||
var heroDiv = document.getElementById('ax-sexual-health-hero'); | |||
if (!heroDiv) return; | |||
var firstCard = heroDiv.closest('.ax-card'); | |||
if (!firstCard) return; | |||
var gridContainer = firstCard.parentElement; | |||
if (!gridContainer) return; | |||
gridContainer.style.display = 'grid'; | |||
gridContainer.style.gridTemplateColumns = 'repeat(2, 1fr)'; | |||
gridContainer.style.gap = '14px'; | |||
// Collect cards by hero IDs | |||
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']; | |||
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 3 knowledge cards by keyword match (Community, Drugs, Life Planning) | |||
// These have no hero images. Identify by checking they are NOT Start Learning or Featured | |||
var keywords = []; | |||
Array.from(document.querySelectorAll('.ax-card')).forEach(function(c) { | |||
if (allKnowledgeCards.indexOf(c) >= 0) return; | |||
var txt = c.innerText || ''; | |||
keywords.forEach(function(kw) { | |||
if (txt.indexOf(kw) >= 0 && allKnowledgeCards.indexOf(c) < 0) { | |||
allKnowledgeCards.push(c); | |||
} | |||
}); | |||
}); | |||
// Move all knowledge cards into grid | |||
allKnowledgeCards.forEach(function(c) { | |||
if (c.parentElement !== gridContainer) gridContainer.appendChild(c); | |||
}); | |||
} | |||
if (document.readyState === 'loading') { | |||
document.addEventListener('DOMContentLoaded', fixKnowledgeGrid); | |||
} else { | |||
fixKnowledgeGrid(); | |||
} | |||
})(); | |||
// Sexual Health hero image | // Sexual Health hero image | ||
(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; }'; | 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); | ||
})(); | })(); | ||
| Line 562: | Line 605: | ||
loadData(); | loadData(); | ||
}); | }); | ||
})(); | |||
// Category Grid Component - background images for ax-cat-grid | |||
(function() { | |||
// Map of card ID -> background image URL and fallback gradient | |||
var catImages = { | |||
'ax-cat-img-1': { url: 'https://alphax.wiki/images/4/43/Sexual_Health_Hero.jpg', pos: 'center center' }, | |||
'ax-cat-img-2': { url: 'https://alphax.wiki/images/e/e5/Kink_BDSM_Hero.png', pos: 'center center' }, | |||
'ax-cat-img-3': { gradient: 'linear-gradient(135deg, #0D1B2A 0%, #1B3A4B 40%, #0D2B3E 100%)' }, | |||
'ax-cat-img-4': { gradient: 'linear-gradient(135deg, #1A0D0D 0%, #3A1A0D 50%, #2B1A0D 100%)' }, | |||
'ax-cat-img-5': { url: 'https://alphax.wiki/images/0/0b/Dating_Sex_Relationships_Hero.png', pos: 'center 30%' }, | |||
'ax-cat-img-6': { gradient: 'linear-gradient(135deg, #1A0D1A 0%, #2E0D3A 50%, #1A0D2B 100%)' }, | |||
'ax-cat-img-7': { url: 'https://alphax.wiki/images/2/25/Culture_History_Politics_Hero.png', pos: 'center center' }, | |||
'ax-cat-img-8': { gradient: 'linear-gradient(135deg, #0D1A0D 0%, #0D2B1A 50%, #0D1A2B 100%)' } | |||
}; | |||
function applyCatImages() { | |||
Object.keys(catImages).forEach(function(id) { | |||
var el = document.getElementById(id); | |||
if (!el) return; | |||
var cfg = catImages[id]; | |||
if (cfg.url) { | |||
el.style.backgroundImage = 'url("' + cfg.url + '")'; | |||
el.style.backgroundSize = 'cover'; | |||
el.style.backgroundPosition = cfg.pos || 'center center'; | |||
} else if (cfg.gradient) { | |||
el.style.backgroundImage = cfg.gradient; | |||
} | |||
}); | |||
} | |||
if (document.readyState === 'loading') { | |||
document.addEventListener('DOMContentLoaded', applyCatImages); | |||
} else { | |||
applyCatImages(); | |||
} | |||
})(); | })(); | ||