Commit graph

220 commits

Author SHA1 Message Date
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
jenkins-bot 197fab6905 Merge "Remove tablet specific styles for collapsed TOC, and misc CSS clean up" 2022-07-01 17:53:35 +00:00
bwang a84549f243 Remove tablet specific styles for collapsed TOC, and misc CSS clean up
This patch also fixes a regression for non grid layout Vector on tablet viewports when the sidebar and collapsed TOC is open
https://jmp.sh/xZhkU6q

No pixel regressions

Change-Id: Ic371f9b7ddd017af835565834e26a65ad3c2afc8
2022-07-01 15:25:34 +00:00
Jon Robson d8a66f0d49 Layout: Fixes content alignment issues
Bug: T311793
Change-Id: I256750d546e2ab818bca1f153a2b6a675db79a54
2022-07-01 14:54:10 +00:00
Jdlrobson e16a8e4775 Revert "Layout: restore sticky toc behavior by adding additional TOC container"
This reverts commit 3a26cc220c.

Reason for revert: Pixel flagged a UI regression relating to this change https://phabricator.wikimedia.org/F35291665

Change-Id: Id0b3d13da7dfbd8a55605e9f1fae157fe45abd2f
2022-06-30 22:53:19 +00:00
bwang 3a26cc220c Layout: restore sticky toc behavior by adding additional TOC container
Fix sticky behavior changed by impacted by e23fc1f

Change-Id: I7ead5e1d5954f772a533e1116f8c55d2d9cfd143
2022-06-30 21:40:14 +00:00
Jon Robson 615181154c Layout: Grid columns are restricted to desktop views
On tablet, where the table of contents is hidden, the
sidebar should take up the full screen when open.

Fixes Pixel regression
MediaWiki_Test_vector-2022_sidebar-open_0_html_1_tablet.png

Bug: T303484
Change-Id: Ie0aa9f661a652e137d691a1fa4b05e69f0c5f8ab
2022-06-30 20:30:20 +00:00
bwang e23fc1fe11 Grid: fix footer styles
Fixes https://phabricator.wikimedia.org/F35289862

Change-Id: If14bfb357d077ebd3886ce7290f0d46d19588dc6
2022-06-30 13:34:25 -05:00
jenkins-bot 9d7b62b85d Merge "Layout: Use sibling selectors rather than adjacent sibling" 2022-06-30 15:10:58 +00:00
Jon Robson 79403a87e3 Fixes Content sub unreadable in Vector 22
Bug: T311564
Change-Id: Id9c3693796a197f4cacf6fee902b553ba077dc71
2022-06-30 00:52:24 +00:00
Jon Robson 9ac4fbb165 Layout: Use sibling selectors rather than adjacent sibling
Fixes MediaWiki_Main_Page_vector-2022_0_viewport_1_tablet.png
UI regression

Additional change:
- Remove inactive selector - nothing matches this media query

Bug: T303484
Change-Id: I25a21ed54189dd1ca371a0755eb4d726b20f965f
2022-06-29 23:12:42 +00:00
bwang 73ecf0f4f3 Refactor some max-width media queries to use min width
Bug: T310536
Change-Id: I900c2446b64533775b37d6e0a0ce781ab0ff890a
2022-06-29 18:09:19 +00:00
Jon Robson 257430ec13 Layout: Fix footer margin
Since CSS grid uses row-gap we need to decrease
the margin we used in the legacy layout to keep these
the same

Bug: T303484
Change-Id: Ib28f0d5ee0afbb809591c99ef18cd3cbecf1f800
2022-06-29 08:33:36 -07:00
Jon Robson 11618b5d81 Grid: Add table of contents to grid
Bug: T303484
Change-Id: Ic854b34b739b59e2d1efd864a711c961548f079f
2022-06-29 00:00:06 +00: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
Jon Robson 82f0433a11 Layout: Align content with hamburger icon
Content should always be aligned with the hamburger icon in the
new design between the tablet and desktop breakpoints.

