diff --git a/includes/SkinTimeless.php b/includes/SkinTimeless.php index 95e14a8..937d2c1 100644 --- a/includes/SkinTimeless.php +++ b/includes/SkinTimeless.php @@ -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' ); } /** diff --git a/resources/IE9fixes.css b/resources/IE9fixes.css new file mode 100644 index 0000000..b3b47be --- /dev/null +++ b/resources/IE9fixes.css @@ -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; +} diff --git a/resources/extensions/Echo.less b/resources/extensions/Echo.less index 27c183e..dfaddb6 100644 --- a/resources/extensions/Echo.less +++ b/resources/extensions/Echo.less @@ -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; diff --git a/resources/screen-common.less b/resources/screen-common.less index aaae7a4..c659397 100644 --- a/resources/screen-common.less +++ b/resources/screen-common.less @@ -78,7 +78,7 @@ body { /* images */ &.wordmark { - padding: 0; + padding: 0 0.5em 0 0; } } } diff --git a/resources/screen-desktop-full.less b/resources/screen-desktop-full.less index b563653..e3b23d8 100644 --- a/resources/screen-desktop-full.less +++ b/resources/screen-desktop-full.less @@ -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; +} diff --git a/resources/screen-desktop-mid.less b/resources/screen-desktop-mid.less index f0e585c..3839b3d 100644 --- a/resources/screen-desktop-mid.less +++ b/resources/screen-desktop-mid.less @@ -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; +} diff --git a/resources/screen-desktop-small.less b/resources/screen-desktop-small.less index 314b001..2cee4ee 100644 --- a/resources/screen-desktop-small.less +++ b/resources/screen-desktop-small.less @@ -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; -} diff --git a/resources/screen-desktop.less b/resources/screen-desktop.less index fda00e1..bd1267d 100644 --- a/resources/screen-desktop.less +++ b/resources/screen-desktop.less @@ -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, diff --git a/resources/screen-misc.less b/resources/screen-misc.less index f28fc8d..3a2c756 100644 --- a/resources/screen-misc.less +++ b/resources/screen-misc.less @@ -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) {