StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-27 15:50:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: move discussion to the top of the more menu

Browse source 
Also clean up some related-styles
This commit is contained in:
alistair3149 2022-04-24 01:52:41 -04:00
parent 2cd9efa4d9
commit f05295195a
3 changed files with 70 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
includes/Partials/PageTools.php
View file

@ -94,6 +94,11 @@ final class PageTools extends Partial {
$actionshtml[ 'label-class' ] .= 'screen-reader-text';
}
if ( $namespaceshtml ) {
$namespaceshtml[ 'label-class' ] ??= '';
$namespaceshtml[ 'label-class' ] .= 'screen-reader-text';
}
$props = [
'data-page-views' => $viewshtml,
'data-page-actions' => $actionshtml,

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

@ -84,6 +84,57 @@
}
}
> .mw-portlet {
ul {
display: flex;
}
li > a {
display: flex;
align-items: center;
padding: 8px 12px;
margin-right: 4px;
border-radius: var( --border-radius--medium );
color: var( --color-base );
font-size: 0;
transition: @transition-background-quick, @transition-color-quick;
&:after {
width: var( --size-icon );
height: var( --size-icon );
order: -1; // Move icon before the text
background-position: center;
background-repeat: no-repeat;
background-size: var( --size-icon );
content: '';
opacity: var( --opacity-icon-base );
transition: @transition-opacity-quick;
}
&:hover {
background-color: var( --background-color-quiet--hover );
color: var( --color-base--emphasized );
&:after {
opacity: var( --opacity-icon-base--hover );
}
}
&:active {
background-color: var( --background-color-quiet--active );
color: var( --color-base--subtle );
&:after {
opacity: var( --opacity-icon-base--active );
}
}
span {
.mixin-screen-reader-text;
}
}
}
ul {
margin: 0;
list-style: none;
@ -95,55 +146,6 @@
}
#p-views {
ul {
display: flex;
}
li > a {
display: flex;
align-items: center;
padding: 8px 12px;
margin-right: 4px;
border-radius: var( --border-radius--medium );
color: var( --color-base );
font-size: 0;
transition: @transition-background-quick, @transition-color-quick;
&:after {
width: var( --size-icon );
height: var( --size-icon );
order: -1; // Move icon before the text
background-position: center;
background-repeat: no-repeat;
background-size: var( --size-icon );
content: '';
opacity: var( --opacity-icon-base );
transition: @transition-opacity-quick;
}
&:hover {
background-color: var( --background-color-quiet--hover );
color: var( --color-base--emphasized );
&:after {
opacity: var( --opacity-icon-base--hover );
}
}
&:active {
background-color: var( --background-color-quiet--active );
color: var( --color-base--subtle );
&:after {
opacity: var( --opacity-icon-base--active );
}
}
span {
.mixin-screen-reader-text;
}
}
// VE styles shouldn't be core but it is just a few lines :/
#ca-ve-edit {
order: 98; // Before source edit
@ -197,19 +199,21 @@
}
@media ( min-width: @width-breakpoint-tablet ) {
.page-actions-more-menu {
position: relative;
right: unset;
left: -172px;
width: 200px;
}
.page-actions {
&-more-menu {
position: relative;
right: unset;
left: -172px;
width: 200px;
}
#p-views {
li > a {
font-size: @ui-menu-text;
> .mw-portlet {
li > a {
font-size: @ui-menu-text;
&:after {
margin-right: 8px;
&:after {
margin-right: 8px;
}
}
}
}

2
templates/PageTools.mustache
View file

@ -8,8 +8,8 @@
{{#data-page-views}}{{>Menu}}{{/data-page-views}}
<div class="page-actions-more">
<nav class="page-actions-more-menu">
{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
{{#data-namespaces}}{{>Menu}}{{/data-namespaces}}
{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
{{#data-variants}}{{>Menu}}{{/data-variants}}
{{#data-page-toolbox}}{{>Menu}}{{/data-page-toolbox}}
</nav>