MediaWiki:Citizen.js - Revision history

Simon at 12:35, 20 July 2026

2026-07-20T12:35:32Z

← Older revision		Revision as of 14:35, 20 July 2026
Line 6:		Line 6:

	var link = document.createElement('a');		var link = document.createElement('a');
	link.href = '/index.php/Special:~~CreatePage~~';		link.href = '/index.php/Special:PageCreationWizard';
	link.className = 'citizen-header__create-page';		link.className = 'citizen-header__create-page';
	link.setAttribute('role', 'button');		link.setAttribute('role', 'button');

Simon: Add role=button to exclude link from visited-hover color rule (via update-page on MediaWiki MCP Server)

2026-06-26T21:20:57Z

Add role=button to exclude link from visited-hover color rule (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 23:20, 26 June 2026
Line 8:		Line 8:
	link.href = '/index.php/Special:CreatePage';		link.href = '/index.php/Special:CreatePage';
	link.className = 'citizen-header__create-page';		link.className = 'citizen-header__create-page';
			link.setAttribute('role', 'button');
	link.title = 'Create a new page';		link.title = 'Create a new page';
	link.setAttribute('aria-label', 'Create a new page');		link.setAttribute('aria-label', 'Create a new page');

Simon: Drop cdx-button classes in favour of custom class styled in Citizen.css (via update-page on MediaWiki MCP Server)

2026-06-25T09:16:24Z

Drop cdx-button classes in favour of custom class styled in Citizen.css (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 11:16, 25 June 2026
Line 1:		Line 1:
	$(function () {		$(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');		var headerStart = document.querySelector('.citizen-header__start');
	if (!headerStart) {		if (!headerStart) {
Line 9:		Line 7:
	var link = document.createElement('a');		var link = document.createElement('a');
	link.href = '/index.php/Special:CreatePage';		link.href = '/index.php/Special:CreatePage';
	~~// Match the same classes used by Preferences/UserMenu buttons in the header~~		link.className = 'citizen-header__create-page';
	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');		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 = '<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);		headerStart.prepend(link);
	});		});

Simon: 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)

2026-06-25T09:12:21Z

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)

← Older revision		Revision as of 11:12, 25 June 2026
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~~);
	});		});

Simon: Fix button alignment (insert into citizen-header__end) and remove FA JS injection (moved to CSS) (via update-page on MediaWiki MCP Server)

2026-06-25T08:55:50Z

Fix button alignment (insert into citizen-header__end) and remove FA JS injection (moved to CSS) (via update-page on MediaWiki MCP Server)

@@ Line 1: / Line 1: @@
-$(function() {
+$(function () {
-    // Load FontAwesome
+     var headerEnd = document.querySelector('.citizen-header__end');
-    var fa = document.createElement('link');
+     if (!headerEnd) {
-    fa.rel = 'stylesheet';
+         return;
+     }
 });

Admin at 17:09, 5 February 2026

2026-02-05T17:09:13Z

← Older revision		Revision as of 19:09, 5 February 2026
Line 18:		Line 18:
	link.title = 'Create a new page';		link.title = 'Create a new page';

	link.innerHTML = '<span class="citizen-ui-icon" style="display:flex;align-items:center;justify-content:center;font-size:20px;color:~~white~~;"><i class="fa-solid fa-file-circle-plus"></i></span>';		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>';

	buttonDiv.appendChild(link);		buttonDiv.appendChild(link);

Admin at 17:07, 5 February 2026

2026-02-05T17:07:15Z

← Older revision		Revision as of 19:07, 5 February 2026
Line 18:		Line 18:
	link.title = 'Create a new page';		link.title = 'Create a new page';

	link.innerHTML = '<span class="citizen-ui-icon" style="display:flex;align-items:center;justify-content:center;font-size:20px;"><i class="fa-solid fa-file-circle-plus"></i></span>';		link.innerHTML = '<span class="citizen-ui-icon" style="display:flex;align-items:center;justify-content:center;font-size:20px;color:white;"><i class="fa-solid fa-file-circle-plus"></i></span>';

	buttonDiv.appendChild(link);		buttonDiv.appendChild(link);
	drawer.after(buttonDiv); ~~// Insert after the drawer~~		drawer.after(buttonDiv);
	}		}
	});		});

Admin at 17:05, 5 February 2026

2026-02-05T17:05:46Z

← Older revision		Revision as of 19:05, 5 February 2026
Line 21:		Line 21:

	buttonDiv.appendChild(link);		buttonDiv.appendChild(link);
	~~header~~.~~insertBefore~~(buttonDiv~~, drawer~~);		drawer.after(buttonDiv); // Insert after the drawer
	}		}
	});		});

Admin at 16:58, 5 February 2026

2026-02-05T16:58:08Z

← Older revision		Revision as of 18:58, 5 February 2026
Line 1:		Line 1:
	$(function() {		$(function() {
			// Load FontAwesome
			var fa = document.createElement('link');
			fa.rel = 'stylesheet';
			fa.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css';
			document.head.appendChild(fa);

	var header = document.querySelector('.citizen-header');		var header = document.querySelector('.citizen-header');
	var drawer = header.querySelector('.citizen-drawer');		var drawer = header.querySelector('.citizen-drawer');
Line 8:		Line 14:

	var link = document.createElement('a');		var link = document.createElement('a');
	link.href = '/index.php/~~Your_Page~~';		link.href = '/index.php/Special:CreatePage';
	link.className = 'citizen-header__button';		link.className = 'citizen-header__button';
	link.title = '~~My Custom Button~~';		link.title = 'Create a new page';

	~~// Match Citizen's icon pattern: mw-ui-icon-NAME + mw-ui-icon-wikimedia-NAME~~		link.innerHTML = '<span class="citizen-ui-icon" style="display:flex;align-items:center;justify-content:center;font-size:20px;"><i class="fa-solid fa-file-circle-plus"></i></span>';
	link.innerHTML = '<span class="citizen-ui-icon" style="display:flex;align-items:center;justify-content:center;"><~~svg width="20" height="20" viewBox="0 0 20 20" fill~~="~~currentColor"><path d="M15.5 3H11l-1~~-~~1H4.5A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5~~-~~1.5V4.5A1.5 1.5 0 0015.5 3zM14 11h~~-~~3v3H9v~~-~~3H6V9h3V6h2v3h3v2z~~"/></~~svg~~></span>';


	buttonDiv.appendChild(link);		buttonDiv.appendChild(link);

Admin at 16:55, 5 February 2026

2026-02-05T16:55:25Z

← Older revision		Revision as of 18:55, 5 February 2026
Line 13:		Line 13:

	// Match Citizen's icon pattern: mw-ui-icon-NAME + mw-ui-icon-wikimedia-NAME		// Match Citizen's icon pattern: mw-ui-icon-NAME + mw-ui-icon-wikimedia-NAME
	link.innerHTML = '<span class="citizen-ui-icon mw-ui-~~icon~~-~~add mw~~-ui-~~icon~~-~~wikimedia~~-~~add~~"></span>';		link.innerHTML = '<span class="citizen-ui-icon" style="display:flex;align-items:center;justify-content:center;"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"><path d="M15.5 3H11l-1-1H4.5A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V4.5A1.5 1.5 0 0015.5 3zM14 11h-3v3H9v-3H6V9h3V6h2v3h3v2z"/></svg></span>';


	buttonDiv.appendChild(link);		buttonDiv.appendChild(link);