Commit graph

57 commits

Author SHA1 Message Date
bwang 1b4376c946 Reintroduce h2 to Table of contents label
Depends-on: I752eadc9bf54d58c799060a9eaefa0b125dd7952

Bug: T320451
Change-Id: Ic4ca5490a9a33cb319821bbdaa57d29f0ed9c887
2022-11-17 19:26:44 +00:00
bwang 0f7411bdf2 Update TOC to use PinnableHeader
- Update 'collapsed' naming convention to 'pinned'
- Introduce VectorComponentPinnableHeader

Bug: T317897
Change-Id: I752eadc9bf54d58c799060a9eaefa0b125dd7952
2022-11-15 16:37:50 -06:00
bwang 6bff0011c1 Fix ToC dropdown menu spacing when visual next flag is enabled, address icon related feedback
Causes 20 visual progressions regardless of visual next flag, the ToC moves 1px when in the sidebar

Follow up to If3aed0ac401b0abc80c3ad52806eb85b33d43f06

Bug: T321504
Change-Id: I4b3ec90d8e79791a1bf17ba02c9f9d722499bec8
2022-11-11 18:56:12 +00:00
Jon Robson ea07136e73 Fix alignment between icons on left and right of screen
- Table of contents arrows are now aligned with sticky header search/hamburger
- The user menu dropdown now aligns with more and languages button

Bug: T321504
Change-Id: If3aed0ac401b0abc80c3ad52806eb85b33d43f06
2022-11-04 17:06:48 +00:00
Jan Drewniak 8c63ac7c55 Align text of main menu and ToC to main menu button
Instead of aligning the edge of the main menu and
ToC with the edge of the main menu button, this
aligns the text of those sidebar items with the
edge of the main menu button.

NOTE: Currently not working with the
vectorvisualenhancementnext feature flag enabled.
This will be addressed in If3aed0ac401b0abc80c3ad52806eb85b33d43f06

Bug: T317583
Change-Id: I01f639c5ca63ac50235dc21ca5273c91213f041c
2022-11-01 16:30:01 +00:00
Jon Robson a1199a0917 Use standard utility classes for flushing icons left and right
Restricted to the feature flag (?vectorvisualenhancementnext=1)
 for now to allow us to not worry about caching.

mw-ui-icon-flush-left and mw-ui-icon-flush-right have been in core
for some time and using them means we don't have to manage hardcoded
values for these.

We'll need to think of .mixin-vector-flush-left-left
and .mixin-vector-flush-right-margin-left separately - I wonder
if these could be revised to use these 2 standard classes.

Additional changes:
- Drop unused mixin-vector-flush-right-margin-left mixin

Bug: T321504
Bug: T317583
Change-Id: I51f8e31be6771a3fb32fb07dc22d0c2872b5706d
2022-10-26 10:01:12 -07:00
bwang 7c172531c2 Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles
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
2022-10-05 10:30:12 -05:00
Jon Robson 785926d8ba Technical: Generalize icon flushing
This code is not resilient to changes in the mw-ui-icon definition
In preparation for changing touch areas we need an easy way to
flush these correctly based on feature flag.

No expected visual changes.

Bug: T314323
Change-Id: Ia10a7c696c690887a37851684215e515474fbd90
2022-09-30 20:12:14 +00:00
bwang 600dd1496a Style active top level section differently than ordinary active TOC sections
Bug: T316032
Change-Id: I662a03f7f7b1e1fb65c365b3db6096cae75fdeb2
2022-09-20 16:57:53 -05:00
jenkins-bot 3e5c89df2b Merge "Table of contents: Hide accessible label using color transparent" 2022-09-19 22:51:49 +00:00
Jon Robson 5aadd9f578 Table of contents: Hide accessible label using color transparent
This is showing up in non-screen readers on Bengali wiki

Bug: T314652
Change-Id: I30ec573ae3de4811690183007282ef5f30c228b3
2022-09-19 12:56:19 -07:00
Moh'd Khier Abualruz 5a32955311 [RTL, TOC] The arrow before collapsible sections in sidebar is clipped
The table of contents has since been reflected to
not use calc statement anymore and pre-calculate the value,
cssjanus flips this value properly so this rule can safely be removed.

