Commit graph

11 commits

Author SHA1 Message Date
Clare Ming 741d59df06 Fix title getting cut off in sticky header.
- Add padding to title class selector.

Bug: T289814
Change-Id: Iab167414d10ce256be8e966f115ae164c1bd3331
2021-10-25 20:51:43 -06:00
Clare Ming 67e7eab714 Add edit icons to sticky header
- Add edit icons.
- Update data passed to sticky header, button templates.
- Show/hide edit icons client-side based on ids in fixed header.
- Disable sticky header when in Visual Editor mode.
- Use Visual Editor hooks to toggle IntersectionObserver.
- Remove extraneous js for setting offsets for other sticky elements (simplify by moving known sticky element th to css - follow up to https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/722475/comment/7b8ab2db_cd5c7e78/).

Bug: T289723
Change-Id: Ifbab2f1c4d716f8fc261e3d7fa35fc71c6065ec5
2021-10-05 23:31:19 +00:00
Clare Ming e30c3408cf Accommodate other sticky elements with sticky header
- Update sticky header js to apply top offsets.

Bug: T289817
Change-Id: Id0e7bf7b018fbbfb2a9c1932314bf67f245b465d
2021-09-30 16:35:55 -06:00
Nicholas Ray 1209b388e9 Add scroll padding to the root element when the sticky header is enabled
When the sticky header is visible, it has a global impact on the
scrolling UX. For example, it can undesirably overlap elements when the
user clicks on a jump link and when the user tabs through elements in
reverse order. Therefore, we need to add scroll padding to the root
element when the sticky header is enabled (when the feature flag is on
and at higher resolutions)

Known limitations:

* Scroll padding is supported by all the latest modern browsers except
for Safari [1]. This was considered an acceptable tradeoff with the
caveat that this decision may be revisited in the future as we learn
more about user interaction with the sticky header.

[1] https://caniuse.com/mdn-css_properties_scroll-padding-top

Bug: T290518
Change-Id: Ie5eb01d7eafd18ce740be620dfb5c8849386af6e
2021-09-29 14:25:26 -06:00
jdlrobson 125ea5dea9 Wire up sticky header search feature
Bug: T289724
Change-Id: I784ea5eb12b6f43d19769ff48a14d3fd4627853c
2021-09-27 14:47:58 -07:00
Nicholas Ray 93745e4800 Add search to sticky header
Per T289724#7342741, server renders an anchor tag pointing to #p-search
into the "button-start" bucket of the sticky header.

In the future after T289718, this anchor will then acts as a button when
the search module is loaded and searchToggle executes.

* skins.vector.search was modified to accomodate instantiating multiple
search components (one in the main header and one in the sticky
header).

* searchToggle.js was modified to accept a searchToggle element as a
param which the caller can then instantiate when ideal. For the sticky
header toggle, this needs to happen *after* the search module loads.
Before then, the toggle will act as a link.

* Drops one jQuery usage from searchToggle so that it can be jQuery
free. Because the native .closest method is used, IE11 support is also
dropped. However, the script feature detects and returns early if the
API isn't available.

* Makes App.vue accept an `id` prop so that multiple instances of it can
be created.

Bug: T289724
Change-Id: I1c5e6eee75918a0d06562d07c31fdcbd5a4ed6d5
2021-09-14 16:58:07 -07:00
Clare Ming 5ec728ec60 Clean up for adding title to sticky header
- Update styles for fade out.
- Remove unused styles.

Bug: T289814
Change-Id: I0bdbaf1a1f0306d47df83f61811b0c85056415e0
2021-09-14 15:10:46 -06:00
Clare Ming 3362e62ef2 Add page title to sticky header
- Fade out after 500px.

Bug: T289814
Bug: T290596
Change-Id: Ice3054f417707261d7c06769cb92aa170cfadba1
2021-09-14 19:12:29 +00:00
Clare Ming e639c9287d Make sticky header functional/visible
- Show sticky header after bottom of first h1.
- Hide sticky header before bottom of first h1.
- Add media query for reduce motion preference.

Bug: T290101
Change-Id: I2b1ecd31ac360a1ef5bf2f016978d6e0665a316c
2021-09-07 16:10:21 -06:00
Clare Ming af317dbc58 Restrict sticky heaader visibility
- Hide if javascript disabled.
- Hide at lower resolutions.

Bug: T289714
Change-Id: I0c669c7fc46fda7bf5055d20cc1cd54d472a9330
2021-09-03 14:19:24 -06: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