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
- Replace the header div with a header element and the content div with
a main element. main and header elements are already shivved:
https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/22dd581f10/resources/lib/html5shiv/html5shiv.js#234.
- Link the wiki header title / logo to the main page. Note: the link
border around images is already omitted. The link is identical to the
menu home button.
Bug: T198947
Change-Id: Id312638d86179e75bc670e72e5943f8c00232bbb
Currently we load textarea styles across all pages. However, in practice
textareas only show up in the edit page and inside our JavaScript overlays
To avoid loading these styles as rendering blocking CSS
Additional changes:
* Drop css reset for textarea so that textareas where unstyled
have sensible defaults. Note given the usage of OOUI and MediaWiki UI
this should be minimal/no disruption.
* For consistency intentionally change the padding of the non-js editor
to be consistent with other textareas
* The padding-left/padding-right rules currently override the default rule
so consolidate them into one single rule
Note:
* This will not break non-JavaScript editor mode as the module
mediawiki.action.edit.styles is loaded on that page as a render blocking
style.
Bug: T199000
Depends-On: I1ab170fc4089b0c8129a3e62ee78efad1c6709fa
Change-Id: I91743fdf1942a1b1b750422e973bf98fc4d106db
* truncated-text is only used in MainMenu, last modified bar,
a few special pages
Making this a mixin and limiting it to mobile.startup skinStyles
and mobile.special.styles thus makes sense
* cloaked-element is only ever added by Skin.js in mobile.startup
* position-fixed is only ever added by Skin.js
Change-Id: Iaf7061e9dda87eb25c963f8a281175af08f358e5
.header > form matches no element on the page
all other selectors are linked to the mobile Overlay so should
be shipped along with those styles.
Remove .header-action rule, given that header-action's only appear
inside Overlays (Editor, Category and Talk)
A more generic rule already exists (.overlay .header-action > *)
for overlays that sets the min-height
Change-Id: I114fe80e50bb833e9e6bb0fb6b13c2e929244ddf
We already make use of the images 'name' key inside
skins.minerva.content.styles.images to define the full
CSS selector. We can use this approach to ship a single version of
the magnifying glass icon, rather than having 2 defined in both
skins.minerva.base.styles and skins.minerva.icons.images
Change-Id: Ie5ec06152c418c4aa1b620b3d0a904cc9517e5d0
The transition only happens when images are loaded via JavaScript
so limit the styles to a file loaded via JS NOT render blocking
CSS
Change-Id: I56661db13e7fbb400a05b13c369d8598df449297
.active class is added via JS by skins.minerva.scripts
skins.minerva.base.styles is loaded as render blocking
Thus this css rule can be moved safely to a non-render blocking place
Change-Id: Ie8bab826ebc0785e24bb85600de261372c429434
This rule has a lot of selectors (note the fix me)
It's not clear what each of them are needed for so make that
clearer in the code.
Change-Id: I80f07118977f465b7d09efad28f94917dd962a3d
Header overflow was truncated in MobileFrontend commit 1655d5233 which
added the language switcher button that appears below the title. This no
longer appears to be required even for articles with lengthy titles.
Perhaps because the language switcher button exceeds the page content
margin, it was thought to be necessary.
Bug: T194544
Change-Id: I4e25e7b03df65803cd553b412881eb565ded9b10
Use local imports instead given all relevant files are within the
same repository, and don't vary by configuraion.
Bug: T140807
Depends-On: If3edac9a35b346af0320c12f70c0d978a6346201
Change-Id: Ife3cc345a63aff452e93accbe0a593fbaa358732
The content area is the sibling of the overlay.
For the overlay to overlay it and its children it
must explicitly setting a z-index
additional changes:
* Move UI styles from skins.minerva.mainMenu.styles
to their more logical place (note skins.minerva.mainMenu.styles
is loaded via JavaScript unncessarily)
Bug: T193444
Depends-On: I7c0d02f073a2fe165a6027e3c6d1455e22c1b563
Change-Id: I8be31c7daf254e22ccaed81704cbcd2b638c54f6
* The notification-count style is only needed if you are logged
in. Given a small percentage of our users are logged in, we
load a lot of render blocking css unnecessarily.
* The bell icon is not needed for anonymous users so pull that
out from skins.minerva.icons.images which is loaded for all users
into a module only used by logged in users (skins.minerva.icons.loggedin)
* Simplify the user-button rule - it is overly specific - probably for
historic reasons.
Additional changes:
* Simplify isAuthenticated helper
Change-Id: Ia72e7e45d276e8aac1ff5471bf6158705c7b5f99
* language-selector can only appear in secondary actions so only
load rule on Main page
* .no-js-only not used in MobileFrontend or Minerva
* Remove last-modified-bar rules from ui.less that are repeated
inside footer less file
* #mw-mf-last-modified id is no longer used post-footer rewrite
* CSS rules for .mw-mf-banner are defined in Zero extension
* mw-mf-image-replacement is no longer needed after we turned off
the option to disable images in the mobile site
Change-Id: I7abdbac4d2d16b931e2b110fcebf0dfc82146753
The only usage of mw-ui-button is inside the SpecialMobileWatchList
class in MobileFrontend. Thus we needlessly load as
a render blocking CSS on all page views
multi-line and two-line are likewise only used inside
MobileSpecialPageFeed.php
mobile.special.styles is loaded on all Special pages
so let's load this instead here. This also allows us to use
the element on other special pages in future.
Change-Id: I2b363543d0356a18194a9d08922428a6cb944797
* Use box-sizing:border-box when adding textarea padding - before
the right side of the textarea did not align with the right side of
the bell icon. Now it does.
* Fix specificity of rule hiding cancel link and "editing help" which
appear at the bottom of the form.
* Fix height of noJS textarea (70vh)
* Remove some unnecessary extra margins and padding (the minor edit
and watch this page checkboxes will now show on the same line)
* Update specificity for oo-ui-fieldLayout-body so that it does not
apply to the summary form.
Change-Id: I8d3d61fdc51934a6ef0885cde94dac1e8c5e33ca
The link change overrides link colors in last modified,
talk button and main menu. This approach was obviously flawed.
Rather than enter a specificity
war let's instead limit the styles to links which do not have
an href. Volker you were right...
* Revert "Last modified links should not be progressive blue"
This reverts commit bc045b78a2.
* Revert "Do not style links without href attribute"
This reverts commit daa6ad5145.
* Apply a not selector for links
Certain links (including links inside navboxes) render
links to themselves - for example the navbox on the San
Francisco article (provided it is not removed by
wgMFRemovableClasses)
These links should be visually distinguished from normal links.
The not selector has support from IE9 onwards and given our browser
matrix and the low impact of if this fallback fails this is a perfectly
acceptable usecase.
Bug: T181472
Change-Id: I61b05e3c223f2ba5314aecdf26b8a0ee8caa6524
This regression was due to I9f842ae09751d299716d752328f747269597fbdb
Updated specifity of selector.
Additional change:
* Update comment per feedback from TheDj
Bug: T181472
Change-Id: I9534cce5f240009c9013b75e1367776519b00d81
Replacing id CSS selector by lower specific class selector.
Bug: T187808
Depends-on: I7f3a9df7f9fd1178986112b5265b1ae7c991d5b7
Change-Id: Ib1a874b644e80a26ff415003684f6ce54fd2b7e6
* Remove CSS rule updating the padding of issue-notice
(this is no longer necessary after
I1b880c46fa3debfc5b68d8b416ca642cca98ce7e which defines its own padding
for the element)
* Overlay title is updated to read "Page issues"
Bug: T187916
Change-Id: I7e41d6f03c4cf9fa7563f2f608eec5be89c04a31
$wgResourceLoaderLESSVars is deprecated. Let's not use it anymore.
Change-Id: If28ab6884668700bc46533c8e2c377f17e6be696
Depends-On: Ib9f843147db4473ce5590741e0fb490384b0007e
Bug: T171365
A horizontal line shows in popup previews in the MinervaNeue skin
just above the setting icon due to a css rule that affect all footer
elements. Removing this effect to apply only for the MN skin.
Bug: T184560
Change-Id: Idb0c40c3fc24e4ec2d32cb2de9520952448da77a