Fixes: F35282438

Bug: T303484
Change-Id: I15215703d6392cd69ec57212d25c9a52149a6ac0
2022-06-28 00:07:34 +00:00
Jon Robson 393928a280 Fix table of contents when sidebar is open
Bug: T309807
Change-Id: If370246d13984981f4c3477fda2b2dce45337d91
2022-06-27 15:01:18 -07:00
Jon Robson 5beadc4bc2 Layout: Don't hide footer < 1000px when sidebar closed
The 'mw-workspace-container' class is present on both
the footer and the sidebar. The CSS rule should only hide
the latter.

When there is no table of contents on the page, and the sidebar
is closed, the content
should always span the grid columns and the sidebar container
closed.

Bug: T293443
Change-Id: I852b9024fbd21339b7c78dbb4deba811ab17c7e7
2022-06-25 00:03:41 +00:00
bwang 61e723c541 TOC: Ensure TOC spacing is correct when grid is enabled
Fix usage of CSS calc

Change-Id: I6dcf3751a4b478a14d8052a70720e138238203d3
2022-06-24 23:09:50 +00:00
Jon Robson ec6b6ebd9a Revise margin collapsing rules with new layout
Follow up to 97783e5

Bug: T311283
Change-Id: Ia0581713fd182b9236e398a2453efd06ce8b9f1f
2022-06-24 15:55:08 +00:00
Clare Ming 75cc9bdcd9 Restore sticky header class and update TOC styles
Bug: T311170
Change-Id: Ib12b6f79a20b2a25b49110e5a7de59d199917dc9
2022-06-22 14:46:07 -05:00
bwang f473129485 Add support for floating TOC lower down the page
This patch only handles the first case listed in the task description

Bug: T308689
Change-Id: I4e7dbded7a8206633a98653aaf4ced3fd2b6f69d
2022-06-21 16:02:11 +00:00
bwang 93e8cfcd90 Collapse ToC into page title at narrow view ports with CSS/template changes only
Bug: T307900
Change-Id: I72607ec9d8b46401468de5815cf47dac9f4612a5
2022-06-10 15:49:06 -06:00
bwang e9ea4cee29 Hide TOC in print mode and clean up other print styles
Bug: T306719
Change-Id: I706225e01d1cc09bd387a008b56d9c2dcf8bdf4f
2022-06-09 19:15:27 +00:00
jenkins-bot d91c921daa Merge "Make footer take up full width" 2022-06-08 19:33:12 +00:00
Jan Drewniak c5cfd4dce8 Restyle Vector tabs in modern Vector
Removes gradients from tabs (i.e. article toolbar) in new Vector, moving
the existing MenuTabs.less component into the skins.vector.styles.legacy module
and creating a new MenuTabs.less component for modern Vector.

Bug: T309398
Change-Id: I5d807f09bfbbceaded756daa78dbb023efcc91dc
2022-06-08 11:26:17 -07:00
Jon Robson c9fe4e83a1 Make footer take up full width
Bug: T293443
Change-Id: I0cea23fc6f7e013900211f10cc3da4066acf4d0c
2022-06-08 14:48:40 +00:00
Jon Robson 664b6c5cc5 [Grid] Vector 2022 layout uses CSS grid
It gracefully degrades to a single column
layout on grade C browsers, IE11, and Safari 9.

Bug: T303484
Change-Id: Iaa3c1bee146dc39b1259a1ce712a29c6b22305d1
2022-06-07 17:23:08 +00:00
Jon Robson b8701a3b58 [Grid preparation] Restrict certain rules to old layout
Having a clean slate to work from will help with the development of
introducing the grid

Bug: T303484
Change-Id: I8fb9a9d958e4e73e8bfbf4b797cee1353c915db5
2022-06-01 17:24:47 +00:00
Jan Drewniak a3cef30154 Move page title above article toolbar menus
Moves the page's title above the article toolbar (i.e. tabs) based
on the VectorTitleAboveTabs config option. This feature remains
off by default, but can be accessed via the query parameter `vectortitleabovetabs`.

