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

feat: integrate page tools into page header

Browse source
This commit is contained in:
alistair3149 2021-01-26 14:25:46 -05:00
parent 7ef9007388
commit 6081341418
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
5 changed files with 114 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
includes/templates/skin.mustache
View file

@ -27,14 +27,18 @@
<div id="siteNotice" class="mw-body-content">{{{html-site-notice}}}</div>
{{>Indicators}}
{{{html-newtalk}}}
{{#data-pagetools}}
<div class="mw-side" id="page-tools">
<header class="mw-body-header">
<div class="page-heading">
<h1 id="firstHeading" class="firstHeading" lang="{{page-langcode}}">{{{html-title}}}</h1>
<div id="siteSub">{{msg-tagline}}</div>
</div>
{{#data-pagetools}}
<div class="page-actions">
{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
{{#data-page-actions-more}}{{>Menu}}{{/data-page-actions-more}}
</div>
{{/data-pagetools}}
<h1 id="firstHeading" class="firstHeading" lang="{{page-langcode}}">{{{html-title}}}</h1>
<div id="siteSub">{{msg-tagline}}</div>
{{/data-pagetools}}
</header>
<div id="bodyContent" class="mw-body-content">
<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>
{{#html-undelete-link}}<div id="contentSub2">{{{html-undelete-link}}}</div>{{/html-undelete-link}}

3
resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less
View file

@ -198,8 +198,7 @@
@media ( min-width: @width-breakpoint-desktop-wide ) and ( max-width: @width-breakpoint-desktop-wider ) {
.skin-citizen-has-toc {
.firstHeading,
#siteSub,
.mw-body-header,
.mw-body-content {
margin-right: 0;
margin-left: @width-toc - @padding-page;

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

@ -1,7 +1,8 @@
#page-tools {
.page-actions {
display: flex;
margin-left: 10px;
float: right;
margin-left: -12px; // To align with page padding
font-size: @ui-menu-text;
font-weight: 450;
ul {
display: flex;
@ -16,41 +17,87 @@
#p-views {
li > a {
.resource-loader-icon-link;
padding: 5px;
display: flex;
align-items: center;
padding: 8px 12px;
margin-right: 4px;
border-radius: @border-radius-medium;
color: var( --color-base--subtle );
font-size: 0;
opacity: var( --opacity-icon-base );
transition: @transition-opacity-quick;
transition: @transition-background-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 {
opacity: var( --opacity-icon-base--hover );
background-color: var( --background-color-quiet--hover );
&:after {
opacity: var( --opacity-icon-base--hover );
}
}
&:active {
opacity: var( --opacity-icon-base--active );
}
background-color: var( --background-color-quiet--active );
&:after {
.resource-loader-icon;
&:after {
opacity: var( --opacity-icon-base--active );
}
}
span {
.mixin-screen-reader-text;
}
}
#ca-edit {
order: 99; // Put it to the last
> a {
background-color: var( --color-primary );
color: #fff;
&:after {
filter: invert( 1 );
// white icon
opacity: 1;
}
&:hover {
background-color: var( --color-primary--hover );
}
&:active {
background-color: var( --color-primary--active );
}
}
}
}
#p-actions {
.resource-loader-icon-link;
padding: 5px;
display: block;
width: var( --size-icon );
height: var( --size-icon );
padding: 8px;
cursor: pointer;
// transition: @transition-opacity-quick; - Hidden behind the menu anyways
// TODO: Need to make value more flexible
ul {
position: absolute;
z-index: -1;
right: @padding-page / 2;
right: 0;
left: 0;
border: 1px solid var( --border-color-base--lighter );
margin-top: 5px;
opacity: 0;
pointer-events: none;
transition: @transition-opacity-quick, @transition-box-shadow-quick;
@ -60,8 +107,7 @@
a {
.menu-item-link;
justify-content: space-between;
padding: @padding-menu-item;
font-size: @ui-menu-text;
padding: 10px var( --padding-page );
&:after {
.resource-loader-list-icon;
@ -88,7 +134,11 @@
}
&:before {
.resource-loader-menu-icon;
display: block;
width: var( --size-icon );
height: var( --size-icon );
background-size: var( --size-icon );
content: '';
opacity: var( --opacity-icon-base );
}
@ -113,3 +163,24 @@
}
}
}
@media ( min-width: @width-breakpoint-tablet ) {
#p-views {
li > a {
font-size: @ui-menu-text;
&:after {
margin-right: 8px;
}
}
}
#p-actions {
ul {
position: relative;
right: unset;
left: -172px;
width: 200px;
}
}
}

5
resources/skins.citizen.styles/common/content.less
View file

@ -1,12 +1,11 @@
.firstHeading {
margin-top: 0;
margin-bottom: 0.2rem;
margin: 0;
overflow-wrap: break-word; // Break word instead of overflow if title is too long
}
#siteSub {
display: block;
margin-bottom: 1.6rem;
margin-top: 0.2rem;
}
#siteSub,

14
resources/skins.citizen.styles/layout.less
View file

@ -1,13 +1,23 @@
@width-breakpoint-desktop-wider: @width-breakpoint-desktop + @width-toc * 2;
.firstHeading,
#siteSub,
.mw-body-header,
.mw-body-content {
max-width: var( --width-layout );
margin-right: auto;
margin-left: auto;
}
.mw-body-header {
display: flex;
flex-wrap: wrap;
margin-bottom: 0.8rem;
}
.page-heading {
flex-grow: 1;
margin-bottom: 0.8rem;
}
.mw-body-content {
.mixin-clearfix();
}