jenkins-bot has submitted this change and it was merged.
Change subject: Improve sidebar's Less/CSS code by simplifying classes and rules
......................................................................
Improve sidebar's Less/CSS code by simplifying classes and rules
Improving Less compiled code by having fewer nested selectors in CSS output.
Unifying naming of classes, cleaning-up and simplifying CSS rules.
Bug: T114203
Change-Id: I46c83e20dfb269a8a9540bd11d0e47b4af1fbf9d
---
M resources/master.less
M resources/menu.js
M resources/toc.js
M templates/Skin.mustache
M templates/sidebar.mustache
5 files changed, 79 insertions(+), 97 deletions(-)
Approvals:
Spage: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/master.less b/resources/master.less
index 89a3e7e..ac3b30f 100644
--- a/resources/master.less
+++ b/resources/master.less
@@ -1,8 +1,8 @@
/**
* Variables
*/
-@side-menu-border-color: #225196;
-@side-menu-bg-color: #265bb2;
+@sidebar-border-color: #225196;
+@sidebar-bg-color: #265bb2;
// taken from OOjs UI mediawiki/common.less - keep in sync
@box-shadow-menu: 0 0.15em 0 0 rgba(204, 204, 204, 0.5);
@@ -20,11 +20,11 @@
}
a {
- color: @side-menu-bg-color;
+ color: @sidebar-bg-color;
}
h1#firstHeading,
-.side-menu-heading {
+.sidebar-heading {
font: 28px 'Georgia', 'Times', serif;
font-weight: bold;
line-height: 1.25;
@@ -85,47 +85,62 @@
box-shadow: @box-shadow-popup;
}
-/* Offscreen Navigation */
-#side-menu {
- width: 420px;
- height: 100%;
+/* Sidebar Offscreen Navigation */
+.sidebar {
+ background-color: @sidebar-bg-color;
+ color: #fff;
+ display: none;
position: fixed;
- overflow-y: auto;
- border-top: 1px solid @side-menu-border-color;
top: 50px;
left: 0;
- z-index: 0;
- background-color: @side-menu-bg-color;
- display: none;
- color: #fff;
+ width: 420px;
+ height: 100%;
+ border-top: 1px solid @sidebar-border-color;
+ overflow-y: auto;
+ z-index: 200;
- .side-menu-heading {
+ ul {
+ list-style: none;
+ }
+
+ li a {
+ color: #fff;
+ text-decoration: none;
+ }
+}
+
+ .sidebar-heading {
margin: 32px 50px;
font-size: 2em;
}
+ .sidebar-toc {
+ margin-top: 17px; // 32px - 10px (padding on ul) - 5px (padding
on li)
+ padding: 0 50px;
+ font-size: 16px;
+ line-height: 16px;
- ul {
- list-style: none;
- padding: 0;
+ .tocnumber {
+ display: inline-block;
+ min-width: 60px;
+ }
- li {
- padding: 10px 0;
+ .toctext {
+ display: inline-block;
+ width: 200px;
+ }
- a {
- color: #fff;
- text-decoration: none;
+ a {
+ display: inline-block;
+ min-width: 280px;
+ border-radius: 2px;
+ padding: 5px;
+
+ &:hover {
+ background: rgba( 0, 0, 0, .2 );
}
}
}
-
- .sidebar-toc {
- padding: 0 50px;
-
- font-weight: 200;
- margin-top: 17px; // 32px - 10px (padding on ul) - 5px (padding
on li)
- font-size: 16px;
- line-height: 16px;
.sidebar-toc-page > a {
font-weight: bold;
@@ -135,64 +150,18 @@
display: none;
}
- .tocnumber {
- display: inline-block;
- width: 60px;
- }
-
- .toctext {
- float: right;
- display: inline-block;
- width: 200px;
- }
-
- ul {
- margin: 0;
- }
-
- a {
- display: inline-block;
- padding: 5px 10px;
- width: 280px;
- border-radius: 2px;
-
- &:hover {
- background: rgba(0,0,0,0.2);
- }
- }
- }
-
-
- ul.content-links {
+ .content-links {
padding: 0 50px 27px 50px;
margin-top: 30px;
- border-bottom: 1px solid @side-menu-border-color;
+ border-bottom: 1px solid @sidebar-border-color;
li {
- padding: 5px 0;
-
a {
display: inline-block;
- padding-left: 70px;
+ padding: 5px 0 5px 70px;
font-size: 16px;
background-repeat: no-repeat;
background-position: center left;
- }
-
- #ca-view {
- background-image: url(view.svg);
- }
-
- #ca-edit {
- background-image: url(edit.svg);
- }
-
- #ca-history {
- background-image: url(history.svg);
- }
-
- #ca-talk {
- background-image: url(talk.svg);
}
}
/*
@@ -200,22 +169,35 @@
* in the content_navigation.namespace set of tabs.
*/
.mw-skin-bs-cn_ns .selected {
- display:none
+ display: none;
}
}
-}
+ #ca-view {
+ background-image: url(view.svg);
+ }
+
+ #ca-edit {
+ background-image: url(edit.svg);
+ }
+
+ #ca-history {
+ background-image: url(history.svg);
+ }
+
+ #ca-talk {
+ background-image: url(talk.svg);
+ }
-/* Offscreen Navigation */
/* Navbar */
.navbar.navbar-fixed-top {
background: #fff;
- border: none;
+ border: 0;
.navbar-brand {
- background-color: @side-menu-bg-color;
+ background-color: @sidebar-bg-color;
color: #fff;
text-transform: uppercase;
font-size: 0.9em;
@@ -226,7 +208,7 @@
}
.navbar-head {
- border-bottom: 1px solid @side-menu-border-color;
+ border-bottom: 1px solid @sidebar-border-color;
}
.navbar-form {
@@ -294,18 +276,18 @@
/* Navbar */
#toc-toggle {
- background-color: @side-menu-bg-color;
+ background-color: @sidebar-bg-color;
background-image: url( 'menu-clicked.svg' );
background-position: center center;
background-repeat: no-repeat;
padding: 25px;
- border-right: 1px solid @side-menu-border-color;
+ border-right: 1px solid @sidebar-border-color;
}
#extra-space {
width: 0;
height: 50px;
- background-color: @side-menu-bg-color;
+ background-color: @sidebar-bg-color;
}
@@ -326,5 +308,5 @@
.nav li.open.open > a {
// Override bootstrap
- border-color: @side-menu-border-color;
-}
\ No newline at end of file
+ border-color: @sidebar-border-color;
+}
diff --git a/resources/menu.js b/resources/menu.js
index 9a25576..ef380fd 100644
--- a/resources/menu.js
+++ b/resources/menu.js
@@ -1,6 +1,6 @@
$( function () {
var openSidebar, closeSidebar,
- $sideMenu = $( '#side-menu' ),
+ $sideMenu = $( '#sidebar' ),
$tocToggle = $( '#toc-toggle' ),
$extraSpace = $( '#extra-space' ),
$content = $( '#content' );
@@ -14,7 +14,7 @@
$extraSpace.css( 'width', sidebarWidth - navBrandWidth - 10 );
- $sideMenu.show().css( 'z-index', 200 );
+ $sideMenu.show();
$tocToggle.addClass( 'close' );
diff --git a/resources/toc.js b/resources/toc.js
index b19b946..4558f4b 100644
--- a/resources/toc.js
+++ b/resources/toc.js
@@ -1,8 +1,8 @@
$( function () {
- var $appendTo = $( '#side-menu .sidebar-toc-active' );
+ var $appendTo = $( '#sidebar .sidebar-toc-active' );
if ( !$appendTo.length ) {
- $appendTo = $( '#side-menu' );
+ $appendTo = $( '#sidebar' );
}
$( '#toc' )
diff --git a/templates/Skin.mustache b/templates/Skin.mustache
index 327d557..2814cd0 100644
--- a/templates/Skin.mustache
+++ b/templates/Skin.mustache
@@ -1,6 +1,6 @@
{{{headelement}}}
-<div id="side-menu">
+<div id="sidebar" class="sidebar">
{{>sidebar}}
</div>
diff --git a/templates/sidebar.mustache b/templates/sidebar.mustache
index 46d00ac..eb97aa8 100644
--- a/templates/sidebar.mustache
+++ b/templates/sidebar.mustache
@@ -1,4 +1,4 @@
-<h6 class="side-menu-heading">{{titletext}}</h6>
+<h6 class="sidebar-heading">{{titletext}}</h6>
<ul class="content-links">
{{#each content_navigation.views}}
<li>
--
To view, visit https://gerrit.wikimedia.org/r/242425
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I46c83e20dfb269a8a9540bd11d0e47b4af1fbf9d
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/skins/Blueprint
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
Gerrit-Reviewer: Pastakhov <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: Spage <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
