From 2337422997ee28a40ff8e10bd894ae02f694c57d Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= Date: Sat, 8 Feb 2014 15:48:54 +0100 Subject: [PATCH] Vector: Show a label next to the actions dropdown menu MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit The little triangle arrow is not clear enough, as evidenced by the number of people who don't discover the page moving functionality hidden in that dropdown. Before: http://i.imgur.com/g2N3tek.png After: http://i.imgur.com/nUsqgqe.png Co-Authored-By: Bartosz Dziewoński Co-Authored-By: Isarra Bug: 44591 Change-Id: I09c8031ccd076228a3c9d720e92e04d40a8d97e8 --- skins/vector/components/tabs.less | 105 +++++++++++++----------------- 1 file changed, 45 insertions(+), 60 deletions(-) diff --git a/skins/vector/components/tabs.less b/skins/vector/components/tabs.less index 7e24ae7884..e43f69a4ef 100644 --- a/skins/vector/components/tabs.less +++ b/skins/vector/components/tabs.less @@ -3,8 +3,7 @@ Styling for namespace tabs (page, discussion) and views (read, edit, view histor */ /* Navigation Labels */ -div.vectorTabs h3, -div.vectorMenu h3 span { +div.vectorTabs h3 { display: none; } @@ -120,21 +119,8 @@ div.vectorMenu { direction: ltr; /* @noflip */ float: left; - .background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png'); - /* @noflip */ - background-position: 100% 60%; - background-repeat: no-repeat; cursor: pointer; - .transition(background-position 250ms); -} - -div.vectorMenu.menuForceShow { - background-position: 100% 100%; -} - -div.vectorMenuFocus { - .background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png'); - background-position: 100% 60%; + position: relative; } body.rtl div.vectorMenu { @@ -142,19 +128,19 @@ body.rtl div.vectorMenu { direction: rtl; } -/* OVERRIDDEN BY COMPLIANT BROWSERS */ div#mw-head div.vectorMenu h3 { /* @noflip */ float: left; .background-image('images/tab-break.png'); background-repeat: no-repeat; - background-position: bottom left; + background-position: bottom right; margin-left: -1px; -} - -/* IGNORED BY IE6 */ -div#mw-head div.vectorMenu > h3 { - background-image: none; + font-size: 1em; + height: 2.5em; + // This effectively moves the "background border" outside of the element to act like a real + // border. It is necessary for the dropdown (div.vectorMenu div.menu) to align well. + padding-right: 1px; + margin-right: -1px; } div#mw-head div.vectorMenu h4, @@ -168,47 +154,51 @@ div.vectorMenu#p-variants #mw-vector-current-variant { border: none; } -/* OVERRIDDEN BY COMPLIANT BROWSERS */ -div.vectorMenu h3 a { - display: inline-block; - width: 24px; - height: 1.9em; - text-decoration: none; - .background-image('images/tab-break.png'); - background-repeat: no-repeat; - background-position: bottom right; -} - -/* IGNORED BY IE6 */ -div.vectorMenu h3 > a { +div.vectorMenu h3 span { display: block; + font-size: 0.8em; + padding-left: 0.7em; + padding-top: 1.375em; + margin-right: 20px; + font-weight: normal; + color: @menu-main-heading-color; } -div.vectorMenu div.menu { - position: relative; - display: none; - clear: both; - text-align: left; +div.vectorMenu h3 a { + position: absolute; + top: 0; + right: 0; + width: 20px; + height: 2.5em; + .background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png'); + background-position: 100% 70%; + background-repeat: no-repeat; + .transition(all 250ms); } -/* OVERRIDDEN BY COMPLIANT BROWSERS */ -body.rtl div.vectorMenu div.menu { - /* @noflip */ - margin-left: 24px; +div.vectorMenu.menuForceShow h3 a { + -webkit-transform: rotate(-45deg) translate(-5px, 5px); + -moz-transform: rotate(-45deg) translate(-5px, 5px); + -ms-transform: rotate(-45deg) translate(-5px, 5px); + transform: rotate(-45deg) translate(-5px, 5px); } -/* IGNORED BY IE6 */ -body.rtl div.vectorMenu > div.menu { - /* @noflip */ - margin-left: auto; +div.vectorMenuFocus h3 a { + .background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png'); } -/* IGNORED BY IE6 */ -/* Also fixes old versions of FireFox */ -body.rtl div.vectorMenu > div.menu, -x:-moz-any-link { - /* @noflip */ - margin-left: 23px; +div.vectorMenu div.menu { + // Match the width of the dropdown "heading" (the tab) + min-width: 100%; + position: absolute; + top: 2.5em; + left: -1px; + background-color: white; + border: solid 1px silver; + border-top-width: 0; + clear: both; + text-align: left; + display: none; } /* Enable forcing showing of the menu for accessibility */ @@ -218,15 +208,10 @@ div.vectorMenu.menuForceShow div.menu { } div.vectorMenu ul { - position: absolute; - background-color: white; - border: solid 1px silver; - border-top-width: 0; list-style-type: none; list-style-image: none; padding: 0; margin: 0; - margin-left: -1px; text-align: left; } -- 2.20.1