Refactor Vector tabs layout for reduced size & complexity
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]
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.
NOTE: Update addresses the reason for revert 5599cf2 and compatibility
with CSS Grid layout by adding a clearfix (display:flow-root)
for #right-navigation and #left-navigation elements inside toolbar.
Bug: T309223
Bug: T308344
Bug: T312212
Change-Id: I1482a81d16c53e0ba1977b0d98ba8c8a21362a6c
This commit is contained in:
Jan Drewniak
parent
1ebf8c148d
commit
4ab2b1bff1
|
|
@ -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,20 @@
|
|||
|
||||
@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 {
|
||||
// clearfix for #left-navigation and #right-navigation
|
||||
display: flow-root;
|
||||
border-bottom: @border-bottom-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,86 +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 {
|
||||
// FIXME: Those need a color to be set in order to not show user choice in certain OS.
|
||||
border-bottom: @border-width-base @border-style-base;
|
||||
text-decoration: none;
|
||||
}
|
||||
&: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: @border-width-base @border-style-base;
|
||||
}
|
||||
|
||||
.selected {
|
||||
a {
|
||||
border-bottom: @border-width-base @border-style-base;
|
||||
}
|
||||
|
||||
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: @border-width-base @border-style-base;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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: @border-width-base @border-style-base transparent;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue