jenkins-bot has submitted this change and it was merged.
Change subject: Story 831: Improve left nav
......................................................................
Story 831: Improve left nav
* Make left nav scrollable on smaller screens if it doesn't fit.
* Remove nav headings (new layout approved by Jared and Maryana).
* Make two bottom horizontal links text more dimmed (Jared's
suggestion).
* Make menu narrower (fixed 15em on small devices, Jared's suggestion).
* Fix a slight misalignment of the blue left border of hovered menu
items.
* Add shadow to the menu (consulted with Jared).
* Remove and refactor lots of CSS in the process.
Also:
* use mouseup fallback for closing the menu (touchend doesn't work in IE)
* don't close the menu when scrolling
* append toasts to #mw-mf-page-center instead of body to be consistent
with drawers and avoid weird bugs
* set default background for body (#fff)
Changes tested on:
* Safari on iOS 6.0.1 and 6.1.2
* Android browser 4.2 and 2.3
* Chrome for Android (latest)
* Firefox for Android (latest)
* IE on Windows Phone 7.5
* latest desktop Chrome
* latest desktop Firefox
* Opera 14 for Android
* Opera Mini 7.5 for Android
* Nokia C3 browser
Bug: 49455
Change-Id: I670d81eb949b866472dde0498bf2402dda254214
---
M MobileFrontend.i18n.php
M includes/skins/MobileTemplateBeta.php
M javascripts/common/mf-navigation.js
M javascripts/common/mf-notification.js
M less/common/mainmenu.less
M less/common/mf-navigation.less
M less/common/ui.less
M stylesheets/common/mf-navigation.css
M stylesheets/common/ui.css
9 files changed, 162 insertions(+), 234 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index 1c8771e..88366e9 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -105,8 +105,6 @@
'mobile-frontend-main-menu-watchlist' => 'Watchlist',
'mobile-frontend-main-menu-settings' => 'Settings',
'mobile-frontend-main-menu-upload' => 'Uploads',
- 'mobile-frontend-main-menu-discovery' => 'Discovery',
- 'mobile-frontend-main-menu-personal' => 'My Stuff',
'mobile-frontend-main-menu-about' => 'About {{SITENAME}}',
'mobile-frontend-main-menu-disclaimer' => 'Disclaimer',
diff --git a/includes/skins/MobileTemplateBeta.php
b/includes/skins/MobileTemplateBeta.php
index d5692ce..5309a17 100644
--- a/includes/skins/MobileTemplateBeta.php
+++ b/includes/skins/MobileTemplateBeta.php
@@ -1,25 +1,8 @@
<?php
class MobileTemplateBeta extends MobileTemplate {
protected function renderMainMenu( $data ) {
- echo Html::element( 'h2', array(), wfMessage(
'mobile-frontend-main-menu-discovery' )->text() );
+ parent::renderMainMenu( $data );
?>
- <ul id="mw-mf-menu-main">
- <?php
- foreach( $this->getDiscoveryTools() as $key => $val ):
- echo $this->makeListItem( $key, $val );
- endforeach;
- ?>
- </ul>
- <?php
- echo Html::element( 'h2', array(), wfMessage(
'mobile-frontend-main-menu-personal' )->text() );
- ?>
- <ul>
- <?php
- foreach( $this->getPersonalTools() as $key => $val ):
- echo $this->makeListItem( $key, $val );
- endforeach;
- ?>
- </ul>
<ul class="hlist">
<?php
foreach( $this->getSiteLinks() as $key => $val ):
diff --git a/javascripts/common/mf-navigation.js
b/javascripts/common/mf-navigation.js
index 4da8d70..983e0c5 100644
--- a/javascripts/common/mf-navigation.js
+++ b/javascripts/common/mf-navigation.js
@@ -16,6 +16,7 @@
$( function() {
var
+ moved = false,
search = document.getElementById( 'searchInput' );
$( '#mw-mf-menu-main a' ).click( function() {
@@ -36,16 +37,20 @@
$( '#' + mfePrefix + 'main-menu-button' ).click( function( ev )
{
toggleNavigation();
ev.preventDefault();
- } ).on( 'touchend', function( ev ) {
+ } ).on( 'touchend mouseup', function( ev ) {
ev.stopPropagation();
} );
// close navigation if content tapped
- $( '#mw-mf-page-center' ).on( 'touchend', function() {
- if ( isOpen() ) {
- closeNavigation();
- }
- } );
+ $( '#mw-mf-page-center' ).
+ on( 'touchend mouseup', function() {
+ if ( isOpen() && !moved ) {
+ closeNavigation();
+ }
+ } ).
+ // but don't close if scrolled
+ on( 'touchstart', function() { moved = false; } ).
+ on( 'touchmove', function() { moved = true; } );
if( window.location.hash === '#mw-mf-page-left' ) {
openNavigation();
diff --git a/javascripts/common/mf-notification.js
b/javascripts/common/mf-notification.js
index a487e87..9c4480f 100644
--- a/javascripts/common/mf-notification.js
+++ b/javascripts/common/mf-notification.js
@@ -48,8 +48,8 @@
function init( firstRun ) {
// FIXME: turn into view with template
- var el = $( '<div
id="mf-notification"><div></div></div>' ).
- appendTo( document.body )[ 0 ];
+ var el = $( '<div id="mf-notification"
class="position-fixed"><div></div></div>' ).
+ appendTo( '#mw-mf-page-center' )[ 0 ];
if ( inBeta ) {
notifyAuthenticatedUser();
diff --git a/less/common/mainmenu.less b/less/common/mainmenu.less
index 8f6152d..cf05779 100644
--- a/less/common/mainmenu.less
+++ b/less/common/mainmenu.less
@@ -1,43 +1,31 @@
/* Left menu */
-@leftBorder: 12px;
+@menuBorder: 12px;
+@menuBorderColor: #252525;
+
+#mw-mf-viewport {
+ position: relative;
+ min-height: 100%;
+}
+
+#mw-mf-page-center {
+ width: 100%;
+ background-color: white;
+ position: relative;
+ z-index: 3;
+}
+
#mw-mf-page-left {
- background-color: @mainMenuBackgroundColor;
- font-family: Helvetica, Arial, sans-serif;
- bottom: 0;
- top: 0;
- left: 0;
- margin-right: 0;
- position: absolute;
- border-right: solid 1px #AAA;
+ float: left;
+ min-height: 100%;
display: none; /* JS only */
- height: 100%;
- border-left: solid @leftBorder #252525;
-
- h2 {
- box-sizing: border-box;
- margin: 0 0 0 -@leftBorder;
- padding: 0.2em 0 0.1em 0.6em;
- line-height: 1.5em;
- text-transform: uppercase;
- text-shadow: 0px -1px 0px #777;
- color: white;
- font-size: 0.9em;
- font-weight:bold;
- font-family: sans-serif;
- .vertical-gradient ( #757575, #9e9e9e );
- }
-
- ul, h2,
- {
- border-right: solid 1px black;
- }
+ background: @mainMenuBackgroundColor;
+ border-left: solid @menuBorder @menuBorderColor;
+ .box-sizing( border-box );
}
.beta, .alpha {
- #mw-mf-page-left ul li {
- &:last-child {
- border-bottom: none
- }
+ #mw-mf-page-left ul:first-child {
+ border-bottom: @menuBorder solid @menuBorderColor;
}
}
@@ -47,16 +35,18 @@
margin: 0;
padding: 0;
+ &:first-child li:first-child a {
+ border-top: none;
+ }
+
li {
font-size: 1.2em;
- text-shadow: 0 1px 0 black;
- border-bottom: 1px solid #717171;
- font-weight: normal;
+ text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
&:hover {
background-color: #5C5C5C;
- border-left: solid 12px #3366BB;
- margin-left: -12px;
+ border-left: solid @menuBorder #3366BB;
+ margin-left: -@menuBorder;
}
a {
@@ -68,6 +58,7 @@
.background-size(24px, 24px);
background-position: 10px 50%;
border-bottom: 1px solid #3e3e3e;
+ border-top: 1px solid #717171;
&:hover {
text-decoration: none;
}
@@ -109,6 +100,7 @@
border: none;
a {
+ color: #ccc;
border: none;
padding: .7em 14px;
}
@@ -116,21 +108,60 @@
}
}
-@media all and (min-width: 700px) {
+body.navigation-enabled {
+ // set background and border here (#mw-mf-page-left doesn't expand
height
+ // and #mw-mf-viewport has overflow: hidden and clips blue hover
borders)
+ border-left: solid @menuBorder @menuBorderColor;
+ background: @mainMenuBackgroundColor;
+
+ #mw-mf-viewport {
+ margin-left: -@menuBorder;
+ // disable horizontal scrolling
+ overflow: hidden;
+ }
+
+ #mw-mf-page-center {
+ position: absolute;
+ height: 100%;
+ overflow: hidden;
+ // set border here (#mw-mf-page-left doesn't expand height)
+ border-left: solid 1px #000;
+ box-shadow: -5px 0 0 0 rgba(0, 0, 0, 0.1);
+ }
+
+ #mw-mf-page-left {
+ width: 15em;
+ display: block;
+ }
+
+ .position-fixed,
+ #mw-mf-page-center {
+ left: 15em !important;
+ }
+}
+
+// navigation enabled on bigger screens (tablets and desktop)
+@media (min-width: 700px) {
body.navigation-enabled.alpha,
body.navigation-enabled.beta {
+
+ background: #fff;
+
+ #mw-mf-page-center {
+ // override position: absolute from the general
.navigation-enabled rule
+ // so that the main content is not clipped
+ position: relative;
+ width: 80%;
+ }
+
#mw-mf-page-left {
+ position: absolute;
width: 20%;
- display: block;
- right: 80%;
}
.position-fixed,
#mw-mf-page-center {
left: 20% !important;
- right: 0 !important;
- width: 80%;
- overflow: auto;
}
}
}
diff --git a/less/common/mf-navigation.less b/less/common/mf-navigation.less
index 8f264c0..fb04a74 100644
--- a/less/common/mf-navigation.less
+++ b/less/common/mf-navigation.less
@@ -42,42 +42,6 @@
}
}
-.client-js {
- #mw-mf-main-menu-button {
- /* @embed */background-image: url(images/menu/main.png);
-
- }
-}
-
-#mw-mf-viewport {
- width: 100%;
- position: relative;
- height: 100%; /* for non-existant file pages */
-}
-
-#mw-mf-page-center {
- width: 100%;
- background-color: white;
- position: relative;
- z-index: 3;
- min-height: 100%;
-}
-
-body.navigation-enabled {
-
- #mw-mf-page-left {
- width: 80%;
- right: 20%;
- display: block;
- }
-
- .position-fixed,
- #mw-mf-page-center {
- left: 80% !important;
- overflow-x: hidden; // prevent horizontal scroll on chrome
- }
-}
-
.search.error,
.error {
border: solid @overlayBorderWidth @overlayAlertErrorBorderColor;
@@ -116,40 +80,9 @@
}
}
-body.navigation-enabled {
- &,
- #mw-mf-viewport,
- #mw-mf-page-center {
- overflow: hidden;
- height: 100%;
- }
-}
-
html,
body {
+ background: #fff;
height: 100%;
}
-#mw-mf-page-left,
-#mw-mf-page-center {
- min-height: 100%;
-}
-
-.supportsPositionFixed #mw-mf-page-center {
- min-height: auto !important;
-}
-
-@media all and (max-width: 240px) {
- #mw-mf-page-left ul li {
- background-position: 0 0;
- font-size: 0.8em;
- }
-}
-
-.supportsPositionFixed {
- body.navigation-enabled {
- #mw-mf-viewport {
- overflow-y: auto;
- }
- }
-}
diff --git a/less/common/ui.less b/less/common/ui.less
index 43a593a..258a0f7 100644
--- a/less/common/ui.less
+++ b/less/common/ui.less
@@ -54,6 +54,12 @@
}
}
+.client-js {
+ #mw-mf-main-menu-button {
+ /* @embed */background-image: url(images/menu/main.png);
+ }
+}
+
/* Search */
input.search {
-webkit-appearance: none;
diff --git a/stylesheets/common/mf-navigation.css
b/stylesheets/common/mf-navigation.css
index 41c51e3..61aec15 100644
--- a/stylesheets/common/mf-navigation.css
+++ b/stylesheets/common/mf-navigation.css
@@ -28,34 +28,6 @@
.watch-this-article.watched {
background-image: url(images/watched.png);
}
-.client-js #mw-mf-main-menu-button {
- /* @embed */
- background-image: url(images/menu/main.png);
-}
-#mw-mf-viewport {
- width: 100%;
- position: relative;
- height: 100%;
- /* for non-existant file pages */
-
-}
-#mw-mf-page-center {
- width: 100%;
- background-color: white;
- position: relative;
- z-index: 3;
- min-height: 100%;
-}
-body.navigation-enabled #mw-mf-page-left {
- width: 80%;
- right: 20%;
- display: block;
-}
-body.navigation-enabled .position-fixed,
-body.navigation-enabled #mw-mf-page-center {
- left: 80% !important;
- overflow-x: hidden;
-}
.search.error,
.error {
border: solid 1px #dd0000;
@@ -86,29 +58,8 @@
#content .alert {
margin: 0;
}
-body.navigation-enabled,
-body.navigation-enabled #mw-mf-viewport,
-body.navigation-enabled #mw-mf-page-center {
- overflow: hidden;
- height: 100%;
-}
html,
body {
+ background: #fff;
height: 100%;
-}
-#mw-mf-page-left,
-#mw-mf-page-center {
- min-height: 100%;
-}
-.supportsPositionFixed #mw-mf-page-center {
- min-height: auto !important;
-}
-@media all and (max-width: 240px) {
- #mw-mf-page-left ul li {
- background-position: 0 0;
- font-size: 0.8em;
- }
-}
-.supportsPositionFixed body.navigation-enabled #mw-mf-viewport {
- overflow-y: auto;
}
diff --git a/stylesheets/common/ui.css b/stylesheets/common/ui.css
index dbf9c01..54c3cf1 100644
--- a/stylesheets/common/ui.css
+++ b/stylesheets/common/ui.css
@@ -196,46 +196,32 @@
border-right: 1px solid #9ea0a3;
}
/* Left menu */
+#mw-mf-viewport {
+ position: relative;
+ min-height: 100%;
+}
+#mw-mf-page-center {
+ width: 100%;
+ background-color: white;
+ position: relative;
+ z-index: 3;
+}
#mw-mf-page-left {
- background-color: #4e4e4e;
- font-family: Helvetica, Arial, sans-serif;
- bottom: 0;
- top: 0;
- left: 0;
- margin-right: 0;
- position: absolute;
- border-right: solid 1px #AAA;
+ float: left;
+ min-height: 100%;
display: none;
/* JS only */
- height: 100%;
+ background: #4e4e4e;
border-left: solid 12px #252525;
-}
-#mw-mf-page-left h2 {
+ -moz-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
box-sizing: border-box;
- margin: 0 0 0 -12px;
- padding: 0.2em 0 0.1em 0.6em;
- line-height: 1.5em;
- text-transform: uppercase;
- text-shadow: 0px -1px 0px #777777;
- color: white;
- font-size: 0.9em;
- font-weight: bold;
- font-family: sans-serif;
- background-color: #9e9e9e;
- background-image: -moz-linear-gradient(top, #757575 0, #9e9e9e 100%);
- background-image: -ms-linear-gradient(top, #757575 0, #9e9e9e 100%);
- background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #757575), color-stop(100%, #9e9e9e));
- background-image: -webkit-linear-gradient(top, #757575 0, #9e9e9e 100%);
- background-image: linear-gradient(#757575 0, #9e9e9e 100%);
}
-#mw-mf-page-left ul,
-#mw-mf-page-left h2 {
- border-right: solid 1px black;
-}
-.beta #mw-mf-page-left ul li:last-child,
-.alpha #mw-mf-page-left ul li:last-child {
- border-bottom: none;
+.beta #mw-mf-page-left ul:first-child,
+.alpha #mw-mf-page-left ul:first-child {
+ border-bottom: 12px solid #252525;
}
#mw-mf-page-left ul {
background-color: #4e4e4e;
@@ -243,15 +229,16 @@
margin: 0;
padding: 0;
}
+#mw-mf-page-left ul:first-child li:first-child a {
+ border-top: none;
+}
#mw-mf-page-left ul li {
font-size: 1.2em;
- text-shadow: 0 1px 0 black;
- border-bottom: 1px solid #717171;
- font-weight: normal;
+ text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
#mw-mf-page-left ul li:hover {
background-color: #5C5C5C;
- border-left: solid 12px #3366BB;
+ border-left: solid 12px #3366bb;
margin-left: -12px;
}
#mw-mf-page-left ul li a {
@@ -268,6 +255,7 @@
background-size: 24px 24px;
background-position: 10px 50%;
border-bottom: 1px solid #3e3e3e;
+ border-top: 1px solid #717171;
}
#mw-mf-page-left ul li a:hover {
text-decoration: none;
@@ -306,24 +294,53 @@
border: none;
}
#mw-mf-page-left ul.hlist li a {
+ color: #ccc;
border: none;
padding: .7em 14px;
}
-@media all and (min-width: 700px) {
+body.navigation-enabled {
+ border-left: solid 12px #252525;
+ background: #4e4e4e;
+}
+body.navigation-enabled #mw-mf-viewport {
+ margin-left: -12px;
+ overflow: hidden;
+}
+body.navigation-enabled #mw-mf-page-center {
+ position: absolute;
+ height: 100%;
+ overflow: hidden;
+ border-left: solid 1px #000;
+ box-shadow: -5px 0 0 0 rgba(0, 0, 0, 0.1);
+}
+body.navigation-enabled #mw-mf-page-left {
+ width: 15em;
+ display: block;
+}
+body.navigation-enabled .position-fixed,
+body.navigation-enabled #mw-mf-page-center {
+ left: 15em !important;
+}
+@media (min-width: 700px) {
+ body.navigation-enabled.alpha,
+ body.navigation-enabled.beta {
+ background: #fff;
+ }
+ body.navigation-enabled.alpha #mw-mf-page-center,
+ body.navigation-enabled.beta #mw-mf-page-center {
+ position: relative;
+ width: 80%;
+ }
body.navigation-enabled.alpha #mw-mf-page-left,
body.navigation-enabled.beta #mw-mf-page-left {
+ position: absolute;
width: 20%;
- display: block;
- right: 80%;
}
body.navigation-enabled.alpha .position-fixed,
body.navigation-enabled.beta .position-fixed,
body.navigation-enabled.alpha #mw-mf-page-center,
body.navigation-enabled.beta #mw-mf-page-center {
left: 20% !important;
- right: 0 !important;
- width: 80%;
- overflow: auto;
}
}
/* Header */
@@ -385,6 +402,10 @@
#mw-mf-main-menu-button:active {
background-color: #f9f9f9;
}
+.client-js #mw-mf-main-menu-button {
+ /* @embed */
+ background-image: url(images/menu/main.png);
+}
/* Search */
input.search {
-webkit-appearance: none;
--
To view, visit https://gerrit.wikimedia.org/r/70932
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I670d81eb949b866472dde0498bf2402dda254214
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
