MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
# Replace the JAVASCRIPT_CODE section with this updated version: | # Replace the JAVASCRIPT_CODE section with this updated version: | ||
/* Collapsible | /* Collapsible sidebar functionality for all pages */ | ||
$(document).ready(function() { | $(document).ready(function() { | ||
function | // Function to make sidebar sections collapsible | ||
function makeSidebarCollapsible() { | |||
// Target the sidebar navigation | |||
$('#mw-panel .portal').each(function() { | $('#mw-panel .portal').each(function() { | ||
var $portal = $(this); | var $portal = $(this); | ||
var $header = $portal.find('h3'); | var $header = $portal.find('h3'); | ||
var $body = $portal.find('.body'); | var $body = $portal.find('.body'); | ||
// Skip certain sections that shouldn't be collapsible | |||
var portalId = $portal.attr('id'); | var portalId = $portal.attr('id'); | ||
if (portalId === 'p-search' || portalId === 'p-tb' || portalId === 'p-lang') { | if (portalId === 'p-search' || portalId === 'p-tb' || portalId === 'p-lang') { | ||
return; | return; | ||
} | } | ||
// Add toggle functionality only to specific sections | |||
var collapsibleSections = ['Documentation', 'Tools & Utilities', 'Community', 'Administrative', 'External Resources']; | |||
var headerText = $header.text().trim(); | |||
if (collapsibleSections.includes(headerText)) { | if (collapsibleSections.includes(headerText)) { | ||
$ | // Add toggle button to header | ||
var $toggleBtn = $('<span class="sidebar-toggle">[−]</span>'); | |||
$header.append(' ').append($toggleBtn); | |||
// Add click handler | |||
$toggleBtn.click(function(e) { | |||
// Add | |||
$toggleBtn. | |||
e.preventDefault(); | e.preventDefault(); | ||
e.stopPropagation(); | e.stopPropagation(); | ||
if ($body.is(':visible')) { | if ($body.is(':visible')) { | ||
$body.slideUp( | $body.slideUp(200); | ||
$toggleBtn.text(' | $toggleBtn.text('[+]'); | ||
$portal.addClass( | $portal.addClass('collapsed'); | ||
} else { | } else { | ||
$body.slideDown( | $body.slideDown(200); | ||
$toggleBtn.text(' | $toggleBtn.text('[−]'); | ||
$portal.removeClass(' | $portal.removeClass('collapsed'); | ||
} | } | ||
}); | }); | ||
// Start collapsed for some sections | |||
if ( | if (['Administrative', 'External Resources'].includes(headerText)) { | ||
$body.hide(); | $body.hide(); | ||
$toggleBtn.text(' | $toggleBtn.text('[+]'); | ||
$portal.addClass(' | $portal.addClass('collapsed'); | ||
} | } | ||
} | } | ||
Line 75: | Line 52: | ||
} | } | ||
// Run the function | |||
makeSidebarCollapsible(); | |||
// Also run after any AJAX content loads | |||
$(document).ajaxComplete(function() { | $(document).ajaxComplete(function() { | ||
makeSidebarCollapsible(); | |||
}); | }); | ||
}); | |||
/* CSS for sidebar toggle buttons */ | |||
mw.loader.using('mediawiki.util', function() { | |||
mw.util.addCSS(` | |||
.sidebar-toggle { | |||
cursor: pointer; | |||
font-weight: bold; | |||
color: #0645ad; | |||
margin-left: 5px; | |||
font-size: 12px; | |||
user-select: none; | |||
} | |||
.sidebar-toggle:hover { | |||
text-decoration: underline; | |||
color: #0b0080; | |||
} | |||
#mw-panel .portal.collapsed .body { | |||
display: none; | |||
} | |||
#mw-panel .portal h3 { | |||
cursor: default; | |||
} | |||
/* Style improvements for collapsible sections */ | |||
#mw-panel .portal { | |||
margin-bottom: 0.5em; | |||
} | |||
#mw-panel .portal .body ul { | |||
margin: 0; | |||
padding: 0; | |||
} | |||
#mw-panel .portal .body li { | |||
margin: 0.2em 0; | |||
} | |||
`); | |||
}); | }); |
Revision as of 17:36, 21 August 2025
# Replace the JAVASCRIPT_CODE section with this updated version: /* Collapsible sidebar functionality for all pages */ $(document).ready(function() { // Function to make sidebar sections collapsible function makeSidebarCollapsible() { // Target the sidebar navigation $('#mw-panel .portal').each(function() { var $portal = $(this); var $header = $portal.find('h3'); var $body = $portal.find('.body'); // Skip certain sections that shouldn't be collapsible var portalId = $portal.attr('id'); if (portalId === 'p-search' || portalId === 'p-tb' || portalId === 'p-lang') { return; } // Add toggle functionality only to specific sections var collapsibleSections = ['Documentation', 'Tools & Utilities', 'Community', 'Administrative', 'External Resources']; var headerText = $header.text().trim(); if (collapsibleSections.includes(headerText)) { // Add toggle button to header var $toggleBtn = $('<span class="sidebar-toggle">[−]</span>'); $header.append(' ').append($toggleBtn); // Add click handler $toggleBtn.click(function(e) { e.preventDefault(); e.stopPropagation(); if ($body.is(':visible')) { $body.slideUp(200); $toggleBtn.text('[+]'); $portal.addClass('collapsed'); } else { $body.slideDown(200); $toggleBtn.text('[−]'); $portal.removeClass('collapsed'); } }); // Start collapsed for some sections if (['Administrative', 'External Resources'].includes(headerText)) { $body.hide(); $toggleBtn.text('[+]'); $portal.addClass('collapsed'); } } }); } // Run the function makeSidebarCollapsible(); // Also run after any AJAX content loads $(document).ajaxComplete(function() { makeSidebarCollapsible(); }); }); /* CSS for sidebar toggle buttons */ mw.loader.using('mediawiki.util', function() { mw.util.addCSS(` .sidebar-toggle { cursor: pointer; font-weight: bold; color: #0645ad; margin-left: 5px; font-size: 12px; user-select: none; } .sidebar-toggle:hover { text-decoration: underline; color: #0b0080; } #mw-panel .portal.collapsed .body { display: none; } #mw-panel .portal h3 { cursor: default; } /* Style improvements for collapsible sections */ #mw-panel .portal { margin-bottom: 0.5em; } #mw-panel .portal .body ul { margin: 0; padding: 0; } #mw-panel .portal .body li { margin: 0.2em 0; } `); });