Commit graph

42 commits

Author SHA1 Message Date
Volker E 52f37a5f2a Enable stylelint 'selector-max-id' rule and disable only on occurrence
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
2019-11-27 17:36:59 -08:00
Jan Drewniak 3014a6b8d1 Fix page-action menu labels for non-amc mode
Followup to 77a1424e4e

Bug: T226562
Change-Id: I85257e3e0dc32cbc0d04b31486b65743d073e7a3
2019-10-29 17:51:33 +00:00
Jan Drewniak 77a1424e4e Show labels in page-actions menu on desktop widths
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
2019-10-28 12:53:38 -07:00
jdlrobson 98d91a66f3 Remove watch and watched icons from repository in favor of Wikimedia UI
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
2019-09-19 10:39:27 -07:00
jdlrobson 1735325f47 Correct personal and overflow menu padding and positioning
Bug: T233050
Change-Id: I09d1c53d2088034ab4eec0fa6b4af3daf66e2003
2019-09-16 20:32:19 +00:00
Jan Drewniak 633c48bddf Utilize the mw-ui-icon-flush-left/right classes to align icons
Affected icons:
- hamburger menu
- "search|notifications|user" menu in page header
- notification "circle" icon
- page actions menu
- section edit icon

Bug: T229440
Change-Id: I5587855d0d9ecf2fac20ce16845e6749c26ab7c2
2019-09-13 12:09:43 -07:00
Jan Drewniak be76f05ebb Prepare for new mw-ui-icon spec for Minerva
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
2019-09-12 18:44:44 +00:00
jdlrobson c0f08790ea Remove the mw-ui-icon hacks and overrides
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
2019-09-10 10:53:20 -07:00
jdlrobson 9150aec131 Feature flag overhaul
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
2019-08-23 10:48:14 -07:00
jdlrobson 7280d255c0 Dev: Prep for storybook
* 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
2019-08-21 12:20:26 -07:00
Ed Sanders aad8addcec AMC actions: Increase touch target size to 44px
Bug: T230033
Change-Id: I3ec9091380d48e2fcedb8d222fa22b0143f7bceb
2019-08-11 12:42:05 +01:00
Stephen Niedzielski 93f930ce3e [UI] [menu] remove menu height resizing
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
2019-07-31 20:05:54 +00:00
Jan Drewniak 8ae59453de Reduce margin below article/discussion tabs.
Bug: T225230
Change-Id: I318848d8e47b0a7d4f47946a1f2ae22a5c7878bb
2019-07-22 13:42:12 +02:00
Piotr Miazga dee1c197b9 On user pages, move language icon from Toolbar to Overflow menu
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
2019-07-16 17:51:11 +00:00
Stephen Niedzielski edb4385345 Hygiene: extract ToggleList to a reusable component
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
2019-07-04 13:48:13 -06:00
Stephen Niedzielski b594daf8c8 Fix: AMC overflow menu initial CSS and SSR icons
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
2019-05-01 09:29:50 -06:00
Stephen Niedzielski 815f3386e3 Update: add secondary page actions submenu in AMC mode
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
2019-04-19 14:51:17 +00:00
Jan Drewniak 7821b1499c Removing code related to old page-action menu markup
Bug: T218653
Change-Id: Ifafe86f36be59fc22bb02c42b3ff12509c67b53d
2019-04-10 22:31:14 +02:00
Jan Drewniak d153d78f46 Ensure page-actions icons are display:block
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
2019-03-13 22:09:39 +00:00
Jan Drewniak 69511f16b6 Add history icon to page actions menu for AMC mode
Bug: T213352
Change-Id: I6ba11c5969e03bf71fb891558fde68215e978083
2019-03-07 00:45:53 +00:00
Jan Drewniak 864a1766a7 Refactor pageActions menu to accommodate AMC mode
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
2019-02-28 12:31:57 +01:00
Jan Drewniak f92b117158 Remove margin from tagline and add .page-heading element
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
2019-02-19 12:37:27 +01:00
jdlrobson 44ed0f5e69 Talk tab select should sit on top of page actions
Per design review with Alex.