Bug: T314652
Related-To: I75dd87536f70da55c9fa7e0e29ed6b4040d2ddf4
Change-Id: Ibb390589f449bc20c6f38f66c1e617fa3fa82aab
2022-09-19 19:52:38 +00:00
bwang fd783b0499 Update collapsed TOC menu width
Visual changes:
- Collapsed TOC menu width depends on TOC content, with a max width of 51em or 75vw
- Collapsed TOC menu in sticky header no longer has a horizontal scrollbar

Bug: T316056
Bug: T316609
Change-Id: I1da9c16366b55c77ef13bac899ed8ecb2d77fdb9
2022-09-15 17:37:28 +00:00
bwang 6b7197cf95 Followup: Removed code for cached HTML from T313060
Bug: T313060
Depends-on: Ia263c606dce5a6060b6b29fbaedc49cef3e17a5c
Change-Id: I0626f5c8d92836ecac961bbe213ffd8b0f0e2df5
2022-09-12 21:47:48 +00:00
bwang cdae8b1937 Align language button
- Add margin-right to language button
- Remove @margin-start-sidebar-content CSS variable as it's name isnt accurate anymore, and its value is derived from @icon-padding-md

Bug: T315615
Change-Id: I75dd87536f70da55c9fa7e0e29ed6b4040d2ddf4
2022-09-07 09:47:55 -05:00
bwang 9c6f6709c6 Create new sticky toc container
Bug: T313060
Change-Id: Ia263c606dce5a6060b6b29fbaedc49cef3e17a5c
2022-08-31 21:27:06 +00:00
bwang 1c8af16dfb Replace body:not( .vector-toc-collapsed ) with .vector-toc-not-collapsed class
Follow up to Ibf837775d972deb29e9619cc6c12c919aae5155a

Change-Id: Ib50f6e4a61a09f54763a740bd12cdae3ee63abef
2022-08-31 19:05:50 +00:00
bwang 8ad777b896 Fix site notice spacing
- Removes grid row gap in favor of margins
- Add container div around site notice to allow margin collapsing

Bug: T315595
Change-Id: I39959f43f20880e83bef945a7535d58cfe0b6412
2022-08-25 11:13:57 -05:00
jenkins-bot 0e7c32827d Merge "Revert "Remove grid row gap in favor of margins"" 2022-08-24 17:13:31 +00:00
Jdlrobson 3d719455c4 Revert "Remove grid row gap in favor of margins"
This reverts commit b63244f367.

Reason for revert: Per standup this morning we'll revert this so
that we are back to a known state, and try this again in a second
attempt.

Change-Id: Ie1349fecbab6c49ce63d328aba08162d74145cb9
2022-08-24 16:54:31 +00:00
jenkins-bot 6e30fa2c00 Merge "TOC with bold text." 2022-08-23 12:47:58 +00:00
bwang b63244f367 Remove grid row gap in favor of margins
Bug: T315595
Change-Id: Ibf837775d972deb29e9619cc6c12c919aae5155a
2022-08-22 15:49:00 -05:00
Moh'd Khier Abualruz ff73b36780 [RTL, TOC] The arrow before collapsible sections in sidebar is clipped
* Temp solution for quick fix
* Full solution should be supplied by cssjanus PR shortly after

Bug: T314652
Change-Id: Ic3ac53f884bc1b9bc14c951b7348e2bf263065a2
2022-08-22 08:13:58 +00:00
Jan Drewniak e3896ab96d TOC with bold text.
The width of the active link is increased via calc to reduce the
chances that the line will wrap because of the bold text.

Bug: T314670
Change-Id: I58aa72871b7d80c8342df60478894dafcf448ae7
2022-08-18 17:04:30 +00:00
bwang 006ea3517b Add collapsed TOC to sticky header by moving the TOC
Visual changes:
- TOC icon in sticky header
- Small update to the narrow screens collapsed TOC spacing when open