Removes the Navigation.mustache template since it's just a wrapper
for the sidebar + tabs elements, which, with this change, are placed
in different locations in the DOM and don't need a common parent element.

Bug: T303549
Change-Id: Id4816b753a1b2133c53c3b1d390b45631c704daf
2022-05-31 18:06:11 -04:00
Sam Wilson 0ebae6c4ef In max-width mode, constrain the width of page previews
This allows the editing form to be wide, but makes sure that the
preview seen will more closely match how the page will end up
after being saved.

Bug: T307725
Change-Id: Ib2085eece69fe08b7fca4aaeacef66b26cdd5f16
2022-05-30 11:52:59 +08:00
Jon Robson 4e67384131 Fixes Vector 2022 sidebar overlap when table of contents disabled
Bug: T308130
Change-Id: Ieec44e8f1657319962e2a7922d04186c260123fe
2022-05-23 23:13:29 +00:00
jenkins-bot 7761ed4aff Merge "Revert "Move a max-width Less variable up into variables.less"" 2022-05-18 18:50:50 +00:00
Jdlrobson 55b5283148 Revert "Move a max-width Less variable up into variables.less"
This reverts commit bf4d843d97.

Reason for revert: These variables were intended as local to layout.
Only layout stylesheet should have access to layout variables. The
risk of having this in the global variables file is that non-layout
rules can be added to components.

Change-Id: I91fd01ed5333555052c243e25d37cd30d6d9bef6
2022-05-18 15:12:59 +00:00
jenkins-bot 336b8eefb7 Merge "build: Update stylelint-config-wikimedia to 0.13.0" 2022-05-18 00:40:09 +00:00
Volker E 7eb818543e styles: Replace deprecated Less .transform() mixin with standard CSS
Replacing Less mixin calls of `.transform()`, deprecated
since MW 1.37, with CSS property.

Bug: T308360
Change-Id: Ic965193782a447d34eac4bd19816a7b753c36d44
2022-05-16 23:24:53 +01:00
Ed Sanders 7f7d5c4ae5 build: Update stylelint-config-wikimedia to 0.13.0
Change-Id: I122005b6817cf1997002dbe7a1bcbd249c9842cb
2022-05-16 17:44:12 +01:00
Sam Wilson bf4d843d97 Move a max-width Less variable up into variables.less
This makes it accessible elsewhere (such as within WikiEditor; see
the dependent patch) without having to include
all of screen.less.

Bug: T307725
Change-Id: I3fda9886c27fe0b78cf5bd5647d7e497a3aaba0e
2022-05-16 13:15:00 +08:00
Volker E 2adab440a5 styles: Replace deprecated Less .transition() mixin with standard CSS
Replacing Less mixin calls of `.transition()`, deprecated
since MW 1.37, with CSS property, but constituent properties.
This has been an outcome of recent discussions around design tokens,
which will be simpler to define, more modular, and better scoped. See
T304443 for further information.
Also clarifying, aligning comments.

Bug: T308351
Change-Id: Iab9d04c9a9f31f3842d076ce8fd8bf6e3534fc89
2022-05-13 20:37:22 +00:00
Jon Robson 2213963241 [Grid preparation] Use variables for selectors with state
The checkbox hack adds complexity to our layout rules as we must
describe elements based on their siblings. To make these long selectors
easier to reason with and reduce the risk of rebase conflicts as these
shift I'd like to make these variables.

Change-Id: Ie5ff163d0449778a7d343870187da7703d20b754
2022-05-12 20:26:46 +00:00
bwang 91e2e55a10 Simplify TOC spacing styles/logic by reusing the visible sticky header class
- Remove the 'vector-scrolled-below-table-of-contents' class, reducing the number of classes added with JS and simplifying the scrollObserver logic
- Move the 'vector-sticky-header-visible' class from the sticky header element to the body element. Hopefully, this is where other feature specific classes can go in the future
- This approach means the TOC will not need JS to update it's spacing when the sticky header is not enabled

