-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
EDIT vector skin dropdown menu style main menu
Current Wikipedia's hamburger menu (the main menu) is a dropdown style that pops over the page content. This takes up less space on smaller screens than our 1.39 version's main menu which expands to 100% width and displace the page content when it appears. Wiki team requested that we try to have something more like current Wikipedia's. I was unable to backport this feature as there was A LOT of changes to the Vector skin. So I tried looking for minimal changes to get something close to the desired behaviour. After quite a bit experimentation, I found that some CSS mods can at least convert the main menu to a dropdown. Though it's not as nice as the official upstream's. Of particular note is that you can dismiss the upstream's dropdown by clicking elsewhere in the page. The CSS changes are standard dropdown menu stuff. The aesthetic borders/transition/width, I copied from upstream. Turns out the main menu is somewhat coupled with the table of content. So I had to make some changes to decouple them. In TableOfContents.less, the changes stop the TOC from jumping when you open the main menu. in screen.less, the change stops a blank sidebar from being created when you open the main menu on TOC-less pages.
- Loading branch information
1 parent
4b3aa8d
commit 5414f95
Showing
4 changed files
with
478 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
115 changes: 115 additions & 0 deletions
115
skins/Vector/resources/skins.vector.styles/components/Sidebar.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| @import '../../common/variables.less'; | ||
| @import 'mediawiki.mixins.less'; | ||
| @import '../layouts/screen.less'; | ||
| @import './checkboxHack.less'; | ||
|
|
||
| .mw-sidebar, | ||
| .sidebar-toc, | ||
| .sidebar-toc:after { | ||
| // Match styles between TOC and fade element to ensure the fade covers the correct area | ||
| // This is expressed in pixels to support different font sizes since our layout is currently | ||
| // expressed in pixels. See T313817. | ||
| width: @width-sidebar-px; | ||
| margin-left: 0; | ||
|
|
||
| @media ( min-width: @min-width-desktop-wide ) { | ||
| width: @width-sidebar-px-wide; | ||
| margin-left: @margin-start-sidebar-content; | ||
| } | ||
| } | ||
|
|
||
| .sidebar-toc, | ||
| .sidebar-toc:after { | ||
| margin-left: -@margin-start-sidebar-content; | ||
|
|
||
| @media ( min-width: @min-width-desktop-wide ) { | ||
| margin-left: 0; | ||
| } | ||
| } | ||
|
|
||
| .vector-sidebar-container { | ||
| position: relative; | ||
| z-index: 50; | ||
|
|
||
| #mw-navigation { | ||
| position: absolute; | ||
| } | ||
| } | ||
|
|
||
| .mw-sidebar { | ||
| box-sizing: border-box; | ||
| // Temporary magic number, will be calculated after TOC specs are finalized | ||
| padding: 12px 19px 12px 9px; | ||
| background-image: none; | ||
| background-color: @background-color-secondary--modern; | ||
| border: 1px solid #a2a9b1; | ||
| box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); | ||
| transition-property: opacity; | ||
| transition-duration: 100ms; | ||
| width: max-content; | ||
| max-width: 200px; | ||
|
|
||
| @media ( max-width: @max-width-tablet ) { | ||
| // Makes the sidebar full screen at lower resolutions. | ||
| width: 100%; | ||
| } | ||
|
|
||
| // Hide sidebar entirely when the checkbox is disabled | ||
| @{selector-main-menu-closed} ~ .vector-sidebar-container #mw-navigation & { | ||
| display: none; | ||
| } | ||
|
|
||
| // Hide #p-navigation label | ||
| #p-navigation .vector-menu-heading { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .mw-sidebar-action { | ||
| // Styles for SidebarAction template. | ||
| .mw-sidebar-action-item { | ||
| // Align with the portal heading/links | ||
| // `.portal` + `.portal .body` | ||
| margin-top: 4px; | ||
| margin-bottom: 4px; | ||
|
|
||
| .mw-sidebar-action-heading { | ||
| margin-bottom: 0.75em; | ||
| } | ||
|
|
||
| .mw-sidebar-action-content { | ||
| > * { | ||
| font-size: @font-size-portal-list-item; | ||
| } | ||
|
|
||
| > a { | ||
| font-weight: bold; | ||
| } | ||
| } | ||
|
|
||
| // T295555 style overrides for temporary language switch alert (can be removed later ). | ||
| .vector-language-sidebar-alert { | ||
| padding: 0.75em; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| #mw-sidebar-button { | ||
| &:before { | ||
| // Equals `#555`, closest to `#54595d` on background-color `#fff`. | ||
| opacity: 0.67; | ||
| /* @embed */ | ||
| background-image: url( images/chevronHorizontal-ltr.svg ); | ||
|
|
||
| @{selector-main-menu-closed} ~ .mw-header & { | ||
| /* @embed */ | ||
| background-image: url( images/menu.svg ); | ||
| } | ||
| } | ||
|
|
||
| &:hover { | ||
| &:before { | ||
| opacity: 1; | ||
| } | ||
| } | ||
| } |
185 changes: 185 additions & 0 deletions
185
skins/Vector/resources/skins.vector.styles/components/TableOfContents.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,185 @@ | ||
| @import '../../common/variables.less'; | ||
|
|
||
| @sidebar-toc-fade-height: 30px; | ||
| @sidebar-toc-vertical-padding: 20px; | ||
| @sidebar-toc-right-padding: 12px; | ||
| // Sidebar TOC uses increased left padding and a negative left margin to achieve | ||
| // a 15px spacing without clipping the chevron icon | ||
| // https://phabricator.wikimedia.org/T312156#8095894 | ||
| @sidebar-toc-left-padding: ~'calc( 15px + @{margin-start-sidebar-content} )'; | ||
| @toc-subsection-toggle-icon-size: 1.834em; | ||
|
|
||
| .mw-table-of-contents-container { | ||
| // Needed for Grid-based layout | ||
| align-self: start; | ||
| height: 100%; | ||
| } | ||
|
|
||
| // FIXME: Remove selector after Ia263c606dce5a6060b6b29fbaedc49cef3e17a5c has been in prod for 5 days | ||
| .mw-table-of-contents-container.mw-sticky-header-element { | ||
| // stylelint-disable-next-line plugin/no-unsupported-browser-features | ||
| position: sticky; | ||
| top: 0; | ||
| // Needed for Grid-based layout | ||
| align-self: start; | ||
| height: unset; | ||
|
|
||
| // Needed to align TOC with bottom of title | ||
| // 1.5em from .mw-table-of-contents-container + 1.5em from .sidebar-toc = 3em | ||
| @media ( min-width: @min-width-desktop ) { | ||
| .vector-toc-not-collapsed @{selector-main-menu-closed} ~ & { | ||
| //margin-top: 1.5em; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .vector-sticky-toc-container { | ||
| // stylelint-disable-next-line plugin/no-unsupported-browser-features | ||
| position: sticky; | ||
| top: 0; | ||
|
|
||
| @media ( min-width: @min-width-desktop ) { | ||
| .vector-toc-not-collapsed & { | ||
| // Default spacing separating the sidebar TOC from the main menu or viewport. | ||
| // Need to use padding in order for the spacing to apply when sticky | ||
| padding-top: 1.5em; | ||
| } | ||
|
|
||
| .vector-toc-not-collapsed @{selector-main-menu-closed} ~ .mw-table-of-contents-container & { | ||
| // Needed to align TOC with bottom of title, 1.5em padding + 1.5em margin = 3em | ||
| //margin-top: 1.5em; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // FIXME: Remove selector after Ia263c606dce5a6060b6b29fbaedc49cef3e17a5c has been in prod for 5 days | ||
| .mw-table-of-contents-container > .sidebar-toc { | ||
| margin-top: 1.5em; | ||
| } | ||
|
|
||
| .sidebar-toc { | ||
| max-height: 75vh; | ||
| padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding @sidebar-toc-left-padding; | ||
| box-sizing: border-box; | ||
| overflow: auto; | ||
| background-color: @background-color-page-container; | ||
|
|
||
| .sidebar-toc-header { | ||
| padding-bottom: 12px; | ||
| } | ||
|
|
||
| .sidebar-toc-title { | ||
| color: @color-base--subtle; | ||
| font-size: @font-size-base; | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| } | ||
|
|
||
| .sidebar-toc-numb { | ||
| display: none; | ||
| } | ||
|
|
||
| .sidebar-toc-toggle { | ||
| // For no-js users, toggling is disabled and icon is hidden | ||
| display: none; | ||
| position: absolute; | ||
| top: 1px; // visually center icon | ||
| left: ~'calc( -1 * @{toc-subsection-toggle-icon-size} - 1px )'; // leaves 6px between icon + text | ||
| width: @toc-subsection-toggle-icon-size; // ~22px @ 12 | ||
| height: @toc-subsection-toggle-icon-size; | ||
| font-size: 0.75em; // reduces size of toggle icon to 12px @ 16 | ||
| transition: @transition-duration-base; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .sidebar-toc-link { | ||
| word-break: break-word; | ||
| color: @color-link; | ||
| display: block; | ||
| } | ||
|
|
||
| .sidebar-toc-list-item-active > .sidebar-toc-link { | ||
| // Highlight active section | ||
| color: @color-base; | ||
| font-weight: bold; | ||
| // increase width to prevent line wrapping due to bold text | ||
| width: ~'calc( 100% + @{sidebar-toc-right-padding} )'; | ||
| } | ||
|
|
||
| .sidebar-toc-text { | ||
| padding: 4px 0; | ||
| } | ||
|
|
||
| .sidebar-toc-contents, | ||
| .sidebar-toc-list { | ||
| margin: 0; | ||
| list-style: none; | ||
| line-height: 18px; | ||
| } | ||
|
|
||
| .sidebar-toc-list-item { | ||
| display: block; | ||
| position: relative; | ||
| list-style-type: none; | ||
| padding-left: 8px; | ||
|
|
||
| &.sidebar-toc-level-1 { | ||
| padding-left: 0; | ||
| } | ||
|
|
||
| a { | ||
| font-size: @font-size-base; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // T302076: Add fade scrollable indicator when TOC is in sidebar | ||
| // Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header | ||
| @media ( min-width: @min-width-desktop ) { | ||
| .vector-toc-not-collapsed .sidebar-toc:after { | ||
| content: ''; | ||
| display: block; | ||
| position: absolute; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| height: @sidebar-toc-fade-height; | ||
| background: linear-gradient( rgba( 255, 255, 255, 0 ), @background-color-page-container ); | ||
| background-repeat: no-repeat; | ||
| background-position: -@sidebar-toc-right-padding; // T311436 Hacky way to prevent the fade from covering the scrollbar | ||
| pointer-events: none; // Make the link below the fade clickable | ||
| } | ||
| } | ||
|
|
||
| // Collapse ToC sections by default, excluding no-js | ||
| .client-js .sidebar-toc { | ||
| .sidebar-toc-level-1 .sidebar-toc-list-item { | ||
| display: none; | ||
| } | ||
|
|
||
| .sidebar-toc-level-1.sidebar-toc-list-item-expanded .sidebar-toc-list-item { | ||
| display: block; | ||
| } | ||
|
|
||
| .sidebar-toc-toggle { | ||
| display: block; | ||
| } | ||
|
|
||
| .sidebar-toc-level-1.sidebar-toc-list-item-expanded .sidebar-toc-toggle { | ||
| transform: rotate( 0deg ); | ||
| } | ||
| } | ||
|
|
||
| .client-js body.ltr .sidebar-toc .sidebar-toc-toggle { | ||
| transform: rotate( -90deg ); | ||
| } | ||
|
|
||
| .client-js body.rtl .sidebar-toc .sidebar-toc-toggle { | ||
| transform: rotate( 90deg ); | ||
| } | ||
|
|
||
| // FIXME: Can be removed when https://github.com/cssjanus/cssjanus/issues/82 is fixed and in production. | ||
| body.rtl .sidebar-toc { | ||
| padding: @sidebar-toc-vertical-padding @sidebar-toc-left-padding @sidebar-toc-vertical-padding @sidebar-toc-right-padding; | ||
| } |
Oops, something went wrong.