Commit graph

117 commits

Author SHA1 Message Date
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
Bartosz Dziewoński 1015e653d6 SearchOverlay: Fix position of the 'clear' button
Before c0f08790ea, this was defined as
`( @iconSize / 2 ) + @headerVerticalPadding`, which computed to 0.9em.
Restore the old value since it looks wrong now: T215426#5486117.

Change-Id: Ib14a148da305d98f2d1ce9b1c71cb8910d665e44
2019-09-12 01:08:34 +02:00
jenkins-bot 02986e7a85 Merge "Change height of overlay headers to 3em, keep site header unchanged" 2019-09-10 22:58:50 +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 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
jdlrobson 497044290a MobileFrontend is now managing the toggling code. Remove.
Depends-On: I6bdeb7198082c4b1d0a32960cc4dc679ff4c6762
Change-Id: I1815a730fc12f68c287d58f2de6f92e05db3abd2
2019-09-06 15:50:00 +02:00
Bartosz Dziewoński db750381b1 Move overrides for rcfilters font-size to a single place
Additionally, apply the same to .mw-rcfilters-ui-overlay, which only
accidentally had the same font-size defined in MediaWiki until
I672fdcebbdc586765de2c10f9a9a21796db57cc5.

Also change .rcfilters-container to .mw-rcfilters-container, since
the former class is deprecated.

Change-Id: I221f6c2d637c7d2a843bfc4a2f7cd9877e2a5b12
2019-09-05 21:36:47 +02:00
Nicholas Ray f944720ab2 🐛 Bug: Fix iOS input text zoom bug on rcfilters input
On iOS Safari, the screen zooms in when the user focused on
the text input of the rcfilters overlay. This commit adds a quickfix to
address this problem by setting the font-size to its initial value
(assumed to be 16px).

Bug: T231049
Change-Id: I98d28115e570a11d08ba2bd189c0b9151f834e7d
2019-09-04 17:45:23 -06:00
Bartosz Dziewoński ee80c16f2c Change height of overlay headers to 3em, keep site header unchanged
Split @headerHeight variable into @siteHeaderHeight and @overlayHeaderHeight.
@overlayHeaderHeight is now set to 3em (48px).

Use @siteHeaderHeight for the base skin interface, and @overlayHeaderHeight
for overlays.

skinStyles/mobile.notifications.overlay/minerva.less:
* Update footer height to remain the same as header height.

skinStyles/mobile.startup/search/SearchOverlay.less:
* Use @siteHeaderHeight even though it is an overlay, because it's
  supposed to exactly match the base skin interface.

Bug: T215426
Change-Id: Iaa36f581a12a8eea2b755ae583b8a2c6324ebe29
2019-09-03 22:30:20 +00: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
jenkins-bot c543219d3a Merge "Dev: Prep for storybook" 2019-08-21 21:08:25 +00: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
jenkins-bot 5873ab5a8a Merge "Provide access to original redirect page on toasts" 2019-08-20 19:21:13 +00:00
jdlrobson f0197f9492 Correct CSS selector for rollback link
Bug: T230656
Change-Id: I42cab21148e4583a6c8d7d05eebf03e63e1e74e3
2019-08-19 22:09:32 +00:00
jdlrobson ab8da137cb Provide access to original redirect page on toasts
Color progressive/destructive (blue and red) do not make
sense on a black background, so we use white and underlined
for both of these. Note these don't seem to be used currently
so this is not a breaking change.

Bug: T150189
Change-Id: I78a92b5b6c76638633b99fe32670911d355ce6f3
2019-08-12 22:48:14 +00:00
jdlrobson 9c1e1abc97 Reduce visual clutter in Special:Contributions
Force rollback, tagmarkers and revision delete/undelete onto their
own lines without floats

Bug: T229704
Change-Id: I0727f89bf4e906def9d3cfc8af8f921d6c12c68a
2019-08-06 19:47:45 +02:00
Jan Drewniak c85f48cdd1 Recent changes design cleanup - font-size changes
- decreases the font-size of the rcfilters module
- increases the font-size of the changeslist date headers
- ensures there is no left margin on the changeslist <ul>

Bug: T229360
Change-Id: I99867ad3702c71b7e627c394359dc02fe4b9214e
2019-08-06 14:09:26 +02:00
jdlrobson c63fceea6e Normalize small fonts
We use 0.9em in a variety of places, to shrink font-size from the
default font-size. However given we use 16px as a base font this results
in a font-size of 14.4px. This can also cause problems with icons resulting
in rounding errors when used with multiple icons

This changes the font-size to 14px for those areas and makes future usages
centralized by adding a specific variable.
Also amending `@font-size-browser` variable to be aligned to naming convention
and equal to Vector one.