Bug: T307345
Change-Id: I1084defc7025f5c946e22a36d373224fae6f8bd6
2022-05-10 11:39:05 -05:00
bwang 94be7578f5 Factor out a separate scroll observer for the TOC A/B test, which should be fired separately from the page title observer used by the sticky header and TOC
Bug: T307952
Bug: T307345
Change-Id: I3f247730fa1c399e6d2e4d866677703fc24e8c58
2022-05-09 20:44:54 +00:00
jenkins-bot b6847038f8 Merge "[HTML] Refactor Content header templates" 2022-05-06 18:43:34 +00:00
Jan Drewniak 1288c97179 [HTML] Refactor Content header templates
Creates two new templates:
- ContentHeader.mustache containing the site header and indicators or languages
- ContentSubheader.mustache containing site tagline and conditionally indicators

This changes DOM order.
- It adds the `<header class="mw-body-header">` to all pages,
  including special pages & edit pages, not just pages with the language button.
- It moves the #siteSub element (tagline) outside of the
  `<div id="bodyContent">` element.
- Adds a clearfix (or margin-collapse fix) to `.vector-body`.

This changes causes a minor difference (perhaps improvement) where on special pages,
the beginning of the content, starting with the `mw-specialpage-summary` element,
was positioned closer to the page title than on regular pages.

The clearfix ensures that the height between the page title and content is consistent across all pages.

Bug: T303549
Change-Id: I29ba337dbd6f9b0cf58c9a0ca517a9ba59cef414
2022-05-06 15:37:04 +00:00
Jon Robson 305fbdacf8 [Grid preparation] ArticleToolbar component
Structural change to prepare for CSS grid usage.
ArticleToolbar component is defined and self contained with
all layout rules relating to toolbar

UI regression testing suite shows 6 failures due to pixel alignment
changes to tabs. When comparing to the current release, you should
see 34 failures before /and/ after this change.

Notable changes:
- #mw-head element is no longer present in modern Vector skin
to allow us to distinguish between cached HTML and modern HTML

Bug: T303484
Change-Id: Ia261ea53931217f32a21b33c2ab3d4ec64efa48a
2022-05-05 21:13:01 +00:00
Jon Robson 3b4b101459 Disable max width on article toolbar container
Bug: T306353
Change-Id: I1c9e223ebc22cf0e0a337856041f34449e6c483b
2022-05-05 02:21:17 +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
Jon Robson 7d75bb37ad [ToC] Increase threshold for ToC collapsing to 1000px
Bug: T306904
Change-Id: Ib3ad66a8f4ccf9c5ba323031821d6e681069bde5
2022-04-26 17:46:51 +00:00
Nicholas Ray 718bcef6f9 Fix empty space on left when bucketed in the control/unsampled group
When the AB test is enabled both the old and new TOC's are in the page's
html but only one is visible. The `.vector-toc-visible` class is also
present and will try to apply a left margin even if the page has been
bucketed into the control or unsampled group.

This patch takes the simplest approach to fix this problem with CSS only
especially given the transient nature of this code (will be removed when
AB test is finished):

* When the page bucketed in the control or unsampled group, prevent
  .vector-toc-visible from applying a left-margin through the use of
  `:not` selectors.

Additionally:

* Remove unnecessary `margin-left` rule that used to apply to the
  mw-workspace-container. Due to the work done in
  I2f95d5938674bb8263b6203c5f6a469762bf0cc2, the workspace container
  will now always have a computed left margin of zero because it is the
  same width as the page container.

Bug: T306366
Change-Id: Icd9572353bb5e29cfda91b095ceb8c2e652864e7
2022-04-19 14:35:49 -06: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
Nicholas Ray 6fbf08a198 Build A/B test bucketing infrastructure for the table of contents.
* Bucket and sample on server by using the
  `WikimediaEvents.WebABTestArticleIdFactory` service from
  WikimediaEvents (soft dependency)
* Add linkHijack.js so that users bucketed in one group have the
  possibility of remaining in that group if they click a link to another
  page.

Bug: T302046
Depends-On: Ie6627de98effb3d37a3bedda5023d08af319837f
Change-Id: Iff231a976c473217b0fa4da1aa9a8d1c2a1a19f2
2022-04-04 17:06:29 -06:00
Clare Ming 2bfdbe74b6 Do not show footer menu in print mode
Bug: T300178
Change-Id: I48df6c39019dc0551ffb0ee559c51d5f6b31c825
2022-03-29 17:24:18 -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
Jon Robson b86dbc756c Address some code FIXMEs
- Remove references to the removed wgVectorUseWvuiSearch
configuration
- Remove mw-body qualifier on Indicators component.
- Drops some cache related FIXMEs

Change-Id: I6823b9c5bf19a067b56badf29f874a7127867a09
2022-03-21 20:29:58 +00:00
Abijeet 3a39708163 Set position and z-index for mw-page-container
This forms a stacking context inside mw-page-container. It allows
overlays appended to the body tag to position themselves over the
Vector interface.

Bug: T301452
Change-Id: Ie187fde43dd8e7f108388c848438545c75d19b09
2022-03-16 13:29:07 +05:30
jenkins-bot 9205554552 Merge "Render sidebar menu above TOC" 2022-03-03 00:26:38 +00:00
bwang 9fb8af8ae8 Render sidebar menu above TOC
Can only be merged after I8c0924f6de28b15602969de873a843b4cd69548b
has been in production for 3 days

Bug: T300875
Change-Id: I924a69b37214a34f989f49f0425c701650928e17
2022-03-02 17:04:47 -06:00
bwang be2abb581c Hide sticky header and ULS button in print mode
Bug: T300178
Change-Id: Ie1eb02530ec62fa011da4be45a61d26522c1650b
2022-02-25 17:32:35 +00:00
Nicholas Ray 29e40714bc Offset the TableOfContents top property only when the sticky header is shown
This uses the sticky header's `.mw-sticky-header-element` utility class
to conditionally offset the table of contents to the height of the
sticky header only when the sticky header is enabled.

Bug: T300077
Change-Id: Ibad97a11e708ba19acf27ca82320f7c3e5f80447
2022-02-17 12:20:15 -06:00
Nicholas Ray 390155c67f Move #mw-sidebar-button layout styles to Header.less
Given that these styles deal with the layout of the sidebar button in
the main header and don't make sense in any other context (at least
currently), I think they belong in Header.less.

Change-Id: I191b9a404c82c5a1a80f97d98fa54535fdd53944
2022-02-09 09:29:47 -06:00
bwang 8a957c0163 Use 'toc' skin option and render with new TableOfContents mustache template
Bug: T297611
Change-Id: I8332f7b9c9574d8dece4f7111b299b95533cf386
2022-01-19 14:38:51 -06:00
jdlrobson fbc5241c45 [Documentation] Document decision in T293441 in code
Not 100% clear why it works this way so recording.

Change-Id: I8c6eb4c1e17916fe06b071dfc98f1c0d4529731d
2021-12-07 18:48:45 +00:00
Fomafix 574bbfd549 Combine return paths in getLanguagesCached
Also use single quotes instead of double quotes and fix typos.

Change-Id: Ibfd855f55f38ea824d38ad858b654d8229838cd1
2021-10-23 12:55:37 +00:00
jenkins-bot 06475e55e7 Merge "Remove @min-width-logo, @margin-top-sidebar variables from screen.less" 2021-10-05 23:59:41 +00:00
Nicholas Ray 87b565a5f0 Remove @min-width-logo, @margin-top-sidebar variables from screen.less
AFAICT these variables are unused.

Change-Id: I675de18cf4b2bb0b7aa913d4ad5801ca0e7eb155
2021-10-05 16:53:52 -06:00
jdlrobson 95e3271e79 Address cache related FIXMEs
Follows up the sticky header search refactors
in caed16e

Change-Id: I5832bc04f0c675ff8bc1a00fff17b6b9f8399e6e
2021-10-05 21:53:09 +00:00
jenkins-bot 3c894154df Merge "Improve heading structure and heading semantics by removing redundant headings and labels for modern Vector" 2021-09-15 16:43:41 +00:00
bwang 687c6a50d8 Improve heading structure and heading semantics by removing redundant headings and labels for modern Vector
- Apply aria-hidden to h3 in Menu template, ensuring the nav landmarks are still properly labeled, but no longer reading duplicate labels to screenreaders
- Remove "Navigation menu" h2 element, which is not needed as the nav landmarks are already labeled
- Remove searchbox h3 element, which is redundant with the search landmark
- Scope all changes to modern vector

Bug: T265993
Change-Id: I4e5da7a0699160fa57234bd126b75243e0157778
2021-09-14 10:47:05 -05:00
Nicholas Ray 326e11dfbf Scope styles that should only apply to the main header to Header.less
We have many styles related to the layout and visibility of search that
are only useful in the context of the main header. Since many of these
elements have classes that will also be in the sticky header, we should
scope these rules to the main header so that we avoid an uphill battle
of styles trying to override eachother.

Additional changes:

* We previously had a mix of #p-search and .vector-search-box selectors
for the same element in the CSS. Header.less now only uses
.vector-searchbox to avoid specificity wars.

* Removed nearly all of the #p-search rules previously found on L147 -
L167 in screen.less after observing nothing relatively bad happening
when they were removed.

Bug: T289724
Change-Id: I2e6c269e29717cd20d8acfaddc3631ea1b8fedfa
2021-09-14 15:34:05 +00:00
jdlrobson ff8e29d240 [refactor] Remove common UserLinks code
There is no common UserLinks code. These styles serve
legacy only.

Bug: T288852
Change-Id: Ied191bc1bc5dbd48491fa285b5def265c7d5262d
2021-09-07 15:37:13 +00:00
jenkins-bot 94d135ecfa Merge "Build the sticky header skeleton" 2021-09-01 20:35:21 +00:00
jdlrobson 8657171471 Build the sticky header skeleton
The sticky header is currently disabled unconditionally
and nothing is wired up, with placeholders for data and
functionality which will be added in future.

Bug: T289716
Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
2021-09-01 12:32:31 -07:00
Nicholas Ray 5ca9d00d55 Set responsive max-width on username in header
Per T287522#7295558, the username should have a computed max-width of
200px above 1200px and a max-width of 155px below 1200px.

Additional changes:

* Use flex-wrap: nowrap on header instead of wrap. I think the former
may have been an unintended consequence of the consolidated links
feature flag clean up.

* Use core's text-overflow mixin for both the username and the usermenu
items

* Change the user menu's max-width to use relative units

Bug: T287522
Change-Id: I536e6371f85ccde75673af46c7667eb447eff081
2021-08-31 17:06:35 -06:00
Clare Ming 1efe0a4203 Remove user links feature flag
Update/remove config, constants, hooks, templates, styles, logic, tests, stories to check legacy vs modern Vector where applicable instead of the decommissioned user links feature flag.

Bug: T288852
Change-Id: I5c5831091a10711838a8a2877c782df4996d4596
2021-08-26 10:07:15 -06:00
bwang 46d98c90f4 Add sticky header feature flag, query param, and class
Bug: T284463
Change-Id: I520832fa1e0a66bb24479e47c8e8f8011e514299
2021-08-04 18:49:56 +00:00
Nicholas Ray d8f62f780c User menu design tweaks
* Revises UserLinks.less according to the T285786 spec.

