Commit graph

95 commits

Author SHA1 Message Date
bwang 8d9b148cf7 Setup header and sticky header to be able to be full width
- Move the header and skip link out of .mw-page-container-inner and the grid
- Wrap the header and sticky header with a .vector-header-container element, allowing us to easily update header styles in the future
- Update sticky header to use a <div> to fix a11y error. Update searchToggle.js to use .vector-header-container rather than <header>

Bug: T332449
Bug: T330438
Change-Id: I038fc17cbb88a29dbe8d7841b824761a91d38405
2023-03-30 16:37:15 -05:00
Jan Drewniak 40bbb8c3a9 remove Page Tools config & HTML
Removes the config option for Page Tool menu,
its associated logic, along with the associated HTML from
the mustache templates.

Hardcodes the `vector-feature-page-tools-enabled` class
into the HTML element to prevent breakage.

Bug: T332090
Change-Id: I6466d80c6970bcc8e28d897b6bdff911a90e3655
2023-03-30 11:32:36 -04:00
Jon Robson d4903b8e57 Remove TableOfContents mustache template and mark layout rules
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
2023-02-28 00:27:31 +00:00
bwang 392a2f0e97 Only render TOC related HTML when TOC is available
Bug: T328719
Change-Id: I3484a790ce8ebadf21054ac1d222d5632b2dc5a4
2023-02-27 16:31:03 -06:00
Ed Sanders 7323d6af4e Use tabs consistently in .mustache files
Change-Id: I3874b8a03f8a512a4d31f4c85a030de63cbc3c69
2023-01-17 11:48:34 +00:00
Jon Robson a43d522331 Fix language button fallback
* Don't hide language button
This code can be removed now  T287206 is resolved.
Also simplify legacy logic - as the language menu
is always a portlet there.

Additional changes:
* Create LanguageButtonDropdown component to distinguish
this code from the LanguageButton in the sticky header.
* Fixes a style in LanguageButtonDropdown.less which wasn't
accounting for multiple vector-menu-content classes

Bug: T320927
Bug: T325017
Change-Id: Ic331684c384c5d57b60b098f23485e44fb75fb8f
2023-01-06 00:45:31 +00:00
bwang 46f17487fd Update main menu templates and classes to be consistent with other pinnable elements
- Rename data-portlets-main-menu to data-main-menu
- Rename MainMenuContents.mustache to MainMenu
- Replace usage of .vector-main-menu-contents in favor of .vector-main-menu
- Add classes to PinnableContainer
- Use PinnableContainer and PinnableElement in main menu
- Remove MainMenuDropdown.less

Bug: T317900
Change-Id: I59b3acd3d56cd5761e5978607634dfb9a88f60e3
2022-12-16 17:34:23 +00: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
Jon Robson e7b4edf7a6 [Refactor] Rethink Dropdown component
The Dropdown component should be considered the dropdown folder going
forward. This should be distinguished as a different component that
composes the Dropdown component

Since the template itself is rather simple it seems preferable to have
duplicate templates that describe the actual component (PageTools,
VariantsDropdown and LanguageButton)

MenuDropdown is renamed Dropdown and styles that don't correspond to the
Dropdown component are moved to the relevant components.

MenuContents mustache template (future component) is added to DRY up
several of the new templates.

Bug: T320927
Change-Id: I220d0a477b3f05b278bd2cec7dd601c7b3b17c6f
2022-11-29 17:33:03 -08:00
bwang 8f5b33fee3 Replace 'more' menu with page tools pinnable dropdown
Bug: T317897
Change-Id: Ia94ebc32041bb3c2f86d461b310766b2d14c66a2
2022-11-10 15:33:16 -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
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
Bernard Wang 15d95fc24a [Technical] Split up Menu.template, restrict decoratePortletData to legacy Vector
Changes:
* Code is moved from SkinVector to SkinVectorLegacy verbatim since it is now only
needed by SkinVectorLegacy
so we remove it:
** This step broke MainMenu rendering so this was captured in VectorComponentMainMenu
** The isLegacy code no longer makes sense and is removed in a follow up

* storybook no longer run on CI

Authors: Bernard Wang and Jon Robson
Bug: T321102
Bug: T319349
Change-Id: Ib424ca1c767161fdae8c0aeedfe662b7fa039ff6
2022-11-02 21:22:50 +00:00
Jon Robson 31b0fd08d2 [Technical] Prepare for template rename
The user links and language button are SkinVector22 features but
they are buried inside SkinVector.

When we rename the templates this code will become problematic
as SkinVector22 requires these modifications

Bug: T319349
Change-Id: Id5e5b97af0ea020ef20565a7e1acc685d7be0892
2022-11-01 03:45:21 +00:00
Jon Robson 8ec5a51625 [Technical] Move isSidebarVisible and template boolean to SkinVector22
Additional change: Prefix with "is-" per template coding standards

Bug: T319349
Change-Id: Iadf149439d043d00a79094c4f34dfbea92abffe1
2022-10-27 18:45:47 +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
jenkins-bot 71bc90f225 Merge "Restore unconditional rendering of siteSub with styling modifications" 2022-09-28 03:38:13 +00: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
Jan Drewniak 5a951e2159 Modify Vector 2022 skip-links
- Changes the "skip to content" link to point to "#bodyContent"
  instead of "#content".
- Adds a `aria-labelledby` attribute to #bodyContent.
- Changes the table of contents "back to top" link to
  point to "#" instead of "#top-page".
- Removes "#top" link as it appeared unused.
- Updates Jest snapshots.

Bug: T312818
Change-Id: I86443066d45c818d6f137d70ebe36798eba66f13
2022-09-26 17:34:23 +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
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
bwang b63244f367 Remove grid row gap in favor of margins
Bug: T315595
Change-Id: Ibf837775d972deb29e9619cc6c12c919aae5155a
2022-08-22 15:49:00 -05:00
jenkins-bot ae44bfa327 Merge "Fix collapsed TOC menu positioning with site notice without JS or major CSS changes" 2022-08-16 19:07:44 +00:00
bwang 160ef15f30 Fix collapsed TOC menu positioning with site notice without JS or major CSS changes
Bug: T310388
Change-Id: Ifa29dd032534a1c6ea6fcea194b0c65103a2cd52
2022-08-16 10:38:30 -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 ef2b0a2372 Remove vector-layout-legacy styles and grid feature flag
Bug: T313559
Change-Id: I050d0e243186ba4341accc26f8d644f55ff995b7
2022-08-08 08:22:26 +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 320175d22c Make site banner full width in grid layout
Bug: T312749
Change-Id: Ia888615762a641f98409b11c6448a32897c4c835
2022-07-27 10:01:49 -05:00
Jan Drewniak c9c5c9e5a4 Followup to 33a6fb6 - remove is-title-above-tabs from template
The configuration for this feature was removed, so the conditional
in the skin.mustache template should be removed as well.

Bug: T311773
Change-Id: I6a8e671c5f08d9af73145b900398b185febb3bc7
2022-07-18 10:43:36 -04:00
Jon Robson 33a6fb6028 Layout: Title should always be above tabs
**UI CHANGES**
- This change will result in expected UI changes so will flag problems
with Pixel.
- Before merging please confirm Pixel reports 31 passed, 47 failed
- After merging, we should update LocalSettings.php to reset these
changes.

Bug: T310054
Change-Id: Ib35c6bfa5493f7dc81b63c42e7fedb8f1e47226b
2022-07-06 15:25:42 +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
Jon Robson 11618b5d81 Grid: Add table of contents to grid
Bug: T303484
Change-Id: Ic854b34b739b59e2d1efd864a711c961548f079f
2022-06-29 00:00:06 +00:00
Jan Drewniak 05a1c330fe Attach VE to #content while title-above-tabs feature is disabled.
Limits the usage of the `data-mw-ve-target-container` attribute,
which changes the position of VE, to be enabled only when the
title-above-tabs feature is enabled.

Bug: T310197
Change-Id: I846135a88acf713bed608ad4f147f7602ce7cc2b
2022-06-27 15:44:19 -04: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
Jan Drewniak 6e96a8e936 Rename data-ve-target-container attribute to data-mw-ve-target-container
Updates the data attribute for placing VE on the pages.

Bug: T310197
Depends-On: Ia6f87535f11ccc7aadb26b7dd9e1ac8a867c377c
Change-Id: I081d5e23a15902e1429e68ac4ae191e498e6aba6
2022-06-23 10:53:44 -04:00
Jan Drewniak 97783e5bd8 Use the data-ve-target-container attribute to position VE
Uses the data attribute `data-ve-target-container` to determine where
on the page to insert VisualEditor. Also moves the #siteSub back into
the #bodyContent container. This makes the SiteSub match the font-size
it had in legacy Vector & positions the VE toolbar between the tabs
and the tagline.

Bug: T310197
Bug: T310839
Depends-On: Idae6755c90eacaab1a9daa88c6e28850d427810c
Change-Id: Idb2a743c93316786d6d36e1989cf6620a6092281
2022-06-23 00:39:19 +00: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
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 a018a909d9 [Grid] Minor HTML restructure for grid
Make the sidebar and content siblings of the header element. This
will allow us to easily apply grid column and rows to these elements.

Bug: T303484
Change-Id: I0a91eddbddbe58781892eddb93edfc3d58777968
2022-06-06 14:58:20 -07:00
Jon Robson 02fb90531b [Grid] Add TableOfContentsContainer
In preparation for grid work where the table of contents will
be moved into a new container.

Bug: T303484
Change-Id: I931d5148e314c1c05f0474b47be5efd7c166144d
2022-06-03 22:27:22 +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
Jon Robson d74890df63 [Grid preparation] Add feature flag for grid
Additional changes:
* Make the query string parameter optional and if not defined set it
to lowercase configuration name. I think this makes it more predictable
as some configuration flags are prefixed with vector and some without.

This has the following consequences:
languageinheader => vectorlanguageinheader
languageinmainpageheader => vectorlanguageinmainpageheader
languagealertinsidebar => vectorlanguagealertinsidebar
titleabovetabs => vectortitleabovetabs

Note since table of contents query string is used in the A/B test
I've kept that as tableofcontents for now.

Bug: T303484
Change-Id: Iaca026ef5f32836098dc3b6f0f18632fe84fa8d0
2022-05-13 15:21:52 +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 9f6295426f Prepare for grid layout
Add a legacy class to allow us to transition out certain CSS
with new grid system

Bug: T303484
Change-Id: Ie85451b721b64aee42eb4b356f38c3621ce40b5e
2022-04-11 18:12:43 +00:00
jenkins-bot cd04b72058 Merge "Table of contents links to beginning of article" 2022-03-24 23:51:52 +00:00
Jon Robson dfdf72140c Table of contents links to beginning of article
Bug: T301254
Change-Id: Icb0b0646f81c1070c8f47dd3297225a074f74773
2022-03-24 20:46:35 +00:00
Mortal303 ae50914d4e Remove custom handling of aria-expanded in Vector checkbox hack buttons
Removed class "vector-menu-checkbox-expanded" and "vector-menu-checkbox-collapsed" in
includes/templates/Menu.mustache and deleted the necessary lines in
resources/common/components/MenuDropdown.less, tests/jest/stickyHeader.test.js,
includes/templates/skin.mustache, skin.json, i18n/en.json and i18n/qqq.json.

Bug: T299173
Change-Id: Ibf8a08e6e5d1a6c607abf170c030a0285e84ad74
2022-03-21 23:14:51 +05:30
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
bwang d244f43e39 Rely on core TOC data to show the TOC in Vector
Bug: T298796
Depends-on: I406acf333d28b3898e3bc4968d05224febd09b3c
Change-Id: Iebb9c86b409a49d211c320f540b9af409b604b5b
2022-01-26 16:14:17 -06:00