Commit graph

178 commits

Author SHA1 Message Date
jdlrobson db29aa53bd Make MobileFrontend dependency a soft one
This extends the work in Ie29a1eb7746d56f7d8c99b74e5e3c213c30fdcf2

Bug: T171000
Change-Id: Ib125e1bdaace1893804892909c27a9f328445835
2020-01-17 14:02:23 -08:00
jdlrobson 81799f71bb Fix the broken main menu
Although it's not being linked to, it can be visited from cached HTML.
Ensure on this page the menu shows.

Change-Id: Ib688e212c06d7febe82dcd3298e0627b4751dc97
2020-01-10 19:14:43 +00:00
Nicholas Ray 725ee88657 Remove 'animated', mw-notification-tag-toast classes from toast.less
* .mw-notification-tag-toast appears to not longer exist anywhere in
mediawiki

* Removed bottom 'counter translate' style. I'm not sure this is needed
now? The comment makes it seem like it was needed for older browsers
that didn't support fixed positioning but I think mobile browser support
for fixed is good now [1]

* The previous animated class was only in effect during the exit of
toasts. I refactored this logic to be easier to read with hopefully the
same animation effect.

[1] https://caniuse.com/#feat=css-fixed

Bug: T234570
Change-Id: I757122758cb0758f9ede5ccb81d9cc82bb92e79b
2020-01-09 13:58:39 -07:00
Nicholas Ray c22eab914e Add minerva-animations-ready CSS class in Minerva
Per T234570, browser support for animations is solid now so we no longer
need to check for browser support.