Bug: T229399
Change-Id: I8e31bca2982c049a9be73c89aa9e8e2aa8141269
2019-08-01 16:11:29 +00:00
edderso 08a49e450c Fix "Compare selected revisions" button padding
Applies the .mw-ui-button() mixin to the button.

Bug: T225768
Change-Id: If12db58c640ac6deb970e81eed55ef8290443a71
2019-07-30 21:59:17 +01:00
Jan Drewniak 5e7a35946c Adding skin styles for the changeslist module.
The changeslist module is the list of results on special
pages such as recent changes, watchlist, and parts of action history.

Adds a skin style to special.changeslist module.

Bug: T228419
Change-Id: I324b1f136f5314cb6acdba3155b07136bbde363a
2019-07-30 19:00:09 +02:00
jenkins-bot a9f6d67d3c Merge "Set header height to 54px equivalent in ems" 2019-07-22 19:03:53 +00:00
jenkins-bot f37e639282 Merge "[Revert] "Set header height to fixed pixel"" 2019-07-22 18:34:32 +00:00
jdlrobson 4a5561257c Set header height to 54px equivalent in ems
Same patch as I4eed89f6a64eeb369c1ab0bb47f0462de7b0ceb3 but
destination is `em`s.

Bug: T195795
Change-Id: I1165f1e3f6fe1b86f843c2acb7a87681eda3aec6
2019-07-22 07:40:40 -07:00
jdlrobson 72c860abc6 Adjustments to Notification tray margins and borders
Bug: T225260
Change-Id: I71b3d4ab9eb490b8a9efb753d682931981680381
2019-07-18 22:20:40 +00:00
Niedzielski 1bf2f51cdf [Revert] "Set header height to fixed pixel"
This reverts commit 625720420e. Setting height in
px results in variable (font-size) contents overflowing.

Change-Id: I510a4136be97ffd3f1dec63a39eec696c227ab25
2019-07-18 22:20:14 +00:00
jenkins-bot 8c91faec1a Merge "Set header height to fixed pixel" 2019-07-18 14:01:16 +00:00
Bartosz Dziewoński 1fed815868 Allow .transparent-shield styles for navigation to be reused
Define the color etc. in the base styles, so that other drawers will
not have to redefine them to display the shield.

Bug: T214049
Change-Id: Ife957374cb0d21446db2067171e68fb726ad8347
2019-07-17 23:32:37 +02:00
jdlrobson 625720420e Set header height to fixed pixel
Bug: T195795
Change-Id: I4eed89f6a64eeb369c1ab0bb47f0462de7b0ceb3
2019-07-17 10:17:53 -07:00
Piotr Miazga 016631f57a Style the "new" indicator next to amc opt-in field
Bug: T225731
Depends-On: I0821300dbcbc6baa9c56eb3c711c713bb0cb9e14
Change-Id: Id13e2a0fe3863fa4ae6aee878bf15a424fca7c31
2019-07-17 16:39:02 +02:00
jdlrobson 37a3045f62 🐛 Bug: Make the history action's filters form toggleable again
Before this commit, the filters form would stay collapsed and the user
couldn't toggle the visibility of the form. This commit fixes that by
loading the necessary modules for the history action to make the form
toggleable again:

- mediawiki.page.ready
- jquery.makeCollapsible
- jquery.makeCollapsible.styles

Additional Changes:

- The explicit addition of the 'mediawiki.action.history' module to the
defaultModules array in SkinMinerva was removed because this module
should already be added by HistoryAction.php and all we are doing with
Minerva is styling it differently.

- The styling to hide the filter revisions box in
skinStyles/mediawiki.action.history.styles.less was removed now that
this functionality should work again

Bug: T223204
Change-Id: Icf4a22a62228aca5a120bcdf3d6fede35b3c928e
2019-06-07 14:27:23 +00:00
Jan Drewniak 650198b7bb Fix z-index issue with button on action=history page
When opening/closing the main navigation, the large blue button
on the action=history page is visible above the opaque page content.

This changes the z-index when the main navigation is enabled.

Bug: T219895
Change-Id: I724c2419800a4aec0b55b18be920d8bf7e47fa60
2019-05-27 16:48:09 +02:00
Jan Drewniak 078aab76d8 Adds AMC styles for action=history page
Styles the action=history page to resemble it's desktop
counterpart for users in AMC mode.

