Commit graph

29 commits

Author SHA1 Message Date
jdlrobson 8d8e2d85e6 Language button is quiet with focus, active and hover states
* Add mediawiki ui button styles to Vector and convert language
button to a quiet button
* Restore the arrow for language button with ULS
* Vertically align button to first line of header
* Add a storybook entry for LanguageButton

Additional changes:
* Fix issues revealed by storybook - menu dropdown should
reset generic typography rule for `ul` tags
* Allow quotes usage in storybook without disable rule

Bug: T268241
Change-Id: I483350084fb46a51c50af6aab78c62db6d02df89
2021-03-01 20:01:45 +00:00
jdlrobson a4f126a76f Search results should overlay personal tools
This removes the problem with the Echo icon being visible on top
of search when the browser is resized to 500px with Echo installed.

Change-Id: I6aba17cb85979617a55e9879518eacdb916ac18b
2021-02-12 00:53:50 +00:00
jdlrobson 68b989efb6 Simplify responsive Vector implementation
Vector has a wgVectorResponsive flag. This adds a ResourceLoader
module as well

I propose the configuration is repurposed to disable the min-width
on Vector and enable the viewport tag. This will allow us to use
test.wikipedia.org to test Vector at lower resolutions in future
as well as provide a suitable option for 3rd parties wanting to run
a responsive version of Vector that can be opted into using:

```
$wgVectorResponsive = true;
$wgVectorDefaultSkinVersion = '2';

```

As part of this change, the default skin version is set to 2, in
preparation for the next MediaWiki release. Note on Wikimedia wikis we
explicitly set this version so this will not impact any of our deployed
wikis.

Bug: T242772
Change-Id: I878920f49d18c5d60efd3ac45dc7912d2c62086e
2021-02-10 13:05:14 +00:00
jdlrobson 36eda30e0f Language button should use a new id to identify itself
This breaks existing integrations with extensions which will need
to be revisited as part of this redesign.

Change-Id: Iabf627e6926d4574f27448400d76210386ebdaa2
2021-02-04 20:27:13 +00:00
jenkins-bot 93578b0d77 Merge "Create .mw-body-header element for body content" 2021-01-26 02:56:20 +00:00
Jan Drewniak 03d61e12c9 Create .mw-body-header element for body content
For language-in-header feature, edits the <header> element to
contain:
- page title,
- language selector
- tagline (siteSub)
- Indicators

These elements are associated with header/meta content so grouping
them inside one header element makes sense semantically.

Bug: T248761
Change-Id: Ief6c4936d1ebe381432369f8d86419da5f7c6cae
2021-01-25 23:57:47 +01:00
jenkins-bot 162cf8449d Merge "Languages can be moved out of sidebar" 2021-01-25 22:38:12 +00:00
jdlrobson 355b188db4 Languages can be moved out of sidebar
A new config flag wgVectorLanguageInHeader is added to allow
us to render languages in sidebar or outside sidebar, in the
header.

it defaults to false to allow for further development and to
not disrupt the status quo.

To accomodate the new menu, a new header is added based on the design
in Minerva to contain the heading and language button. The language
button is floated to the right.

The new menu is not styled. That exercise is left for the follow up
task T268241

No caching implications of this change, as legacy and modern
experiences remain touched without changing the default value of the
new config flag

Bug: T260738
Change-Id: I5af1522cac3831c1c833388461fe254c03191f65
2021-01-22 09:10:49 -08:00
jenkins-bot 0867954219 Merge "Allow more control over the max-width rules" 2021-01-21 19:27:10 +00:00
jdlrobson 05dc15954d Allow more control over the max-width rules
Bug: T260091
Change-Id: Ie534b0c34e240c588a4cc330898531f1d12df1f0
2021-01-21 18:51:12 +00:00
Nicholas Ray 2d57153c08 Only override .mw-page-container horizontal padding on tablet+ viewport width
`.mw-page-container` currently has an intentional non-zero vertical
padding that was being overriden by tablet media query styles. Instead,
only override horizontal padding on tablet.

[1] d525e564db/resources/skins.vector.styles/layout-default.less (L169)

Bug: T271868
Bug: T270146
Change-Id: I736805c9febeb333ea682ba0c70b2ff4768ae397
2021-01-15 11:58:09 -07:00
Ed Sanders 9abf12bbfa Use padding margin-collapse hack instead of overflow
Using the overflow hack breaks scrolling logic in OOUI.

