Commit graph

8 commits

Author SHA1 Message Date
Jon Robson 9a2b3d6275 [Grid preparation] Structure the header
Restructure the header to have two child elements

Change-Id: Ib5b7f31419ae6b62f62878947651b8ab843a3955
2022-05-05 17:54:28 +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
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
Nicholas Ray 72120a36a0 Use .vector-search-box-auto-expand-width class to style intermediate search components
Before Vue/WVUI lazy loads, we have intermediate search components that
are rendered on the server and that need to be styled based on the
`autoExpandWidth` prop passed to the search component. This commit
refactors VueEnhancedSearchBox to use this class if present.

Additionaly:

* Cleanup fixmes from Id8d3bd4aa74113b91ecaf66cb58cf5625db8a302
* Replace `vector-search-box-show-thumbnail` class with
  `.vector-search-box-auto-expand-width` class in Header.less now that
  the class has been cached in the HTML.

Depends-On: Ic914ecaee591008f987bd6d754fda8628125de7b
Bug: T297531
Change-Id: Ia6b7afa990fa4b04578740b483ba21dbef45a016
2022-01-10 23:35:45 +00:00
Nicholas Ray 3028a4f9d8 Refactor search component expand behavior and add auto-expand-width prop to search component
In preparation for I30c670e3f195f77a27715c6b494a3088b7a55712, refactor
the search component expand behavior so that it can accomodate the new
changes in WVUI while maintaining backwards compatibility with the
status quo.

Additionally, pass/enable the `auto-expand-width` prop to the main
header's search. This will be inert until the new changes in WVUI have
landed.

Bug: T297531
Change-Id: Id8d3bd4aa74113b91ecaf66cb58cf5625db8a302
2022-01-04 15:14:49 -07: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
jdlrobson caed16e26f Allow multiple search components on the same page
Styling should not depend on IDs to allow us to have multiple
searches in the page.

Precursor for wiring up search in the sticky header.

This also tweaks performance metrics to track separate metrics
for the sticky header search

Change-Id: I5b4192a8f5a9f95af26c1faf904f7cc994323518
2021-09-23 23:23:58 +00: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