Commit graph

342 commits

Author SHA1 Message Date
Clare Ming 63f9dd81e3 Cleanup styles for personal user dropdown menu.
Remove redundant styles. Update personal menu dropdown to more closely reflect design of OOUI dropdown elements. Extract legcay-specific, modern-specific styles for UserMenu into separate partials. Create new shared UserMenu component.

Bug: T276561
Change-Id: I1e56cd5b3b24ac1b5cae684301b8e3a84ea33a5c
2021-05-13 23:19:54 +00:00
jenkins-bot 50430ea06a Merge "search: Update styling for the search loading state" 2021-05-10 20:55:31 +00:00
bwang 964e214e87 search: Update styling for the search loading state
Bug: T273093
Change-Id: Ifd7f07411597be844cb7de79e416975261069506
2021-05-07 17:04:42 -05:00
Jan Drewniak 9027d57804 Fix: update to 80d734b4, hide language dropdown when ULS loads
Bug: T276140
Change-Id: I70997fbc54554b8d1b9c271a5ca93f2a47f1ee92
2021-05-07 12:24:30 +02:00
Clare Ming dc0b679bfa Consolidate user links into personal dropdown menu for logged users.
Pull personal menu items except for user page link into a consolidated dropdown menu based on feature flag using Vector hooks. Add consolidate user links feature flag for logged in/out users. Update styles for personal toolbar. Add logic to template to show legacy toolbar or consolidated toolbar based on feature flag variables.

Bug: T276561
Depends-On: If4e143aada711d210ae45d33b97a6be0685b6a41
Change-Id: I1c305d89bece147a6f1b478441119c3169abfbdd
2021-05-06 12:49:39 -07:00
Jan Drewniak 80d734b4d2 Place language button near bottom of Main page.
In modern Vector, the language button that is placed inside
the page header should appear near the footer, if the page is a
Main page.

This changes some CSS selectors to not depend on the language
button having the `.mw-body-header` parent element.

Bug: T276140
Change-Id: I97bf0c11d0321752d472ac4988618a1db92b7271
2021-05-05 13:42:19 +02:00
Jan Drewniak f52c2f8a4a Scope right-aligned dropdown menus to #right-navigation & .mw-portlet-lang
Removes the global rule for right-aligning the Vector dropdown menus
and instead scopes that alignment to dropdown menus that appear
inside #right-navigation and the language button in modern Vector.

Bug: T275158
Change-Id: I6c00ccc365f70682841d9eda9d31bbe25c757aa0
2021-04-14 23:31:59 +02:00
Jan Drewniak edd2f4ff85 Reorganize LESS files to match ResourceLoader conventions
Separating most LESS files into 2 ResourceLoader modules and a common
folder:

- skins.vector.styles
- skins.vector.styles.legacy
- common

This changes aims to clearly separate the old (“legacy”), the new
(“modern”) and the common styles which were previously all placed under
`skins.vector.styles/`.

Inside each directory are separate folders for `layouts` and
`components`.

The entry files, `skin.less` and `skin-legacy.less` are moved into the
specific folders and a third, `common.less` entry file is created that
contains the common imports for both old and new Vector.

Aliases have been added to the Storybook Webpack config to avoid adding
the story file changes to this patch. Images coming from CSS `url()`'s
have also been temporarily disabled in Storybook until Storybook can be
upgraded to use Webpack 5, and use array values for aliases, in a
follow-up patch.

This patch also slightly changes a footer layout specific rule so that
existing `padding` remains unchanged in rendering due to new common and
component structure.

Bug: T264309
Change-Id: I1cd2681a2b61edb7be56c38f9bb3994827d7e322
2021-04-08 15:47:56 +01:00
jenkins-bot 2e8f193072 Merge "Remove redundant mw-indicator styles from layout-default.less and layout.less" 2021-04-06 21:25:04 +00:00
jdlrobson bdd7eaacf1 [legacy] Restore old floating style inside Vector
This is a modified revert of Ia1eec412111e8f6af3b45affdc186d9eafd4262c.
This is not applied to modern Vector, for reasons given on ticket.

Bug: T279008
Change-Id: I3234e7712b8c111b070c35e38425c865ff7213f9
2021-04-05 15:07:07 -07:00
Bernard Wang 55fdf38714 Remove redundant mw-indicator styles from layout-default.less and layout.less
Bug: T278362
Change-Id: I76f39a9f4cf7404e7d50a272ebce08d53594ef5f
2021-04-05 16:58:41 +00:00
jenkins-bot 1b42cd8dd4 Merge "[styles] LanguageButton: Amend icon color by setting opacity" 2021-03-30 23:10:51 +00:00
Volker E 5a1a382c17 [styles] LanguageButton: Amend icon color by setting opacity
Amending icon color by setting `opacity` accordingly to Design Style
Guide requirements.
Also using `em` base sizing for accessibility reasons in order to
make icon resizable on user text zoom preferences. And adding some
comments and mediawiki mixin usage.

Bug: T277660
Change-Id: Ia226857a38d3b3d5b4583e95905ef55e406c5cb2
2021-03-30 22:13:50 +00:00
jenkins-bot d29bdb86bd Merge "build: Update SVGO to latest v2.2.2 and re-crush SVGs" 2021-03-25 23:17:31 +00:00
Ammarpad b7bf9a88a3 Use content-parser-output RL SkinModule feature
Require MW 1.36

Bug: T277218
Depends-On: I52f752aa782b09a51e2165300cc75d0e47fa3351
Change-Id: Ia1eec412111e8f6af3b45affdc186d9eafd4262c
2021-03-25 17:34:28 +00:00
Volker E 5734191840 build: Update SVGO to latest v2.2.2 and re-crush SVGs
SVGO v2.x changed configuration to JS, amending configuration.
Also re-crushing SVGs.

Change-Id: Id6379e06e6aa1c25760f8489166d354fca25cd52
2021-03-25 09:19:42 -07:00
jenkins-bot 734ced999b Merge "[styles] Remove margin normalization already covered in 'normalize' module" 2021-03-24 21:55:36 +00:00
Volker E e5b652852e [styles] Remove deprecated .box-shadow() mixin calls and cleanup vars
Removing calls to deprecated `.box-shadow()` as basic browser support
is now given unprefixed. In the course we also replace deprecated
vars with already available ones since MW v1.35 following unified
name scheme on both, box shadow and border ones.

Change-Id: Iae353c934c0995c0b6b2635761352685eb91accb
2021-03-24 14:03:25 -07:00
Volker E c8cd609862 [styles] Remove margin normalization already covered in 'normalize' module
Has been introduced before 'normalize' module, now it's time to remove
duplicated style property.

Change-Id: Idff74430655c29b67dfccf97a22f53caaee34155
2021-03-24 13:33:19 -07:00
Jan Drewniak 88dcdab6db Removing temporary .body selectors.
Per the comment, it's been a week. These selectors should be removed.

Change-Id: Ifebb7939596827fc8ade7213f3acf6bf80eebb40
2021-03-24 13:53:48 +01:00
jdlrobson 127422e4c6 Language button skinStyle overrides
* ULS makes the language button text font weight normal on bold,
reset this.
* Because our icon is non-standard our left margin is also non-standard.
Adjust.
* Remove opacity on language button (it applies to more menu because of
the label text color)

Bug: T268241
Change-Id: Ie9b275a857e8bcb7b767446f0523954134751659
2021-03-08 11:11:07 -08:00
jdlrobson 41d30615a2 [modern] Usability improvements to dropdown
* Don't reveal the menu on hover
* Don't flip the dropdown arrow when open
* Menus close when clicked outside

Bug: T275681
Change-Id: I36f5c46422725a935c962be3194fd37bde1fa769
2021-03-07 18:59:41 +00:00
jenkins-bot cf187653a8 Merge "Correct the height of the language button" 2021-03-03 19:53:23 +00:00
jdlrobson ac62386909 Correct the height of the language button
In wvui quiet buttons have a minimum height of 32px
Given the importance of vertical alignment, here inside Vector
seems the best place to define this.

Bug: T268241
Change-Id: I95b61a0c239ccfb7fa1b2ddaa6980ad2737e8f26
2021-03-03 10:03:17 -08:00
jenkins-bot 9bdd6c0130 Merge "[icons] Amend 'search' icon" 2021-03-02 18:40:52 +00:00
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
Jan Drewniak d8bdba0026 Reorganize layout variables
Reorganizes the variables into sections in layout.less.