Bug: T271868
Bug: T270146
Change-Id: I4038164efe54a8fb847781a004af98ec74c92cdb
2021-01-14 14:18:38 -08:00
jenkins-bot 4316db55d5 Merge "Vector should support lower 500px resolution" 2021-01-12 23:09:22 +00:00
jdlrobson 6f1c2cfd73 Vector should support lower 500px resolution
* Lower the min-width from Vector to 500px

At lower resolution per mock:
* Tabs converge into single grouping
* Search input is 150px
* Sidebar rushes content below

Drop rule for mw-content-container for special pages and history as it is already
accounted for in .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container
rule.

Bug: T264218
Change-Id: I14ee75bd173fb2de1e33067f95ce09deba5bf27a
2021-01-12 14:18:45 -08:00
Nicholas Ray 37f6ff02df Sync Vector styling with latest changes in WVUI
* In Iecc3eebf0dce495400ba3d644dce39186f4fa395, a border was applied to
`.wvui-typeahead-search` to make it appear like the input box contains
the search submit button. Because of this change, we can't apply a
max-width to #searchForm when WVUI loads as it will cause the border to
extend farther than it should. Instead, we apply the max-width/other
styles to `.wvui-typeahead-search` (WVUI search's root container) and
`#p-search`'s direct child after WVUI loads.

* In I0ec3dcedaea90b01fe94e3416ee68ea33b782b4b, the start icon was moved
1 pixel to account for the input's border. These changes sync with the
changes to WVUI.

Depends-On: I0ec3dcedaea90b01fe94e3416ee68ea33b782b4b
Bug: T270202
Change-Id: I0ffd0a9225a5a9b935e09748d78ac45b17623790
2021-01-11 17:02:45 -07:00
Jan Drewniak bd83398659 Integrate WVUI search into Vector
Creates a new skins.vector.search module that
replaces the searchSuggest module from MediaWiki core.

This module creates a new Vue app using the WVUI
search widget for the new search experience.

The legacy search input form is still retains on pageload,
and the new search kicks on search input focus.

In order to manage that transition, the legacy search
input is styled to resemble the new WVUI input, and the
new input is manually focused after the component mounts.

Vue is also added as a dev-dependency to help with
type-checking.

Other changes:
* the entry in skin.json is reordered alphabetically after
skins.vector.js

Bug: T264355
Change-Id: Ibb9561a77a14734297cb4d0ddcd415fc0750b45d
2020-12-08 13:27:12 -08:00
Nicholas Ray 0492bc5fb8 Apply static positioning to mw-footer-container
There are popovers such as the discussion tools "Add a link" popover
that need to stack on top of the footer. This replaces the
mw-footer-container's `relative` positioning with `static` positioning
which is one possible solution to this problem.

Alternatively, the popover could be appended to the end of the body
after the footer and positioned absolutely.

Bug: T264679
Change-Id: I34168c181a1e05c33cd42f664fcccb25abd4519b
2020-11-18 18:10:20 +00:00
Volker E b0e54eec45 [modern][styles] Remove unnecessary margin-top
Following-up Iecb0d6c4c80cee1d1684597a6dedf7323e2ec54d.
It isn't set anywhere inherited, hence we don't need to set it here.

Change-Id: Ife24aa95e6d1830b8d50001976277dbb2535c47f
2020-11-09 07:49:56 -08:00
jdlrobson f99946236a Cleanup: Merge layout-max-width.less into default layout rules
* Drop some unused variables
* Drop global variables.less per max width FIXME

Bug: T258116
Change-Id: Iecb0d6c4c80cee1d1684597a6dedf7323e2ec54d
2020-11-06 20:21:56 +00:00
jdlrobson 717506b9c0 Cleanup: Merge layout-search-header.less into default layout rules
Dropped all usages of the no longer applicable `skin-vector-search-header-legacy`
class.

Bug: T258116
Change-Id: I16a5cf8dda2ab84ff4b505d5a368587190c409cd
2020-11-04 14:30:13 -08:00
Jan Drewniak 4ff30a16a0 Convert personal menu to use flexbox alignment.
Uses flexbox alignment to resolve an issue where the
clickable area of the notification and alert icons were
overlapping with the links next to them.

Bug: T264339
Change-Id: I2afc12504d7184583fa8331479125474c68017dc
2020-10-29 15:53:56 +01:00
jdlrobson eda19bd6e4 Remove SearchInHeader requirement/feature
Styles will be cleaned up further in a follow up.

Bug: T258116
Change-Id: I878239a85ffbecb5e78d73aed5568c56dbd7d659
2020-10-28 20:05:28 +00:00
jdlrobson da26e09bca Vertically align personal tools
Bug: T264339
Change-Id: Ic9df8c1cea0fef82461a84190689791ce2275812
2020-10-13 19:39:12 +00:00
Jan Drewniak df3954eff8 [IE9] Layout flex-box adjustments
Minor visual fix for IE9 for modern mode with search not in header.
i.e. with these settings:

    $wgVectorIsSearchInHeader = false;
    $wgVectorDefaultSkinVersion = 2;

Slight refactor of CSS. Removes block of styles that "reset" floats.
These were uneccessary because as flex-children, the floats were
ignored on those elements anyway.

Moves flex-wrap on .mw-header from layout-search-header.less
to layout-default.less since that's where display:flex is defined
and the rule is general enough that it should apply for different layouts.

Remove the @supports block with the `float:none;`. That is unnecessary
because flex-children are not affected by floats.

Change-Id: Ida3d2a7bc2b2f70238129df876714228fe5cdf84
2020-09-10 20:10:19 +00:00
Nicholas Ray 78787d9665 Switch to navigation-first DOM order under $wgVectorIsSearchInHeader feature flag
This moves the header, navigation, sidebar, and article toolbar to be
before the content in the DOM. As a result, a lot of absolute
positioning logic can be removed and styles can be simplified.

Note that although the sidebar was moved from the header into the
workspace container allowing it to de-absolutely positioned, its
absolute positioning was kept intact as it has a fair amount of
complexity that should be handled in a separate task.

To activate, set  `$wgVectorIsSearchInHeader = true;`

Changes that could cause concern:

* The "jump to search" link was removed as the search is now much
earlier in the DOM and I questioned the value of keeping this. However,
it can be added back in if this change is contentious.

* A "jump to content" link was added to account for the new DOM order.

* Because the sidebar was taken out of the header, users will not be
able to tab from the sidebar button into the sidebar without additional
tweaking (e.g. should we add JS to enable this?). It was deemed that
this work can be saved as a follow-up task.

* I applied `overflow-y: auto` to the `mw-page-container` because the
header's top margin was collapsing and caused whitespace to appear
between the viewport and the header. Alternatively, we could apply a top
padding to the page container and remove the header's top margin. I went
for the simplest solution but am open to alternatives.

* I left the footer as-is in this patch to minimize risk. It might be
cleaner later on to move the footer inside the workspace container which
would leave only one workspace container.

Bug: T261802
Change-Id: Ic553fab3bde25769b103d899b92b3b694c00c384
2020-09-09 18:31:35 +00:00
jdlrobson 287e577cfd Drop legacy selector from Vector
This is no longer needed.

Change-Id: I537dbbcf007860f74feefe3b61f95561969344d6
2020-08-28 12:52:49 -07:00
jdlrobson 370add977c Allow personal tools to span 2 lines
The calculations were a little incorrect as I failed to consider the
sidebar button correctly and how the search's min width and max width
impact layout.

I also move rules from Sidebar.less regarding the placement of the button
into layout where I believe they belong.  We do not have a header component, so the
positioning (margin) of the sidebar button in current form should be here.

This can be revisited if we introduce a header component.

Bug: T249363
Change-Id: I4ff640380eafc8beedb2c3c8fb00a56c71c5cb45
2020-08-18 11:42:18 -07:00
jdlrobson 53d9452795 Move the personal tools and search into header
To support roll out and avoid issues with cached HTML the new
styles for the new search feature are restricted to HTML where
the body tag has `skin-vector-search-header` class.

For legacy mode, we introduce a new class
`skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()`
selector to ensure the styles ship during the phase where cached
HTML can be served. While this will create some display issues in
browsers that do not support CSS3 selectors, all grade A browsers in
our compatability matrix support this.

Bug: T249363
Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
2020-08-11 23:36:01 +00:00
jdlrobson e3a986f587 [modern] Layout index file.
Keep variables concerned with layout in the master file but pull out
the default layout into a separate file.

Change-Id: I4acc2937f8e8a76274a3ffb76e3729dc89ce1ad7
2020-08-11 20:45:38 +00:00