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 <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