Bug: T311103
Depends-on: Ic94fda79bd14856ccda14985d5860aa54d3118d0
Change-Id: I977092f951ba2843816609e706bce4b99583f623
2022-08-11 11:25:21 +00:00
Clare Ming eb597645c3 Refactor TOC A/B test to bucket users on backend
- Include temporary feature requirement for TOC A/B test.
  - Assumes 100% of logged-in users with even/odd user ids
  being assigned to treatment/control buckets respectively.
  - Sampling rates passed in by config are not considered
  during bucketing.
- Update hook for adding needed TOC A/B test body classes.
- Add test for temp feature.

Note: the temporary feature requirement and associated hooks
should be removed once the 2nd TOC A/B test concludes.

Bug: T313435
Change-Id: If9c75235614af289cd50182baab29bec3155eb81
2022-08-08 15:50:28 -06:00
bwang 2d9585c8e3 Table of contents: Update TOC styles
Visual changes:
* Changes to table of contents text alignment and padding

Bug: T312156
Change-Id: Icfde60d053a786054de6608f2ed4f0b1b5b5b252
2022-07-21 22:30:35 +00:00
bwang 42f863a936 TOC: CSS clean up and spacing fix
- Update TOC bottom padding to match spec in T304166.
  Before (30px): https://phabricator.wikimedia.org/F35312302
  After (20px): https://phabricator.wikimedia.org/F35312299
- Rearrange/combine some selectors in TableOfContents.less
- Delete some unnecessary styles/selectors
- Rename variables in TableOfContents.less

Change-Id: Ifffc434dcab4256a0c3ae8faf43a342935b820ff
2022-07-08 19:36:19 +00:00
Clare Ming c18c9856b5 TOC scrollbar should not fade
Bug: T311436
Change-Id: I50e2d82982515f045596c1a19dd7f9932cde25ef
2022-07-08 13:03:39 -05:00
bwang 8a88f61e89 Introduce media query breakpoint variables and replace all media query usage with new variables
Pixel shows 15 regressions, these are expected changes that are
fixing issues on specific viewports that fixes the following:

