Added to core in Ifd4001e312a5fa4b7beaad63ba8c4e79e3201b9b
Applies the border more generally.
Bug: T314097
Change-Id: I884010c6b84b2dcb4dfc55f7b4cab9fefd3f6786
Applying central Codex design tokens in new architecture.
This replaces all existing MN `z-index` tokens and comments on
replacement choice.
Bug: T285592
Change-Id: I23d794566898946a500c10713802d8dfaad993d1
Replacing 'mediawiki.ui/variables.less' @import with
new skin-aware 'mediawiki.skin.variables.less' standard.
Removing calls for 'mediawiki.skin.variables.less' in favor for
'minerva.variables.less' for consistency.
Also
- replacing several static values with new Codex design token featuring
skin variables of `background-color`, `color`, `border-*` and
`transition` categories
- renaming several Less variables to variable naming standard
- moving a small number of MinervaNeue specific variables into
'minderva.variables.less' file. Those should be replaced in mid-future
by Codex design tokens
Please note, that this patch is not replacing all values with
possible Codex tokens. It's just applying them on selected
categories for consistency for now to keep the patch easier reviewable.
Further replacements will be done in follow-up patches.
Bump MediaWiki core required version to >= v1.41.0.
Bug: T319381
Bug: T332541
Depends-On: I98c8cc27527533e2efb3b987ee34bc403e988b75
Change-Id: I86c5a35377541a784552c29456e0b8b507b3ee9c
Per ResourceLoaderSkinModule disabling these styles is not
recommended. Enabling them is also now needed to support IP masking.
Bug: T325768
Change-Id: Ia7f2eb6ba902ebfc9364147ec0692eaae124469e
These styles have drifted away from the HTML structure since they were
written in 2017.
General:
* Add some comments
* Replace complicated selectors with simple class selectors
styles.less:
* Hide section edit links (previously we relied on MobileFrontend
styles, which one handled some cases - removing them in I9a88b80c2a)
* Show print footer, hide Minerva footer
header.less:
* Remove FIXME (resolved in c323c6858a).
* Fix hiding the search box. In 0bee6a1eb6 a <form> for the search box
was added to the header, and these styles (using tag selectors) were
not updated. Use class selectors instead.
* Remove styles for <h1>. The element was changed to <a> in
a905b1c161, styles to override font-size etc. are no longer needed.
* Consolidate 'padding' rules and remove unneeded !important.
article.less:
* Replace the `[ class|='mw-content' ]` selector, which was not
matching anything. It would match elements with `class="mw-content"`
or `class="mw-content-…"`, but the node we're trying to style has
`class="mw-body-content mw-content-ltr"` (since 7cda5b0bf8 in
MediaWiki core). Use a class selector instead.
* Replace the `.mw-body > .content` selector too. While this one
works, it is also needlessly complicated.
footer.less:
* Fix and simplify how last-modified info and license text is unhidden
(while other parts of the footer remain hidden).
* Remove styles for .license. Unused since 1f2b7dff15, use the desktop
footer added in that commit instead.
* Use the desktop footer for last-modified info, since it's more
suitable for "archiving" (it has a date rather than time ago).
Bug: T323636
Change-Id: I21ef26355e3e6dd8b0c34ae933b7f5b0b222655c
On desktop, the "Alert" icon had more white space around it than the
"Notice" icon, and its popup displayed with a different offset.
On mobile, the combined icon jumped around while the page was loading.
Change-Id: Icdd5bc6e8478f3453b6461a35b7fb53e8ab014e9
For consistency with desktop Vector, Minerva should show two
icons. This also removes the duplicate #pt-notifications-alert
element in the skin.
Bug: T313609
Change-Id: I6449f0c29b52fd2092d63fbef23205ed8f57d50f
They reference T160946, but in that task it was explained that the
problem was caused by faulty wikitext (T160946#3230740), so I don't
know why they were added.
Bug: T323640
Change-Id: I73d654d1f9127e22365d94909681c1c5f5f39597
Both of these elements are already hidden by default in the normal
view (.fmbox is used for some edit notices, which aren't shown in the
editor; .tmbox is used in the lede of talk pages, which is hidden by
the talk page interface), and these styles make it more difficult to
display them when they are desirable.
Bug: T257394
Change-Id: Ifb0316256bdec5008acc48544ddd3e2bf71b6d41
Reported in,
https://it.wikipedia.org/w/index.php?title=Wikipedia%3ABar%2FDiscussioni%2FAggiornamento_del_parser_per_le_immagini%3A_vogliamo_testarlo%3F&type=revision&diff=130240855&oldid=130214646
The default styling in core looks like,
.mw-image-border {
> a:first-child,
> span:first-child {
> *:first-child:not( .mw-broken-media ) {
border: @border-thumbborder-screen;
}
}
}
The simplification here recognizes that the border option doesn't apply
to thumbs, so descendent selectors can be dispensed with, there's no
nesting in figcaptions to worry about. That's important because
lazy-loading adds a noscript before the img tag, which would make the
selectors with first-child not apply anyways.
An img tag is used instead of the universal selector. That seems like a
safe assumption for now and can be revisited with T314097 / T318433
Bug: T318300
Change-Id: I25f45ee794300d2ba2a38a0ab6e3741a6b1a18f2
Only thumb and frame have visible captions. This matches core's
mediawiki.skinning/content.media-common.less
Bug: T318300
Change-Id: If5713c8d629ec3c84abdb5c99eedf6f0bb408ddf
The rules in mediawiki.skinning.content.parsoid were made redundant by
25890e3ece. There are some more rules
there that should be audited to see if they're still necessary or can be
moved to a more general location now that wgParserEnableLegacyMediaDOM
is being disabled and they apply more broadly than just when Parsoid
styles are requested.
Missing rules for mw-halign-center and mw-halign-none are added.
Bug: T318300
Change-Id: I34fb1ce76de24eec3b136dc6dc9ab4e07e36b809
Default horizontal alignment based on page content language.
See I1a2cc989c35506172af361cd86a4a378ddf58ecb
Bug: T318300
Change-Id: I7acf07fb22bba6aae97db00e84eddaf78361dfe8
Based on work done in I7b9cf401936be2421d0ad4efe963486404d50e6a
we switch to the standard notifications menu for Echo generation
Bug: T301263
Change-Id: Id611cc07aebfb94e50bde8902cbc0627393fa926
Additional change:
* The animation stylesheet pulled down for the storybook instance
in dev-scripts/setup-storybook.sh is no longer referenced anywhere
in assets so can be removed.
Bug: T306486
Bug: T308351
Bug: T308360
Change-Id: Ia9f2a05cde2724486f7e449261c5d4875388f5ab
This scope is used elsewhere in the skin to limit styles
to parsed output. Confusingly `.content` also applies to
the body area of special/action pages.
Bug: T304148
Change-Id: Id5aa760c8441e589e813c5cc0c12c86469cde714
* Update stylelint-config-wikimedia to 0.13.0
* Ensure eslintrc.js and root files are linted
with server config
Change-Id: I59c49fedd5b0c4c5620f960b78e4f781a6bc5abb
- Remove cached HTML relating to heading change
( I2ffdedd64414ffb3c6e441391a75fd6e744847a4)
- Update invalid instruction for selector in footer (I0bfc7f977cdaf5ce8873103346c64121d704b86c)
It appears this rule cannot yet be removed.
- Update classes for contributions icon on user pages
(I6c908acd70c0dca5bcb1754d1b25d3da2389feb8)
Change-Id: I271abf3d29dfcfd19d654514fb3f6d6e257505ab
This is creating a large gap between search icon and user navigation
icons on the right.
Bug: T302753
Change-Id: Ic24ab36d0a9c394c5c88b375bdfbe529be93ace6
Cached HTML friendly change which works by limiting styles to the new
HTML which is identified by the existence of the
minerva-search-form class
Bug: T301257
Change-Id: I61ba77a349a38e6a05f87f600ec31bcbf36f306a
Now whole area of last edited section (from edge to edge) is tappable
and linked to history page.
Bug: T163853
Depends-Onː I3d1f272a27c5c9b0b0928b5c0eaeb3f6e270532b
Change-Id: I3c35bbaafea3376cd2f9dccfd13bfe4845fd6823
We've changed the selector in MW core to `.mw-parser-output a.external`
a while ago. In order to show the correct image, selector needs to be
amended.
Change-Id: I83d7b4c8be2eda1876959d000e0fb2d493e12cbc
- Move new header styles to header.less
- Remove unnecessary styles
- Update search overlay to be aligned with the heading searchbox on all screen sizes
- Add temporary skin style to ensure no regressions in mobile VE
Bug: T294033
Change-Id: Ib9867d1b76b602f3355e9f2689f137bc84b0c929
After this change, in desktop Minerva the copyright
text in the footer should match desktop Minerva.
In mobile Minerva the copyright text in the footer
is shortened and doesn't contain terms of use.
It should match Vector mobile
?useskin=vector&useformat=mobile
Depends-On: I3473908e08f643b4c60aafc470dd124516955323
Change-Id: I2895975aaa1d09d228f80aff74381e88034a0137
Bug: T289401
* Move method to SkinMinerva
* Turn preparePageContent into a getter that returns the subject
page
* Use getSubjectPage in template
For mobile special pages this now means the page has two .content elements
On those pages I've disabled the initial content element. It also means
various .content <heading> and .content ul rules now apply that need to be
disabled.
While testing several other issues were taken care of - for example
the h2 in errors
Depends-On: I7761396d6a33830f279742be01240796573556a7
Bug: T291871
Change-Id: I13bc4b5dae7aed86eca31ef306212365e1759481
- reserve space for the icons
- break long urls in the ToC
- fix right margin on the ToC
- support without JS
Bug: T292338
Change-Id: Ic279047f297fa132b87b77b6d7127b797015f92a
The 27525d0bff change renamed header to minerva-header, but neglected
the fact that this class was being used in the Overlay as well.
Bug: T292071
Change-Id: I05c1589723b68cf07c874f299f1960548f53e8ff
* Adds alt attribute with a value of the `mobile-frontend-sitename`
(previously called `mobile-frontend-footer-sitename`). The message was
changed because this affects both the footer and the header's logo.
* Adds a `minerva-footer-logo` class to the logo in footer.mustache in
preparation for changing that element from an h2 to a div. Given caching
issues (old CSS with new HTML; new CSS with old HTML are both
possibilities), we need to do this in two separate deploy cycles.
Bug: T288362
Change-Id: I3ecbf8fdcae72a0ded7f60c559259f312b8ef15d
Making Minerva use the `elements` feature is not
practical at the current time. In lieu of that, we
update the link colors to use the core definition.
The red links and external link colors
can come from the "content-links" module.
This also adds support for the underlining user link preference
and better plain link support.
Bug: T274717
Change-Id: I600257e6f4430f166331c4ea4f3a72d87aa377d8
Content using `header` as a CSS class was affected by skin styles
in Minerva being insufficiently specific to the skin‑specific elements.
This changes Minerva to use `class="minerva‑header"`, thus avoiding
the conflict and matching what Vector does.
Bug: T172626
Change-Id: Id8fbe61b2d1d4a89ec11ddfdf7837be797b3bd20
These styles are also applied inside MobileFrontend as they should apply
to all skins, not just Minerva.
Several styles for desktop Minerva are amended with a comment.
Bug: T253370
Change-Id: Ib23024d192f331ef76007dbd9ef54596cc1adb0c
A comment says that the line of code can be removed after cached
HTML is not a problem. This code for ui.less was added in April 2019, so is
not a problem. The code for footer.less was added in April 2020 so is also
not a problem.
Another comment says external link unsetting can be removed after
a ticket has been resolved, which has been resolved and I can confirm
is no longer needed.
The header > div a rule only matches the link wrapping the logo
inside the branding-box. It no longer matches the hamburger or notifications
icon which make use of nav elements, and to make matters worse
interferes with the goal in T282473
Bug: T285261
Change-Id: Ie7777b4b53355cf0dc48d6447f63299156254b6c
This could be made even simpler by not using a LESS varialbe for
hacks.less, but loading it conditionally through the moduel def.
But, as a first step we can merge the two as-is.
Given that the subject and target are always referenced together
in page views, there is no need to keep an alias around. However,
I'm keeping it anyway so as to not produce any
`/* {"skins.foo":"missing"} */` appendix to the stylesheet response
for these cached URLs.
Bug: T266361
Change-Id: I8578faab8ca32bd49be90711cbd5e182763b8065
This styles parser errors, which were previously unstyled.
It removes the need for the clear for the table of contents
on stub pages
Additional change:
* The base styles module increases with this change
* While testing bundlesizes I noticed that the bundlesize for the
content styles is outdated and have updated it (this is unrelated
to the inclusion of the new feature)
Bug: T281228
Change-Id: I8e099b18f0866201cba378f6110913cdab478c4c
Just as before styles for message boxes will be
kept off the critical path of most page views and
loaded on special pages, old revisions and action= URIs,
however unlike before the CSS will come from the definition
in core.
It must also be loaded in JavaScript for compatibility
with the use of warnings in JavaScript, for example
MobileFrontend overlays.
This change will allow us to remove the
mobile.messageBox.styles module in MobileFrontend
I8b6bdfceaf33b9527dbe6790d2a39e335fb692b2
Bug: T233160
Change-Id: I7d8d1d34621c36c26ec03a3773d4d1e67bd14f2e
Removing historically grown code and icon and replace by latest
'search' icon. It is slightly smaller 18x18dp on 20x20dp canvas, and aligns with
icon guidelines of Design Style Guide.
Bug: T213580
Bug: T275563
Depends-On: I752ea81aaff51059af942daa008a1b898dbc2d06
Change-Id: Ia7f50ec7534e303dcfd311b301a764936f7729df
A new rule resetting padding-right and background-image on
a.external inside footer is added.
Additional change:
* Merge all styles relating to the last modified bar into a single
component file for consistency with Vector and easier lookup.
Bug: T267464
Change-Id: I558f0756264e92ca757a99e47a53564c3ecd8b71
`lazy-image-placeholder` is needed only when MobileFrontend is enabled.
So it makes sense to move those styles to mobile.init css. See more details here: T199351#6380240
Bug: T260406
Change-Id: I16ca734af33fb0f3c4c67f20bbca8631279d7778
All images in MinervaNeue skin are vertically aligned `middle`,
so placeholder for them should be consistent.
Bug: T199351
Change-Id: I5fa00bd0c02e67059543389e4bbd07b073a2c5e0
MoveLeadParagraphTransform treats div.infobox the same as table.infobox,
and should be fixed to match any element too.
Fix specificity of tablet overrides.
Bug: T258011
Change-Id: I9ada6d1b8b19b46dba6527f1f66edd2547fa0c88
Use a variable to rely on opacity value close to `#54595d` similar
to icons in the header.
Bug: T251135
Change-Id: Ie3eaad9ac86f8c3827e0a41f0b73b694d8f8f2fc
Use a variable consistent with Wikimedia UI base instead of
a hard-coded opacity value.
Bug: T251135
Change-Id: I883d3b122c3a0206fe83365a7818929d74f86459
Additional changes:
* Address a fixme relating to the overflow icon and move some AMC styles
out of the critical path for non-AMC pages
Note about ellipsis:
The class mf-mw-ui-icon-rotate-clockwise cannot be used as it's part of
MobileFrontend and loaded via JS. Minerva must work without MobileFrontend
and this rotation is needed without JS.
Bug: T244444
Change-Id: Ifd02c50305cf036dd6df640d778678668507e5eb
Reducing (currently) unnecessary `last-modified-bar` context nesting,
which isn't done consistently across stylesheet files.
Additionally adding new `mw-footer` class, but not yet using it
exclusively due to caching.
Change-Id: I6b9caa42c1907ec1a7f8c8b67334fb7f08705848
Removing MinervaNeue's own mixin now that it's possible.
Also unify code instances to use new mixin.
Depends-On: Ia8d6e7229b49598b0f4cb19dff463ffe2f11a43d
Change-Id: Iaffcefcb7a239d5ddecbe17097573d06099de88e
When we built the new main menu we started using a `nav` element.
Update selectors to hide the `nav` element when printing from
mobile.
When printing from tablet or desktop make sure the header is displayed.
Bug: T244181
Change-Id: I7f60fd11d969a48e1c7926ad8acc4213f9affed4
* Drop non-existent pointer-overlay selector
* Drop redundant icon class for arrow
* Drop unnecessary !important
* Drop transparent-shield class
* Reword an existing FIXME about a contensious decision and
add a new FIXME for moving some code to a more appropriate place.
* Move an image into a ResourceLoaderImage module (test with
`mw.notify('error', { type: 'error'} )`)
Change-Id: I6e38f07772afae6f13c4851ca17a67d52ca7d331
All stylesheet-only ResourceLoader modules now have a single entry point
rather than multiple files. This eases compilation of the content of
those modules by all toolchains, which will be useful when introducing
the bundlesize tool.
Change-Id: Ic38a3e51db2f419fe68efd23a2c48ee69218a526
Converts the main menu button to work without JS using the CSS-only
"checkbox" hack, using the ToggleList module from the dropdown menus.
Bug: T225213
Change-Id: I0eff0439f7284ec74f6304324fab409e8a1b6245
Following Vector and OOUI in `@font-size-root` and put it in central
file. Removing duplicated code in `html` and `body` achieving the
same thing.
Also renaming `@font-size-body-mobile` to a distinct
`@font-size-body--feature-phone` ending the confusion that it's a
variable only used at `@width-breakpoint-mobile - 1`.
Change-Id: Ie355d015d882f61c813991c3244bfcb67f161791
It's also set in content.styles/main.less and is preceding there.
This has already been merged in reset removal branch and is now
re-deleted on master after first branch attempt failed.
Bug: T222877
Change-Id: I1e9eb28360acd57e574d37e118058abbf5bc6b3e
Enabling 'selector-max-id' rule, and changing in rare exceptions like
`#bodyContent` to `.mw-body > .content` where there's only one less
specific option.
Bug: T239183
Change-Id: I9d929eaae09475b2e20d96cb19081aba3aec5877
Adds labels to page-actions menu via a new
`.mw-ui-icon-with-label-desktop` class that shows labels at the
desktop break-point.
Bug: T226562
Change-Id: If57ab44660e0dc2a58c04fbf22dee6c27dd1f45f
Using newly introduced variables instead of fixed values.
Also adding `transition` to property blacklist to ensure using
mediawiki.mixin.
Bug: T236224
Change-Id: I3d2d05f4e50e7b6bba0fe84fae1dde5de5b75492
This caused T234492. It seems that `1.65` is the minimum to universally satisfy language scripts like Burmese. It predates MinervaNeue being split out and was invented in 2cad4ce3d7af09fba52d87a32518715029eb32a0. While it might not be set with this intention, `1.6` is already cutting off letters.
This reverts commit 1c7adedda4.
Bug: T234492
Change-Id: I36c85b307bacbbcb9d28c2c60e18da7a412eddae
This is a second attempt at I3892afb5ed3df628e2845043cf3bbc22a9928921
that is cached HTML friendly and won't cause T234599.
This time rather than solving the entire problem, we'll start rendering
the menu on the server, to allow us in future to drop the Menu code
Bug: T234650
Change-Id: Iea5406ef1c561f2907ec6132481007673aabf1e9
This reverts commit 111757970e.
Although I cannot replicate the performance issue, the menu doesn't seem to be rendering at all on cached HTML so this is a deal breaker. Back to the drawing board..
Bug: T234599
Change-Id: Idadc5a079340f44ec66d20a38259b6b337d2dcee
As Stephen pointed out somewhere, this is a bit of a micro-optimisation
Let's simplify this code by always rendering it in the HTML. MainMenu.js
as a result becomes a controller that just decides when to show it.
The geolocation check for Nearby is removed given the fact that all
grade A browsers for mediawiki have Geolocation support
Additional changes
* Browser support suggests "animations" class is redundant now
* `open` event no longer filed - not being used anywhere
* Transparent shield is now managed by the MainMenu controller not
the skin (which was confusing)
* Test geolocation using a simple feature tests
rather than abstracting it away inside Browser
* The main menu button is always hidden under either a translucent shield
and/or the main menu itself when it has been opened
so so it's not possible to ever click it while the menu is open
- the click handler is thus simplified
removing a check for the class of the button
Depends-On: I7fd243366cceae780bd46e1aef2c08dae073f647
Change-Id: I3892afb5ed3df628e2845043cf3bbc22a9928921
Brings the last-modified toolbar (links to history page at the bottom
of articles) in line with recent icon changes. Removes the icon
class from the toolbar itself and by employing a flexbox layout,
reducing the amount of CSS required for this toolbar.
Bug: T233172
Change-Id: I27658477aaeed3290aced844caa64fc5e1c34fbd
The `.mw-ui-icon-small` class shouldn't include the padding that comes
with `.mw-ui-icon-element`, it should instead render a small icon
without padding.
The right-margin for mw-ui-icon-before is also changed to be
the @icon-padding size instead of a static 1em.
Includes a fix for the "last-modified" bar cause by this change.
This temporarily breaks the reference drawer with error state but that
will be swiftly fixed in I229dd5ae04bde96ba8d5622097ff09ea4324ab0e
Change-Id: Ia44b3157ecec6a036f3bd6287d4b8096748d4afa
* Refactor less variables to make icon touch-area sizes flexible
* Search input is bumped up 1px to an even number
Bug: T233156
Change-Id: I156d09bfca8db9506c0e9cee21e4d6e0a2e91689
Note, because of the two versions of the watch icon, this will temporarily
make the watchstar not display for JavaScript users. The accompanying patch
Ic974b4d6dff14b0d72b8ca71b02c5ef73b1b1d93 will restore this.
Bug: T231613
Change-Id: I16ca70f2892d7418ff245e15f838dfc2b092f3aa
uses the CSS :last-child selector to align the last item in the header
with the edge of the container.
This is usually the notification icon in "normal" mode and
the user menu icon in AMC mode.
Bug: T229440
Change-Id: I4430f5659093f76896e2b86e076526a0b51d9630
To accommodate for cached HTML a new class last-modified-bar__text
replaces last-modifier-tagline to help us distinguish between old
out dated HTML and the new HTML.
Bug: T232792
Bug: T232800
Change-Id: I53fa45058dbc81c91089840073e03113ff1a4b9c
Includes icon fixes and removal of some CSS overrides.
This causes the following temporary defects to the skin:
* Last modified bar will temporarily be squashed
* clear search icon will be misaligned vertically
Depends-On: Ie811d25595d041c35e6c214190101821f3a5d466
Bug: T229440
Change-Id: I0a3a73421791ad353bbcebaeb8241ad062f67ae4
Note: this agitates T230232 again - when merging this please
make sure a merge for I929090848f3e04647a97f4979ec78682623fa070
is pending.
In various places we try to override the default mw-ui-icon behaviours
The hacks need to be removed as part of addressing the core problem.
Changes:
* Wherever we use mw-ui-icon-before in PHP - wrap the label with a span
so that label font-size is altered where needed - not the icon
* Where a small icon is needed us isSmall parameter for the Icon component
* Apply font-size to labels of mw-ui-icon-before elements
* The browser tests need a slight update to access the span element inside
a menu item - in the case of the logout button the label is always hidden,
so we need to check the visibility of the parent element (secondary_action)
Bug: T229440
Depends-On: I3f803ec4c9068b30aa93b803391aa4d65d8310ff
Change-Id: I07e4ae233979636b739f1117dd7703571e0a9366
This has been replaced in Ib678f03e908 by standard `.warningbox`
Bug: T232414
Depends-On: Ib678f03e908fa9dcd5af7632941475203478abf7
Change-Id: Ifb85ef51cdf1d39122e286cb8a7c6620a7bae09e
Split @headerHeight variable into @siteHeaderHeight and @overlayHeaderHeight.
@overlayHeaderHeight is now set to 3em (48px).
Use @siteHeaderHeight for the base skin interface, and @overlayHeaderHeight
for overlays.
skinStyles/mobile.notifications.overlay/minerva.less:
* Update footer height to remain the same as header height.
skinStyles/mobile.startup/search/SearchOverlay.less:
* Use @siteHeaderHeight even though it is an overlay, because it's
supposed to exactly match the base skin interface.
Bug: T215426
Change-Id: Iaa36f581a12a8eea2b755ae583b8a2c6324ebe29
No more using the TableOfContents component in MobileFrontend. It's
just creating more work for us. The end result is exactly the same - we can make
a table of contents using the checkbox hack rule and CSS that looks identical to
the current table of contents.
For now, this change can only be tested on Minerva desktop.
I2ea1c23bc86871e2a095c4c6674a08ff2f04b160
is the patch that goes for the jugular and applies this to mobile Minerva. It's
important we merge the two together to avoid disruption to this feature, as
currently MobileFrontend strips the table of contents from core from the HTML
using the MobileFormatter.
Change-Id: I720e62a578f0c7a14f4b5a698004471c85e54bc8
Two new feature flags:
1) MinervaPersonalMenu
2) MinervaAdvancedMainMenu
Changes:
* AMC defaults to false on desktop - desktop doesn't have AMC mode it just
enables several skin options.
* WHen inserting a link at the bottom of the page check whether the talk at top
of the page (tabs) is enabled.. not AMC
* Update ServiceWiring to construct menu based on MinervaAdvancedMainMenu
and MinervaPersonalMenu - note when former is enabled but not latter there is
no way to logout. Noted in README.
* Use one entry point for skins.minerva.amc.styles/index.less
* Document files inside skins.minerva.amc.styles to make it clear which features
they are associated with
* Drop history page styles when AMC is disabled - it's not possible to ever get to
these as the history page redirects in non-AMC mode
* Rename the class .minerva--amc-enabled to minerva--history-page-action-enabled
to reflect its real purpose and move styles from skins.minerva.base.styles to skins.minerva.amc.styles
No need to worry about cached HTML as AMC runs without cache...
* Remove isAnyAMCOptionEnabled - it's an antipattern and should be discouraged as it discourages the
art of feature flagging. Nothing is using it after these changes.
* The AMC_MODE flag is disabled. There is no need for this - AMC is not a feature and therefore not a
skin option. It is a mechanism for turning on other skin options. Tests are updated.
Testing:
It should now be possible to enable any feature in `beta` and see it in the beta of the
site.
Bug: T229295
Change-Id: I48959905f5c09721b14a27aa1a5ad82849ac6263
* Remove ambiguity in imports - say the file extension
'less' for all instances of variables and mixins.
* Separate toast styles from drawer styles so they can be
imported separately
* associate header-action selector with its parent
(.overlay-header) not parent's parent (.overlay) so it can be imported
and rendered without the Overlay.
Change-Id: Ib7e19a440ba095d6424d35305fb41d643ca9764c
Slide the main menu over the page instead of sliding the page over the
menu. Also, use viewport units for the main and notification menus.
Note, this lays foundation work for T225213.
Bug: T206354
Change-Id: I14b67d1e97b84086ea13e28df8148824a1f493e3
Create a new stacking context for page content. Previously, it was
possible for on page content to defeat the skin's z-index values with
superior numbers. This occurred with StructuredDiscussion OOUI widgets
on https://test.m.wikipedia.org/wiki/Talk:Main_Page and the
`position: sticky` header on Special:Notifications.
`scaleY(1)` is an identity transform that is terse and unlikely to be
confused when RTL flipping.
Bug: T225959
Change-Id: If8f718a707d9dd07e1182bc26e63e6e665bf98c2
I considered not outputting the subtitle, but the PHP mustaching
templating library requires truthy values and that seemed like overkill
Bug: T217197
Change-Id: I3ebe550bad8b5eb0f24d742261ea696950c91a59
We use 0.9em in a variety of places, to shrink font-size from the
default font-size. However given we use 16px as a base font this results
in a font-size of 14.4px. This can also cause problems with icons resulting
in rounding errors when used with multiple icons
This changes the font-size to 14px for those areas and makes future usages
centralized by adding a specific variable.
Also amending `@font-size-browser` variable to be aligned to naming convention
and equal to Vector one.
Bug: T229399
Change-Id: I8e31bca2982c049a9be73c89aa9e8e2aa8141269
Remove the page action overflow and user menu height sizing. Previously,
a maximum menu height was set so that the menu itself would scroll. A
minimum height was also used so that the menu couldn't be shrunk down to
a silly size. Both the minimum height LESS and maximum height JS are now
removed.
Bug: T225959
Change-Id: I201374ab8b249272ee5dbb1401b844ffe034ea66
* New module skins.minerva.icons.wikimedia provides icons
from Wikimedia UI in Minerva
* search selector in skins.minerva.content.styles.images is
retained for cached HTML
* skins.minerva.icons.loggedin now a
ResourceLoaderOOUIIconPackModule and bell removed from repo.
* userAvatar replaced with userAvatarOutline
Bug: T224070
Change-Id: Ibed609371060acc4b69e5cd4cd4f20edc871b3ba
Add new user menu. The changes required include:
- Break up AuthMenuEntry into reusable components. They're now simple,
independent, static functions in AuthUtil that are easy to reason
about and compose.
There's lots of verbose code because of the builder and director
patterns. That is, most of the code is for building the thing we
actually want to build instead of just building it. It's easy to write
but no fun to read--even simple configurations are extremely verbose
expressions that must be threaded through the system.
These builders are also single purpose and unlikely to be reusable
unlike a URI builder, for example. As objects, they're not especially
composable either.
- Similarly, break up Menu/DefaultBuilder into BuilderUtil and ban
inheritance. Inheritance has not worked well on the frontend of
MobileFrontend. I don't think it's going to work well here. E.g., I
could have made changes to the base class' getPersonalTools() method
such that the client passes a parameter for the advanced config or
maybe I just override it in the subclass. In either case, I think it
makes the whole hierarchy nuanced and harder to reason about for
something that should be simple.
- Add ProfileMenuEntry and LogOutMenuEntry for the user menu.
- Rename insertLogInOutMenuItem() to insertAuthMenuItem() which matches
the entry name, AuthMenuEntry.
- Extension:SandboxLink is needed to display the sandbox link in the
user menu.
- Performance note: the toolbar is now processed in MinervaTemplate,
which corresponds to removing the buildPersonalUrls() override.
- To mimic the design of main menu, the following steps would be
necessary:
1. Create a user/Default and user/Advanced user menu builder and also
a user/IBuilder interface.
2. Create a user/Director.
3. Create a service entry for Minerva.Menu.UserDirector in
ServiceWiring. The Director is actually powerless and doesn't get
to make any decisions--the appropriate builder is passed in from
ServiceWiring which checks the mode.
4. Access the service in SkinMinerva to set a userMenuHTML data member
on the Minerva QuickTemplate.
5. In MinervaTemplate, access the userMenuHTML QuickTemplate member
and do the usual song and dance of inflating a Mustache template.
This patch does everything except add a service, which was agreed to
be unnecessary, so that logic is now in SkinMinerva.
- Wrap the existing echo user notifications button and new user menu
button in a nav element. This seems like a semantic improvement.
- The existing styling and logic for the search bar and search overlay
are pretty messy and delicate. Changes made to that LESS endeavored to
be surgical. There's lots of room for improvement in the toolbar but
it's out of scope.
- Rename logout icon to logOut.
Bug: T214540
Change-Id: Ib517864fcf4e4d611e05525a6358ee6662fe4e05
Define the color etc. in the base styles, so that other drawers will
not have to redefine them to display the shield.
Bug: T214049
Change-Id: Ife957374cb0d21446db2067171e68fb726ad8347
The Language icon is not useful on user pages as most probably there
are no translated user pages, thus there is no need to show all-time
disabled Language icon.
If overflow menu is available, don't show Language switcher icon in
toolbar, show it as first item in the overflow menu.
Bug: T224735
Follow-Up: I46d58758356e870c408a74b2c087a42d6ad0ddea
Change-Id: I05be9e6457257a1f2eb224ca9ec5808814bc9ed7
The CSS animation will never complete in print media so will not display
in PDF rendering. A note is added to explain this rule.
Bug: T220668
Change-Id: I82260fa4e18a13970243d3cb2fc585aefb3c1d09
A list that toggles visibility via the checkbox hack is needed in at
least two spots: the page actions overflow menu and the user menu. This
patch makes several refactors to turn what was previously hardcoded into
page actions a reusable component:
- Start a new components directory. Components are reusable and
composable. The subdirectories are organized by function, not
ResourceLoader module bundling which greatly improves the ability to
see a component's full functionality in one directory instead of
examining the entire codebase. See updates to README.
- Extract pageactions.less into:
- ToggleList.less: LESS for any checkbox hack list.
- DropDownList.less: LESS for lists that open downwards.
- MenuListItem.less: LESS for list items of menus.
The division makes it easier to see concerns, dependencies, and change
code.
- Move pageActionMenu.mustache to a component and extract ToggleList
template.
- Extract ToggleList.js from Toolbar.js.
Bug: T214540
Change-Id: I171831469a6733c458bc5c7ba249a5096ca975b8
When advanced mobile contributions is enabled and the overflow menu is
shown:
- The initial state should have no transition. This prevents the menu
from flickering initially. Move the transition to the checked state
only.
- The icons should be available for server-side rendered HTML without
JavaScript. Add wikimedia.ui to the SSR modules.
Bug: T216418#5129152
Change-Id: I3b91f6cdefd4b727c2fb512272d8c4282af632bf
When advanced mobile contributions mode is enabled and
`$wgMinervaOverflowInPageActions` is set, show a secondary overflow menu
on main namespace articles and user namespace pages. The menu content
varies for each namespace. The new submenu is *disabled* by default,
even when AMC is active. This feature should not be deployed until
instrumentation is available.
The secondary menu is rendered in PHP using the existing menu system
with some changes to the template. The checkbox hack is needed for no-
JavaScript keyboard navigation until :focus-within is supported. CSS
additions are documented in the source.
All client side toolbar execution occurs in Toolbar.js. Enhancements are
documented in the source.
Minor changes to the existing download button:
- Move download and edit button initialization to Toolbar.
- Update copy (not visible) from "Download" to "Download PDF".
- When the overflow menu is present, use the "hasText" / label style.
Wikimedia UI icons are copied from OOUI at d00a0ac and seem useful to
expose as HTTP URIs (not data URIs).
The overflow menu does not show for pages provided by the content proxy
since its entries depend on $tpl->data['nav_urls'] being populated.
Bug: T216418
Depends-On: I0781151a8232b6a7b52f79a34298afcecb8e4271
Change-Id: I4b50a0e519024a7ab91dae6ab40b23cf14a03861
Preventing double transition in search input focus by limiting styles
only to non-JS or when JavaScript enabled to the overlay.
Also introducing standard transition to smoothen it further.
Bug: T218154
Change-Id: I2344bfc7c4edc1941119565d7b113788e8713624
Removing deprecated LESS `.background-size()` mixin calls.
Also
- simplifying code, where second (height) value is automatically set
to `auto` when only one value is set and
- removing stylelint rule.
Bug: T219956
Change-Id: I643c66b3067ba77726d76cbebf7550781e18aa5d
The technique used to hide the text in the .wm-ui-icon-element
(i.e. negative text-indent) depends on the icon container being
display block. This ensures that it is.
Bug: T218182
Change-Id: If68099c63023f878128dcedda38963f617a5c717
Moving reset properties
- `font-family` and
- `font-size`
and opinionated
- `margin`
to ui.less.
All other properties from 'reset.less' don't apply to those elements.
Also
- consolidating body `background-color` and `color` in 'ui.less' and
- moving `html` affecting property there as well.
Bug: T205341
Bug: T217621
Change-Id: I4c545da76e6fdebced41e6e7e6eb89e4d97a8b24
This patch refactors the markup and JS associated with the page actions
menu in order to achieve greater flexibility in its presentation.
The menu items are now positioned via flexbox and rendered using a mustache
template in PHP.
The goal of this refactor is to accommodate both AMC mode and default
mode with the same markup. No changes should be visible for non-AMC
users with this refactor. No changes to AMC mode have been made in this
patch either.
This patch includes temporary workarounds to avoid problems caused by HTML caching.
Changes include:
- Changing the data structure of the page_actions property in SkinMinerva.php
- Passing that modified data structure into a new mustache template, PageActionMenu.mustache
- Adding new CSS for the new page actions menu HTML
- changing the query selectors in JS to match the new markup
- Making the JS-modified page-actions compatible with the new markup
- Keeping existing CSS and JS to avoid breaking cached HTML
Bug: T213352
Depends-On: I95cf726c4b6d8c3895a26aa6e07f4b1747ee30fe
Change-Id: I5a7d73b20617cb3c6d6379084ac4bea23ec3bc74
Even though on most pages the tagline is empty, it still
has a bottom margin associated with it. This patch moves
that bottom margin into a container element that wraps
both the h1 and tagline.
This approach allows us to remove the bottom-margin from the tagline
as well as the top-margin from the AMC tabs in favour of just
one bottom margin on the .page-heading element.
Bug: T214195
Change-Id: I67d3938ab4a75f994acc28a8eefdf19e531c1f3d
This is no longer needed when Varnish cache has cleared (About a
week from I7e989a3d4553eb3357598a5cad3ccebf51dc9fae being deployed
Bug: T212216
Change-Id: I1afb68f68cc90d89c442907426bd046ddc68f488
A new feature/skin option is added that is enabled safely inside
a MobileFrontend available/unavailable hook that changes the skin
to place talk tabs at the top of the page.
These new talk tabs purposely show on the main page, user page
and standard pages and do not show on special pages.
Depends-On: Ie1a583657176acc6f7046c569c2e94fa2f72ff93
Bug: T212216
Change-Id: I57b70cd325666a287678dc897159b5bf9d089b78
Previously they had an extra few pixels caused by line-height.
This makes some heading levels slightly shorter, but heading
heights more predictable.
Change-Id: I25cb1f39ab6c80bf9f318de18339e716156c9a2b
This was causing lots of problems with the AMC design and seems
unnecessary. It dates back to tablet support added in
I14c8182473c9508ffc38a8d5baf114bcb016a35f in 2014. This no longer
appears to be needed for tablet.
Changing the HTML means we need to be careful about Varnish cached
HTML with new styles. To avoid UI regressions we use a new temporary
class heading-holding--new which will be removed as soon as possible.
The no-page-actions modifier is no longer needed given the new heading
holder doesn't care what's inside it.
Bug: T212216
Change-Id: I7e989a3d4553eb3357598a5cad3ccebf51dc9fae
Many languages have no concept of capitalisation so messing with
user input is problematic. Trust editors to do the right thing and
if not, fix it on wiki.
Bug: T131013
Change-Id: Iebdb7b78fdaa31a6daf8f52077c079672ef4ff5a
Main pages do not have page actions, yet the header always adds
bottom padding to compensate for the fact that page actions are
absolutely positioned.
a new class is added adopting BEM notation that informs the client
that no page actions are going to be visible. In conjuction to this
we strip the relevant HTML from the DOM.
Bug: T212216
Change-Id: Ib69991e91160ba7e2ca3beca4475c2a06c4b9cd3
No need for 2 modules that are both loaded on every page load
Provided consumers are loading skins.minerva.base.styles they will
continue to get the same CSS. If any consumers exist that load
skins.minerva.base.reset but not skins.minerva.base.styles they will
need to use their own css reset file
(e.g. https://meyerweb.com/eric/tools/css/reset/)
Change-Id: I599e6d5a84b311cb3bb2da197da1b688e0e6b9d4
There's no reason to have this as separate style file in content.styles
as common text styles are taken care of in 'text.less' and
'print/articles.less' for print. Moving contents rule there.
Change-Id: Ie613d95488e9b5a814b6be8f0c856e9e92ab5aed
