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
Adjust tagline margin per Nirzar:
https://phabricator.wikimedia.org/T180095#3801719
Note, this will enable the tagline everywhere.
Change-Id: I3bce2a3472ab2e53261965c953572f35cc740eed
Bug: T180095
Replacing `#9aa0a7` with standard subtle `#999` print color.
Also clarfiying LESS variable naming and removing unused variable
`@printBorderColorLight`.
Change-Id: I2c1b36099935aa99d63a3316b3a107a23ffa0afd
On Special:MobileOptions we want to make the form take up the full
width but pad the fields in the form
(per https://phabricator.wikimedia.org/T180095#3795514)
This change is harmless but is necessary as soon as we port
the page to OOjs UI (I70f68df9d2d305126444319b05675702af75de87)
Bug: T180095
Change-Id: I1dda3eb4d0e7ebbec544dc0f5763b079e38f5cc8
Align SVG markup across Foundation products by:
- unifying XML declaration,
- adding `width` and `height` attributes where missing,
- removing all unnecessary `g` group elements where applicable,
- putting attributes in order,
- removing unnecessary ids and
- unifying whitespace.
Bug: T178867
Change-Id: I6860c9259553e0e41f7656f9e98534db8e02bbc2
The Popups extension uses a footer element so these rules clash with
that and probably other extensions.
To avoid this restrict the element to the skin.
Change-Id: Iac3aa8e600969a0feb0abeee745cd26592a594fd
Currently appears unstyled, so in lieu of some styles it would be
better to hide that for the time being and revisit later.
Change-Id: If0f4f02868b1344746affcec5116c325c612d145
max-width should actually be one smaller than the threshold
Additional changes:
* Also rename to @width-breakpoint-mobile and
rename @width-breakpoint-desktop for desktop variable in
anticipation of T171365
Bug: T176286
Change-Id: Ia37bceb46a6b780f473828ff38749543bdfcc9f6
We no longer need to keep this as a separate entry point now we do not
feature flag our print styles
Please enter the commit message for your changes. Lines starting
Change-Id: I6bf12980aa929e84f239931beb0a505809231830
Routine maintenance - all FIXME statements suggest these can
be removed. W00t!
Depends-On: Iee059a6605cf12a073954378f49ddc721a7e016a
Change-Id: I645dca1fa4d9e80d506e907b0be78a5aef0e2f12
Aligning remaining SVGs to WikimediaUI color palette.
Also:
- Aligning markup to each other, among others adding XML declaration
throughout or removing unnecessary `standalone=no` attribute.
- Optimizing with SVGO without prettified markup. Savings of up to
17% of file size.
Bug: T146799
Bug: T172850
Change-Id: I54a21932fd5df64b7716ac66a90de5af73776c23
Replacing abandoned `@colorGray13` (`#ddd`) with
appropriate variable `colorGray12` (`#c8ccd1`) from WikimediaUI
color palette, which is used for borders elsewhere.
Bug: T146799
Bug: T172850
Change-Id: Id529d79901aab32d30e2b50820b59a84bd9b3693
Removing unnecessary Less vars, which are not in use any more.
Also slightly modifying code comment for better code style.
Change-Id: I6e2417561afb03225eaca99ea93135f975a51593
The page actions have been brought down to the next line for all screen sizes
in Ie9ba7df0a0f052948d46b6a9b14a3bbcef2b99fe. There's no need to reserve the
space now.
Bug: T171608
Change-Id: I24d54124049895eee38da8de553b7dc15976235a
Replacing abandoned `@colorGray13` (`#ddd`) with
appropriate variable from WikimediaUI color palette and
remove unneeded `@chromeContentSeparator` var, which is
just used once and not in place with `.header` anyways.
Additional changes:
* Also aligning `border` values to each other.
Bug: T146799
Bug: T172850
Change-Id: Ia9a1736b1ea5fa080b4673038b2c23ddce90f135
Also include a elements here, as a elements without href, as is used
in some places in Minerva, does not have a pointer by default.
Bug: T145493
Change-Id: I08d9176e55ec298c9d423d391b6fb4ed5e9df5e7
stylelint is part of config, but not run by default
Also update to 0.4.1, it is the current default in many wmf extensions
Change-Id: I55f81489182628c088e362e081417514e252e6d6
This is programmatic output from python3 scripts/migrate.py
This will result in a Minerva skin dependent on MobileFrontend.
Post merge we will rename message keys to have minerva- prefix
Bug: T166748
Change-Id: Iff1f7e63e796cc5d4a6d2ab0370e0c33248d2fce