Also removes a few variables that were only used once for the calculation
of other variables (e.g. `@min-width-container-base`,
`@margin-horizontal-sidebar-button-icon-ems`) as well as
variables that were just multiplied by 2, e.g.
`@padding-horizontal-page-container-total`.

Change-Id: I4a3fc3111f7983a55b7992bee09c03a7ab4092b8
2021-02-24 22:23:07 +00:00
Volker E 35ce451498 [icons] Amend 'search' icon
Following Design Style Guide guidelines slightly decreasing icon on
canvas in accordance with designers.

Bug: T213580
Change-Id: I0ea2426f4e0873b9aac12fe2143203a765e42c3a
2021-02-23 13:01:59 -08:00
jenkins-bot fdd713b244 Merge "Search results should overlay personal tools" 2021-02-12 01:36:06 +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
Jan Drewniak e1f2d2896f Convert max-width layout to relative units
The max-width layout uses a mix of ems and px.
the var `@max-width-margin-start-content` uses ems to define a max
width breakpoint, however the workspace and content containers
`@max-width-content-container` are defined in px.

This leads to layout bugs like the sidebar ovelapping when the base
em unit is not the assumed 16px.

This patch changes the layout px units to ems.

(There should be no visible difference at the assumed 16px font size).

Bug: T270104
Change-Id: If8f284dc5e27c8e1c10f3a6897b7a5e4b8bb357d
2021-02-10 22:58:14 +01: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
Nicholas Ray b8f1d8c8a5 Bring back hoverability of dropdown menu (e.g. "More" tab)
Looks like I72165ba3784da3fcc9d1dd7076b3a6c96e670a2f removed the hover.
This brings it back.

Note this also makes the language button hoverable and will probably
need an additional specific selector (although the language button has
not been enabled anywhere yet)

