Commit graph

23 commits

Author SHA1 Message Date
Volker E 1c18c860ca Reduce margin in icon and label combination
Specifically visible in main menu.

Bug: T237019
Change-Id: I47bfc169c1edae5c251a76800c800aa2f5328456
2020-02-12 22:43:44 -08:00
Ed Sanders d3f1b6830a PageActionsMenu: Reduce spacing between icons and text in tablet mode
Bug: T237019
Change-Id: Ibec3ce5bb97fa6147fa07fbc2fb5e324c3e03680
2020-02-12 22:29:06 -08:00
jenkins-bot ebd2a32d7f Merge "Remove line-height as a way to create "screen-reader" text for icons." 2019-12-04 18:56:33 +00:00
Jan Drewniak 61e9b0d247 Remove line-height as a way to create "screen-reader" text for icons.
Line-height was used as an alternative to text-indent to push
text inside icon elements off-screen. This method sometimes
caused the pseudo-element to be positioned off-screen
because it is displayed as inline-block.

Now transparent color, combined with nowrap and ellipses are used
to achieve screen-reader only text instead.

Bug: T239304
Change-Id: Ic8eea3f8a1c6e87a35c36e209663e9ab643f7900
2019-12-04 01:48:34 +01:00
Jan Drewniak 0a865d244a Adding min-width/min-height to icon sizes
Bug: T238681
Change-Id: I18c09436232a34bd47afa0aebdff9d1d10a622a0
2019-12-04 01:10:38 +01:00
jdlrobson b7aaf0c3d8 Icon background should disappear on touch devices after click
A simple fix. Extensive documentation!

Bug: T233046
Change-Id: I378943a663a8947c8a03f807974829c66236a7ff
2019-11-04 21:27:06 +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
Volker E 3d6b2b29bd Add standard transition to icon elements
While working on I05c4e5f7a8b18a3 I've noticed the missing transition.
Also adding standard WikimediaUI variables in support of this.

Change-Id: I30c75ed306bf826ae40db3703ef423dfad85fa74
2019-10-24 16:51:05 +00:00
Jan Drewniak c703e94fd3 Adding a static width/height for mw-ui-icon background images.
Adds a static width/height for icon background images as well
as min width/height for situation where flexbox layout
is at play.

Bug: T233521
Change-Id: I3a4ced61dac78df7a3411a5d8510949b491c8591
2019-10-08 19:35:08 +02:00
Jan Drewniak 51049c0ceb Refactor "last-modified" bar to use flexbox layout.
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
2019-09-27 00:03:14 +00:00
Jan Drewniak 6e6cdd74c4 [ICONS] Remove padding from .mw-ui-icon-small class
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
2019-09-26 23:07:03 +00:00
jenkins-bot 98f957219e Merge "Labels for mw-ui-icon-before elements should be vertically aligned inside" 2019-09-20 18:10:36 +00:00
jdlrobson 2a76493a56 Labels for mw-ui-icon-before elements should be vertically aligned inside
This also resolves the issue with the language menu item being grayed out
for pages without languages

Bug: T233167
Bug: T233050
Change-Id: I05c54c0d35e4990717a8c3dc4ab42841349535f1
2019-09-20 10:37:46 -07:00
jdlrobson 4ac03162f0 Add the mw-ui-icon-flush-top class
Bug: T232837
Change-Id: I285d6c7f26bb160eb4b646d241bf3acd0f567f62
2019-09-19 15:59:03 +00:00
Jdlrobson 9ec7217d47 Merge "Adjust notification icon to be the same size as the other icons" 2019-09-13 21:53:37 +00:00
Jdlrobson fd3599b603 Merge "Fix truncated text showing through icons & last-modified bar" 2019-09-13 21:53:27 +00:00
jdlrobson 109b24e0ee Adjust notification icon to be the same size as the other icons
Bug: T232011
Change-Id: I0300685d38551bc9ee2c2bd32d6348f32d4df4de
2019-09-13 13:55:01 -07: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 35e489de25 Fix truncated text showing through icons & last-modified bar
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
2019-09-13 18:35:31 +00:00
Jan Drewniak 6223d571bc New mw-ui-icon spec for Minerva
Redefines the mw-ui-icon module from MediaWiki-core for
better mobile support.

The new spec maintains the same interface and class names as core
(mw-ui-icon, mw-ui-icon-element, mw-ui-icon-before etc,)
but ensures that icon sizing is more consistent and
provides larger and more flexible touch-areas to the
`.mw-ui-icon-element` class, which in practice is used to
make icon buttons.

This introduces a temporary defect in which the hamburger and user
menu icons are a little too close to the edges. This will be fixed in
I5587855d0d9ecf2fac20ce16845e6749c26ab7c2

Bug: T229440
Change-Id: I929090848f3e04647a97f4979ec78682623fa070
2019-09-12 21:47:09 +00: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 6cd0d4b097 Also set bottom attribute on icon glyphs
This ensures that the logout button is centered vertically on
absolutely positioned elements.

Bug: T229440
Change-Id: I4d230c01fc4d32e854b7ed1e7ed5e09c040954b1
2019-09-10 10:41:04 -07:00
jdlrobson 4e5ed825c8 Icon pseudo elements need top: 0 for RTL languages
Document why so it doesn't get removed next time.

Bug: T232260
Change-Id: I09cac0403c913e5ff10dfede9355a08f226f395d
2019-09-09 20:56:15 +00:00