Prtksxna has uploaded a new change for review.
https://gerrit.wikimedia.org/r/204043
Change subject: fix sidebar
......................................................................
fix sidebar
Change-Id: Ic12e030ca9bf49358ed11b4cceb913a726063ba2
---
M resources/master.less
M resources/menu.js
M resources/toc.js
M templates/Skin.php
M templates/Skin.template
5 files changed, 79 insertions(+), 49 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/Blueprint
refs/changes/43/204043/1
diff --git a/resources/master.less b/resources/master.less
index 216fc73..0102160 100644
--- a/resources/master.less
+++ b/resources/master.less
@@ -61,41 +61,25 @@
/* Typography */
/* Offscreen Navigation */
-#site-wrap {
- min-width: 100%;
- min-height: 100%;
- background-color: #fff;
- position: relative;
- top: 0;
- bottom: 100%;
- left: 0;
- z-index: 1;
- transition: left 0.2s;
-}
-
-
-.site-shift {
- left: 380px !important;
- border-left: 1px solid #100F0D;
-
- .navbar {
- // An extra pixel to show the border till the top
- left: 381px !important;
- }
-}
-
-#off-navigation {
- width: 100%;
+#side-menu {
+ width: 420px;
height: 100%;
position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
+ overflow-y: auto;
+ border-top: 1px solid #2860B2;
+ top: 50px;
left: 0;
z-index: 0;
background-color: #2B5ECF;
+ display: none;
color: #fff;
- padding: 50px;
+
+ h1 {
+ margin: 50px;
+ padding: 0;
+ font-size: 2em;
+ }
+
ul {
list-style: none;
@@ -111,15 +95,15 @@
}
}
- h1 {
- margin: 0;
- padding: 0;
- font-size: 2em;
+ #toc > ul {
+ padding: 0 50px;
}
+
ul.content-links {
- padding: 0;
+ padding: 0 50px 20px 50px;
margin-top: 30px;
+ border-bottom: 1px solid #2860B2;
li {
padding: 5px 0;
@@ -189,7 +173,7 @@
.navbar.navbar-fixed-top {
background: #fff;
border: none;
- border-bottom: 2px solid #eee;
+ border-bottom: 1px solid #eee;
.navbar-brand {
background-color: #2B5ECF;
@@ -233,7 +217,7 @@
padding-left: 50px;
padding-right: 50px;
margin-right: 15px;
- border-left: 2px solid #eee;
+ border-left: 1px solid #eee;
background-image: url(user.svg), url(caret-down.svg);
background-position: center left 20px, center right 20px;
background-repeat: no-repeat, no-repeat;
@@ -247,7 +231,13 @@
background-position: center center;
background-repeat: no-repeat;
padding: 25px;
- border-right: 2px solid #2860B2;
+ border-right: 1px solid #2860B2;
+}
+
+#extra-space {
+ width: 0;
+ height: 50px;
+ background-color: #2B5ECF;
}
diff --git a/resources/menu.js b/resources/menu.js
index b00224c..67c3c62 100644
--- a/resources/menu.js
+++ b/resources/menu.js
@@ -1,7 +1,47 @@
$( function () {
- $( '#toc-toggle' ).click( function ( e ) {
+ var openSidebar, closeSidebar,
+ $sideMenu = $( '#side-menu' ),
+ $tocToggle = $( '#toc-toggle' ),
+ $extraSpace = $( '#extra-space' ),
+ $content = $( '#content' ),
+ navBrandWidth = $( '.navbar-head' ).width();
+
+ openSidebar = function () {
+ var
+ sidebarWidth = $sideMenu.width() + 10,
+ marginDifference = sidebarWidth -
$content.offset().left,
+ contentWidth = $content.width();
+
+ $extraSpace.css( 'width', sidebarWidth - navBrandWidth - 10 );
+
+ $sideMenu.show().css( {
+ 'z-index': 2000
+ } );
+
+ $tocToggle.addClass( 'close' );
+
+ $content.css( {
+ 'margin-left': sidebarWidth,
+ 'width': contentWidth - marginDifference
+ } );
+ };
+
+ closeSidebar = function () {
+ $sideMenu.hide();
+ $extraSpace.css( 'width', 0 );
+ $tocToggle.removeClass( 'close' );
+ $content.css( {
+ 'margin-left': '',
+ 'width': ''
+ } );
+ }
+
+ $tocToggle.click( function ( e ) {
e.preventDefault();
- $( this ).toggleClass( 'clicked' );
- $( '#site-wrap' ).toggleClass( 'site-shift' );
+ if ( $tocToggle.hasClass( 'close' ) ) {
+ closeSidebar();
+ } else {
+ openSidebar();
+ }
} );
} );
diff --git a/resources/toc.js b/resources/toc.js
index d5f7473..ee3aef0 100644
--- a/resources/toc.js
+++ b/resources/toc.js
@@ -1,5 +1,5 @@
$( function () {
$( '#toc' )
.detach()
- .appendTo( $( '#off-navigation' ) );
+ .appendTo( $( '#side-menu' ) );
} );
diff --git a/templates/Skin.php b/templates/Skin.php
index e16e884..0887dbd 100644
--- a/templates/Skin.php
+++ b/templates/Skin.php
@@ -197,7 +197,7 @@
return ''.$cx['funcs']['v']($cx, $in, array('headelement')).'
-<div id="off-navigation">
+<div id="side-menu">
'.' <h1 class="firstHeading"
id="firstHeading">'.htmlentities((string)$cx['funcs']['v']($cx, $in,
array('title')), ENT_QUOTES, 'UTF-8').'</h1>
<ul class="content-links">
'.$cx['funcs']['sec']($cx, $cx['funcs']['v']($cx, $in,
array('content_navigation','views')), $in, true, function($cx, $in) {return '
<li>
@@ -223,13 +223,13 @@
</ul>
'.'</div>
-<div id="site-wrap">
<nav class="navbar navbar-fixed-top">
<div class="contaner-fluid">
<div class="navbar-header">
- <ul class="nav navbar-nav">
+ <ul class="nav navbar-nav navbar-head" >
<li><a href="javascript:void(0)"
id="toc-toggle"></a></li>
<li><a class="navbar-brand"
href="/">'.htmlentities((string)$cx['funcs']['v']($cx, $in, array('sitename')),
ENT_QUOTES, 'UTF-8').'</a></li>
+ <li id="extra-space"></li>
</ul>
</div>
@@ -287,7 +287,7 @@
'.$cx['funcs']['v']($cx, $in,
array('printfooter')).'
</div>
' : '').' </div>
-</div>
+
</body>
'.$cx['funcs']['v']($cx, $in, array('debughtml')).'
'.$cx['funcs']['v']($cx, $in, array('bottomscripts')).'
diff --git a/templates/Skin.template b/templates/Skin.template
index 50dbd32..b19278d 100755
--- a/templates/Skin.template
+++ b/templates/Skin.template
@@ -1,16 +1,16 @@
{{{headelement}}}
-<div id="off-navigation">
+<div id="side-menu">
{{>sidebar}}
</div>
-<div id="site-wrap">
<nav class="navbar navbar-fixed-top">
<div class="contaner-fluid">
<div class="navbar-header">
- <ul class="nav navbar-nav">
+ <ul class="nav navbar-nav navbar-head" >
<li><a href="javascript:void(0)"
id="toc-toggle"></a></li>
<li><a class="navbar-brand" href="/">{{
sitename }}</a></li>
+ <li id="extra-space"></li>
</ul>
</div>
@@ -86,7 +86,7 @@
</div>
{{/if}}
</div>
-</div>
+
</body>
{{{debughtml}}}
{{{bottomscripts}}}
--
To view, visit https://gerrit.wikimedia.org/r/204043
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic12e030ca9bf49358ed11b4cceb913a726063ba2
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/Blueprint
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
