jenkins-bot has submitted this change and it was merged.
Change subject: Improvements for viewing mobile site on very small screens
(<=280px)
......................................................................
Improvements for viewing mobile site on very small screens (<=280px)
Hide the pageactions bar for devices with small screens and no
JavaScript support.
Add a border around the search field so that it is clear where to
click in Opera Mini (which doesn't support placeholders).
Also improving the formatting of the search field and adjacent
search icon so that they don't look weird with the new border.
Change-Id: I9ce307ad687a376596cebb9088ef49c3738f9823
---
M includes/skins/MinervaTemplate.php
M less/common/pageactions.less
M less/common/ui.less
3 files changed, 31 insertions(+), 2 deletions(-)
Approvals:
JGonera: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/skins/MinervaTemplate.php
b/includes/skins/MinervaTemplate.php
index 1a63505..81d5cb0 100644
--- a/includes/skins/MinervaTemplate.php
+++ b/includes/skins/MinervaTemplate.php
@@ -332,7 +332,7 @@
// FIXME: change this
into a search icon instead of a text button
echo
$this->makeSearchButton(
'fulltext',
- array( 'class'
=> 'no-js-only icon icon-search' )
+ array( 'class'
=> 'fulltext-search no-js-only icon icon-search' )
);
?>
</form>
diff --git a/less/common/pageactions.less b/less/common/pageactions.less
index c6de70d..7af2fa3 100644
--- a/less/common/pageactions.less
+++ b/less/common/pageactions.less
@@ -57,6 +57,19 @@
}
}
+// On small devices that don't support Javascript, hide the page actions bar
+@media all and (max-width: @wgMFDeviceWidthMobileSmall) {
+ .client-nojs {
+ #page-actions {
+ display: none;
+ }
+
+ #section_0 {
+ border: none;
+ }
+ }
+}
+
#ca-upload {
.background-image('images/pagemenu/upload-locked.png');
input {
diff --git a/less/common/ui.less b/less/common/ui.less
index 35e2633..581128d 100644
--- a/less/common/ui.less
+++ b/less/common/ui.less
@@ -71,6 +71,22 @@
border: none;
padding: 0;
}
+
+ .fulltext-search {
+ margin: 0 .2em 0 .5em;
+ float: right;
+ }
+}
+
+// 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;
+ }
+ }
}
// Used for messages on login screen, page lists and uploads and when showing
old revisions
@@ -95,7 +111,7 @@
.client-nojs {
.search-box input.search {
// FIXME: This should not be necessary
- width: 80%;
+ width: 75%;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/145443
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I9ce307ad687a376596cebb9088ef49c3738f9823
Gerrit-PatchSet: 10
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Kaldari <[email protected]>
Gerrit-Reviewer: Awjrichards <[email protected]>
Gerrit-Reviewer: Dr0ptp4kt <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
