mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-27 17:10:19 +00:00
Refactor Vector tabs layout for reduced size & complexity
NOTE: this introduces a visual regression in the mobile viewport in that the more menu. Given this viewport is still experimental, after talking to Jan we agreed to address this in a follow-up. Fix for iOS Safari 13 & 14 (T309223): - Replaces flex-box layout from the top-level #right-navigation and #left-navigation tab elements with floats. Then for vertical alignment, sets the child <li> elements and <a> elements to inline block. Opportunistic refactor (T308344): - Moves the font-size rules to top-level #left/right-navigation, but leaving them as-is for legacy Vector. - Removes a (seemingly) unnecessary `display:none` rule from Vector 2022, which previously applied to H3 labels in the sidebar, which are no longer targeted by the styles in MenuTabs.less. - Removes an unnecessary selector and duplicated rules from ArticleToolbar.less This change fixes a flexbox issue on iOS Safari 13 & 14, but also reduces the CSS bytesize of the skins.vector.styles module by 0.9kB (uncompressed), from 54.2kB in the previous commit to 53.3kB with this commit. Expected visual changes: * The tab underline now overlaps with the toolbar underline, and text pushed down on certain tabs * The variant tab is now equally spaced * Right navigation tabs slightly shifted to the right Unexpected visual changes: * More menu shifts to the left [see note at top of commit, will be fixed in a follow up] Bug: T309223 Bug: T308344 Bug: T312212 Change-Id: I77f3dd8e8ccfe3a1d9693746106d9783cc0d38b9
This commit is contained in:
Jan Drewniak
Jdlrobson
parent
cf3d3b453f
commit
0c5e6ed9fe
|
|
@ -7,7 +7,6 @@
|
|||
float: left;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
line-height: 1.125em;
|
||||
|
||||
.vector-menu-heading {
|
||||
color: @color-base--subtle;
|
||||
|
|
@ -44,6 +43,7 @@
|
|||
.vector-menu-content {
|
||||
background-color: @background-color-base;
|
||||
list-style: none none;
|
||||
line-height: 1.125em;
|
||||
// Match the width of the dropdown "heading" (the tab)
|
||||
min-width: 100%;
|
||||
position: absolute;
|
||||
|
|
@ -84,10 +84,6 @@
|
|||
display: block;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
span:not( .mw-ui-icon ) {
|
||||
font-size: @font-size-tabs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -125,7 +121,6 @@
|
|||
padding-top: 1.25em;
|
||||
padding-left: 8px;
|
||||
padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
|
||||
font-size: @font-size-tabs;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,13 @@
|
|||
}
|
||||
|
||||
.vector-menu-dropdown {
|
||||
line-height: 1.125em;
|
||||
|
||||
li {
|
||||
span:not( .mw-ui-icon ) {
|
||||
font-size: @font-size-tabs;
|
||||
}
|
||||
|
||||
a {
|
||||
// Historic value.
|
||||
padding: unit( ( 8.125px / @font-size-browser ), em );
|
||||
|
|
@ -38,6 +44,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.vector-menu-dropdown-noicon .vector-menu-heading {
|
||||
font-size: @font-size-tabs;
|
||||
}
|
||||
|
||||
#mw-head .vector-menu-dropdown .vector-menu-heading {
|
||||
// Tab separator: Outer end (right in LTR) border of "Actions" menu.
|
||||
background-position: right bottom;
|
||||
|
|
|
|||
|
|
@ -2,43 +2,18 @@
|
|||
|
||||
@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
|
||||
|
||||
.vector-article-toolbar .mw-article-toolbar-container {
|
||||
display: flex;
|
||||
.mw-article-toolbar-container {
|
||||
border-bottom: @border-tabs;
|
||||
|
||||
a {
|
||||
// The hover effect is on `li` elements.
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
/* Targets #left-navigation and #right-navigation */
|
||||
& > div {
|
||||
font-size: @font-size-tabs;
|
||||
}
|
||||
|
||||
@media ( min-width: @min-width-desktop-wide ) {
|
||||
padding-right: @padding-horizontal-tabs - 1px;
|
||||
}
|
||||
|
||||
#right-navigation {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: end;
|
||||
// Layout correction - as it was before introduce of flex box.
|
||||
margin-right: -1px;
|
||||
|
||||
@media ( min-width: @min-width-desktop-wide ) {
|
||||
margin-right: -@border-base-ems * 3;
|
||||
}
|
||||
}
|
||||
|
||||
#left-navigation {
|
||||
display: flex;
|
||||
|
||||
// Layout correction - as it was before introduce of flex box.
|
||||
@media ( min-width: @min-width-desktop-wide ) {
|
||||
margin-left: @border-base-ems * 3;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-portlet-views {
|
||||
display: none;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,85 +5,61 @@
|
|||
* Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
|
||||
*/
|
||||
|
||||
/* Namespaces and Views */
|
||||
/* Tab list items */
|
||||
.vector-menu-tabs {
|
||||
// Tab separator: Outer start border (left in LTR) of tab row.
|
||||
float: left;
|
||||
height: 2.5em;
|
||||
padding-left: @border-width-base;
|
||||
|
||||
/* Navigation Labels */
|
||||
.vector-menu-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
float: left;
|
||||
height: 100%;
|
||||
list-style: none none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
// Tab fade background: Fade inside from light grey to white.
|
||||
float: left;
|
||||
display: block;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
line-height: @line-height-nav;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
|
||||
&:first-child a {
|
||||
margin-left: 0;
|
||||
// Make first and last elements flush with edge of header.
|
||||
&:first-child {
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
&:last-child a {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
// Tab separator: Border between tabs and outer right border.
|
||||
color: @color-link;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
float: left;
|
||||
height: unit( 40 / @font-size-tabs / @font-size-browser, em );
|
||||
position: relative;
|
||||
padding-top: 1.25em;
|
||||
margin: 0 @padding-horizontal-tabs;
|
||||
font-size: @font-size-tabs;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.new {
|
||||
a,
|
||||
a:visited {
|
||||
color: @color-link-new;
|
||||
}
|
||||
/* focus and hover have outlines. Text underline interferes with bottom border */
|
||||
li a:focus,
|
||||
li a:hover {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.selected {
|
||||
a {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: @color-link-selected;
|
||||
}
|
||||
.new a,
|
||||
.new a:visited {
|
||||
color: @color-link-new;
|
||||
}
|
||||
|
||||
.icon {
|
||||
a {
|
||||
background-position: right bottom;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.selected a,
|
||||
.selected a:visited {
|
||||
color: @color-link-selected;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Tab link appearance, applies to
|
||||
* - <a> inside vector-menu-tabs (e.g. read, edit, view, history)
|
||||
* - vector-menu-dropdown headings (e.g. more menu, language variants, gadgets)
|
||||
*/
|
||||
.vector-menu-tabs li a,
|
||||
.vector-article-toolbar .vector-menu-heading {
|
||||
display: block;
|
||||
position: relative;
|
||||
// Top bottom padding to increase clickable area.
|
||||
padding-top: 18px;
|
||||
padding-bottom: 7px;
|
||||
// left & right margin separate bottom border between words,
|
||||
// bottom margin makes link border overlap toolbar border.
|
||||
margin: 0 8px -1px 8px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue