Commit graph

144 commits

Author SHA1 Message Date
jdlrobson 711a41812a Use newly available Skin::getPortletData method to get mw-portlet class
Kept as simple as possible for now. The new class is added but no classes
are removed. This will be done in a follow up.

Bug: T256897
Bug: T253938
Change-Id: Ib31a9d8f2ac14e63b63e82abd4a9aa1fcb956f45
2020-09-29 00:09:26 +00:00
jenkins-bot c9645fe691 Merge "Prevent Vector tabs from overlapping search loader" 2020-09-28 13:31:09 +00:00
Jan Drewniak 422955e160 Prevent Vector tabs from overlapping search loader
Bug: T254695
Change-Id: I8391407b8efa5b8165f8b2c33de8849de642ecb5
2020-09-28 12:15:13 +02:00
jenkins-bot 57e069ba81 Merge "[styles] Make Trident workaround value a variable" 2020-09-22 15:06:25 +00:00
Ed Sanders 21d4716612 Follow-up I673c28c2: Only apply clearfix to main content area
Bug: T254195
Bug: T263445
Change-Id: I693cd3d4d32501a2a4ab20140a662943fba22bb6
2020-09-21 13:23:48 +01:00
jdlrobson 9b31740514 Reduce max-width and adjust margin-left
* The margin-left should only be auto at small resolutions - otherwise on large
monitors it becomes visually separated from the logo
* the margin left should be larger
* and max width should be smaller.

Bug: T261686
Change-Id: Ia1331f51764a34f113e3336735e6cfd5fde1d49d
2020-09-11 14:54:58 +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
jenkins-bot b65de993dc Merge "Adds loading indicator for new search module" 2020-09-08 14:24:09 +00:00
Jan Drewniak 1dad545f63 Adds loading indicator for new search module
Provides a loading indicator to show while the new Vue.js based
search widget loads. Given that the new widget will pull down the
entire Vue.js runtime, it's likely that there will be a delay
before the search suggestions appear. This loader is meant to
improve the perceived loading experience of the new widget.

Adds:
- New searchLoader.js file containing loading behaviour.
  - This overrides the code searchSuggest loading behaviour.
- New SearchBoxLoader.less file containing the loader styles.
- i18n message: 'vector-search-loader'.
- The Event type to jsdoc.json

Bug: T254695
Change-Id: I6b5f0a60018954e10b9e80792030b67b2ec33e5a
2020-09-08 13:59:41 +00:00
Stephen Niedzielski f5323d9bf1 [search] Tweak the search input styles
Update the search input styles to match WVUI.

Change-Id: Id7f88c31eb662cc859d7e465f85631d7a8cbe184
2020-09-04 14:49:50 -06:00
jenkins-bot 6ae5cf8064 Merge "Reduce space between sidebar and content" 2020-09-03 17:22:33 +00:00
Jan Drewniak 5a8bb57b55 Reduce space between sidebar and content
Bug: T259761
Change-Id: Ieb7a49e1239fe4e0d2866a1433f9dde0141c0b3d
2020-09-03 13:18:52 +02:00
jenkins-bot dd178231c1 Merge "Flush search to right on smaller resolutions" 2020-09-03 09:59:59 +00:00
jenkins-bot 53f0b183e8 Merge "Remove the loading background image for loading class" 2020-09-02 19:38:20 +00:00
hmonroy 4169fc6dc1 Remove the loading background image for loading class
The star should spin its current background image when transitioning between different
watch requests.

Bug: T259053
Depends-On: I1e11f0e129c53b405a2ffa8
Change-Id: Id2f9b2e25761c052aeaa410edead65ec298209a2
2020-09-02 11:42:49 -07:00
jdlrobson bd8bfa8deb Flush search to right on smaller resolutions
Bug: T261686
Change-Id: I30985009c05e64bff5aaa240f7c3970475fe0fba
2020-09-01 15:53:20 -07:00
jenkins-bot d4663ef0ec Merge "Accommodate longer user names in personal tools" 2020-09-01 22:20:21 +00:00
jdlrobson 43e9776142 Accommodate longer user names in personal tools
The width should apply at all resolutions. Note, because of the nature
of flex box and flex-grow the personal tools can grow larger than this
value.

This avoids Alex Hollender (WMF) and similarly long usernames from every
running to the next line before they are allowed to.

Bug: T249363
Change-Id: I4640947aaaf7ab764cb17b911af7085ac291b7d1
2020-09-01 12:10:08 -07:00
jenkins-bot 8b70eec55d Merge "Include @padding-horizontal-page-container in header adjustment calculations" 2020-09-01 11:21:41 +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
Volker E 5bffb899a8 [styles] Remove Internet Explorer 8 specific hacks and workarounds
Bug: T261378
Change-Id: If51f20137a001276800fafb97ed4ceb53617ae79
2020-08-27 01:34:13 -07:00
Volker E fdde3192fa [styles] Make Trident workaround value a variable
Carved out from I8e6e283db5d4034861f8d50d9b3f211df1a78c6c.
It makes sense to have a variable defined for that value.

Change-Id: Iaaca1fd7c15a0c121e60b5ae6debf4bf6920168e
2020-08-27 01:27:50 -07:00
jdlrobson 6659be5b49 Include @padding-horizontal-page-container in header adjustment calculations
I overlooked the horizontal padding on the page container. This needs to be
included in the decision on whether to make the header 2 lines on 1.

Bug: T249363
Change-Id: I4fabac7d57e37db87d2363073317109f582de883
2020-08-26 14:33:22 -07:00
jenkins-bot b98872714a Merge "Allow personal tools to span 2 lines" 2020-08-19 17:20:41 +00:00
Volker E 5b563ba9f9 skins.vector.styles: Remove obsolete linear-gradient hack
Following up I6bc4cf541eefd00e2e42 we also need to remove the
linear-gradient hack that only made sense in combination with the
now gone PNG fallback background-image.

Change-Id: I0e7ed0451884a6bd612cb1082555338a26129e2d
2020-08-18 20:50:19 +00:00
jdlrobson aa45edd2f2 Refactor: Drop legacy selectors
These are no longer needed. The classes remain where necessary for
gadgets but the CSS rules no longer need to apply to them.

Change-Id: I18afa15ddab75128463dc83c916e11436db0575a
2020-08-18 12:39:13 -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
jenkins-bot 4b6b46631c Merge "skins.vector.styles: Remove PNG fallback and merge skins.vector.icons module" 2020-08-18 11:51:56 +00:00
jdlrobson 8a2ffe0722 Search in header: fix break point
The width comfortable should consider the max-width of the search
not the min-width.

This fixes the bug documented in T249363#6391041

Bug: T249363
Change-Id: I3e216a3705730092f88d1dcbb5193e411945a083
2020-08-17 14:36:01 -07:00
Nicholas Ray 7a769a0374 Apply @min-width-supported to .mw-page-container
As part of moving search into header work, a min-width (via
@min-width-supported variable) was introduced on the body and takes
effect when the search feature is enabled.

However, given a min-width already exists on the page container from the
max-width work, I'm wondering if it makes sense to replace that one with
the @min-width-supported variable as it seems like we should only have
one min-width vs. having two.

Note: As a bonus, this has the (unintended but helpful) side-effect of
mitigating the sidebar button being blocked by the personal menu at
small viewport widths (T258465).

[1] I7f8059d43eaab49de362405784b34a4fe502c7b0

Bug: T258465
Change-Id: I920cd0e9d1564c82bcdc89b721352620158073c6
2020-08-13 17:11:48 -06:00
Timo Tijhof 31c5273ef9 skins.vector.styles: Remove PNG fallback and merge skins.vector.icons module
* Remove the PNG fallbacks for chevronHorizontal-….svg and menu.svg.

  As of T248061, these are no longer needed.

