Commit graph

138 commits

Author SHA1 Message Date
bwang dbb4868452 Clean up code handling cached HTML for 3 patches
Follow-up: I82f23e69b0249c844af9e45fec342217a0755893
Follow-up: I85aec387f87126a17e760fd9fd10e10572ff3152
Follow-up: Iea0d73005b91589c58ae38a3a640fa90c18a860d

Bug: T318013
Change-Id: I2f231bbaec33bc6072750781c12e85838042dccf
2022-12-09 22:56:34 +00:00
bwang 2e095bd066 Simplify grid styles now that grid is no longer needed to position ToC
Bug: T318013
Change-Id: Id2dda853c18673ee98ca674128f5da5aa8370cc4
2022-12-09 11:51:07 -06:00
Nicholas Ray 24055a6752 Set default pinnable state for page tools
* 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
2022-12-08 14:44:07 -07:00
Jon Robson a7f008b9bc Page tools: Main menu is a dropdown
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
2022-12-07 23:19:29 +00:00
bwang cb64e8f7ba Use PinnableHeader in the TOC all the time
[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
2022-11-30 01:09:43 +00:00
jenkins-bot f4f416a1ce Merge "[Cleanup] Address FIXMES relating to cached HTML" 2022-11-17 17:35:46 +00:00
Jon Robson f31f0bbf50 [Cleanup] Address FIXMES relating to cached HTML
Change-Id: I6f5e97dde1f774e741a4236d1f6b49ad146cc236
2022-11-15 23:23:56 +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 e90b7e341f Add ColumnEnd.mustache and new grid styles to support third column
Bug: T317897
Depends-On: Ibf304843a62d5269992a01eb826edf71ce8d3c35
Depends-On: Ib424ca1c767161fdae8c0aeedfe662b7fa039ff6
Change-Id: Ie7d31df972ff68313b2437ff14b7b6b8d7078204
2022-11-09 11:54:30 -06:00
Nicholas Ray d556f74c4c Fix TOC misaligned when max width option is disable
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
2022-11-08 14:13:32 -07:00
bwang 099eed0487 Remove CSS classes and selectors from cached HTML
Bug: T316570
Depends-on: Ib4050768f20b1734d356104f18aa539f657099d8
Change-Id: I97f87b32402d7f4fd790f9a8b9abab42efd9d890
2022-11-03 11:12:39 -05:00
jenkins-bot 598424b2e2 Merge "Replace incorrectly mw- prefixed classes Rename template and CSS files to match updated naming conventions, replaces instances of "sidebar" with "main menu"" 2022-10-25 22:32:06 +00:00
bwang 51457a78e7 Replace incorrectly mw- prefixed classes
Rename template and CSS files to match updated naming conventions, replaces instances of "sidebar" with "main menu"

Bug: T316570
Bug: T317437
Change-Id: Ib4050768f20b1734d356104f18aa539f657099d8
2022-10-25 10:28:31 -05:00
Jon Robson 614da1dc5e Features: Make max width a feature
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
2022-10-24 13:12:06 -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
Jan Drewniak 98068d9598 Restore navigation landmarks in page toolbar
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
2022-10-03 10:39:39 -04:00
Jon Robson 330dc5f705 Restore unconditional rendering of siteSub with styling modifications
The margin is moved to non-empty elements to avoid extra whitespace
when it is empty

Bug: T315639
Change-Id: I22aa7dbbacc5bc4ac87cffa13113ced9c9400e0b
2022-09-27 15:10:26 -07:00
jenkins-bot 2f25456534 Merge "Followup: clean up cached HTML code from T315595" 2022-09-09 22:32:55 +00:00
bwang 3bf377fa7e Followup: clean up cached HTML code from T315595
Bug: T315595
Depends-on: I39959f43f20880e83bef945a7535d58cfe0b6412
Change-Id: I7afb66d6ee2d67d824266ca7240618afdd200c7f
2022-09-01 18:25:39 +00:00
bwang d949621eb2 Align header icon buttons and main content
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
2022-09-01 12:42:07 -05:00
Jon Robson 69658483bd Reduce specificity of siteSub
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
2022-08-31 13:07:58 -07:00
jenkins-bot b6a6296636 Merge "Reduce dependency on core styles" 2022-08-31 18:08:26 +00:00
jenkins-bot 46b4d86477 Merge "Fix site notice spacing" 2022-08-26 20:51:43 +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
Jan Drewniak 934f65ab57 Add clearfix to .mw-body-subheader
Clears the indicators and subtitle in modern Vector.

Bug: T316134
Bug: T316095
Change-Id: I49a4801320f9680c75b2bdcb6e5704e3db70b38b
2022-08-25 13:34:43 +00: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
Jon Robson dfede899d6 Reduce dependency on core styles
Follow up to Ibf837775d972deb29e9619cc6c12c919aae5155a

Depends-On: Ib5ae640bb260cee46e654228b785c776722c7003
Bug: T316027
Change-Id: I8ab2a554f753348ea2fb0fd4d28053ea17fbe83e
2022-08-24 16:16:01 +01:00
Bartosz Dziewoński 2321eeb054 Vector 2022: Align #contentSub with page title (to the left)
(Visual change)

Bug: T307715
Change-Id: Ic4a8d4d55e132cec5df720fdb38eb47c37c8baf0
2022-08-23 20:51:27 +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
Jon Robson ecbe2c2855 Layout: Restore disabling of max width on certain pages
Bug: T315460
Change-Id: I9bad936c06150cd01d4e60f4a92a5c4d28b5fe16
2022-08-22 10:34:34 +00:00
bwang 0be4664c02 Add back fixed width to main content
Bug: T315653
Change-Id: Iffd3f219e756b82397264f62fb9f88fc82a92ba9
2022-08-19 13:20:20 +00:00
bwang 2d6be2e6f0 Clean up main menu selectors
Change-Id: Icb7595f2ef60108f6eaf6b953f37a291678f793e
2022-08-17 14:08:46 -05:00
Jon Robson 6cd7098d05 [ToC] Content should be centered when TOC is collapsed
Bug: T314579
Change-Id: I8d182893267f740457b7233c38aa4615f08b814f
2022-08-15 14:53:54 -05:00
bwang 8eff2d0501 Follow up: Remove .vector-layout-grid, .mw-workspace-container classes
Bug: T313559
Change-Id: If93860d13fb3161c0b66f7ea9e3e1831b0a2fc1e
2022-08-15 10:10:01 -05:00
bwang d4d50d2dc5 Fix grid blowout bug
Bug: T314756
Change-Id: If1a84f5c3606dab7195a9b0a320e416fba702027
2022-08-08 18:19:23 +00:00
bwang ef2b0a2372 Remove vector-layout-legacy styles and grid feature flag
Bug: T313559
Change-Id: I050d0e243186ba4341accc26f8d644f55ff995b7
2022-08-08 08:22:26 +00:00
bwang e1e9552bf3 Followup contentSub contentSub2 styling
Bug: T311421
Change-Id: I4319142361b83758bbbe3c1a22e9b6ccab47352d
2022-08-03 20:57:35 +00:00
jenkins-bot a4949503f6 Merge "Update #siteSub, #contentSub and #contentSub2 to fix spacing, conditionally render #contentSub and #contentSub2" 2022-08-03 20:16:51 +00:00
bwang b89307c6bb Update #siteSub, #contentSub and #contentSub2 to fix spacing, conditionally render #contentSub and #contentSub2
Visual changes:
- Reduced spacing above #siteSub
- Updated spacing from #contentSub and #contentSub2

Bug: T311421
Change-Id: I7fd78d2c92007b231cfc49af0fbd02a4f74f3901
2022-08-03 01:14:30 +00:00
bwang 7b34e14d25 Page toolbar visual tweaks and code clean up
Visual changes: 11 expected in Pixel
- Elements on the right side of page toolbar are now flush with the rest of the content

Change-Id: Id02cd379687fa292188a447c85951e7a87ade509
2022-07-27 17:10:22 +00:00
bwang 320175d22c Make site banner full width in grid layout
Bug: T312749
Change-Id: Ia888615762a641f98409b11c6448a32897c4c835
2022-07-27 10:01:49 -05:00
jenkins-bot 6ecbd5e970 Merge "Refactor chevron across components + separate watchstar" 2022-07-21 22:01:49 +00:00
Clare Ming 28732cf4f7 Remove Table of Contents feature flag
- Update related selectors, styles.
- Remove unneeded styles.
- Remove link hijack js.
- Simplify hook to only add experiment name to body.

Bug: T310527
Change-Id: I25527261d529a16e28f1b90f2f5af234d26fd40f
2022-07-21 12:41:39 -06:00
Jan Drewniak 3c0559a71d Refactor chevron across components + separate watchstar
Consolidates the CSS responsible for styling chevrons into one
implementation. This removes the need for custom padding and
background positioning for the following components:

- "more" menu
- user menu
- watchstar
- language button
- languge button in sticky header

Instead of absolutely positioning the chevron on these components,
the parent label element is set to `display: inline-flex` so that
the chevron is vertically aligned and given enough space by default.

The watchstar, although not a chevron, is also given the
`display: inline-flex` treatment so that it can be aligned with
other elements in the toolbar.

This new implementation requires splitting the watchstar
component into legacy and modern due to a quirk in Firefox that
causes a bug with the watchstar in legacy Vector.

NOTE: This change causes visual changes due to the difference in
centering the chevrons via flexbox vs percentage positions.

Bug: T308344, T310838
Change-Id: Ie9e0fce1366cd25a5899fee49770de4a09424fe2
2022-07-21 10:14:21 -04:00
Volker E 0c7cc69e30 styles: Replace @top-margin… with @margin-top… variable names
Bug: T313243
Change-Id: Ibdcc50d2a67074bc7b3f28c58baf73ad39db922d
2022-07-19 12:16:28 -07:00
Volker E 8d21f557c1 styles: Use default border-width and border-style vars
Bug: T313243
Change-Id: I8e40fbcff3d739318f6a53104128ed52ef8f294f
2022-07-19 05:11:39 -07:00
Volker E fca7726a17 styles: Apply @background var to Sidebar background
Also de-coupling border and background vars as they are aimed to
be fully replaced by tokens in future.

Bug: T313243
Change-Id: I5b7e46b6d2a0cc6975cb3c760645eaf2d5d30de5
2022-07-19 04:35:09 -07:00
Jon Robson a3905e9acd CSS cleanup: Revise CSS that is no longer needed per FIXME guidelines
Bug: T311773
Bug: T308344
Change-Id: Idf943449b5e4358749be47435b3032215e533353
2022-07-11 15:43:44 +00:00
Jon Robson e8130d6628 Layout: Fixes table of contents alignment issues
This patch also adds some grid variables to be reused

Bug: T311793
Change-Id: Ib985e929b5ff013dfe9dcff1d0f33cebc24bbed6
2022-07-05 21:11:47 +00:00