JGonera has uploaded a new change for review. https://gerrit.wikimedia.org/r/55572
Change subject: Load hi-res icons for JS-enabled devices (regression) ...................................................................... Load hi-res icons for JS-enabled devices (regression) Hi-res menu icons were never loaded resulting in blurry icons for all modern phones because ".jsEnabled #mw-mf-menu-main li.icon-home a" is a weaker rule than "#mw-mf-page-left #mw-mf-menu-main li.icon-home a" (rule started with id has preference). Also, move all icon rules to mainmenu.less and avoid nested id rules (id are unique anyway). Regression introduced in 149f609. Change-Id: Ic6fd7585d25a051895e1eea26acb2f4934c97120 --- M less/common/mainmenu.less M less/common/mf-navigation.less M stylesheets/common/mf-navigation.css M stylesheets/common/ui.css 4 files changed, 113 insertions(+), 112 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend refs/changes/72/55572/1 diff --git a/less/common/mainmenu.less b/less/common/mainmenu.less index fd10e06..19d05ed 100644 --- a/less/common/mainmenu.less +++ b/less/common/mainmenu.less @@ -9,63 +9,94 @@ position: absolute; border-right: solid 1px #AAA; display: none; /* JS only */ +} - #mw-mf-content-left { - height: 100%; - border-left: solid 12px #252525; - border-right: solid 1px black; - } +#mw-mf-content-left { + height: 100%; + border-left: solid 12px #252525; + border-right: solid 1px black; +} - #mw-mf-menu-main { - background-color: @mainMenuBackgroundColor; - list-style: none; - margin: 0; - padding: 0; - height: 100%; - border-left: solid 12px #252525; - border-right: solid 1px black; +#mw-mf-menu-main { + background-color: @mainMenuBackgroundColor; + list-style: none; + margin: 0; + padding: 0; + height: 100%; + border-left: solid 12px #252525; + border-right: solid 1px black; - li { - text-shadow: 0 1px 0 black; - border-bottom: 1px solid #717171; - font-weight: normal; + li { + text-shadow: 0 1px 0 black; + border-bottom: 1px solid #717171; + font-weight: normal; + &:hover { + background-color: #5C5C5C; + border-left: solid 12px #3366BB; + margin-left: -12px; + } + + a { + color: white; + display: block; + padding: 13px 10px 11px 42px; + line-height: 22px; + background-repeat: no-repeat; + .background-size(24px, 24px); + background-position: 10px 50%; + border-bottom: 1px solid #3e3e3e; &:hover { - background-color: #5C5C5C; - border-left: solid 12px #3366BB; - margin-left: -12px; - } - - a { - color: white; - display: block; - padding: 13px 10px 11px 42px; - line-height: 22px; - background-repeat: no-repeat; - .background-size(24px, 24px); - background-position: 10px 50%; - border-bottom: 1px solid #3e3e3e; - &:hover { - text-decoration: none; - } - } - - // low-res icons for old phones that don't support background-size - &.icon-home a { - background-image: url(images/menu/lowres/home.png); - } - - &.icon-random a { - background-image: url(images/menu/lowres/random.png); - } - - &.icon-settings a { - background-image: url(images/menu/lowres/settings.png); - } - - &.icon-loginout a { - background-image: /* @embed */url(images/menu/lowres/loginout.png); + text-decoration: none; } } + + // low-res icons for old phones that don't support background-size + &.icon-home a { + background-image: url(images/menu/lowres/home.png); + } + + &.icon-random a { + background-image: url(images/menu/lowres/random.png); + } + + &.icon-settings a { + background-image: url(images/menu/lowres/settings.png); + } + + &.icon-loginout a { + background-image: /* @embed */url(images/menu/lowres/loginout.png); + } + } +} + +// hi-res menu icons +.jsEnabled #mw-mf-menu-main li { + &.icon-home a { + background-image: /* @embed */url(images/menu/home.png); + } + + &.icon-random a { + background-image: /* @embed */url(images/menu/random.png); + } + + &.icon-watchlist a { + background-image: /* @embed */url(images/menu/watchlist.png); + } + + &.icon-uploads a { + background-image: /* @embed */url(images/menu/uploads.png); + } + + &.icon-nearby a { + background-image: /* @embed */url(images/menu/nearby.png); + } + + &.icon-settings a { + background-image: /* @embed */url(images/menu/settings.png); + } + + &.icon-loginout a { + background-image: /* @embed */url(images/menu/loginout.png); } } diff --git a/less/common/mf-navigation.less b/less/common/mf-navigation.less index 5de7bb6..b40cf84 100644 --- a/less/common/mf-navigation.less +++ b/less/common/mf-navigation.less @@ -48,36 +48,6 @@ } } -.jsEnabled #mw-mf-menu-main li { - &.icon-home a { - background-image: /* @embed */url(images/menu/home.png); - } - - &.icon-random a { - background-image: /* @embed */url(images/menu/random.png); - } - - &.icon-watchlist a { - background-image: /* @embed */url(images/menu/watchlist.png); - } - - &.icon-uploads a { - background-image: /* @embed */url(images/menu/uploads.png); - } - - &.icon-nearby a { - background-image: /* @embed */url(images/menu/nearby.png); - } - - &.icon-settings a { - background-image: /* @embed */url(images/menu/settings.png); - } - - &.icon-loginout a { - background-image: /* @embed */url(images/menu/loginout.png); - } -} - body.navigationEnabled { height: 100%; overflow: hidden; diff --git a/stylesheets/common/mf-navigation.css b/stylesheets/common/mf-navigation.css index 5d56b33..7b1e3f1 100644 --- a/stylesheets/common/mf-navigation.css +++ b/stylesheets/common/mf-navigation.css @@ -28,27 +28,6 @@ left: 80% !important; overflow-x: hidden; } -.jsEnabled #mw-mf-menu-main li.icon-home a { - background-image: /* @embed */ url(images/menu/home.png); -} -.jsEnabled #mw-mf-menu-main li.icon-random a { - background-image: /* @embed */ url(images/menu/random.png); -} -.jsEnabled #mw-mf-menu-main li.icon-watchlist a { - background-image: /* @embed */ url(images/menu/watchlist.png); -} -.jsEnabled #mw-mf-menu-main li.icon-uploads a { - background-image: /* @embed */ url(images/menu/uploads.png); -} -.jsEnabled #mw-mf-menu-main li.icon-nearby a { - background-image: /* @embed */ url(images/menu/nearby.png); -} -.jsEnabled #mw-mf-menu-main li.icon-settings a { - background-image: /* @embed */ url(images/menu/settings.png); -} -.jsEnabled #mw-mf-menu-main li.icon-loginout a { - background-image: /* @embed */ url(images/menu/loginout.png); -} body.navigationEnabled { height: 100%; overflow: hidden; diff --git a/stylesheets/common/ui.css b/stylesheets/common/ui.css index f75c5dd..3191a90 100644 --- a/stylesheets/common/ui.css +++ b/stylesheets/common/ui.css @@ -131,12 +131,12 @@ /* JS only */ } -#mw-mf-page-left #mw-mf-content-left { +#mw-mf-content-left { height: 100%; border-left: solid 12px #252525; border-right: solid 1px black; } -#mw-mf-page-left #mw-mf-menu-main { +#mw-mf-menu-main { background-color: #4e4e4e; list-style: none; margin: 0; @@ -145,17 +145,17 @@ border-left: solid 12px #252525; border-right: solid 1px black; } -#mw-mf-page-left #mw-mf-menu-main li { +#mw-mf-menu-main li { text-shadow: 0 1px 0 black; border-bottom: 1px solid #717171; font-weight: normal; } -#mw-mf-page-left #mw-mf-menu-main li:hover { +#mw-mf-menu-main li:hover { background-color: #5C5C5C; border-left: solid 12px #3366BB; margin-left: -12px; } -#mw-mf-page-left #mw-mf-menu-main li a { +#mw-mf-menu-main li a { color: white; display: block; padding: 13px 10px 11px 42px; @@ -170,21 +170,42 @@ background-position: 10px 50%; border-bottom: 1px solid #3e3e3e; } -#mw-mf-page-left #mw-mf-menu-main li a:hover { +#mw-mf-menu-main li a:hover { text-decoration: none; } -#mw-mf-page-left #mw-mf-menu-main li.icon-home a { +#mw-mf-menu-main li.icon-home a { background-image: url(images/menu/lowres/home.png); } -#mw-mf-page-left #mw-mf-menu-main li.icon-random a { +#mw-mf-menu-main li.icon-random a { background-image: url(images/menu/lowres/random.png); } -#mw-mf-page-left #mw-mf-menu-main li.icon-settings a { +#mw-mf-menu-main li.icon-settings a { background-image: url(images/menu/lowres/settings.png); } -#mw-mf-page-left #mw-mf-menu-main li.icon-loginout a { +#mw-mf-menu-main li.icon-loginout a { background-image: /* @embed */ url(images/menu/lowres/loginout.png); } +.jsEnabled #mw-mf-menu-main li.icon-home a { + background-image: /* @embed */ url(images/menu/home.png); +} +.jsEnabled #mw-mf-menu-main li.icon-random a { + background-image: /* @embed */ url(images/menu/random.png); +} +.jsEnabled #mw-mf-menu-main li.icon-watchlist a { + background-image: /* @embed */ url(images/menu/watchlist.png); +} +.jsEnabled #mw-mf-menu-main li.icon-uploads a { + background-image: /* @embed */ url(images/menu/uploads.png); +} +.jsEnabled #mw-mf-menu-main li.icon-nearby a { + background-image: /* @embed */ url(images/menu/nearby.png); +} +.jsEnabled #mw-mf-menu-main li.icon-settings a { + background-image: /* @embed */ url(images/menu/settings.png); +} +.jsEnabled #mw-mf-menu-main li.icon-loginout a { + background-image: /* @embed */ url(images/menu/loginout.png); +} @media all and (min-width: 700px) { .navigationEnabled .alpha #mw-mf-page-left, .navigationEnabled .beta #mw-mf-page-left { -- To view, visit https://gerrit.wikimedia.org/r/55572 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ic6fd7585d25a051895e1eea26acb2f4934c97120 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MobileFrontend Gerrit-Branch: master Gerrit-Owner: JGonera <jgon...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits