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 | // 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']; | ||
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 | // Find remaining 3 knowledge cards by keyword match (Community, Drugs, Life Planning) | ||
var | // These have no hero images. Identify by checking they are NOT Start Learning or Featured | ||
Array.from( | var keywords = []; | ||
if (allKnowledgeCards.indexOf(c) | Array.from(document.querySelectorAll('.ax-card')).forEach(function(c) { | ||
if (allKnowledgeCards.indexOf(c) >= 0) return; | |||
if ( | var txt = c.innerText || ''; | ||
} | keywords.forEach(function(kw) { | ||
if (txt.indexOf(kw) >= 0 && allKnowledgeCards.indexOf(c) < 0) { | |||
allKnowledgeCards.push(c); | |||
} | |||
}); | |||
}); | }); | ||
// Move all | // 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); | ||
})(); | })(); | ||