Commit Graph

31 Commits

Author SHA1 Message Date
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