Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.js: Difference between revisions

MediaWiki interface page
Fix button alignment (insert into citizen-header__end) and remove FA JS injection (moved to CSS) (via update-page on MediaWiki MCP Server)
Fix alignment (citizen-header__start + cdx-button classes) and replace FA icon with inline SVG to eliminate blink (via update-page on MediaWiki MCP Server)
Line 1: Line 1:
$(function () {
$(function () {
     var headerEnd = document.querySelector('.citizen-header__end');
    // citizen-header__start is the top section of citizen-header__inner,
     if (!headerEnd) {
    // which sits just below the drawer toggle in sidebar (column) mode.
     var headerStart = document.querySelector('.citizen-header__start');
     if (!headerStart) {
         return;
         return;
     }
     }
    var buttonDiv = document.createElement('div');
    buttonDiv.className = 'citizen-header__item';


     var link = document.createElement('a');
     var link = document.createElement('a');
     link.href = '/index.php/Special:CreatePage';
     link.href = '/index.php/Special:CreatePage';
     link.className = 'citizen-header__button';
    // Match the same classes used by Preferences/UserMenu buttons in the header
     link.className = 'cdx-button cdx-button--weight-quiet cdx-button--size-large cdx-button--icon-only';
     link.title = 'Create a new page';
     link.title = 'Create a new page';
    link.setAttribute('aria-label', 'Create a new page');
    // Inline SVG: no external font/CSS needed, renders immediately with the element
    link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m5 10v3H8v2h3v3h2v-3h3v-2h-3v-3h-2z"/></svg>';


     link.innerHTML = '<span class="citizen-ui-icon" style="display:flex;align-items:center;justify-content:center;font-size:20px;color:oklch(80% 0.05 262.29);"><i class="fa-solid fa-file-circle-plus"></i></span>';
     headerStart.prepend(link);
 
    buttonDiv.appendChild(link);
    headerEnd.prepend(buttonDiv);
});
});

Revision as of 11:12, 25 June 2026

$(function () {
    // citizen-header__start is the top section of citizen-header__inner,
    // which sits just below the drawer toggle in sidebar (column) mode.
    var headerStart = document.querySelector('.citizen-header__start');
    if (!headerStart) {
        return;
    }

    var link = document.createElement('a');
    link.href = '/index.php/Special:CreatePage';
    // Match the same classes used by Preferences/UserMenu buttons in the header
    link.className = 'cdx-button cdx-button--weight-quiet cdx-button--size-large cdx-button--icon-only';
    link.title = 'Create a new page';
    link.setAttribute('aria-label', 'Create a new page');
    // Inline SVG: no external font/CSS needed, renders immediately with the element
    link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m5 10v3H8v2h3v3h2v-3h3v-2h-3v-3h-2z"/></svg>';

    headerStart.prepend(link);
});