* Unsets 'createaccount' data in $content_navigation in favor creating
this link inside SkinVector which follows the same pattern as the Login
link. This is needed because the create account link needs to be on top
of the login link in the menu per T285786#7231671.

* Changes MenuDropdown.less to pad the anchor element instead of the li
element. This results in a more intuitive click target.

* Places an end margin on the search box to add space between the user
links and the search box.

Bug: T285786
Change-Id: Idb860e6b65c9f266a8027e3f486ccf4c4ec4ed3c
2021-07-27 14:25:32 -06:00
bwang 589bb21d1c Remove margin-left: auto on search box to prevent it from switching sides
- Scopes margin-left: auto style to vector with user links off only

Bug: T286733
Change-Id: If5dbdd89c2f773d6a98bf4ffa76f64409c11fd8d
2021-07-22 13:22:40 -05:00
jdlrobson 96136a0e2d Remove Vector skinStyles for icons and fix language button
Depends-On:  Id08590f6a3fbbfda8226f2899f50f0b64cbb1481
Change-Id: I5be642f2e20d67e1d27c74ddb6ec086738a261aa
Bug: T191021
2021-07-21 11:02:42 -07:00
jdlrobson 60923c6ddb Collapse search below desktop breakpoint
The tablet breakpoint doesn't work. It is not possible to apply
the min width of 350px for the search input given the other elements
in the header, however the desktop breakpoint provides plenty of space.

Change-Id: I93c29700d465d641f8155c01a311e1e720c37695
2021-07-15 22:02:55 +00:00
Nicholas Ray ca22b84df4 Make #p-search's start margin dependent on .vector-search-box-show-thumbnail
Before this commit, the following config would result in the search box
not lining up vertically with the tabs:

