hyperzlib
/
isekai-mediawiki-skins-Timeless
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move echo icons out of the personal dropdown

Browse Source 
Lots of positioning weirdness, and the pokey was being
weird too.

Change-Id: Ia46c4f4cf0ce1c043c5506981b4ebc4b6dc4b5d1
isekai
Isarra 8 years ago
parent 693aec5fdc
commit 10de923cd3
6 changed files with 164 additions and 57 deletions
Show Stats Download Patch File Download Diff File

137
TimelessTemplate.php
Unescape Escape View File

@ -12,14 +12,13 @@ class TimelessTemplate extends BaseTemplate {
$pileOfTools = $this->getPageTools(); $pileOfTools = $this->getPageTools();
$this->html( 'headelement' ); $this->html( 'headelement' );
$userLinks = $this->getUserLinks();
?> ?>
<div id="mw-wrapper"> <div id="mw-wrapper" class="<?php echo $userLinks['class'] ?>">
<div id="mw-header-container" class="ts-container"> <div id="mw-header-container" class="ts-container">
<div id="mw-header" class="ts-inner"> <div id="mw-header" class="ts-inner">
<div id="user-tools">
<?php $this->outputUserLinks(); ?>
</div>
<?php <?php
echo $userLinks['html'];
$this->outputLogo( 'p-logo-text', 'text' ); $this->outputLogo( 'p-logo-text', 'text' );
$this->outputSearch(); $this->outputSearch();
?> ?>
@ -351,8 +350,8 @@ class TimelessTemplate extends BaseTemplate {
* Outputs the search * Outputs the search
*/ */
private function outputSearch() { private function outputSearch() {
echo Html::openElement( 'div', [ 'class' => 'mw-portlet', 'id' => 'p-search' ] );
?> ?>
<div class="mw-portlet" id="p-search">
<h3<?php $this->html( 'userlangattributes' ) ?>> <h3<?php $this->html( 'userlangattributes' ) ?>>
<label for="searchInput"><?php echo $this->getMsg( 'search' )->parse() ?></label> <label for="searchInput"><?php echo $this->getMsg( 'search' )->parse() ?></label>
</h3> </h3>
@ -379,8 +378,8 @@ class TimelessTemplate extends BaseTemplate {
?> ?>
</div> </div>
</form> </form>
</div>
<?php <?php
echo Html::closeElement( 'div' );
} }
/** /**
@ -406,60 +405,96 @@ class TimelessTemplate extends BaseTemplate {
/** /**
* Outputs user links portlet for header * Outputs user links portlet for header
*
* @return array [ html, extra class to apply to surrounding objects ] (for width adjustments)
*/ */
private function outputUserLinks() { private function getUserLinks() {
$user = $this->getSkin()->getUser(); $user = $this->getSkin()->getUser();
?> $html = '';
<div id="p-personal">
<h2> $dropdownContent = '';
<span> $extraTools = [];
<?php foreach ( $this->getPersonalTools() as $key => $item ) {
// Display status, and make a dropdown if logged in // Skip echo icons and stick them elsewhere
if ( in_array( $key, [ 'notifications-alert', 'notifications-notice' ] ) ) {
$extraTools[$key] = $item;
continue;
}
if ( $key == 'userpage' ) {
$item['links'][0]['text'] = wfMessage( 'timeless-userpage', $user->getName() )->text();
}
if ( $key == 'mytalk' ) {
$item['links'][0]['text'] = wfMessage( 'timeless-talkpage', $user->getName() )->text();
}
$dropdownContent .= $this->makeListItem( $key, $item );
}
$class = empty( $extraTools ) ? '' : 'extension-icons';
// p-personal portlet
$html .= Html::openElement( 'div', [ 'id' => 'p-personal' ] );
// Header
if ( $user->isLoggedIn() ) { if ( $user->isLoggedIn() ) {
$userName = $user->getName(); $userName = $user->getName();
// Make sure it fit firsts // Make sure it fits first (numbers slightly made up, may need adjusting)
if ( mb_strlen( $userName ) < 12 ) { $fit = empty( $extraTools ) ? 13 : 9;
echo htmlspecialchars( $userName, ENT_QUOTES ); if ( mb_strlen( $userName ) < $fit ) {
$header = htmlspecialchars( $userName, ENT_QUOTES );
} else { } else {
echo wfMessage( 'timeless-loggedin' )->escaped(); $header = wfMessage( 'timeless-loggedin' )->escaped();
} }
} else { } else {
echo wfMessage( 'timeless-anonymous' )->escaped(); $header = wfMessage( 'timeless-anonymous' )->escaped();
}
?>
</span>
<div class="pokey"></div>
</h2>
<div id="p-personal-inner" class="dropdown">
<div class="mw-portlet" role="navigation">
<h3>
<?php
if ( $user->isLoggedIn() ) {
echo wfMessage( 'timeless-loggedinas', $user->getName() )->parse();
} else {
echo wfMessage( 'timeless-notloggedin' )->parse();
} }
?> $html .= Html::rawElement( 'h2', [], Html::rawElement(
</h3> 'span',
<div class="p-body"> [],
<ul<?php $this->html( 'userlangattributes' ) ?>> $header
<?php ) . Html::element( 'div', [ 'class' => 'pokey' ] ) );
foreach ( $this->getPersonalTools() as $key => $item ) {
if ( $key == 'userpage' ) { // Dropdown
$item['links'][0]['text'] = wfMessage( 'timeless-userpage', $user->getName() )->text(); $html .= Html::openElement( 'div', [ 'id' => 'p-personal-inner', 'class' => 'dropdown' ] );
} $html .= Html::openElement( 'div', [ 'class' => 'mw-portlet', 'role' => 'navigation' ] );
if ( $key == 'mytalk' ) {
$item['links'][0]['text'] = wfMessage( 'timeless-talkpage', $user->getName() )->text(); if ( $user->isLoggedIn() ) {
} $header = wfMessage( 'timeless-loggedinas', $user->getName() )->parse();
echo $this->makeListItem( $key, $item ); } else {
$header = wfMessage( 'timeless-notloggedin' )->parse();
} }
?> $html .= Html::rawElement( 'h3', [], $header );
</ul> $html .= Html::rawElement(
</div> 'div',
</div> [ 'class' => 'p-body' ],
</div> Html::rawElement( 'ul', [], $dropdownContent )
</div> );
<?php
$html .= Html::closeElement( 'div' );
$html .= Html::closeElement( 'div' );
$html .= Html::closeElement( 'div' );
// Extra icon stuff (echo etc)
if ( !empty( $extraTools ) ) {
$iconList = '';
foreach ( $extraTools as $key => $item ) {
$iconList .= $this->makeListItem( $key, $item );
}
$html .= Html::rawElement(
'div',
[ 'id' => 'p-personal-extra', 'class' => 'p-body' ],
Html::rawElement( 'ul', [], $iconList )
);
}
return [
'html' => Html::rawElement(
'div',
[ 'id' => 'user-tools' ],
$html
),
'class' => $class
];
} }
/* /*

30
resources/screen-common.less
Unescape Escape View File

@ -146,11 +146,11 @@ div.suggestions {
border-left: 10px solid transparent; border-left: 10px solid transparent;
border-right: 10px solid transparent; border-right: 10px solid transparent;
content: ""; content: "";
height: 0px; height: 0;
position: absolute; position: absolute;
transform: rotate(360deg); // to force some smoothing in annoying browsers transform: rotate(360deg); // to force some smoothing in annoying browsers
width: 0px; width: 0;
z-index: 2; z-index: 4;
} }
.pokey { .pokey {
top: 1.85em; top: 1.85em;
@ -477,6 +477,30 @@ table.wikitable > * > tr > th {
margin-right: @column-right-size + 1em; margin-right: @column-right-size + 1em;
} }
/* Extension specific junk */
/* Echo */
#p-personal h2,
#p-personal-extra,
#p-personal-extra ul,
#p-personal-extra li {
display: inline-block;
}
#p-personal-extra {
// Position and keep it from randomly overflowing massively for no apparent reason
margin: .7em 0 -2em 0;
ul {
list-style: none;
margin: 0 -1em 0 0;
padding: 0;
}
li {
margin: 0 .75em 0 0;
}
}
/* Hidden stuff */ /* Hidden stuff */
#p-namespaces h3, #p-namespaces h3,

10
resources/screen-desktop-mid.less
Unescape Escape View File

@ -13,6 +13,16 @@
margin-left: @column-left-size; margin-left: @column-left-size;
} }
// Echo
.extension-icons {
#user-tools {
width: auto;
}
.color-middle {
margin-right: @column-left-size + 2 * @content-padding + 4em;
}
}
// Redundant content category list // Redundant content category list
#catlinks { #catlinks {
display: none; display: none;

