Commit graph

189 commits

Author SHA1 Message Date
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
jenkins-bot 9ccd8e2c23 Merge "[modern][styles] Remove unnecessary margin-top" 2020-11-17 14:03:40 +00:00
Ed Sanders 1dccf67d0f Follow-up I43a6951: Remove unnecessary only-child selector
An only-child will match first- and last-child selectors
so this additional selector is not required.

Change-Id: I17d468ba2bda37edc4e54f42f42d50e4b8831b46
2020-11-16 22:39:17 +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
jenkins-bot 924c751421 Merge "Unify blockquote spacing and border style with Design Style Guide" 2020-11-02 23:27:26 +00:00
Volker E 0884f55767 Unify blockquote spacing and border style with Design Style Guide
Unifying blockquote spacing and border style with Design Style Guide.
Also ensuring that blockquote children don't apply inherited whitespace.

Bug: T265947
Change-Id: I43a6951c17376fe3fdd4d24966ec4661c18ffd87
2020-10-30 13:38:01 -07: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 0bba957a37 Reduce min-width so it doesn't include personal tools
Now the header is no longer absolutely positioned the height is not
fixed and the personal tools can safely spill onto a new line

Bug: T264206
Change-Id: Ib2a3cf1907c7d06c2c92ccbd902a98a3f8242f37
2020-10-28 20:05:55 +00: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 61558af56f Fix logic in collapsibleTabs code
Follow up to  6d967ed4a8c
Add the missing ! to check that the portal is hidden rather
than visible to restore the correct logic.

Bug: T71729
Change-Id: I29f6f5e1e6adf3d6d9795cbdabcc152c5d5ac28f
2020-10-23 09:59:29 -07:00
jenkins-bot 99f9597109 Merge "Add client-side performance metrics for searchLoader" 2020-10-15 08:47:18 +00:00
jdlrobson 839876ba82 Use variables for padding content
On the long term we want to provide access to these variables in other
extensions. e.g. VisualEditor

Bug: T259331
Change-Id: Ibbc6f1905ea384a3d159088e3f5eca947eb6ec08
2020-10-13 21:26:08 +00:00
jdlrobson da26e09bca Vertically align personal tools
Bug: T264339
Change-Id: Ic9df8c1cea0fef82461a84190689791ce2275812
2020-10-13 19:39:12 +00:00
Nicholas Ray 8cf278d305 Add client-side performance metrics for searchLoader
As part of comparing Vue search with legacy search, we need to track how
long it takes to lazy load the wvui library. A similar metric was added
to measuring the mediawiki.searchSuggest module in
I0fa6b8904bd43c87a68e9161f00d686a0e588966.

This commit adds the following metrics which will only be used in our
synthetic tests. We are not doing RUM tests at this time.

To test locally, add the following to your LocalSettings.php and append
the query param `useskinversion=2` e.g.
(http://localhost:8181/wiki/Test?useskinversion=2):

```
$wgVectorUseCoreSearch = false;
```

Marks:

* mwVectorVueSearchLoadStart: Marks the start of loading the search
module.

* mwVectorVueSearchLoadEnd: Marks the end of loading the search
module.

Measures:

* mwVectorVueSearchLoadStartToLoadEnd: Measures the time it takes to
load the search module.

Bug: T251544
Change-Id: I14e44b45a66213821d69cd22395fedbae747da88
2020-10-09 13:26:28 -06:00
jenkins-bot 178a552ad1 Merge "[icons] Re-optimize SVGs with SVGO and manually" 2020-10-06 23:23:15 +00:00
Volker E a6288523d3 [styles]: Remove IE 8 workaround
Change-Id: I8ec8899aba282d4b232cc86f8683e53ea9c30f06
2020-10-06 16:48:09 +00:00
jenkins-bot d8750377f3 Merge "Drop unsupported skin CSS classes" 2020-10-05 19:32:55 +00:00
jenkins-bot 6516a93085 Merge "[docs] Add support note to linear-gradient fallback" 2020-10-05 19:03:34 +00:00
Volker E b23a809c44 [docs] Add support note to linear-gradient fallback
Change-Id: I9db03e4f2a0fe3eb52aeb9273f871150d2c93375
2020-10-05 18:41:26 +00:00
Jan Drewniak 5718afbc37 Adjust the left-alignment of the sidebar
Bug: T257395
Change-Id: Iae03d45b2d21be7e4635646c57480c0ced770419
2020-10-05 18:19:10 +00:00
Volker E 7bbad93bc4 [icons] Re-optimize SVGs with SVGO and manually
- Reducing precision to 1 decimal point (no visible change),
- adding `title` tags where useful,
- reducing paths,
- removing unnecessary `g` elements and
- lowercasing hex colors

Change-Id: I77ee08fbdb54d529f34576b076def985407b3bc2
2020-10-05 10:27:33 -07:00
jdlrobson 89fee04f0b Drop unsupported skin CSS classes
Drop support for vectorMenu, vectorTabs and
vectorMenuCheckbox, body, menu selectors in preference
for standard selectors.

This change will impact a large amount of user scripts/styles but should
not impact any gadgets.

These classes were kept around for user scripts and styles however are not
needed internally. As we transition to a more maintainable skin menu
system, it is time to lose these selectors even though this will cause
disruption.

Vector now will use the mw-portlet class rather than the vector-menu
class in its own CSS styling, however it keeps the other classes to
allow differentiation of the different types of menu.

Changes to test: Previously the tests assumed all portlets were empty
when checking the classes. This is very rare, so its better to check
the classes of non-empty portlets, so several tests are updated
accordingly to drop the emptyPortlet class.

Bug: T262092
Change-Id: I1824335eb47d613c2a4804ec1f1106c0f4c16101
2020-10-01 19:50:24 +00:00
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
Timo Tijhof 7e0731de48 Implement mediawiki.skin.variables.less for Vector
For now, only define:

- @font-family-sans
- @border-radius-base

Bug: T112747
Depends-On: Icf86c930a3b5524254bb549624737d3b9dccb032
Change-Id: I47da3046678117d5214354d1efe635f32f307dad
2020-09-16 08:39:13 -07: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