This introduces a general scroll-padding-top value of 50px
for Vector 2022's HTML element.
This changes makes it so that when navigating sections via the
TOC, the section headings are 50px lower on the screen.
This change has been synced with the ToC active sections as well,
so that active sections become active at the same offset.
Bug: T314419
Change-Id: I99e5fe2047f5ad1e61ef51b6ba7e76a6cac36fc5
Follow up to I3484a790ce8ebadf21054ac1d222d5632b2dc5a4
__Template__
The template is not particularly useful - it is only ever
used once in this context and features a static ID which means
it can never be reused. It is also tied to the #vector-toc-collapsed-checkbox
element. In current form it doesn't make sense to have this template.
Maybe in future, I could see an argument for a PinnableTableOfContents component
that wrapped the checkbox and nav element, and generalized the IDs but
currently there's no pressing need or value for that.
__Layouts__
The existing Pinned and Unpinned stylesheets are concerned with how the table
of contents is layed out holistically with regards to other components and
features enabled on the page. I think these should therefore be organized as such.
The way I reason with this, is these styles would be irrelevant in a component
library if the component was rendered in isolation.
Bug: T328719
Change-Id: I9ff0e0eeb35f215a8cae5950d08dc1277b662a71
- We had to add nav element to wrap TOC in all places
- Make sure proper nav is only displayed so landmark do not get confused
- Remove Eslint block on rules compat/compat for no support IE 11, this was blocking commit
- Run lint:fix:js and lint:fix:styles
- Fix maxSize in bundlesize.config.json
Bug: T324505
Change-Id: I36d26240b87de33318ff1edf97a410872a438103
To improve user experience when using gadgets and extensions that
cause layout shifts after page load, we want the anchor node selection
algorithm to only pick nodes in the content column or spanning full
width of the page.
Bug: T330108
Change-Id: Id996f766a535a487fb6bafe6a06a98d1a60ac8e3
Per T318169#8601576, the space between the top of the TOC and Page tools to the
top of the viewport or bottom of the sticky header should be 30px.
* Revises the page tools columnEnd grid to begin at the top of the titlebar to
enable 30px of top padding on the page tools
* Consolidates some styles in TableOfContentsPinned.less
VISUAL CHANGE: table of contents moves down page.
Bug: T318169
Bug: T319315
Change-Id: If8d8f87942d6265461b1a1a8ccf1c447d6e8b0d6
Move feature classes to HTML element - this is significant
for anonymous as placing the classes on the body tag breaks
the browser's ability to parse the article concurrently
with the stylesheet download, because inline scripts
are spec'ed to be able to see document.styleSheets.
Changes:
* Feature classes are moved from BODY tag to HTML tag
* For now disable localStorage storage until we've worked out
the storage mechanism in core.
Bug: T321498
Change-Id: Id5afe2c60dc0067e7c74433eda5cd7858f54b0d7
Adds an extra grid area for content translation
so that it doesn't interfere with the page header
on user contribution pages.
Bug: T327715
Change-Id: I68d2c9dbe50dcdfe1924f29a96b48ab07bcc5f10
- Addresses "when pinned, can we maintain the alignment between the search bar and the article title for larger screens?"
https://phabricator.wikimedia.org/T324877#8499980
Bug: T324877
Change-Id: I7d3447cccdff40fc5a5e0b8978c17db8ffab065c
Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway
Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector.
"sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term
Bug: T324877
Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
- Register new feature for main menu pinned
- Update UserPreferenceRequirement to optionally handle default config values
- Add nav landmarks for the main menu
Bug: T317900
Change-Id: I8fc6e0a79a1155d68afb9e33e5101a2a160dc4e5
* Leverage the infrastructure around feature management to handle the page tools
pinning and persistence
* Make pinnableHeader.js leverage features.js if the data-feature-name attribute
is set
* Sets tests/.eslintrc.json ecmaVersion to 2018 to enable destructuring in test
files.
* Adds a isPinned helper method to pinnableElement
* Add a logged in requirement so that the pinned feature is disabled for
anon users.
Bug: T322051
Change-Id: Ib86282216882fa94e37b7088a3f4bd0c1bcf6cd4
This is an incomplete styling of the menu.
This should be enough to start an initial design
review and unblock other work on the dropdown.
Out of scope for this patch:
- Pinning (being done in T317900)
- Design (will be done in follow up)
This should cause no visual regressions in Pixel.
Bug: T317899
Change-Id: Id7b47cc16fc8cf93d406687198ba37acf7a9cf24
[Visual Changes in this patch]
This patch introduces changes to whitespace inside the Mustache template
which corresponds to an HTML change, resulting
33 minor changes in pixel, the spacing of the ToC label shifts by
1 pixel
- Remove page tools feature flag from TOC
- Remove usage of .vector-toc-collapsed and .vector-toc-not-collapsed
- Remove now unused `moveToc()`
- Update jest tests to use PinnableHeader
Bug: T318013
Change-Id: I82f23e69b0249c844af9e45fec342217a0755893
Since the TOC container is overlaid on top of the content container when the TOC
is not pinned, we always want the width of those two containers to match or else
misalignment could occur. This commit keeps the
`.mw-table-of-contents-container` selector in sync with the
`.mw-content-container` selector in terms of width.
Bug: T322162
Change-Id: I2fe26dc616cc46e1b3c9ce4f2ac63a23da415fa9
Rename template and CSS files to match updated naming conventions, replaces instances of "sidebar" with "main menu"
Bug: T316570
Bug: T317437
Change-Id: Ib4050768f20b1734d356104f18aa539f657099d8
Making this a feature part of the feature management system is integral
to making this a toggle and will allow us to explore making this
persistent in future.
Bug: T319447
Bug: T319449
Change-Id: I80c7b892a6891094854b4154db90917b67986102
Visual changes:
- Footer text and border is aligned with header icons
- Main page content has no padding, slightly wider on certain pages/viewports
Bug: T317573
Change-Id: Id0c4343b8bc4c16006c0b9abd914213ca2f307ca
Adds landmarks to the article toolbar
- Namespace navigation
- View navigation
- More options navigation
Removes the "tools" landmark and associated
aria-label (and translation message).
Makes the #left-navigation and #right-navigation
flexbox to ensure the new <nav> elements, along with
gadgets, align on one line. Moves the styles for
these elements from screen.less to ArticleToolbar.less.
Bug: T317440
Change-Id: Iceff337b0e250c1f368dbaea6cc41a977d8ee868
Technical changes:
- Increase @padding-horizontal-content to align content
- Rename @padding-horizontal-page-container and @padding-horizontal-page-container-wide to @padding-horizontal-page-container-desktop and @padding-horizontal-page-container-desktop-wide respectively
- Replace "gutter" grid area with column-gap
- Clean up TOC styles
Visual changes:
- Below 1000px the header icons spacing is updated
- Above 1000px the page titlebar and articlebar right space is updated
Bug: T315261
Change-Id: I7f51ab3b9613c359db62e918051e942c5c6c878b
Follow up to I8ab2a554f753348ea2fb0fd4d28053ea17fbe83e
It should be possible to enable the #siteSub element with
a simple #siteSub { display: block; }. When moving these styles
from core we have made them more specific and harder to override
Bug: T316027
Change-Id: I4009c67e97ed0e718c28a1fa18c0059075b7a8a7