Bug: T273143
Change-Id: Iac0539313eca5ba8d7ac165d31d2c028e803eacc
2021-02-08 23:11:43 +00:00
jdlrobson 0e0ec99c81 Language button - design fixes
* change color to #202122 (currently it's #54595d)
* padding-right for button text should be 30px (currently it's 40px)
* language icon seems to be displaying at 21x21px (should be 20x20px)
* language icon's margin-right should be 7px (currently is 14px)
* the down arrow should be 10px from the right edge of the button (currently it's 8px)
(requires core change in 661497 to apply)
* increase font-size to 16px (currently it's 13px)
* add a max-height of ~65vh (or something similar)
* add overflow: scroll
* add a border-top (since the menu is wider than the button)

Bug: T268241#6805123
Change-Id: I8891556cb82450db77b90837eeeb72ac78926e29
2021-02-08 19:03:02 +00:00
Nicholas Ray e3abac06a6 Add mw-interlanguage-selector class to language button & hide menu/arrow when appropriate
* We add the `.mw-interlanguage-selector` class to the
.vector-menu-heading in the server rendered HTML. `ext.uls.interface.js`
later attaches a click handler to this selector that loads the rest of
ULS.

* We hide the dropdown arrow for js users and only show it again if
ext.uls.interface module isn't installed or is not being loaded.

* When the `ext.uls.interface` module has been loaded, we hide the checkbox
and checkbox hack menu in favor of showing the ULS popover.

Additionally:

* Adds '.vector-menu-heading' class to menu headings.

* Change h3 selector to `.vector-menu-heading`.

Bug: T273232
Change-Id: I6f4572c16ca4096dcda3aac4d585003b93dcccfa
2021-02-05 15:03:07 -07:00
jenkins-bot 3cb3b08ee5 Merge "Style the language button" 2021-02-05 00:06:21 +00:00
jdlrobson 98e7bce753 Style the language button
For now the core button mixins are used. In the longer
term we should aim to leverage wvui.

Bug: T268241
Change-Id: I334af039567c52462bcb4c15f07242c6de8eeace
2021-02-04 23:02:48 +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
jdlrobson f083eb2716 Add language icon to language button
The sidebar currently uses mw-ui-icon so we continue this
practice, however we provide a general rule to ensure all icons
rendered through it default to 20x20. This didn't impact the side
bar icon as that already specifies a height of 20px.

Bug: T268241
Change-Id: I6f8e8400da048a97cbf59c3e6ad918763fc91041
2021-02-03 15:38:30 +00:00
jenkins-bot 4b171bf74f Merge "After portlet is included in display of menu dropdown" 2021-02-01 11:02:44 +00:00
jdlrobson 3ecc89e5c5 After portlet is included in display of menu dropdown
Bug: T273143
Change-Id: I72165ba3784da3fcc9d1dd7076b3a6c96e670a2f
2021-01-28 14:08:36 -08:00
Nicholas Ray 1e7ed6b2e1 Make expanding search input dependent on $wgVectorWvuiSearchOptions
Per T270202#6767750 the input should expand when focused before WVUI
loads. However, the input should *only* expand when `showThumbnail` is
`true` in `$wgVectorWvuiSearchOptions` to match how its done in WVUI
where it takes into account the size of the thumbnails. When
`showThumbnail` is false, it should not expand as the input won't match
WVUI and the WVUI load transition will be jarring.

To test locally, toggle between true/false in your LocalSettings.php:

```
$wgVectorWvuiSearchOptions = [
  "showThumbnail" => false,
];
```
Bug: T270202
Change-Id: I70277c1082a504fbd5f6023e9873e8071de7e35d
2021-01-26 17:37:22 -07: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 27ad6eab12 Merge "Rename wgVectorUseCoreSearch to wgVectorUseWvuiSearch" 2021-01-25 22:47:49 +00:00
jenkins-bot 407036710c Merge "Align the menu dropdown list to the end of the "more" button." 2021-01-25 22:39:51 +00:00
jenkins-bot 162cf8449d Merge "Languages can be moved out of sidebar" 2021-01-25 22:38:12 +00:00
Jan Drewniak 4a959a6878 Align the menu dropdown list to the end of the "more" button.
Instead of aligning the dropdown list to the starting edge of the
"more" button, this aligns the dropdown list to the end of the
"more" button, preventing any potential horizontal scrolling.

The containing list box is right-aligned, but this does not affect
the text alignment.

Bug: T267325
Change-Id: I8b889f8314519b8c6a74c661aca773b9b546657b
2021-01-25 15:52:16 +00:00
Nicholas Ray 53f49c5c64 Rename wgVectorUseCoreSearch to wgVectorUseWvuiSearch
This allows better compatibility with FeatureManager (e.g. can use
requirements such as REQUIREMENT_LATEST_SKIN_VERSION). It will become
especially useful in I70277c1082a504fbd5f6023e9873e8071de7e35d and when
A/B testing search.

Bug: T270202
Change-Id: I3a063e0b085765ea1db3c4478fb30c11b0942b75
2021-01-22 16:25:46 -07: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
jenkins-bot db5f1ebc1d Merge "Use pointer-events: none on magnifying glass to prevent submit button behavior and tooltips" 2021-01-15 22:21:06 +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
jenkins-bot d525e564db Merge "Use padding margin-collapse hack instead of overflow" 2021-01-14 22:42:50 +00: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 b0c30102fb Merge "Remove min-height style from #searchButton, #mw-searchButton" 2021-01-14 22:16:18 +00:00
Volker E 26126d15e4 [styles] Ensuring correct rendering height of search button in Safari
Overriding weird UA styles to ensure maximum click interaction area on
search button in no-JS and JS environment.

Bug: T272089
Change-Id: I8600402e022c041da29b31bf828198843c2ad7c6
2021-01-14 13:22:01 -08:00
Nicholas Ray de88675570 Use pointer-events: none on magnifying glass to prevent submit button behavior and tooltips
Follow up from Ibab9992a6aa3a60f83324b40017b53fb061991d7 (please refer
to that commit message), but using `pointer-events: none` to remove all
submit button behavior (submit behavior, cursor change, and tooltip).

Bug: T270202
Change-Id: I2bd8e88f1f497cc3b2d88c7fdad33c812d13a40a
2021-01-13 16:25:03 -07:00
jenkins-bot 7273a5194c Merge "Change magnifying glass cursor from pointer to default (arrow)" 2021-01-13 22:50:02 +00:00
Nicholas Ray ef700c4a6a Set Vector search variables relative to @font-size-base factor and increase max-width
T270202 shows the correct dimensions of the search component having a
max-width of 500px and min-width of 350px but since we set the font size
of `#p-search` to `@font-size-base` [1], I suspect the search related
variables need to account for this factor as well.

This increases the max-width of search to 500px per the spec.

[1] 30eb683a70/resources/skins.vector.styles/VueEnhancedSearchBox.less (L23)

Bug: T270202
Change-Id: I13ad550734e8a5347ed70e4b3c33102b4a13bde7
2021-01-13 22:18:57 +00:00
Nicholas Ray ab4a41426d Change magnifying glass cursor from pointer to default (arrow)
Before WVUI loads, we show a magnifying glass at the start of the input
that visually mimics the magnifying glass start icon in WVUI's typeahead
search component. Unfortunately, this element is a submit button in
Vector instead of the inert span element used in WVUI.

Although the submit button is useful for no-js users, it might be
confusing for js users. Ideally, an inert element like a span would be
used instead, but that deserves its own ticket. As a temporary easy
stopgap, changing the cursor to be an arrow instead of the pointer might
make this less confusing and discourage clicks to it.

Bug: T270202
Change-Id: Ibab9992a6aa3a60f83324b40017b53fb061991d7
2021-01-13 15:15:32 -07: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 dd0199a060 Remove min-height style from #searchButton, #mw-searchButton
These buttons are already absolutely positioned with their `top` and
`bottom` styles set. More importantly, the min-height style is causing
the buttons to not be vertically centered in Safari.

Bug: T270202
Change-Id: I21b88af4313249d8b2b775c32d12aa1f65c2d0c2
2021-01-12 11:01:19 -07: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
jdlrobson 9f1a1fa829 Simplify menu code
SkinMustache in core provides most of what is required for Vector to
generate its menus.  In the interest of having a canonical source of
truth for menus across all skins, Vector should use this data.

To ensure the HTML generated is (mostly) the same after this patch to
prior, a few modifications are necessary:

* The data from core is decorated so that Vector can continue having its
  own custom class names on menus. This is done using the
  decoratePortletClass method.
* There is no support for a menu having a header representing the
  selected menu item, as is currently the case with variants. This is
  achieved via an extension to getPortletData. It's assumed that later
  when variants are merged with languages, this can be removed.
* Menus are agnostic to how they are displayed, so we must continue to
  add the is-dropdown template variable to drop down menus. In future we
  may want to rethink our Menu partial to make this unnecessary in PHP.
* The portal-first class is redundant in the modern Vector as we can
  use the first-child selector. Previously we introduced a class to
  service the legacy skin where this rule doesn't apply as #p-logo is
  the first child.  However, the legacy skin can do this using a special
  next sibling selector instead.

Bug: T268157
Change-Id: I5f7adc1840441b508ffee40139b85b64021789e6
2021-01-04 19:02:34 +00:00
Nicholas Ray 0fdd4a99ac Sync location/other styles of #mw-searchButton with #searchButton
`#mw-searchButton` is apparently used with no-js clients or if the
js-search is broken [1]. Its position and dimensions should be kept in
sync with #searchButton.

This commit:

* Ensures that the same styles, including position, applied to #searchButton
are applied to "#mw-searchButton" so the dimensions are identical. This
should also address a critique in T270202 by removing the "invisible
button".

* Applies a `client-js` selector to ensure these buttons are
only positioned to the left of the search input if js is enabled. If js
is not enabled, having these positioned to the left is confusing as the
input has no obvious "submit" button.

* Syncs the input's end padding to match WVUI's input's end padding if
JS is enabled.

[1] 465e9492bb/includes/templates/SearchBox.mustache (L12-L21)

Bug: T270202
Change-Id: Ie1bb8c68b713b3a18f90ee11b44c78b436a6d0ba
2020-12-18 11:14:19 -07:00
Nicholas Ray 465e9492bb Remove suggestion link underline on hover and li bottom margin
Per T270202, there should be no underline on hover. The underline is
coming from a style in core.

There should also be no bottom margin on the suggestion li elements. The
bottom margin is also coming from a style in core.

Bug: T270202
Change-Id: I215a41aa328366aee2bb552d5d49c95905fd37f2
2020-12-17 10:06:29 -07:00
Nicholas Ray 720bd0e6b7 [modern][styles] Use @size-search-figure variable in padding-left calc
This variable is used in the same way in WVUI.

Change-Id: Ib7a6d7bb456b3179c3b2eae4b1b0da064fe1f79c
2020-12-14 17:04:33 -07:00
Volker E 595870baeb [modern][styles] Amend Typeahead component styles in modern
Following Design Style Guide components sizing and Alex' feedback
on task. Changing applied styles scope to non Vue.js enhanced,
modern-only style of search component as well, in order to have
clean appearance and transforming disruption free.
Also changing em static values to LESS calculations for more developer
friendliness and change background-size to be `em` as well for
user-set typographic zoom preference ability.

Bug: T269959
Change-Id: I157712721621344171a32a8887a5e20cc16cae0d
2020-12-14 11:37:14 -08:00
Volker E 816836c2ae [modern][styles] Shift search bar to the left
`@margin-horizontal-search` is used for margin of search component
and for personal tools, but they are also floated right so one only
gets a clearer picture of this change when the canvas is exactly at
one specific size.
Additionally it's used for a media query, so the min-width is slightly
reduced (by 32px equivalent) as well. That's advantageous too.
At some point we're going to change this to `rem` unit, that's why I've
taken distance from changing it to a `px` value for now although devised
differently before.

Bug: T269959
Change-Id: I21cac3f049eed64520dd229ef80d10f9be853e0e
2020-12-14 08:12:01 -08:00
Jan Drewniak 8afa6f4440 Improve visual similarities between Vector and WVUI search forms.
Modifies and annotates the CSS required to make the server-rendered
version of the new search form look like the WVUI version of the
search form.

Bug: T264355
Change-Id: I989860cfbb755ecbb706b79bd807e9d0013bc4e5
2020-12-09 16:04:45 +01:00
jenkins-bot 3c6c8ebbba Merge "Integrate WVUI search into Vector" 2020-12-08 22:18:38 +00: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
Volker E 795de73496 Amend standard 'search' icon size, position and CSS rules
Updating 'search' icon to latest WVUI/OOUI optimized, reduced path. Also
- amending size of search input and position of icon in input slightly to
  align it closer to standard text inputs
- simplify CSS by getting rid of selector which is targeting both, input and
  button and applying rules only where needed
- fixing code comments
- increasing icon size to `16px` equivalent `em` to enable user text zooming
  preference applied to search icon as well. `16px` is a compromise towards the
  old look and feel of the previous icon bringing it closer to standard icon size in
  legacy Vector.

This change affects both modern and legacy versions of Vector.

Bug: T266166
Change-Id: Ib4c0c74d3cac30e1893f4c76e56e1197652d41ba
2020-12-07 12:19:01 +00:00
Jan Drewniak 125fa03395 Update Vector search icon
Replaces vector search icon with an update version that is
copied from the OOUI icon set and used in WVUI search.

This update will help us unify the visual appearance of the
existing search input with the one in WVUI.

Bug: T264355
Change-Id: I34792ee80e711b10b441668cc4ae18cc0cc9daa6
2020-11-26 13:19:11 +01: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
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 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
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
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
jdlrobson 04bcd93adf Logo shouldn't import layout
This explains a few issues that were occuring in the storybook
relating to modern/legacy.

Follow up to 5195f5fd6 which doesn't reference why.

Components should not import styles relating to one of the Vector
versions. They should all be self contained.

Change-Id: I6f9ef974be97f8be593cd2b79ce37c3e517d549f
2020-07-07 22:22:24 +00:00
Volker E a9b35fa2e4 Use core .mixin-clearfix() instead of DOM element
Removing  presentational `<div class="visualClear"></div>` in process.
Only leaving in for legacy/layout.less and adding comment for future
evaluation if clearfix is continuously needed. In modern we've
got all parts of Vector in our awareness without featuring `float`s.

Bug: T254195
Depends-On: Iddf8f1dffc2d30299b89b3f4966b7fe8ee63090b
Change-Id: I673c28c2d7da4f96c31121d9aec6558e390de24e
2020-07-01 11:20:26 -07:00