r105120 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r105119‎ | r105120 | r105121 >
Date:17:56, 4 December 2011
Author:brion
Status:ok (Comments)
Tags:
Comment:
* (bug 32095) High-density Android, iPhone versions of search icon

Other icons not added. May not work in all browsers.
There's definitely a lot of CSS duplication -- nearly the same bits for android, iphone, default, webkit..... they should all get the same stylesheet. Why have multiples?

Using -webkit-pixel-density media query; this means it doesn't trigger on Firefox of course. Firefox should take -moz-pixel-density but seems happier with checking the dpi. Not applied.
Modified paths:
  • /trunk/extensions/MobileFrontend/stylesheets/android.css (modified) (history)
  • /trunk/extensions/MobileFrontend/stylesheets/default.css (modified) (history)
  • /trunk/extensions/MobileFrontend/stylesheets/iphone.css (modified) (history)
  • /trunk/extensions/MobileFrontend/stylesheets/webkit.css (modified) (history)

Diff [purge]

Index: trunk/extensions/MobileFrontend/stylesheets/android.css
——@@ -217,9 +217,20 @@
218218 #searchbox #goButton {
219219 border: 0;
220220 background: url(images/s.gif) no-repeat top left;
 221+ background-size: 27px 25px;
221222 height: 25px;
222223 width: 27px;
223224 }
 225+@media screen and (-webkit-device-pixel-ratio: 1.5) {
 226+ #searchbox #goButton {
 227+ background-image: url(images/s-hdpi.png) !important;
 228+ }
 229+}
 230+@media screen and (-webkit-device-pixel-ratio: 2.0) {
 231+ #searchbox #goButton {
 232+ background-image: url(images/s-xhdpi.png) !important;
 233+ }
 234+}
224235
225236 #searchbox #searchField {
226237 width: auto;
Index: trunk/extensions/MobileFrontend/stylesheets/iphone.css
——@@ -217,9 +217,15 @@
218218 #searchbox #goButton {
219219 border: 0;
220220 background: url(images/s.gif) no-repeat top left;
 221+ background-size: 27px 25px;
221222 height: 25px;
222223 width: 27px;
223224 }
 225+@media screen and (-webkit-device-pixel-ratio: 2.0) {
 226+ #searchbox #goButton {
 227+ background-image: url(images/s-xhdpi.png) !important;
 228+ }
 229+}
224230
225231 #searchbox #searchField {
226232 width: auto;
Index: trunk/extensions/MobileFrontend/stylesheets/default.css
——@@ -217,6 +217,7 @@
218218 #searchbox #goButton {
219219 border: 0;
220220 background: url(images/s.gif) no-repeat top left;
 221+ background-size: 27px 25px;
221222 height: 25px;
222223 width: 27px;
223224 }
Index: trunk/extensions/MobileFrontend/stylesheets/webkit.css
——@@ -217,9 +217,20 @@
218218 #searchbox #goButton {
219219 border: 0;
220220 background: url(images/s.gif) no-repeat top left;
 221+ background-size: 27px 25px;
221222 height: 25px;
222223 width: 27px;
223224 }
 225+@media screen and (-webkit-device-pixel-ratio: 1.5) {
 226+ #searchbox #goButton {
 227+ background-image: url(images/s-hdpi.png) !important;
 228+ }
 229+}
 230+@media screen and (-webkit-device-pixel-ratio: 2.0) {
 231+ #searchbox #goButton {
 232+ background-image: url(images/s-xhdpi.png) !important;
 233+ }
 234+}
224235
225236 #searchbox #searchField {
226237 width: auto;

Follow-up revisions

RevisionCommit summaryAuthorDate
r105121Followup r105120: add the high-res images and an SVG master for the search iconbrion17:56, 4 December 2011

Comments

#Comment by TheDJ (talk | contribs)   19:07, 4 December 2011

The reason there are multiple stylesheets is historical. The old ruby gateway used ruby code to generate device specific stylesheets from base components. When the layout was copied into MobileFrontend, The 'generated' per device stylesheets, instead of the components were imported, simply to get towards a working yet compatible extension as fast as possible. There is no good reason to continue to use multiple stylesheets, if we can take out the device specific bits.

Status & tagging log