Bug: T212216
Change-Id: Id4e1f5167c50a8d75a0682c4e8ed219c36b93be3
2019-02-13 11:42:15 -08:00
jdlrobson 577b72a14d Remove backwards compatible CSS
This is no longer needed when Varnish cache has cleared (About a
week from I7e989a3d4553eb3357598a5cad3ccebf51dc9fae being deployed

Bug: T212216
Change-Id: I1afb68f68cc90d89c442907426bd046ddc68f488
2019-02-12 17:40:49 -08:00
jdlrobson 7e423c07b7 Talk tabs in AMC mode
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
2019-02-13 00:02:35 +00:00
jdlrobson 95b139d756 page actions is no longer position absolute
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
2019-02-07 12:16:14 -08:00
jdlrobson d305a29db8 Do not capitalize wikidata descriptions
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
2019-01-25 22:47:27 +00:00
jdlrobson 4d734942c5 Remove large bottom margin at top of main page
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
2019-01-23 12:10:06 -07:00
Volker E f0608db19a build: Update 'stylelint-config-wikimedia' to v0.5.0 and make pass
Updates code comments and whitespacing.

Change-Id: If7665beaa2d342881483fd7a9fc0fc880768d2ef
2018-12-12 23:26:48 +00:00
jdlrobson 1326f7be69 Cleanup unused page actions CSS
Depends-On: I06ef42cb1461fde7ca0aa903f174c3b1f39ab154
Bug: T196893
Change-Id: Iccde86c7acc0bd66bbad9a9fdc0fdf172576f872
2018-10-22 17:39:25 +00:00
jdlrobson aa6a2dda4c Watchstar is accessible to non-js users
Bug: T196893
Change-Id: I5dbd164ba68e6c74e80f8bcf90819a526cda5a5e
2018-10-19 11:00:19 -07:00
Stephen Niedzielski 0b043fbaa7 Fix: don't truncate the article title
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
2018-06-13 13:51:44 -05:00
Timo Tijhof 64134bd8a6 Remove minerva.less from global import path
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
2018-05-29 12:19:00 +00:00
jdlrobson 026b1ff305 Remove unused CSS code
Remove:
* no-edit-js
* .content_block

Document existence of Parsoid selector
* mw-ref

Change-Id: I0cb695dd437f9e070d57adf60170788dd2047137
2018-04-25 15:16:05 -07:00
jdlrobson c986db6c0e Always render taglines unconditionally and update styles
Adjust tagline margin per Nirzar:
https://phabricator.wikimedia.org/T180095#3801719

Note, this will  enable the tagline everywhere.

Change-Id: I3bce2a3472ab2e53261965c953572f35cc740eed
Bug: T180095
2017-12-05 00:27:11 +00:00
jdlrobson 734ac36f1e Correct feature phone threshold detection
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
2017-10-04 13:51:19 -07:00
Volker E 875d31b03b Hygiene: Remove unnecessary Less vars
Removing unnecessary Less vars, which are not in use any more.
Also slightly modifying code comment for better code style.

Change-Id: I6e2417561afb03225eaca99ea93135f975a51593
2017-08-16 18:13:09 +00:00
Baha 97b2ddfa11 Remove first heading padding
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
2017-08-16 11:56:59 -04:00
Baha bea5dbde62 Don't float article actions on tablets
Bug: T171608
Change-Id: Ie9ba7df0a0f052948d46b6a9b14a3bbcef2b99fe
2017-08-14 12:43:34 -04:00
Derk-Jan Hartman 56d16e894b Make sure that all buttons in the actions area have pointer
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
2017-08-10 09:32:04 -04:00
Umherirrender 211a54b568 Update and run existing stylelint
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
2017-07-19 20:31:24 +00:00
jdlrobson 2cc9516cde Minerva is its own skin
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
2017-07-12 08:12:40 -07:00