$wgVectorWvuiSearchOptions = [
  "showThumbnail" => false,
];
```

This commit fixes that by making the start margin dependent on the
`showThumbnail` option.

Bug: T284242
Change-Id: I0132ef8afb3206836d9f16771cbefda5b8bfa3ec
2021-07-14 13:40:54 -06:00
Nicholas Ray 7d917c8dbb Widen WVUI search suggestions to edge of search button when search is toggled
Per T284242#7206507, the width of the search suggestions should be
increased at small resolutions.

Bug: T284242
Change-Id: I16ac7c4174c427d340dc16b0b56221ff7b6e1016
2021-07-14 13:36:35 -06:00
Nicholas Ray 91af0e098d Make search toggleable at smaller screen widths
Now that the header collapses at small resolutions
(I89d75843ca7e33e6de93af5d7c22e46b7249c4b7), this commit wires the
search toggle to show the search box when clicked and hides it when the
user clicks outside the search box.

* Adds searchToggle.js to perform handle the toggle behavior of the
searchbox.
* Adds `@padding-horizontal-tabs`, `@size-search-expand` to variables.less
so that these can be used to set the start margin of the search box
(enabling its start edge to match the tab text start edge).
* Modifies screen.less to only apply search max-width when >=
@width-breakpoint-tablet

Bug: T284242
Change-Id: I82563d44967f60aee1cd4d3aa6fb4f405822686b
2021-07-14 00:14:45 +00:00
jdlrobson 6777c5b1fe Collapse header at lower resolutions
Reduces the min-width to 340px with several changes at lower
resolutions
* collapses create account into dropdown
* hides language button and user messages
* The search component is updated to include a search toggle which
can be used to hide and show the search input at lower resolutions
- this leads to a slight HTML change with caching implications,
it also moves away from a BEM usage which is not standard for this
repository.
* limits width of logo based on the dimensions we display
in mobile

Bug: T276566
Change-Id: I89d75843ca7e33e6de93af5d7c22e46b7249c4b7
2021-06-30 21:43:35 +00:00
bwang 298f945983 Create new user menu template for consolidated user links in logged out users
- Adds mustache template for the new user menu
- Uses new functions for getting user link data that have been factored out of SkinTemplate in the dependent patch
- Refactor new user menu styles to be namespaced inside UserMenu.less

Notes:
- Originally this patch included more storybook changes, but I removed them in favor of this follow up patch: 696651

Bug: T276564
Depends-On: Ia841f92c626ca32a9ad437b3d1cff78309c83ed8
Change-Id: Ib15752428265fdc06a3000f62bdca44c67648974
2021-06-02 09:23:22 -05:00
jdlrobson 3306124038 Introduce the vector-body class
This follows up I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83
In that change, a new class for Vector specific styles should have
been added and the existing CSS referenced. I could have sworn I did
this, but obviously not (perhaps a git rebase or unstage change problem).
We did it for the other skins e.g. Monobook (I90d85c21f4a62e6697f24e3ce388445a0a53c2b0)
but evidently not Vector.

We also have to worry about cached HTML now, the #bodyContent is
the most reliable selector to use for before and after
I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83

Additional:
Remove the mixin-clearfix rule on bodyContent - this is now
redundant with the changes in T279388 and should have been
removed.

Bug: T283206
Change-Id: I15103cea72c793589a03ab1a3e7f3b377acb287f
2021-05-21 13:50:31 -07:00
Clare Ming dc0b679bfa Consolidate user links into personal dropdown menu for logged users.
Pull personal menu items except for user page link into a consolidated dropdown menu based on feature flag using Vector hooks. Add consolidate user links feature flag for logged in/out users. Update styles for personal toolbar. Add logic to template to show legacy toolbar or consolidated toolbar based on feature flag variables.

Bug: T276561
Depends-On: If4e143aada711d210ae45d33b97a6be0685b6a41
Change-Id: I1c305d89bece147a6f1b478441119c3169abfbdd
2021-05-06 12:49:39 -07:00
Jan Drewniak 80d734b4d2 Place language button near bottom of Main page.
In modern Vector, the language button that is placed inside
the page header should appear near the footer, if the page is a
Main page.

This changes some CSS selectors to not depend on the language
button having the `.mw-body-header` parent element.

Bug: T276140
Change-Id: I97bf0c11d0321752d472ac4988618a1db92b7271
2021-05-05 13:42:19 +02:00
Jan Drewniak f52c2f8a4a Scope right-aligned dropdown menus to #right-navigation & .mw-portlet-lang
Removes the global rule for right-aligning the Vector dropdown menus
and instead scopes that alignment to dropdown menus that appear
inside #right-navigation and the language button in modern Vector.

Bug: T275158
Change-Id: I6c00ccc365f70682841d9eda9d31bbe25c757aa0
2021-04-14 23:31:59 +02:00
Jan Drewniak edd2f4ff85 Reorganize LESS files to match ResourceLoader conventions
Separating most LESS files into 2 ResourceLoader modules and a common
folder:

- skins.vector.styles
- skins.vector.styles.legacy
- common

This changes aims to clearly separate the old (“legacy”), the new
(“modern”) and the common styles which were previously all placed under
`skins.vector.styles/`.

Inside each directory are separate folders for `layouts` and
`components`.

The entry files, `skin.less` and `skin-legacy.less` are moved into the
specific folders and a third, `common.less` entry file is created that
contains the common imports for both old and new Vector.

Aliases have been added to the Storybook Webpack config to avoid adding
the story file changes to this patch. Images coming from CSS `url()`'s
have also been temporarily disabled in Storybook until Storybook can be
upgraded to use Webpack 5, and use array values for aliases, in a
follow-up patch.

This patch also slightly changes a footer layout specific rule so that
existing `padding` remains unchanged in rendering due to new common and
component structure.

Bug: T264309
Change-Id: I1cd2681a2b61edb7be56c38f9bb3994827d7e322
2021-04-08 15:47:56 +01:00