mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-09-23 10:19:43 +00:00
feat(core): use checkboxHack for page actions more menu
* use checkboxHack for the menu * streamline language and more action menu styles and classes
This commit is contained in:
alistair3149
parent
8b64adfc22
commit
c6e9bc44a9
|
|
@ -15,7 +15,8 @@
|
|||
"citizen-personalmenu-toggle": "Toggle personal menu",
|
||||
"citizen-search-toggle": "Toggle search",
|
||||
"citizen-theme-toggle": "Toggle theme color",
|
||||
"citizen-languages-toggle": "Toggle languages menu",
|
||||
"citizen-languages-toggle": "More languages",
|
||||
"citizen-actions-more-toggle": "More actions",
|
||||
|
||||
"citizen-sitestats-articles-label": "articles",
|
||||
"citizen-sitestats-images-label": "files",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
"citizen-search-toggle": "Tooltip of search box toggle",
|
||||
"citizen-theme-toggle": "Tooltip of theme color toggle",
|
||||
"citizen-languages-toggle": "Tooltip of languages menu toggle",
|
||||
"citizen-actions-more-toggle": "Tooltip of more page actions menu toggle",
|
||||
"citizen-sitestats-articles-label": "Label for the article statistics",
|
||||
"citizen-sitestats-images-label": "Label for the file statistics",
|
||||
"citizen-sitestats-users-label": "Label for the user statistics",
|
||||
|
|
|
|||
|
|
@ -115,8 +115,11 @@
|
|||
|
||||
.menu-item-link() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var( --color-base ) !important;
|
||||
font-weight: 450;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.menu-item-link-hover() {
|
||||
|
|
|
|||
|
|
@ -48,11 +48,8 @@
|
|||
|
||||
a {
|
||||
.menu-item-link;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.625rem 1.25rem; // TODO: Make this a variable
|
||||
border-radius: var( --border-radius--small );
|
||||
gap: 1rem; // TODO: Replace with space token
|
||||
|
||||
&:after {
|
||||
.resource-loader-list-icon;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
display: grid;
|
||||
width: var( --size-button--page );
|
||||
height: var( --size-button--page );
|
||||
border-radius: var( --border-radius--small );
|
||||
border-radius: var( --border-radius--medium );
|
||||
place-items: center;
|
||||
|
||||
&--icon:after {
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
&:hover {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
|
||||
.page-actions__button--icon:after {
|
||||
&:after {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
}
|
||||
|
|
@ -41,89 +41,39 @@
|
|||
&:active {
|
||||
background-color: var( --background-color-quiet--active );
|
||||
|
||||
.page-actions__button--icon:after {
|
||||
&:after {
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-more {
|
||||
display: block;
|
||||
width: var( --size-icon );
|
||||
height: var( --size-icon );
|
||||
box-sizing: content-box;
|
||||
padding: 0.5rem;
|
||||
border-radius: var( --border-radius--medium );
|
||||
cursor: pointer;
|
||||
transition: @transition-opacity;
|
||||
&__card {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
min-width: 200px;
|
||||
max-height: 60vh;
|
||||
padding: 0.5rem 0;
|
||||
margin-top: ~'calc( var( --size-button--page ) + 0.5rem )';
|
||||
font-size: 0.875rem;
|
||||
.citizen-card;
|
||||
.citizen-card-hide( 100% 0 );
|
||||
|
||||
&-menu {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
right: var( --padding-page );
|
||||
left: var( --padding-page );
|
||||
overflow: auto;
|
||||
max-height: 60vh;
|
||||
padding-top: 0.3125rem;
|
||||
margin-top: 0.3125rem;
|
||||
cursor: auto; // reset cursor pointer set by parent
|
||||
.citizen-card;
|
||||
.citizen-card-hide( 100% 0 );
|
||||
a {
|
||||
padding: 0.625rem 1.25rem;
|
||||
.menu-item-link;
|
||||
|
||||
a {
|
||||
.menu-item-link;
|
||||
justify-content: space-between;
|
||||
padding: 0.625rem 1.25rem;
|
||||
|
||||
&:after {
|
||||
.resource-loader-list-icon;
|
||||
margin-left: @icon-padding;
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.menu-item-link-hover;
|
||||
|
||||
&:after {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.menu-item-link-active;
|
||||
|
||||
&:after {
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.menu-item-link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: var( --size-icon );
|
||||
height: var( --size-icon );
|
||||
background-size: var( --size-icon );
|
||||
content: '';
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.page-actions-more-menu {
|
||||
z-index: 5;
|
||||
.citizen-card-show;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var( --background-color-quiet--active ) !important;
|
||||
|
||||
&:before {
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
&:active {
|
||||
.menu-item-link-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Visible page tools styles
|
||||
> .mw-portal,
|
||||
> .mw-portlet {
|
||||
ul {
|
||||
|
|
@ -191,6 +141,33 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Handle icons
|
||||
.page-actions-more {
|
||||
a {
|
||||
&:after {
|
||||
.resource-loader-list-icon;
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:after {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
&:after {
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-actions-more,
|
||||
.citizen-languages {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#p-views {
|
||||
// VE styles shouldn't be core but it is just a few lines :/
|
||||
#ca-ve-edit {
|
||||
|
|
@ -246,8 +223,7 @@
|
|||
|
||||
.skin-citizen-dark {
|
||||
.page-actions {
|
||||
&__button--icon:after,
|
||||
&-more:before {
|
||||
&__button--icon:after {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
|
||||
|
|
@ -257,8 +233,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Checkbox hack
|
||||
#page-actions-more,
|
||||
#citizen-languages {
|
||||
&__checkbox:checked {
|
||||
~ .page-actions__card {
|
||||
.citizen-card-show();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.citizen-animations-ready {
|
||||
.page-actions-more-menu {
|
||||
.page-actions__card {
|
||||
.citizen-card-transition();
|
||||
}
|
||||
}
|
||||
|
|
@ -268,12 +254,6 @@
|
|||
position: relative;
|
||||
margin-right: 0;
|
||||
|
||||
&-more-menu {
|
||||
right: 0;
|
||||
left: unset;
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
> .mw-portal,
|
||||
> .mw-portlet {
|
||||
li > a {
|
||||
|
|
@ -287,12 +267,31 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media ( hover: hover ) {
|
||||
.page-actions-more:hover {
|
||||
background: var( --background-color-quiet--hover );
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
.page-actions {
|
||||
&__item {
|
||||
position: unset;
|
||||
}
|
||||
|
||||
&:before {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
&__card {
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reset hover styles if it is a touch device
|
||||
// This is dumb but hover:hover overrides active states
|
||||
@media ( hover: none ) {
|
||||
.page-actions {
|
||||
&__button {
|
||||
&:hover {
|
||||
background-color: none;
|
||||
|
||||
&:after {
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
.citizen-languages {
|
||||
position: relative; // anchor card
|
||||
|
||||
// TODO: Merge with more menu
|
||||
&__card {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
min-width: 200px;
|
||||
max-height: 60vh;
|
||||
padding: 0.5rem 0;
|
||||
margin-top: ~'calc( var( --size-button--page ) + 0.5rem )';
|
||||
font-size: 0.875rem;
|
||||
.citizen-card;
|
||||
.citizen-card-hide( 100% 0 );
|
||||
|
||||
a {
|
||||
padding: 0.625rem 1.25rem;
|
||||
.menu-item-link;
|
||||
|
||||
&:hover {
|
||||
.menu-item-link-hover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
.menu-item-link-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox hack
|
||||
#citizen-languages__checkbox:checked {
|
||||
~ .citizen-languages__card {
|
||||
.citizen-card-show();
|
||||
}
|
||||
}
|
||||
|
||||
.citizen-animations-ready {
|
||||
.citizen-languages__card {
|
||||
.citizen-card-transition();
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
.citizen-languages {
|
||||
position: unset;
|
||||
|
||||
&__card {
|
||||
right: var( --padding-page );
|
||||
left: var( --padding-page );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -15,6 +15,8 @@
|
|||
}
|
||||
|
||||
.mw-body-header {
|
||||
position: relative;
|
||||
z-index: 2; // So the popups inside will be higher than content
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@
|
|||
@import 'Search.less';
|
||||
@import 'Search__button.less';
|
||||
@import 'Pagetools.less';
|
||||
@import 'Pagetools__languages.less';
|
||||
@import 'Menu.less';
|
||||
@import 'Catlinks.less';
|
||||
@import 'Footer.less';
|
||||
|
|
|
|||
|
|
@ -38,11 +38,13 @@
|
|||
"skins.citizen.icons.sitestats"
|
||||
],
|
||||
"messages": [
|
||||
"citizen-actions-more-toggle",
|
||||
"citizen-drawer-toggle",
|
||||
"citizen-jumptotop",
|
||||
"citizen-languages-toggle",
|
||||
"citizen-personalmenu-toggle",
|
||||
"citizen-search-toggle",
|
||||
"citizen-theme-toggle",
|
||||
"citizen-jumptotop"
|
||||
"citizen-theme-toggle"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -278,7 +280,7 @@
|
|||
".citizen-search__icon:after": "resources/skins.citizen.icons/shared/search.svg",
|
||||
".citizen-search__random:after": "resources/skins.citizen.icons/shared/random.svg",
|
||||
"#citizen-languages__buttonCheckbox:after": "resources/skins.citizen.icons/shared/language.svg",
|
||||
".page-actions-more:before": "resources/skins.citizen.icons/more.svg"
|
||||
"#page-actions-more__buttonCheckbox:after": "resources/skins.citizen.icons/more.svg"
|
||||
}
|
||||
},
|
||||
"skins.citizen.icons.ca": {
|
||||
|
|
|
|||
|
|
@ -10,11 +10,26 @@
|
|||
{{#data-page-views}}{{>Menu}}{{/data-page-views}}
|
||||
{{#data-namespaces}}{{>Menu}}{{/data-namespaces}}
|
||||
{{#has-languages}}{{>PageTools__languages}}{{/has-languages}}
|
||||
<div class="page-actions-more">
|
||||
<nav class="page-actions-more-menu">
|
||||
<div class="page-actions-more page-actions__item mw-checkbox-hack-container">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="page-actions-more__checkbox"
|
||||
class="mw-checkbox-hack-checkbox"
|
||||
role="button"
|
||||
aria-labelledby="page-actions-more__buttonCheckbox"
|
||||
aria-haspopup="true">
|
||||
<aside id="page-actions-more__card" class="page-actions__card mw-checkbox-hack-target">
|
||||
{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
|
||||
{{#data-page-toolbox}}{{>Menu}}{{/data-page-toolbox}}
|
||||
</nav>
|
||||
</aside>
|
||||
<label
|
||||
id="page-actions-more__buttonCheckbox"
|
||||
class="mw-checkbox-hack-button page-actions__button page-actions__button--icon"
|
||||
for="page-actions-more__checkbox"
|
||||
title="{{msg-citizen-actions-more-toggle}}"
|
||||
aria-hidden="true">
|
||||
<span>{{msg-citizen-actions-more-toggle}}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{{/data-pagetools}}
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
role="button"
|
||||
aria-labelledby="citizen-languages__buttonCheckbox"
|
||||
aria-haspopup="true">
|
||||
<aside id="citizen-languages__card" class="citizen-languages__card mw-checkbox-hack-target">
|
||||
<aside id="citizen-languages__card" class="page-actions__card mw-checkbox-hack-target">
|
||||
{{#data-languages}}{{>Menu}}{{/data-languages}}
|
||||
{{#data-variants}}{{>Menu}}{{/data-variants}}
|
||||
</aside>
|
||||
|
|
|
|||
Loading…
Reference in a new issue