StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-23 22:13:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(core): ♻️ rename mw-checkbox-hack class to citizen-menu-checkbox

Browse source
This commit is contained in:
alistair3149 2023-01-25 20:25:40 -05:00
parent afcf37d529
commit ee4a7eda4f
No known key found for this signature in database
12 changed files with 48 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
resources/skins.citizen.scripts/checkbox.js
View file

@ -6,10 +6,10 @@
const
checkboxHack = require( 'mediawiki.page.ready' ).checkboxHack,
CHECKBOX_HACK_CONTAINER_SELECTOR = '.mw-checkbox-hack-container',
CHECKBOX_HACK_CHECKBOX_SELECTOR = '.mw-checkbox-hack-checkbox',
CHECKBOX_HACK_BUTTON_SELECTOR = '.mw-checkbox-hack-button',
CHECKBOX_HACK_TARGET_SELECTOR = '.mw-checkbox-hack-target';
CHECKBOX_HACK_CONTAINER_SELECTOR = '.citizen-menu-checkbox-container',
CHECKBOX_HACK_CHECKBOX_SELECTOR = '.citizen-menu-checkbox-checkbox',
CHECKBOX_HACK_BUTTON_SELECTOR = '.citizen-menu-checkbox-button',
CHECKBOX_HACK_TARGET_SELECTOR = '.citizen-menu-checkbox-target';
/**
* Set the checked state and fire the 'input' event.

2
resources/skins.citizen.styles/Header.less
View file

@ -84,7 +84,7 @@
justify-content: space-between;
gap: var( --space-xxs );
.mw-checkbox-hack-checkbox:checked {
.citizen-menu-checkbox-checkbox:checked {
~ .citizen-header__button {
background-color: var( --background-color-primary--active );
}

4
resources/skins.citizen.styles/Menu.less
View file

@ -34,7 +34,7 @@
/**
* Invisible checkbox covering the menu button.
*/
.mw-checkbox-hack {
.citizen-menu-checkbox {
// Has to be visible to be focusable
&-checkbox {
position: absolute;
@ -50,7 +50,7 @@
// HACK: Fake focus styles
&:focus {
& + .citizen-header__button,
& + .mw-checkbox-hack-button {
& + .citizen-menu-checkbox-button {
outline: 2px solid var( --color-primary );
outline-offset: 1px;
}

2
resources/skins.citizen.styles/Pagetools.less
View file

@ -109,7 +109,7 @@
}
// TODO: Merge this with header styles
.mw-checkbox-hack-checkbox:checked ~ .page-actions__button {
.citizen-menu-checkbox-checkbox:checked ~ .page-actions__button {
background-color: var( --background-color-primary--active );
}
}

6
templates/Drawer.mustache
View file

@ -2,17 +2,17 @@
string msg-citizen-drawer-toggle The label used by the drawer button.
string msg-sitetitle the contents of the sitesubtitle message key
}}
<div class="citizen-drawer citizen-header__item mw-checkbox-hack-container">
<div class="citizen-drawer citizen-header__item citizen-menu-checkbox-container">
<input
type="checkbox"
id="citizen-drawer__checkbox"
class="mw-checkbox-hack-checkbox"
class="citizen-menu-checkbox-checkbox"
role="button"
aria-labelledby="citizen-drawer__buttonCheckbox"
aria-haspopup="true">
{{>Drawer__button}}
{{! ID needed for a11y and checkbox hack }}
<aside id="citizen-drawer__card" class="citizen-drawer__card mw-checkbox-hack-target">
<aside id="citizen-drawer__card" class="citizen-drawer__card citizen-menu-checkbox-target">
<header class="citizen-drawer__header">
{{>Drawer__logo}}
<div class="citizen-drawer__siteinfo">

34
templates/Drawer__button.mustache
View file

@ -1,18 +1,18 @@
{{!
string msg-citizen-drawer-toggle The label used by the drawer button.
}}
<div class="citizen-drawer__button citizen-header__button">
<div class="citizen-drawer__buttonIcon citizen-header__buttonIcon">
<div></div>
<div></div>
<div></div>
</div>
<label
id="citizen-drawer__buttonCheckbox"
class="mw-checkbox-hack-button citizen-header__buttonCheckbox"
for="citizen-drawer__checkbox"
title="{{msg-citizen-drawer-toggle}}"
aria-hidden="true">
<span>{{msg-citizen-drawer-toggle}}</span>
</label>
{{!
string msg-citizen-drawer-toggle The label used by the drawer button.
}}
<div class="citizen-drawer__button citizen-header__button">
<div class="citizen-drawer__buttonIcon citizen-header__buttonIcon">
<div></div>
<div></div>
<div></div>
</div>
<label
id="citizen-drawer__buttonCheckbox"
class="citizen-menu-checkbox-button citizen-header__buttonCheckbox"
for="citizen-drawer__checkbox"
title="{{msg-citizen-drawer-toggle}}"
aria-hidden="true">
<span>{{msg-citizen-drawer-toggle}}</span>
</label>
</div>

8
templates/PageTools.mustache
View file

@ -12,24 +12,24 @@
{{#data-portlets.data-associated-pages}}{{>Menu}}{{/data-portlets.data-associated-pages}}
{{/pagetools-visible}}
{{#pagetools-overflow}}
<div class="page-actions-more page-actions__item mw-checkbox-hack-container">
<div class="page-actions-more page-actions__item citizen-menu-checkbox-container">
<input
type="checkbox"
id="page-actions-more__checkbox"
class="mw-checkbox-hack-checkbox"
class="citizen-menu-checkbox-checkbox"
role="button"
aria-labelledby="page-actions-more__buttonCheckbox"
aria-haspopup="true">
<label
id="page-actions-more__buttonCheckbox"
class="mw-checkbox-hack-button page-actions__button page-actions__button--icon"
class="citizen-menu-checkbox-button page-actions__button page-actions__button--icon"
for="page-actions-more__checkbox"
title="{{msg-citizen-actions-more-toggle}}"
aria-hidden="true">
<span class="citizen-ui-icon mw-ui-icon-wikimedia-ellipsis"></span>
<span>{{msg-citizen-actions-more-toggle}}</span>
</label>
<aside id="page-actions-more__card" class="page-actions__card mw-checkbox-hack-target">
<aside id="page-actions-more__card" class="page-actions__card citizen-menu-checkbox-target">
{{#pagetools-visible}}
{{#data-portlets.data-actions}}{{>Menu}}{{/data-portlets.data-actions}}
{{/pagetools-visible}}

8
templates/PageTools__languages.mustache
View file

@ -3,17 +3,17 @@
object data-page-variants
bool is-uls-ready
}}
<div class="citizen-languages page-actions__item mw-checkbox-hack-container">
<div class="citizen-languages page-actions__item citizen-menu-checkbox-container">
<input
type="checkbox"
id="citizen-languages__checkbox"
class="mw-checkbox-hack-checkbox {{#is-uls-ready}}mw-interlanguage-selector{{/is-uls-ready}}"
class="citizen-menu-checkbox-checkbox {{#is-uls-ready}}mw-interlanguage-selector{{/is-uls-ready}}"
role="button"
aria-labelledby="citizen-languages__buttonCheckbox"
aria-haspopup="true">
<label
id="citizen-languages__buttonCheckbox"
class="mw-checkbox-hack-button page-actions__button"
class="citizen-menu-checkbox-button page-actions__button"
for="citizen-languages__checkbox"
title="{{msg-citizen-languages-toggle}}"
aria-hidden="true"
@ -21,7 +21,7 @@
<span class="citizen-ui-icon mw-ui-icon-wikimedia-textLanguage"></span>
<span>{{msg-citizen-languages-toggle}}</span>
</label>
<aside id="citizen-languages__card" class="page-actions__card mw-checkbox-hack-target">
<aside id="citizen-languages__card" class="page-actions__card citizen-menu-checkbox-target">
{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
{{#data-portlets.data-variants}}{{>Menu}}{{/data-portlets.data-variants}}
</aside>

6
templates/Search.mustache
View file

@ -6,16 +6,16 @@
string html-random-href URL of Special:Random
string msg-randompage tooltip message for random page button
}}
<div class="citizen-search citizen-header__item mw-checkbox-hack-container">
<div class="citizen-search citizen-header__item citizen-menu-checkbox-container">
<input
type="checkbox"
id="citizen-search__checkbox"
class="mw-checkbox-hack-checkbox"
class="citizen-menu-checkbox-checkbox"
role="button"
aria-labelledby="citizen-search__buttonCheckbox"
aria-haspopup="true">
{{>Search__button}}
<div role="search" class="citizen-search-box citizen-search__card mw-checkbox-hack-target">
<div role="search" class="citizen-search-box citizen-search__card citizen-menu-checkbox-target">
<span class="citizen-search__icon citizen-ui-icon mw-ui-icon-wikimedia-search"></span>
<form action="{{form-action}}" id="searchform" autocomplete="off">
<input type="hidden" name="title" value="{{page-title}}">

2
templates/Search__button.mustache
View file

@ -10,7 +10,7 @@
</div>
<label
id="citizen-search__buttonCheckbox"
class="mw-checkbox-hack-button citizen-header__buttonCheckbox"
class="citizen-menu-checkbox-button citizen-header__buttonCheckbox"
for="citizen-search__checkbox"
title="{{msg-citizen-search-toggle}} {{msg-citizen-search-toggle-shortcut}}"
aria-hidden="true">

8
templates/TableOfContents.mustache
View file

@ -1,22 +1,22 @@
{{#data-toc}}
<div class="citizen-toc mw-checkbox-hack-container">
<div class="citizen-toc citizen-menu-checkbox-container">
<input
type="checkbox"
id="citizen-toc__checkbox"
class="mw-checkbox-hack-checkbox"
class="citizen-menu-checkbox-checkbox"
role="button"
aria-labelledby="citizen-toc__buttonCheckbox"
aria-haspopup="true">
<label
id="citizen-toc__buttonCheckbox"
class="mw-checkbox-hack-button"
class="citizen-menu-checkbox-button"
for="citizen-toc__checkbox"
title="{{msg-toc}}"
aria-hidden="true">
<span class="citizen-ui-icon mw-ui-icon-wikimedia-listBullet"></span>
<span id="mw-panel-toc-label">{{msg-toc}}</span>
</label>
<nav id="mw-panel-toc" class="citizen-toc__card mw-checkbox-hack-target" role="navigation" aria-labelledby="mw-panel-toc-label">
<nav id="mw-panel-toc" class="citizen-toc__card citizen-menu-checkbox-target" role="navigation" aria-labelledby="mw-panel-toc-label">
<a class="citizen-toc__top citizen-toc__link" title="{{html-citizen-jumptotop}}" href="#top">
<div class="citizen-toc__text">{{msg-citizen-jumptotop}}</div>
</a>

8
templates/UserMenu.mustache
View file

@ -1,24 +1,24 @@
{{!
string msg-citizen-usermenu-toggle The label used by the user menu button.
}}
<div class="citizen-userMenu citizen-header__item mw-checkbox-hack-container">
<div class="citizen-userMenu citizen-header__item citizen-menu-checkbox-container">
<input
type="checkbox"
id="citizen-userMenu__checkbox"
class="mw-checkbox-hack-checkbox"
class="citizen-menu-checkbox-checkbox"
role="button"
aria-labelledby="citizen-userMenu__buttonCheckbox"
aria-haspopup="true">
<label
id="citizen-userMenu__buttonCheckbox"
class="mw-checkbox-hack-button citizen-header__button"
class="citizen-menu-checkbox-button citizen-header__button"
for="citizen-userMenu__checkbox"
title="{{msg-citizen-usermenu-toggle}}"
aria-hidden="true">
<span class="citizen-ui-icon mw-ui-icon-wikimedia-userAvatar"></span>
<span>{{msg-citizen-usermenu-toggle}}</span>
</label>
<aside id="citizen-userMenu__card" class="citizen-userMenu__card mw-checkbox-hack-target">
<aside id="citizen-userMenu__card" class="citizen-userMenu__card citizen-menu-checkbox-target">
{{#data-user-info}}
<div class="citizen-userMenu__header">{{>Menu}}</div>
{{/data-user-info}}