* Added the one line of trivial CSS directly to skins.vector.styles
  instead of through its own module.

  This helps recovers the module cost of vue module deployed this
  week (from  Ib6c8f890fb3d6e7), which is currently empty and unused.

  With T253582, we'll be able to recover a lot more budget in
  this area.

Bug: T258766
Change-Id: I6bc4cf541eefd00e2e428f918664a26da331c1a9
2020-08-13 13:53:46 +01: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
jdlrobson f92e40152a Print: Add layout print styles on Ctrl+p and ElectronPdf
Bug: T253842
Change-Id: Ia7104a30a37a13cbeb6cfa4bdf1ee50ee677a87a
2020-08-03 20:06:37 +00:00
Volker E b0ccdc5892 [less] Remove normalize rules covered by mediawiki.skinning/normalize module
`padding: 0` was either a rule targeting very early Operas or
Netscape/Firefox or came out of Eric Meyer's reset.css as
misappropriation.
normalize.css haven't had it in v1.0.0, only relied on `margin: 0`
normalization for IE 6 & 7.

Change-Id: I3d2894a1e68414b64751bd6ebe7e1af77d260ee7
2020-07-31 22:21:25 +00:00
jdlrobson fe49542008 Collapse media print query
Per discussions, its proposed that the target of all media queries
is defined in the entry points skin and skin-legacy

Please verify with `git diff HEAD^ -w` that no changes to print
styles have occurred

Bug: T253842
Change-Id: Id7d1c806d77ee50335a1c9985acc7e4406e64ccf
2020-07-29 11:16:29 -07:00
jdlrobson c0f48624c7 Print: Logo styles should apply in printed media
Bug: T253842
Change-Id: I7875795f12bb3e5e01e18aeb1e54ccfe7e44a020
2020-07-29 11:15:08 -07:00
jenkins-bot eeb6182a91 Merge "Restrict image border to images in border" 2020-07-28 18:30:02 +00:00
Volker E 89114e38ac MenuTabs: Remove IE 8 fallback
Also removing the image. `rgba()` for the win.

Change-Id: Ieeb33c6af1019df97ae641a017a970ce2e0ec8ff
2020-07-23 18:13:31 -07:00
Volker E 389141651b Remove unused images
All those have been lingering while not being used for a while.
- arrow* files are part of core 'mediawiki.icon' module
- 'link-icon.png' is without any reference nor clear original usage
- 'magnify-clip.png' is part of core 'mediawiki.skinning' module
- 'search-fade.png' was used in #simpleSearch before it got unified with
  Design Style Guide components

Change-Id: I985d3ec25b26eea359ce3dbf5abbe4647bc37ab4
2020-07-23 18:04:26 -07:00
Volker E 5b5378a54f Replace deprecated background-image-svg() mixin calls
Use normal `background-image` properties with SVGs only now
that IE 8 and Android 2.1 is removed from Grade C.
Also removing all PNG fallback images.

Bug: T248062
Change-Id: Ib91cd0514d331ab6a0f8b668aef6991cf3267fe2
2020-07-23 17:50:31 -07:00
jdlrobson 01dd41a0b3 Restrict image border to images in border
In future we will be displaying the header and logo in the print
display - to avoid adding unnecessary borders scope this rule.

Bug: T253842
Change-Id: I123b73fcaa09c0213914ca6fd8074a1305814529
2020-07-23 10:37:36 -07:00
jenkins-bot 3651b41cb0 Merge "Max-width layout: Make page container fill viewport if content height is small" 2020-07-15 05:15:23 +00:00
Nicholas Ray acf42aa48f Max-width layout: Make page container fill viewport if content height is small
This will help mitigate the sidebar overflowing the page container
(related to T257518). Note that this does not prevent the overflow from
happening as the sidebar can still be longer than the viewport, but it
should reduce the number of times it can happen.

Bug: T257518
Change-Id: Id7138b4d4459242772bee8e11dc7edeaf76b3ca0
2020-07-14 17:20:06 -06:00
jdlrobson 018f30c615 [Refactor] Simplify searchbox layout rules
Follow up to I340b9e7e91960713c0ebb4d3d26e2ae2d5628f37

The layout styles reference internal CSS classes within
Vector components that may change at any time.

For legacy layout, I leave the styles the same (they have a FIXME)
As Aron noted on code review the impact such a change
could have on user styles. For modern however I simplify the styles
as follows:
* The top margin on the form is promoted to the main element - this has
the same end result.
* Likewise the width dimensions are moved from child elements to
the parent


Bug: T249363
Change-Id: If923a5dddaac6217462e75d476e07d923ee1743f
2020-07-14 21:02:03 +00:00
AronDemian ba8ec2f842 Split Searchbox layout styles for legacy and modern
No changes made to the CSS rules.
* 'SearchBox.less' is the common part that won't change in modern.
* layout styles copied to both 'layout.less'

Bug: T249363
Change-Id: I340b9e7e91960713c0ebb4d3d26e2ae2d5628f37
2020-07-14 13:01:35 -07:00
Nicholas Ray d5cb58b3f0 Max-Width Layout: Make footer width match content width to avoid overlap with sidebar
* `mw-content-container` now wraps the footer (as well as the content)
because we want the footer to match the content width at all times and
to expand with the content when the sidebar is closed (at small viewport
widths or when on history/special pages)

* `mw-footer-container` margins were replaced with padding to avoid
issues with margin collapsing.

* Applied a white background to sidebar to handle the case of the
sidebar overflowing the `mw-page-container`. When that happens, we at
least want the text in the sidebar to be legible.

* Closely related, `mw-page-container`'s `overflow: hidden` style was
removed to prevent `mw-page-container` from cutting off the sidebar. The
purpose of this style was make it appear as if the sidebar was being
hidden by `mw-page-container`, but tweaking the sidebar's translation
animation to achieves this effect as well.

Bug: T257518
Change-Id: I89edf89b2ac4abe2053f0c9b366f143133ff420f
2020-07-13 18:26:18 -06:00
jenkins-bot 36a1516f96 Merge "Implement Page, Workspace, Content, and Article Toolbar Containers" 2020-07-08 01:21:49 +00:00
Nicholas Ray 092a2957af Implement Page, Workspace, Content, and Article Toolbar Containers
This patch closely follows the desired guidelines/desired
styles Alex Hollender has put forth in his prototype, but uses
multiple containers to achieve this look since our DOM order/structure
is different than the DOM structure in the prototype. The following
containers are used, but unlike his prototype, they are sometimes used
more than once:

* Page Container: Contains every other container and limits the overall
max-width of the white part of the page.

* Workspace Container: Contains the sidebar and content container. The
sidebar is displaced ~30 pixels to the start (left) of the workspace
container at all times.

* Content Container: Contains the content. The max-width of this changes
depending on whether you are on a special page/history page vs. other
pages.

* Article Toolbar Container: Contains the article toolbar. The max-width
of this is always the same as the max-width of the article content as we
don't want the toolbar to move when going from the article page to the
history/special page.

Changes to be aware:

* To test locally, `$wgVectorLayoutMaxWidth = true;`. This design is
temporarily feature flagged and defaults to being "off".

* Note that layout-max-width.less is a temporary file made to meet the
feature flag requirement of T246420 (intended to derisk the deployment).
After the deploy, we should merge most if not all of the rules into
layout.less where the max-width design will become the default.

* Per Jon's code review comment, I have relaxed the indenting of
skin.mustache to make the diff easier to reason about. If desired, the
correct indenting can be achieved in a (much less risky) follow-up
commit.

Bug: T246420
Bug: T153043
Change-Id: Ie49f629bc705850c6996164a516957476c034048
2020-07-07 18:34:38 -06:00