Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/235912
Change subject: Improve styling at different resolutions for search non-js form
......................................................................
Improve styling at different resolutions for search non-js form
This optimises search form for display at 240px, 320px and 768px
Changes:
* Define a threshold for mobile screen
* lower mobile screen resolution from 280px to 240px
Change-Id: Id91ec536a22d689a4ce273af388370b7ff71cef1
---
M includes/MobileFrontend.hooks.php
M includes/config/Site.php
M resources/skins.minerva.base.styles/ui.less
3 files changed, 40 insertions(+), 15 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/12/235912/1
diff --git a/includes/MobileFrontend.hooks.php
b/includes/MobileFrontend.hooks.php
index b48f071..29417eb 100644
--- a/includes/MobileFrontend.hooks.php
+++ b/includes/MobileFrontend.hooks.php
@@ -905,6 +905,7 @@
$config = MobileContext::singleton()->getMFConfig();
$lessVars = array_merge( $lessVars,
array(
+ 'wgMFDeviceWidthMobile' => "{$config->get(
'MFDeviceWidthMobile' )}px",
'wgMFDeviceWidthTablet' => "{$config->get(
'MFDeviceWidthTablet' )}px",
'wgMFDeviceWidthMobileSmall' => "{$config->get(
'MFDeviceWidthMobileSmall' )}px",
'wgMFThumbnailTiny' =>
MobilePage::TINY_IMAGE_WIDTH . 'px',
diff --git a/includes/config/Site.php b/includes/config/Site.php
index 4a77085..7c4676c 100644
--- a/includes/config/Site.php
+++ b/includes/config/Site.php
@@ -27,7 +27,7 @@
* Devices with available screen of this value and less will have some styles
* adapted for improved reading on small screens.
*/
-$wgMFDeviceWidthMobileSmall = 280;
+$wgMFDeviceWidthMobileSmall = 240;
/**
* Minimum available screen width at which a device can be considered a
tablet/desktop
diff --git a/resources/skins.minerva.base.styles/ui.less
b/resources/skins.minerva.base.styles/ui.less
index 13b5dc0..54951dc 100644
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@@ -89,17 +89,6 @@
}
-// Make search input more visible for users on small screens.
-// Opera Mini doesn't support placeholders.
-@media all and (max-width: @wgMFDeviceWidthMobileSmall) {
- .header {
- .search {
- border: 1px solid @grayLight;
- padding: .3em .1em;
- }
- }
-}
-
/* Search */
.client-use-basic-search,
@@ -110,11 +99,16 @@
float: left;
}
+ > form {
+ padding: .15em 0 0;
+ }
+
.search {
- // Assume the smallest possible screen size.
- // We want people to be able to search we don't care if
it looks pretty.
- width: 80px;
+ // Optimise for 240px (override later)
+ width: 5em;
margin-right: 8px;
+ border: solid 1px @grayLight;
+ padding: .5em 1em;
}
}
}
@@ -294,3 +288,33 @@
visibility: hidden;
}
+// Make search input more visible for users on small screens.
+// Opera Mini 8 doesn't support placeholders but does support media queries.
+// http://caniuse.com/#feat=css-placeholder
+@media all and (max-width: @wgMFDeviceWidthMobileSmall) {
+ .header {
+ .search {
+ border: 1px solid @grayLight;
+ padding: .3em .1em;
+ }
+ }
+}
+
+@media all and (min-width: @wgMFDeviceWidthMobile) {
+ .client-use-basic-search,
+ .client-nojs {
+ .header .search {
+ width: 7em;
+ }
+ }
+}
+
+@media all and (min-width: @wgMFDeviceWidthTablet) {
+ .client-use-basic-search,
+ .client-nojs {
+ .header .search {
+ width: 35em;
+ }
+ }
+}
+
--
To view, visit https://gerrit.wikimedia.org/r/235912
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id91ec536a22d689a4ce273af388370b7ff71cef1
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