9
resources/screen-desktop-small.less
Unescape Escape View File

@ -116,7 +116,7 @@
.dropdown { .dropdown {
right: -1em; right: -1em;
} }
} }
#user-tools { #user-tools {
width: 6em; width: 6em;
@ -125,3 +125,10 @@
margin-right: 6em; margin-right: 6em;
} }
// Echo
.extension-icons #p-search {
margin-right: 11em;
}
#p-personal-extra {
margin-left: -2.5em;
}

19
resources/screen-desktop.less
Unescape Escape View File

@ -78,7 +78,7 @@
right: -2em; right: -2em;
} }
.pokey { .pokey {
top: 2.125em; top: 2.05em;
} }
h2 { h2 {
margin: 0; margin: 0;
@ -91,6 +91,13 @@
background-repeat: no-repeat; background-repeat: no-repeat;
.dropdown-header(); .dropdown-header();
span {
display: inline-block;
height: 1em;
overflow: hidden;
word-wrap: break-word;
}
} }
&:hover { &:hover {
.pokey, .pokey,
@ -100,6 +107,16 @@
} }
} }
/* Echo stuff */
#p-personal-extra {
float: left;
margin-left: -4.5em;
}
.extension-icons {
#p-search {
margin-right: 21em;
}
}
#mw-page-header-links #ca-more, #mw-page-header-links #ca-more,
#mw-page-header-links #ca-languages, #mw-page-header-links #ca-languages,

16
resources/screen-mobile.less
Unescape Escape View File

@ -35,7 +35,6 @@
} }
/* Dropdowns */ /* Dropdowns */
.sidebar-inner, .sidebar-inner,
.dropdown { .dropdown {
display: none; display: none;
@ -124,6 +123,21 @@
.background-image-svg('images/gear-large-grey.svg', 'images/gear-large-grey.png'); .background-image-svg('images/gear-large-grey.svg', 'images/gear-large-grey.png');
} }
/* Echo icons */
.mw-echo-ui-notificationBadgeButtonPopupWidget {
z-index: 2;
}
#p-personal-extra {
position: absolute;
top: .9em;
right: 11.75em;
li {
margin-right: 1.25em;
}
}
/* Logo */ /* Logo */
#p-logo-text { #p-logo-text {

Write Preview
Loading…
Cancel
Save