Prtksxna has uploaded a new change for review.
https://gerrit.wikimedia.org/r/197501
Change subject: Change the ToC toggle button to a dedicated icon fixed to the
side of the content
......................................................................
Change the ToC toggle button to a dedicated icon fixed to the side of the
content
Design spec at M43
Change-Id: Iff766c43043131d6af8a33bc6bddc4fc4ff3bddd
---
M resources/master.less
A resources/menu-clicked.svg
M resources/menu.js
M resources/menu.svg
M templates/Skin.php
M templates/Skin.template
6 files changed, 37 insertions(+), 5 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/LivingStyleGuide
refs/changes/01/197501/1
diff --git a/resources/master.less b/resources/master.less
index 51125cc..593b1b6 100644
--- a/resources/master.less
+++ b/resources/master.less
@@ -283,9 +283,6 @@
a.navbar-brand {
border-right: 2px solid #eee;
- background-image: url( 'menu.svg' );
- background-position: center left -10px;
- background-repeat: no-repeat;
display: inline-block;
height: 100%;
line-height: 50px;
@@ -297,6 +294,25 @@
}
/* Navbar */
+#toc-toggle {
+ dislplay: block;
+ height: 24px;
+ width: 24px;
+ background-image: url( 'menu.svg' );
+ background-position: center left;
+ background-repeat: no-repeat;
+ position: fixed;
+ top: 115px;
+ left: 110px;
+ transition: all 1s ease;
+
+ &.clicked {
+ background-image: url( 'menu-clicked.svg' );
+ top: 57px;
+ left: 20px;
+ }
+}
+
/* MediaWiki Stuff */
@media screen {
diff --git a/resources/menu-clicked.svg b/resources/menu-clicked.svg
new file mode 100644
index 0000000..68bd648
--- /dev/null
+++ b/resources/menu-clicked.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
+ width="24px" height="24px" viewBox="0 0 24 24" enable-background="new
0 0 24 24" xml:space="preserve">
+<g transform="matrix(1 0 0 -1 0 1638)">
+ <path fill="#fff" d="M17.613,1624.945H4.195v2.848h13.418V1624.945z
M12.398,1618.805H5.883c-0.469,0-0.867,0.164-1.195,0.492
+ s-0.492,0.723-0.492,1.184v1.172h8.203V1618.805z
M4.195,1631.086v2.848h14.344c0.469,0,0.867-0.164,1.195-0.492
+ s0.492-0.727,0.492-1.195v-1.16H4.195z"/>
+</g>
+</svg>
diff --git a/resources/menu.js b/resources/menu.js
index 316af0a..b00224c 100644
--- a/resources/menu.js
+++ b/resources/menu.js
@@ -1,6 +1,7 @@
$( function () {
- $( '.navbar-brand' ).click( function ( e ) {
+ $( '#toc-toggle' ).click( function ( e ) {
e.preventDefault();
+ $( this ).toggleClass( 'clicked' );
$( '#site-wrap' ).toggleClass( 'site-shift' );
} );
} );
diff --git a/resources/menu.svg b/resources/menu.svg
index 5dbcb94..5b3bf26 100644
--- a/resources/menu.svg
+++ b/resources/menu.svg
@@ -4,7 +4,7 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
width="24px" height="24px" viewBox="0 0 24 24" enable-background="new
0 0 24 24" xml:space="preserve">
<g transform="matrix(1 0 0 -1 0 1638)">
- <path d="M17.613,1624.945H4.195v2.848h13.418V1624.945z
M12.398,1618.805H5.883c-0.469,0-0.867,0.164-1.195,0.492
+ <path fill="#347bff" d="M17.613,1624.945H4.195v2.848h13.418V1624.945z
M12.398,1618.805H5.883c-0.469,0-0.867,0.164-1.195,0.492
s-0.492,0.723-0.492,1.184v1.172h8.203V1618.805z
M4.195,1631.086v2.848h14.344c0.469,0,0.867-0.164,1.195-0.492
s0.492-0.727,0.492-1.195v-1.16H4.195z"/>
</g>
diff --git a/templates/Skin.php b/templates/Skin.php
index 5ee49f4..4a70dea 100644
--- a/templates/Skin.php
+++ b/templates/Skin.php
@@ -246,6 +246,8 @@
</ul>
</nav>
+ <a href="javascript:void(0)" id="toc-toggle"></a>
+
<div class="container" id="content">
<h1 class="firstHeading" id="firstHeading">
'.$cx['funcs']['v']($cx, $in, array('title')).'
diff --git a/templates/Skin.template b/templates/Skin.template
index 99a5b5a..5226fb8 100755
--- a/templates/Skin.template
+++ b/templates/Skin.template
@@ -40,6 +40,8 @@
</ul>
</nav>
+ <a href="javascript:void(0)" id="toc-toggle"></a>
+
<div class="container" id="content">
<h1 class="firstHeading" id="firstHeading">
{{{title}}}
--
To view, visit https://gerrit.wikimedia.org/r/197501
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Iff766c43043131d6af8a33bc6bddc4fc4ff3bddd
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/LivingStyleGuide
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
