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

Use flex for logo container width and to show some username on small screens

Browse Source 
* No columns, so no point aligning anything to column-widths here.
* Add some IE9 fallbacks because the entire header is now flex.
* Clean up, consolidate same styles, etc

Bug: T184998
Change-Id: Iecf99d093a689d3c32932b2603f16939127ce7bd
isekai
Isarra 5 years ago
parent cd71b68b6a
commit a4900353b1
9 changed files with 71 additions and 76 deletions
Show Stats Download Patch File Download Diff File

3
includes/SkinTimeless.php
Unescape Escape View File

@ -33,6 +33,9 @@ class SkinTimeless extends SkinTemplate {
'skins.timeless.js',
'skins.timeless.mobile'
] );
// Basic IE support without flexbox
$out->addStyle( $this->stylename . '/resources/IE9fixes.css', 'screen', 'IE' );
}
/**

16
resources/IE9fixes.css
Unescape Escape View File

@ -0,0 +1,16 @@
/* Basic support for desktop-small and -mid because IE9 doesn't do flexbox */
/* Mobile/desktop-full would need a bit more, but nobody cares */
#p-search {
margin-left: 14em;
margin-right: 16em;
}
#p-logo-text {
width: 14em;
float: left;
}
#user-tools {
width: 16em;
float: right;
}

12
resources/extensions/Echo.less
Unescape Escape View File

@ -21,7 +21,7 @@
}
}
@media ( min-width: @desktop-mid-floor ) {
@media ( min-width: @desktop-small-floor ) {
div#personal {
padding-left: 0;
}
@ -32,16 +32,6 @@
}
}
@media ( min-width: @desktop-small-floor ) and ( max-width: @desktop-small-width ) {
.extension-icons #p-search {
margin-right: 10em;
}
#personal-extra {
margin-left: -2.5em;
}
}
@media ( max-width: @mobile-width ) {
.mw-echo-ui-notificationBadgeButtonPopupWidget {
z-index: 2;

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

@ -78,7 +78,7 @@ body {
/* images */
&.wordmark {
padding: 0;
padding: 0 0.5em 0 0;
}
}
}

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

@ -7,6 +7,10 @@
clear: both;
}
#p-logo-text {
min-width: @column-left-size;
}
#mw-site-navigation {
.column-left();
.flex(0, 0, @column-left-size, 1);
@ -27,3 +31,8 @@
#catlinks {
display: none;
}
// For the more responsive username support
#user-tools {
min-width: @column-right-size;
}

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

@ -6,6 +6,10 @@
clear: both;
}
#p-logo-text {
min-width: @column-left-size;
}
#mw-site-navigation,
#mw-related-navigation {
.column-left();
@ -42,3 +46,8 @@
.color-right {
background: @blue-dark;
}
.ts-inner,
.color-middle-container {
max-width: @content-width - @column-right-size;
}

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

@ -4,6 +4,13 @@
#mw-content-block {
padding: 0;
position: relative;
// In case of high resolution usage
max-width: @content-width - @column-left-size - @column-right-size;
}
.ts-inner {
max-width: @content-width - @column-left-size - @column-right-size;
}
#mw-content {
@ -62,7 +69,6 @@
}
.sidebar-chunk:hover {
.pokey,
.sidebar-inner {
display: block !important;
}
@ -83,7 +89,7 @@
#mw-site-navigation {
position: absolute;
top: 3.1em;
top: -2.35em;
left: 2em;
.sidebar-chunk {
@ -101,7 +107,7 @@
#mw-related-navigation {
position: absolute;
top: 3.1em;
top: -2.35em;
right: 2em;
.sidebar-chunk {
@ -123,6 +129,7 @@
#p-logo-text a {
padding-left: 0;
padding-right: 0.5em;
text-align: left;
}
@ -136,22 +143,10 @@
float: right;
h2 span {
display: none;
}
h2:after {
margin-left: -0.65em;
max-width: 130px;
}
.dropdown {
right: -1em;
}
}
#user-tools {
width: 6em;
}
#p-search {
margin-right: 6em;
}

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

@ -26,6 +26,10 @@ div.mw-notification-area {
/* Header */
#mw-header {
.flex-display;
}
#mw-header-container {
/* Stupid IE10+ bug requires defining the height property for this to work
* the way it is intended; without doing that this'll break horribly under
@ -45,18 +49,29 @@ div.mw-notification-area {
}
#p-logo-text {
width: @column-left-size;
float: left;
.flex(0, 0, auto, 1);
}
#p-search {
margin-left: @column-left-size;
margin-right: @column-right-size;
.flex(1, 1, auto, 2);
}
#user-tools {
width: @column-right-size;
float: right;
.flex(0, 1, auto, 3);
display: inline-block;
h2 span {
display: inline-block;
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// Because the overflow:hidden above messes up the alignment...
#personal h2:after {
height: 18px;
}
}
#mw-header-nav-hack,

42
resources/screen-misc.less
Unescape Escape View File

@ -15,48 +15,6 @@
}
}
// uuuuugh wat I don't know what's going on, everything after this is possibly a horrible idea
// trying to handle changeable-width username container, I guess?
@media screen and ( min-width: @desktop-mid-floor ) {
#mw-header {
.flex-display;
}
#user-tools {
.flex(0, 1, auto, 3);
display: inline-block;
h2 span {
display: inline-block;
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// Because the overflow:hidden above messes up the alignment...
#personal h2:after {
height: 18px;
}
}
#p-logo-text {
.flex(0, 0, @column-left-size, 1);
}
#p-search {
.flex(1, 1, auto, 2);
// this line breaks IE for mid (two-column), too, but whatever
margin: 0;
}
}
@media screen and ( min-width: @desktop-large-floor ) {
#user-tools {
min-width: @column-right-size;
}
}
// Internet Explorer 10-11
/* stylelint-disable media-feature-parentheses-space-inside */
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {

Write Preview
Loading…
Cancel
Save