mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-28 00:01:05 +00:00
feat: revamp drawer header
* wgLogo is always visible in the drawer * Increase the size of wiki name * Sitestats will now format large numbers into human readable formats (e.g. 12.2K, 3M, etc.) * Sitestats now use icons instead of text as labels * Remove wordmark for now, will revisit later
This commit is contained in:
alistair3149
parent
c95b6c1550
commit
6efff7f5da
|
|
@ -142,11 +142,14 @@ final class Drawer extends Partial {
|
|||
if ( $this->getConfigValue( 'CitizenEnableDrawerSiteStats' ) ) {
|
||||
$stats = [ 'articles', 'images', 'users', 'edits' ];
|
||||
$items = [];
|
||||
$fmt = new \NumberFormatter('en_US', \NumberFormatter::PADDING_POSITION);
|
||||
$fmt->setAttribute(\NumberFormatter::ROUNDING_MODE, \NumberFormatter::ROUND_DOWN);
|
||||
$fmt->setAttribute(\NumberFormatter::MAX_FRACTION_DIGITS, 1);
|
||||
|
||||
foreach ( $stats as &$stat ) {
|
||||
$items[] = [
|
||||
'id' => $stat,
|
||||
'value' => number_format( call_user_func( 'SiteStats::' . $stat ) ),
|
||||
'value' => $fmt->format( call_user_func( 'SiteStats::' . $stat ) ),
|
||||
'label' => $this->skin->msg( "citizen-sitestats-$stat-label" )->text(),
|
||||
];
|
||||
}
|
||||
|
|
@ -156,6 +159,46 @@ final class Drawer extends Partial {
|
|||
return $props;
|
||||
}
|
||||
|
||||
/**
|
||||
* Use to convert large positive numbers in to short form like 1K+, 100K+, 199K+, 1M+, 10M+, 1B+ etc
|
||||
*
|
||||
* @param $n
|
||||
* @param $precision d
|
||||
* @return string
|
||||
*/
|
||||
private function number_format_short( $n, $precision = 1 ) {
|
||||
if ($n < 900) {
|
||||
// 0 - 900
|
||||
$n_format = number_format($n, $precision);
|
||||
$suffix = '';
|
||||
} else if ($n < 900000) {
|
||||
// 0.9k-850k
|
||||
$n_format = number_format($n / 1000, $precision);
|
||||
$suffix = 'K';
|
||||
} else if ($n < 900000000) {
|
||||
// 0.9m-850m
|
||||
$n_format = number_format($n / 1000000, $precision);
|
||||
$suffix = 'M';
|
||||
} else if ($n < 900000000000) {
|
||||
// 0.9b-850b
|
||||
$n_format = number_format($n / 1000000000, $precision);
|
||||
$suffix = 'B';
|
||||
} else {
|
||||
// 0.9t+
|
||||
$n_format = number_format($n / 1000000000000, $precision);
|
||||
$suffix = 'T';
|
||||
}
|
||||
|
||||
// Remove unecessary zeroes after decimal. "1.0" -> "1"; "1.00" -> "1"
|
||||
// Intentionally does not affect partials, eg "1.50" -> "1.50"
|
||||
if ( $precision > 0 ) {
|
||||
$dotzero = '.' . str_repeat( '0', $precision );
|
||||
$n_format = str_replace( $dotzero, '', $n_format );
|
||||
}
|
||||
|
||||
return $n_format . $suffix;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a link to special pages and the upload form to the first portal in the drawer
|
||||
*
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>
|
||||
folder placeholder
|
||||
</title>
|
||||
<path d="M8 2H2a2 2 0 00-2 2v2h12z"/>
|
||||
<rect width="20" height="14" y="4" rx="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 254 B |
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>
|
||||
folder placeholder
|
||||
</title>
|
||||
<path d="M8 6h12V4a2 2 0 00-2-2h-6z"/>
|
||||
<rect width="20" height="14" y="4" rx="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 255 B |
|
|
@ -2,31 +2,26 @@
|
|||
|
||||
#mw-drawer-sitestats {
|
||||
display: flex;
|
||||
margin-top: 0.4rem;
|
||||
font-size: @ui-menu-text;
|
||||
}
|
||||
|
||||
.sitestats {
|
||||
&-item {
|
||||
.sitestats-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 10px;
|
||||
margin-right: 15px;
|
||||
|
||||
&-value {
|
||||
color: var( --color-base--emphasized );
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&-label {
|
||||
margin-left: 6px;
|
||||
color: var( --color-base--subtle );
|
||||
letter-spacing: 0.75px;
|
||||
}
|
||||
&:before {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 7px;
|
||||
background-size: contain;
|
||||
content: '';
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and ( max-width: @width-breakpoint-tablet ) {
|
||||
.sitestats-item:not( #sitestats-articles ) {
|
||||
display: none;
|
||||
.skin-citizen-dark {
|
||||
.sitestats-item:before {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -104,23 +104,28 @@
|
|||
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: ~'calc( var( --padding-page ) + 10px )' var( --padding-page ) 15px var( --padding-page );
|
||||
padding: ~'calc( var( --padding-page ) + 20px )' var( --padding-page ) 15px var( --padding-page );
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
&-logo {
|
||||
.mw-logo-icon {
|
||||
width: auto;
|
||||
height: 80px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
img.mw-logo-wordmark {
|
||||
width: auto;
|
||||
height: 16px;
|
||||
&-siteinfo {
|
||||
margin: 0 20px;
|
||||
|
||||
.mw-logo-wordmark {
|
||||
margin-top: 5px;
|
||||
color: var( --color-base--emphasized );
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -240,6 +245,24 @@
|
|||
right: unset;
|
||||
bottom: unset;
|
||||
max-height: ~'calc(100vh - var(--margin-header-item) * 2 )';
|
||||
align-items: flex-start;
|
||||
|
||||
&-header {
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
&-siteinfo {
|
||||
.mw-logo-wordmark {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-logo {
|
||||
.mw-logo-icon {
|
||||
width: auto;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,3 @@
|
|||
.mw-logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.mw-logo-wordmark {
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
}
|
||||
|
||||
.mw-logo-icon {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
// Only show title when screen height is less than 800px
|
||||
@media ( max-height: 800px ) {
|
||||
.mw-logo-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.mw-logo-wordmark {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -22,7 +22,6 @@
|
|||
@import 'Drawer.less';
|
||||
@import 'Siteinfo.less';
|
||||
@import 'Logo.less';
|
||||
@import 'Wordmark.less';
|
||||
@import 'Personalmenu.less';
|
||||
@import 'Searchbox.less';
|
||||
@import 'Pagetools.less';
|
||||
|
|
|
|||
19
skin.json
19
skin.json
|
|
@ -34,7 +34,8 @@
|
|||
"skins.citizen.icons.t",
|
||||
"skins.citizen.icons.pt",
|
||||
"skins.citizen.icons.footer",
|
||||
"skins.citizen.icons.badges"
|
||||
"skins.citizen.icons.badges",
|
||||
"skins.citizen.icons.sitestats"
|
||||
],
|
||||
"messages": [
|
||||
"citizen-drawer-toggle",
|
||||
|
|
@ -350,6 +351,22 @@
|
|||
"collapse": "resources/skins.citizen.icons/shared/collapse.svg"
|
||||
}
|
||||
},
|
||||
"skins.citizen.icons.sitestats": {
|
||||
"class": "ResourceLoaderImageModule",
|
||||
"selector": "#sitestats-{name}:before",
|
||||
"useDataURI": false,
|
||||
"images": {
|
||||
"articles": "resources/skins.citizen.icons/shared/article.svg",
|
||||
"images": {
|
||||
"file": {
|
||||
"ltr": "resources/skins.citizen.icons/shared/folderPlaceholder-ltr.svg",
|
||||
"rtl": "resources/skins.citizen.icons/shared/folderPlaceholder-rtl.svg"
|
||||
}
|
||||
},
|
||||
"users": "resources/skins.citizen.icons/shared/userAvatar.svg",
|
||||
"edits": "resources/skins.citizen.icons/shared/edit.svg"
|
||||
}
|
||||
},
|
||||
"skins.citizen.icons.preferences": {
|
||||
"class": "ResourceLoaderImageModule",
|
||||
"selector": "#citizen-pref-{name}:after",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{{!
|
||||
string msg-citizen-drawer-toggle The label used by the drawer button.
|
||||
string msg-sitesubtitle the contents of the sitesubtitle message key
|
||||
}}
|
||||
<input
|
||||
type="checkbox"
|
||||
|
|
@ -24,7 +25,9 @@
|
|||
<div id="mw-drawer-logo" role="banner">
|
||||
{{>Logo}}
|
||||
</div>
|
||||
<div id="mw-drawer-siteinfo">
|
||||
{{>SiteStats}}
|
||||
<div class="mw-logo-wordmark">{{msg-sitetitle}}</div>
|
||||
{{#data-drawer-subsearch}}
|
||||
<div id="mw-drawer-search">
|
||||
<input
|
||||
|
|
@ -34,6 +37,7 @@
|
|||
id="mw-drawer-search-input" />
|
||||
</div>
|
||||
{{/data-drawer-subsearch}}
|
||||
</div>
|
||||
</header>
|
||||
<section id="mw-drawer-menu">
|
||||
{{#data-portals-first}}{{>Menu}}{{/data-portals-first}}
|
||||
|
|
|
|||
|
|
@ -17,14 +17,5 @@
|
|||
}}{{/svg}}{{!
|
||||
}}{{/icon}}"{{!
|
||||
}}alt="" aria-hidden="true" height="50" width="50">
|
||||
<span class="mw-logo-container">
|
||||
{{#wordmark}}
|
||||
<img class="mw-logo-wordmark" alt="{{msg-sitetitle}}"
|
||||
src="{{src}}" width="{{width}}" height="{{height}}">
|
||||
{{/wordmark}}
|
||||
{{^wordmark}}
|
||||
<span class="mw-logo-wordmark">{{msg-sitetitle}}</span>
|
||||
{{/wordmark}}
|
||||
</span>
|
||||
</a>
|
||||
{{/data-logos}}
|
||||
|
|
@ -4,10 +4,7 @@
|
|||
{{#data-drawer-sitestats}}
|
||||
<div id="mw-drawer-sitestats">
|
||||
{{#array-drawer-sitestats-item}}
|
||||
<div class="sitestats-item" id="sitestats-{{id}}">
|
||||
<div class="sitestats-item-value">{{value}}</div>
|
||||
<div class="sitestats-item-label">{{label}}</div>
|
||||
</div>
|
||||
<div class="sitestats-item" id="sitestats-{{id}}" title="{{label}}">{{value}}</div>
|
||||
{{/array-drawer-sitestats-item}}
|
||||
</div>
|
||||
{{/data-drawer-sitestats}}
|
||||
Loading…
Reference in a new issue