However, due to some browsers firing css transitions on page load (see
https://bugs.chromium.org/p/chromium/issues/detail?id=332189), we still
need JS to add this wrapping class after CSS transitions are loaded to
prevent the transitions firing on page load for some components
(DropDownList and MainMenu). See MainMenu.less or DropDownList.less for
an example of how this is used.

MobileFrontend adds an animations class too rn, but that will be removed
in in I58f754740f7146f09c38220a7614285e57684924.

Bug: T234570
Change-Id: If0cf7113b40f7217a22b66a8669138466af2cf5d
2020-01-09 13:58:37 -07:00
Jan Drewniak 08b82c025e username & userlinks should appear on a separate line on RecentChanges and Watchlist
Followup to I30aba29 fixes an issue where the user links (talk|contribs)
were pushed on a new line.

Bug: T236328
Change-Id: I52871ffc643b0484b62f8a2049101027d0de7d50
2020-01-06 15:18:00 +01:00
Krzysztof Witucki 0887552619 Fix shadow on notification overlay and navigation-drawer
minerva.variables.less: added gray color variable
MainMenu.less: added shadow to navigation
NotificationOverlay.less: changed alpha color of shadow
drawers.less: replaced rgba color with the same color variable

Bug: T231205
Change-Id: Ib1e16804b941a8f3b0cc639673baf73dc749a60a
2019-12-24 12:00:15 +00:00
Jan Drewniak f5bef2ea5c Main menu button works without JS
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
2019-12-19 19:55:39 +00: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
jenkins-bot 2e264b4f68 Merge "username should appear on its own line on RecentChanges and Watchlist" 2019-12-03 23:10:33 +00:00
Volker E a62ca4412f Replace #content selector by .mw-body
Has been replaced in other skins, `.mw-body` is exclusively used on
`#content`.

Change-Id: I56ca92a683a2f9f4181e7708a312e691448ce230
2019-12-03 11:36:18 -07:00
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
jdlrobson e901bc593e username should appear on its own line on RecentChanges and Watchlist
This shouldn't apply to history or contributions which use the
same stylesheet.

Bug: T236328
Change-Id: I30aba290bd7a47cc2c1f7af665bfabe3f8797b80
2019-11-26 17:57:20 +00: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
jdlrobson 7f68c3d3ad MainMenu is a controller not a View and server rendered (take 2)
There should be no caching implications for this change, as the main menu
has been server side rendered on all wikis since 10th October.

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.

ev.preventDefault in onSkinClick is dropped since the link to the '#'
(the default behaviour) is wanted

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

Bug: T234650
Change-Id: If101eebbdbda1519af922745917237648722820e
2019-10-29 16:37:04 -07: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
jenkins-bot 0e521e507e Merge "Remove obsolete mw-mobile-mode classes" 2019-10-28 08:20:14 +00:00
Volker E 19b1ea2297 Unify transition values across board
Using newly introduced variables instead of fixed values.
Also adding `transition` to property blacklist to ensure using
mediawiki.mixin.

Bug: T236224
Change-Id: I3d2d05f4e50e7b6bba0fe84fae1dde5de5b75492
2019-10-24 12:11:52 -07:00
jenkins-bot 6dd4142113 Merge "Add standard transition to icon elements" 2019-10-24 18:13:53 +00:00
Volker E 60e67abcc2 Remove obsolete mw-mobile-mode classes
Originally I intended to reduce specificity, seeing that
`mw-mobile-mode` class does seem obsolete in the meantime -
actually ever since I20e46165fb76956cb 3y & 5m ago.

Change-Id: I4e4d291c72864c868d99d87c4f96108b5eeea0f0
2019-10-24 16:51:18 +00: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
Volker E 22d4d095f1 Remove unneeded vertical-alignment property
It's ignored as `float: left` is also set on the same selector.
Resulting from I06422cbe27afeab.

Change-Id: Ibb755c7b71ea5f3006abd178cdeaa540862f862d
2019-10-23 14:29:13 -07:00
jdlrobson 72d4a103fd Consistent undo/rollback links across changelist pages
Move styles from history page into changeslist stylesheet. These
rules will continue to apply but will also apply to other pages
e.g. Special:Watchlist

Remove style for a.mw-rollback-link which does not look like its
 possible - link is always inside a mw-rollback-link container -
according to includes/Linker.php

Bug: T232284
Change-Id: Ifd04adeba74f010161b88f044ff4282636246e7a
2019-10-09 16:11:02 -07:00
jenkins-bot 38b5591c8c Merge "Echo is removed from Minerva" 2019-10-09 19:51:00 +00:00
jdlrobson ab61dbb173 Echo is removed from Minerva
Managing the transition from old implementation to new:
* A version number is exported from skins.minerva.scripts to
tell dormant code added to Echo in I09c27a084100b223662f84de6cbe01bebe1fe774
to begin running.
* A skinStyle is added for the new `ext.echo.mobile` module.
`mobile.notifications.overlay` will soon cease to exist but is kept registered for
backwards compatibility reasons
- Drop ev.preventDefault call from onSkinClick - it is no longer necessary and will ensure
notifications overlay closes when shield is clicked while it is open.

Integration:
* A server side hook SkinMinervaReplaceNotificationsBadge allows Echo to replace
the current Minerva notification badge
* A to-be-created client side hook is subscribed to to deal with the navigations drawer
like functionality using the mainMenu code
* id and class names are added to the container for the NotificationBadge for compatibility with
ext.echo.init in Minerva's desktop mode (it will work like Vector)

See I09c27a084100b223662f84de6cbe01bebe1fe774 for understanding the bigger
picture.

Depends-On:  I09c27a084100b223662f84de6cbe01bebe1fe774
Bug: T221007
Change-Id: I4c11f1b241d629e1b294ebaec17472fbf944f8c7
2019-10-08 23:21:12 +00:00
jenkins-bot b40b29988c Merge "Adding a static width/height for mw-ui-icon background images." 2019-10-08 18:26:12 +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
jdlrobson 59b093a889 Specify LESS suffix in import statements
Follow up to I379334d7729e587a2a0029550e30e7c46a4f7a7a

Change-Id: I549b1400904c7b1d4e40f5418dd665a759728f93
2019-10-07 18:06:57 +00:00
jenkins-bot 18b483b6ea Merge "Revert "MainMenu is a controller not a View and server rendered"" 2019-10-04 15:18:11 +00:00
Jdlrobson 93b16db1c5 Revert "MainMenu is a controller not a View and server rendered"
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
2019-10-04 15:03:19 +00:00
jenkins-bot 3c6fd24f00 Merge "MainMenu is a controller not a View and server rendered" 2019-10-03 20:30:02 +00:00
jdlrobson 111757970e MainMenu is a controller not a View and server rendered
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
2019-10-03 13:13:09 -07:00
jdlrobson 5b3572ee39 Style rollback link on RecentChanges, Contributions and Watchlist
Bug: T232284
Change-Id: I8c38bb3715b5acaaf49333fcd50bac534dd6eef5
2019-10-02 23:20:23 +00:00
jenkins-bot 9152466474 Merge "Use consistent small font sizes" 2019-10-01 23:21:01 +00:00
jdlrobson 81bbd6eb48 Use consistent small font sizes
* Add @font-size-minerva-smallest and use it in place
of font-size: 0.8em across the site so that we get a round
number for our font sizes.

Bug: T229568
Change-Id: I4270225c07941b4c164d5e044f70d4b131dbc19d
2019-10-01 22:29:55 +00:00
Nicholas Ray e3560b1f93 Remove mobile diff page drawer margin on mobile screens
Although alignment of things on tablet is still anyone's guess, this
commit focuses on fixing the alignment of the contents in the mobile
diff drawer on mobile screen sizes only per [1] by setting the margin to
0.

[1] https://phabricator.wikimedia.org/T233151#5537879

Bug: T233151
Change-Id: Ic3a47cf98380c501709df3f443cd43f37ce1abe8
2019-10-01 14:34:10 -06:00
Nicholas Ray 2b9929a5f9 Vertically center clear icon within search form element
Rely on css top/transform to center it instead of calculations.

I84fc4224d5107188265d8ec0a26c0388664949a5 should be merged shortly after
this one.

Bug: T233156
Change-Id: I6e00f851ecb4e1ba8c1ef5d90bcc4310d66a820e
2019-09-30 16:58:25 -06:00
jenkins-bot 4ec857c2c4 Merge "Fix Recent Changes Comment alignment on deleted pages" 2019-09-27 20:58:39 +00:00
Nicholas Ray 54ec3653b8 Fix Recent Changes Comment alignment on deleted pages
On deleted pages, the comment was being floated making it appear out of
order and misaligned with the rest of the text. This commit fixes that
by removing the float and padding on deletion comments.

Bug: T232955
Change-Id: I3f07128f58ae032c628192f8fc0159aff2c30016
2019-09-27 12:32:30 -06: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
jenkins-bot 060c163b24 Merge "[ICONS] Remove padding from .mw-ui-icon-small class" 2019-09-26 23:45:48 +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
jdlrobson cd688eb197 Avoid flash of unstyled content on Special:Watchlist
Bug: T225127
Change-Id: I9b96627b1d48dddc30006fc52fc1816fbe8b29ac
2019-09-26 21:47:27 +00:00
jdlrobson b15fa199a2 Clear search alignment
* 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
2019-09-25 22:15:21 +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
jenkins-bot d61e1f7fb7 Merge "Generalize SearchOverlay styles to all "header-chrome" overlays" 2019-09-17 00:40:47 +00:00
jenkins-bot d2a5907c3e Merge "Only apply padding-top to overlays with headers" 2019-09-16 23:27:08 +00:00