[At exactly the tablet breakpoint]
* the more menu dropdown was being
shown at the same time as the other menu items, resulting in duplicates
(see https://phabricator.wikimedia.org/F35285379)

[At exactly the desktop breakpoint]
* The table of contents AND the
table of contents toggle button to the left of the title were showing
(see https://phabricator.wikimedia.org/F35285392)
* The sticky header was not showing
* The fly out table of contents was showing instead of the sidebar
table of contents on scroll
* The top of the sidebar is brought into alignment with the tabs
(see https://phabricator.wikimedia.org/F35285408)

Bug: T310536
Change-Id: I6e870a032c8ba4ec003d00ff3f91732aaa2f38b0
2022-06-28 23:19:52 +00:00
Clare Ming b6e76eb797 Show scrollbars in sticky TOC
Bug: T310540
Change-Id: I36af416901f9fde268f59a3e3fd690b743748514
2022-06-16 10:19:04 -06:00
Ebrahim Byagowi aebd782d75 i18n: Use correct direction for collapse Table of Contents
Collapse Table of Contents has incorrect direction for RTL, this fixes it.

Bug: T309478
Change-Id: I43f2d225aed7c3a74e35f8e72c1e261b39af9737
2022-05-30 02:37:10 +04:30
Volker E e4d8c573a9 styles: Replace deprecated Less .box-sizing() mixin with standard CSS
Bug: T306488
Change-Id: I299e50397c4bf6f99b9892e83c966fffadd24048
2022-05-12 13:41:30 -07:00
bwang cdc46e70da Fix TOC fadeout placement
Bug: T306893
Change-Id: Ib6fa8836948b6d6f202eb5365ae660acf210b473
2022-05-04 23:37:43 +00:00
jenkins-bot a68409d262 Merge "[TOC] Remove pointer-events:none on .sidebar-toc-link" 2022-05-04 19:38:32 +00:00
Jon Robson 9c26833af6 Adjust table of contents margins at 1000-1200 breakpoint
Bug: T307004
Change-Id: Ibb7be459305eaee57503d4efd67e19cd0f00046b
2022-05-04 16:04:33 +00:00
Jan Drewniak 7e81c26712 [TOC] Remove pointer-events:none on .sidebar-toc-link
Previously, we relied on setting pointer-events:none on all child
elements of ToC links.

This propagated the click event up to the link itself in Javascript
and allowed us check if an element with the class `.sidebar-toc-link`
was clicked.

Unfortunately as of Chromium 101 this approach causes the entire link
in the sidebar to be unclickable.

Instead, this patch checks if the ToC link or any of it's children
have been clicked (using the less efficient `Element.closest()` ).

Bug: T307271
Change-Id: I2264b7862f6e1ef50c5c722daee81acc39eea54e
2022-05-02 19:48:30 +00:00
bwang b075c90f60 Update TOC heading and link styles
Bug: T306562
Change-Id: Iafe335547a1e3c432efce303b5c0e5f8f5a23a15
2022-04-28 13:32:59 -05:00
bwang 61eec96090 Add word-break CSS to TOC links
Bug: T306913
Change-Id: I95420c837a779a85e55c20c7a9d1ae74b632c6cf
2022-04-27 19:24:18 +00:00
bwang ea64b86f33 Enable collapsible TOC sections for user with preferred reduced motion
Bug: T306652
Change-Id: Ia94b9dd32484f5f8b4c8bfe28d7c5b1f303855bf
2022-04-26 23:38:14 +00:00
Jon Robson 7d75bb37ad [ToC] Increase threshold for ToC collapsing to 1000px
Bug: T306904
Change-Id: Ib3ad66a8f4ccf9c5ba323031821d6e681069bde5
2022-04-26 17:46:51 +00:00
Clare Ming f12659fff6 Layout + visual style changes for sticky TOC
- Layout updates per design review.
- Visual updates per design review.

Bug: T304166
Bug: T305069
Change-Id: I2f95d5938674bb8263b6203c5f6a469762bf0cc2
2022-04-15 10:24:46 -06:00
jenkins-bot e527168978 Merge "Force legacy TOC to render at lower resolutions" 2022-04-07 23:39:14 +00:00
Clare Ming b24cf900fe Force legacy TOC to render at lower resolutions
- If TOC A/B test is enabled, page is in treatment group, and
viewport is below tablet, force legacy TOC to render.
- If TOC A/B test is disabled and new TOC feature is enabled,
and viewport is below tablet, neither TOC should render.

Bug: T300975
Change-Id: Ib30c3473eb47d6ac60924f40ccd0e42d29625407
2022-04-07 15:06:30 -06:00
Clare Ming 805c6c97c2 Remove TOC margin to not always show fade out
Bug: T302076
Change-Id: I06dd5fc56c30299aceeae46b16d3ebd3e3cf11aa
2022-04-07 11:49:47 -06:00
Clare Ming a0b1b5b056 Fix TOC fadeout proper
Bug: T302076
Change-Id: I247a1a92e6eaa3413053514866966393ff3c1964
2022-04-06 16:25:07 -06:00
Clare Ming 83f324e863 Add fixes for sticky TOC fade out
Bug: T302076
Change-Id: I9fffb17e60182ef2d667ed86218b8f24e1d76f5c
2022-04-05 13:52:40 -06:00
Clare Ming 1d574b86f1 Add fade to indicate scrollability in TOC
Bug: T302076
Change-Id: Ib803239602333e2a8232a26a10477a0f9933b819
2022-03-28 15:58:26 -06:00
Jon Robson 826a97db0e Table of contents should be hidden at lower resolutions
There should be no left margin on article content.

Bug: T298898
Change-Id: I92dafcc8f1bbd0dc4a21c20035b829198c18e8cb
2022-03-21 21:17:21 +00:00
jenkins-bot 9205554552 Merge "Render sidebar menu above TOC" 2022-03-03 00:26:38 +00:00