JGonera has submitted this change and it was merged.
Change subject: Beta: Story 435: Left nav grouping
......................................................................
Beta: Story 435: Left nav grouping
Separate left nav into two menus
Old HTML tested with new CSS without problems
Start convention of using _ prefix on temporary template data since
zero team will need some indication of what is stable and what is not
Change-Id: I45666d6a66c1b487dec157fce3ef30f8db93bfc5
---
M MobileFrontend.i18n.php
M includes/skins/MinervaTemplate.php
M includes/skins/SkinMobileBase.php
M javascripts/modules/mainmenutweaks.js
M less/common/mainmenu.less
M less/common/mf-navigation.less
M less/specials/mobilemenu.less
M stylesheets/common/mf-navigation.css
M stylesheets/common/ui.css
M stylesheets/specials/mobilemenu.css
10 files changed, 105 insertions(+), 30 deletions(-)
Approvals:
JGonera: Verified; Looks good to me, approved
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index 3c52400..3284dcf 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -105,6 +105,9 @@
'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-settings-heading' => 'Mobile site settings',
'mobile-frontend-settings-site-header' => '{{SITENAME}} Languages',
'mobile-frontend-settings-site-description' => '{{SITENAME}} is
available in $1 {{PLURAL:$1|language|languages}}. All available versions are
listed below',
@@ -452,6 +455,8 @@
'mobile-frontend-main-menu-settings' => 'Settings link text in main
menu',
'mobile-frontend-main-menu-upload' => 'Uploads link text in main menu.
{{Identical|Upload}}',
+ 'mobile-frontend-main-menu-discovery' => 'Discovery menu header in main
menu',
+ 'mobile-frontend-main-menu-personal' => 'Menu header in main menu for
pages personalised for a user',
'mobile-frontend-main-menu-settings-heading' =>
'{{doc-special|MobileOptions|unlisted=1}}',
'mobile-frontend-settings-site-header' => 'Heading for the
Special:MobileOptions/Language page - only visible to non javascript users',
'mobile-frontend-settings-site-description' => 'Shown on
Special:MobileOptions
diff --git a/includes/skins/MinervaTemplate.php
b/includes/skins/MinervaTemplate.php
index 50ba236..d5e42c7 100644
--- a/includes/skins/MinervaTemplate.php
+++ b/includes/skins/MinervaTemplate.php
@@ -90,17 +90,28 @@
'languageSummary' => wfMessage(
'mobile-frontend-language-header', count( $languages ) )->text(),
'variantSummary' => count( $variants ) > 1 ? wfMessage(
'mobile-frontend-language-variant-header' )->text() : '',
);
+ $showMenuHeaders = isset( $this->data['_show_menu_headers'] )
&& $this->data['_show_menu_headers'];
// begin rendering
echo $data[ 'headelement' ];
?>
<div id="mw-mf-viewport">
<div id="mw-mf-page-left">
+ <?php if ( $showMenuHeaders ) { ?>
+ <h2><?php echo wfMessage(
'mobile-frontend-main-menu-discovery' )->text() ?></h2>
+ <?php } ?>
<ul id="mw-mf-menu-main">
<?php
foreach( $this->getDiscoveryTools() as $key =>
$val ):
echo $this->makeListItem( $key, $val );
endforeach;
+ ?>
+ </ul>
+ <?php if ( $showMenuHeaders ) { ?>
+ <h2><?php echo wfMessage(
'mobile-frontend-main-menu-personal' )->text() ?></h2>
+ <?php } ?>
+ <ul>
+ <?php
foreach( $this->getPersonalTools() as $key =>
$val ):
echo $this->makeListItem( $key, $val );
endforeach;
diff --git a/includes/skins/SkinMobileBase.php
b/includes/skins/SkinMobileBase.php
index ac07e17..764736b 100644
--- a/includes/skins/SkinMobileBase.php
+++ b/includes/skins/SkinMobileBase.php
@@ -14,12 +14,16 @@
global $wgMFEnableSiteNotice;
parent::prepareData( $tpl );
$context = MobileContext::singleton();
+ $menuHeaders = true;
$search = $tpl->data['searchBox'];
if ( $context->isAlphaGroupMember() ) {
$search['placeholder'] = wfMessage(
'mobile-frontend-placeholder-alpha' )->escaped();
} else if ( $context->isBetaGroupMember() ) {
$search['placeholder'] = wfMessage(
'mobile-frontend-placeholder-beta' )->escaped();
+ } else { // stable mode
+ $menuHeaders = false;
}
+ $tpl->set( '_show_menu_headers', $menuHeaders );
$tpl->set( 'searchBox', $search );
$banners = '';
diff --git a/javascripts/modules/mainmenutweaks.js
b/javascripts/modules/mainmenutweaks.js
index ea5abd8..06b723a 100644
--- a/javascripts/modules/mainmenutweaks.js
+++ b/javascripts/modules/mainmenutweaks.js
@@ -8,10 +8,10 @@
if ( !photo.isSupported() ) {
// FIXME: We want to enable it to these users however we must
first deal with what to show
// to users who haven't uploaded anything to make the page
useful.
- $( '#mw-mf-menu-main li.icon-uploads' ).remove();
+ $( '#mw-mf-page-left li.icon-uploads' ).remove();
}
if ( !M.supportsGeoLocation() ) {
- $( '#mw-mf-menu-main li.icon-nearby' ).remove();
+ $( '#mw-mf-page-left li.icon-nearby' ).remove();
}
} )( mw.mobileFrontend, jQuery );
diff --git a/less/common/mainmenu.less b/less/common/mainmenu.less
index 71adb09..1415fc9 100644
--- a/less/common/mainmenu.less
+++ b/less/common/mainmenu.less
@@ -1,29 +1,58 @@
/* Left menu */
+@leftBorder: 12px;
#mw-mf-page-left {
background-color: @mainMenuBackgroundColor;
font-family: Helvetica, Arial, sans-serif;
- font-size: 1.2em;
bottom: 0;
top: 0;
+ left: 0;
margin-right: 0;
position: absolute;
border-right: solid 1px #AAA;
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;
+ }
}
-#mw-mf-menu-main {
+.beta, .alpha {
+ #mw-mf-page-left ul li {
+ &:last-child {
+ border-bottom: none
+ }
+ }
+}
+
+#mw-mf-page-left ul {
background-color: @mainMenuBackgroundColor;
list-style: none;
margin: 0;
padding: 0;
- height: 100%;
- border-left: solid 12px #252525;
- border-right: solid 1px black;
li {
+ font-size: 1.2em;
text-shadow: 0 1px 0 black;
border-bottom: 1px solid #717171;
font-weight: normal;
+
&:hover {
background-color: #5C5C5C;
border-left: solid 12px #3366BB;
diff --git a/less/common/mf-navigation.less b/less/common/mf-navigation.less
index 69bb609..9d7d129 100644
--- a/less/common/mf-navigation.less
+++ b/less/common/mf-navigation.less
@@ -165,7 +165,7 @@
}
@media all and (max-width: 240px) {
- #mw-mf-menu-main li {
+ #mw-mf-page-left ul li {
background-position: 0 0;
font-size: 0.8em;
}
diff --git a/less/specials/mobilemenu.less b/less/specials/mobilemenu.less
index ed6530b..00d6f2d 100644
--- a/less/specials/mobilemenu.less
+++ b/less/specials/mobilemenu.less
@@ -11,7 +11,7 @@
}
}
-#mw-mf-menu-main {
+#mw-mf-page-left ul {
li {
// low-res icons for old phones that don't support
background-size
&.icon-home a {
diff --git a/stylesheets/common/mf-navigation.css
b/stylesheets/common/mf-navigation.css
index ebb9d99..c315e75 100644
--- a/stylesheets/common/mf-navigation.css
+++ b/stylesheets/common/mf-navigation.css
@@ -124,7 +124,7 @@
min-height: auto !important;
}
@media all and (max-width: 240px) {
- #mw-mf-menu-main li {
+ #mw-mf-page-left ul li {
background-position: 0 0;
font-size: 0.8em;
}
diff --git a/stylesheets/common/ui.css b/stylesheets/common/ui.css
index 68683a5..238701e 100644
--- a/stylesheets/common/ui.css
+++ b/stylesheets/common/ui.css
@@ -197,36 +197,62 @@
#mw-mf-page-left {
background-color: #4e4e4e;
font-family: Helvetica, Arial, sans-serif;
- font-size: 1.2em;
bottom: 0;
top: 0;
+ left: 0;
margin-right: 0;
position: absolute;
border-right: solid 1px #AAA;
display: none;
/* JS only */
+ height: 100%;
+ border-left: solid 12px #252525;
}
-#mw-mf-menu-main {
+#mw-mf-page-left h2 {
+ 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;
+}
+#mw-mf-page-left ul {
background-color: #4e4e4e;
list-style: none;
margin: 0;
padding: 0;
- height: 100%;
- border-left: solid 12px #252525;
- border-right: solid 1px black;
}
-#mw-mf-menu-main li {
+#mw-mf-page-left ul li {
+ font-size: 1.2em;
text-shadow: 0 1px 0 black;
border-bottom: 1px solid #717171;
font-weight: normal;
}
-#mw-mf-menu-main li:hover {
+#mw-mf-page-left ul li:hover {
background-color: #5C5C5C;
border-left: solid 12px #3366BB;
margin-left: -12px;
}
-#mw-mf-menu-main li a {
+#mw-mf-page-left ul li a {
color: white;
display: block;
padding: 13px 10px 11px 42px;
@@ -241,34 +267,34 @@
background-position: 10px 50%;
border-bottom: 1px solid #3e3e3e;
}
-#mw-mf-menu-main li a:hover {
+#mw-mf-page-left ul li a:hover {
text-decoration: none;
}
-#mw-mf-menu-main li.icon-home a {
+#mw-mf-page-left ul li.icon-home a {
/* @embed */
background-image: url(images/menu/home.png);
}
-#mw-mf-menu-main li.icon-random a {
+#mw-mf-page-left ul li.icon-random a {
/* @embed */
background-image: url(images/menu/random.png);
}
-#mw-mf-menu-main li.icon-watchlist a {
+#mw-mf-page-left ul li.icon-watchlist a {
/* @embed */
background-image: url(images/menu/watchlist.png);
}
-#mw-mf-menu-main li.icon-uploads a {
+#mw-mf-page-left ul li.icon-uploads a {
/* @embed */
background-image: url(images/menu/uploads.png);
}
-#mw-mf-menu-main li.icon-nearby a {
+#mw-mf-page-left ul li.icon-nearby a {
/* @embed */
background-image: url(images/menu/nearby.png);
}
-#mw-mf-menu-main li.icon-settings a {
+#mw-mf-page-left ul li.icon-settings a {
/* @embed */
background-image: url(images/menu/settings.png);
}
-#mw-mf-menu-main li.icon-loginout a {
+#mw-mf-page-left ul li.icon-loginout a {
/* @embed */
background-image: url(images/menu/loginout.png);
}
diff --git a/stylesheets/specials/mobilemenu.css
b/stylesheets/specials/mobilemenu.css
index f9f91cc..d12eba4 100644
--- a/stylesheets/specials/mobilemenu.css
+++ b/stylesheets/specials/mobilemenu.css
@@ -6,15 +6,15 @@
body.navigation-full-screen #mw-mf-page-center {
display: none;
}
-#mw-mf-menu-main li.icon-home a {
+#mw-mf-page-left ul li.icon-home a {
background-image: url(images/menu/lowres/home.png);
}
-#mw-mf-menu-main li.icon-random a {
+#mw-mf-page-left ul li.icon-random a {
background-image: url(images/menu/lowres/random.png);
}
-#mw-mf-menu-main li.icon-settings a {
+#mw-mf-page-left ul li.icon-settings a {
background-image: url(images/menu/lowres/settings.png);
}
-#mw-mf-menu-main li.icon-loginout a {
+#mw-mf-page-left ul li.icon-loginout a {
background-image: url(images/menu/lowres/loginout.png);
}
--
To view, visit https://gerrit.wikimedia.org/r/64821
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I45666d6a66c1b487dec157fce3ef30f8db93bfc5
Gerrit-PatchSet: 11
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: MaxSem <[email protected]>
Gerrit-Reviewer: awjrichards <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