Bug: T219895
Change-Id: Ide359724a4628f69ef03acee7718d70c698b8faf
2019-05-22 14:24:43 +02:00
jenkins-bot 3d73282dc9 Merge "JSON content: Fix table margins" 2019-05-09 17:31:21 +00:00
Ed Sanders d6dc73063d JSON content: Fix table margins
Change-Id: I50a2203adb66e634f9d995225075dc29a34ab4dd
2019-05-08 11:37:57 -07:00
Jan Drewniak 4ad1b511c0 Add Minerva specific mediawiki.interface.helpers.styles.less file
This SkinStyle file adds paranthases around the (diff|hist) links
and username(talk|contrib|block) links on special pages.

Bug: T222394
Change-Id: Ic291cb795ccad556a5049d970c0282b2d4c65a11
2019-05-07 15:54:13 +02:00
Volker E b308c33a74 Amend history action page mixin's name
Amending name to be equal to current CSS class naming scheme,
even if it's not perfect, for simpler maintainability.

Change-Id: Ie1f0dc26dceb92be650d827d63a62092912ac504
2019-04-25 01:47:47 -07:00
jdlrobson 6ade2b1ec6 Reset history page styles for Minerva
This provides us with a blank canvas for styling Minerva's history
page in AMC mode.

I have also provided styles for a non-AMC mode (test by changing
the class on body tag to minerva--amc-disabled). This will allow us
to remove the SpecialMobileHistory page in mobile if we choose to
do so.

Change-Id: Ic57cb79903e90ce1bbfa6d87ab0499f09373e732
2019-04-23 10:17:50 +02:00
jdlrobson c16c20a394 QA: Port Notifications browser test to Node.js
Uncover a bug and fix it in the process \o/ - it seems that the
close icon is misplaced between clicking the notifications icon
and loading the contents of the overlay - this confuses the webdriver
as the button is not clickable.

Bug: T219920
Change-Id: Ib4d076fd9b7ea1cd48b6b58940a50560eacd51a0
2019-04-11 13:26:39 -07:00
Volker E 681a752f29 Remove .background-size() mixin usage
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
2019-04-03 18:02:48 -07:00
jenkins-bot 3ace1a7615 Merge "Images should have borders in Android app / parsoid generated content" 2019-03-29 14:57:02 +00:00
Volker E a738f25c05 Use system font stack as sans-serif choice
Using system font stack provides better reading experience on wider
range of operating systems and languages combinations.

Adding `fontFamilyBase` variable to easier update and clarify usage.

Bug: T175877
Change-Id: Id00fbe7ca90a3b31524c618de4441c413fe4afbe
2019-03-27 10:01:01 -07:00
jdlrobson 05e6069ab6 Images should have borders in Android app / parsoid generated content
To test check out  I5c1fdfc87a48764cbb53b7a751fbffc1a4e36fc5
``
$wgMFContentProviderClass = 'MobileFrontend\ContentProviders\McsContentProvider';
$wgMFMcsContentProviderBaseUri = "https://he.wikipedia.org/api/rest_v1";
```
Navigate to http://localhost:8888/w/index.php/%D7%93%D7%92%D7%9C_%D7%99%D7%A4%D7%9F

Bug: T198534
Change-Id: I19e9456895789abc413679105da46cbd4f9f0ce9
2019-03-23 00:15:04 +00:00
jdlrobson c970b4aa8f Fix positioning and size of mark all as read button in NotificationOverlay
Bug: T218731
Change-Id: I38980f9f546ba32090f34c9ec584bb08ed11dd5c
2019-03-19 12:51:13 -07:00
Nicholas Ray b45120731f Import all skinStyles/mobile.startup into mobile.startup.less
This mimics the structure we follow in MobileFrontend's mobile.startup
folder where we have a mobile.startup.js that imports all the
mobile.startup files.

Bug: T215657
Change-Id: Id7faa45adce7c5aa870d0f7c92f70d39995adac0
2019-02-22 11:59:03 -07:00
Nicholas Ray 7cfcb3641b Refactor LanguageOverlay styles
In I629245100f4ca430a88e450939b90d075e7021f1, languageOverlay styles and
LanguageSearcher styles were split into two different files. This commit
mimics that change in skinStyles. All languageOverlay specific styles
were moved to languageOverlay.less, while all LanguageSearcher styles
were moved to LanguageSearcher.less.

Other chagnes:

* Changed a reference in init.js

Bug: T215657
Change-Id: I395a61cd6051ad5c6b6601205f112b55f5ab8273
2019-02-22 11:02:30 -07: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
jenkins-bot 6865c3f7c7 Merge "Set editfont size to 16px (100%)" 2019-02-15 21:16:43 +00:00
jenkins-bot 6b22dc3906 Merge "Change z-index of page-issues read-more link" 2019-02-08 23:10:28 +00:00