Commit graph

19 commits

Author SHA1 Message Date
Volker E 09d0feb287 Add @font-size-root var and rename @font-size-body-mobile
Following Vector and OOUI in `@font-size-root` and put it in central
file. Removing duplicated code in `html` and `body` achieving the
same thing.
Also renaming `@font-size-body-mobile` to a distinct
`@font-size-body--feature-phone` ending the confusion that it's a
variable only used at `@width-breakpoint-mobile - 1`.

Change-Id: Ie355d015d882f61c813991c3244bfcb67f161791
2019-12-12 17:34:44 -08:00
Volker E d021f2fc9e Remove LESS @fontScalingFactor variable
It dates back before MinervaNeue was its own skin in Iff1f7e63e796cc
and was probably an idea to provide a simple one-stop solution for
a typography change of font size.
It isn't very well setup for this and also provides no value as of now,
for code simplicity's sake, let's remove it.
From a design perspective, we would approach this problem differently
nowadays.

Change-Id: If43ea2590468832e135b3f654022e8b2064b06c1
2019-12-05 21:28:38 -08:00
Volker E ea00e7cb28 Align LESS typography variable naming scheme to WikimediaUI Base
Another step into unified naming scheme, here all typography
variables.

Change-Id: Ic0ee64fc924ccc2b04a6b9d040e2f00dc6c45799
2019-12-05 21:15:33 -08:00
Volker E 6dac1b0bc0 Set overflow-y to scroll to avoid reflow
Setting `overflow-y: scroll` to prevent reflow as soon as content
comes in. Adding it to `body` as there might be side-effects when
it's set on both, `html` and `body` and latter seems to be the
place where volunteers or third parties would have set it already.

Bug: T204084
Change-Id: I08e8ceeaea4d8488bc9aee23d26f7791ceaa7ee0
2019-11-18 15:07:49 -08: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
jdlrobson 15323b3d63 Use core table of contents in Minerva
No more using the TableOfContents component in MobileFrontend. It's
just creating more work for us. The end result is exactly the same - we can make
a table of contents using the checkbox hack rule and CSS that looks identical to
the current table of contents.

For now, this change can only be tested on Minerva desktop.
I2ea1c23bc86871e2a095c4c6674a08ff2f04b160
is the patch that goes for the jugular and applies this to mobile Minerva. It's
important we merge the two together to avoid disruption to this feature, as
currently MobileFrontend strips the table of contents from core from the HTML
using the MobileFormatter.

Change-Id: I720e62a578f0c7a14f4b5a698004471c85e54bc8
2019-09-03 19:02:31 +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
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
Volker E 4a7bd78d8b Move html and body styles to 'ui.less'
Moving reset properties
- `font-family` and
- `font-size`

and opinionated
- `margin`
to ui.less.

All other properties from 'reset.less' don't apply to those elements.

Also
- consolidating body `background-color` and `color` in 'ui.less' and
- moving `html` affecting property there as well.

Bug: T205341
Bug: T217621
Change-Id: I4c545da76e6fdebced41e6e7e6eb89e4d97a8b24
2019-03-05 16:38:20 -08: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
Nicholas Ray c1485615bb Enable Dynamic Type in iOS 9+ browsers
Dynamic Type is a feature in iOS that lets users pick their reading size
so that apps can adjust their text size accordingly. This commit makes
the mobile site hook into that feature. If you go to
settings > Accessibility > Larger Text in iOS and increase or decrease
the reading size, the mobile site will now increase / decrease
its text size relative to that setting.

Notable changes:

* Moved `font-size: 100% * @fontScalingFactor` from html to body. This
rule would override Dynamic Type sizing which would effectively disable
it. Moving it to the body makes the rule be relative to Dynamic Type
instead of overriding it in iOS browsers while browsers that don't
support Dynamic Type should observe no visible changes.

* Removed intermediate variable @bodyLineHeight because it was only
being used in one place.

* Added @font-size-body-mobile and made it based on % instead of em
(which is what @font-size-body uses). @font-size-mobile-bod is used by a
media query in browsers that support Dynamic Type and by another media
query in browsers that don't support Dynamic Type.

* Added a feature query for Dynamic Type which will make Dynamic Type CSS
rules only affect browsers that support Dynamic Type. This limits the
feature to iOS 9+ feature but ensures that the css rules don't affect
browsers that don't support Dynamic Type.

* Scaled down Dynamic Type so that its default size would appear
identical to the common browser default text size of 16px. By not doing
this, the default font size in iOS browsers would be 17px (Dynamic
Type's default) and would appear 1px larger than Android browsers.

Bug: T204807
Change-Id: I8a4d621dba8dc56190bd8c974543d08dd374ba5e
2018-10-08 20:20:44 +00:00
Ed Sanders 04a2b27d7f build: Update linters
This exposes two broken tests:

* #setCount (Eastern Arabic numerals)
* clicking on the product of createBanner() should trigger a custom event

that were previously passing due to buggy assertions.

Change-Id: If18ad1ff9363fff65d3e347c01ce4bc0669b2a0e
2018-09-11 13:42:11 -07:00
Jan Drewniak c10c3f011e Increasing specificity of '.center' class
Bug: T193595
Change-Id: Id365952881118bc3587fe8a0c897892e61f41df1
2018-06-28 22:21:05 +02:00
Jan Drewniak 81ef4caaa7 Add "center" layout rules based on mediawiki.skinning in core.
Bug: T193595
Change-Id: I2fa991c68786be95a82132ff720ed6e61074bc99
2018-06-06 11:46:40 +00: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
Jan Drewniak 65bd3bfbea Removing aqua-colored tap highlight color for links on android
Bug: T189627
Change-Id: I303b007dd1885115bbc85ff4edad7a812a721a26
2018-04-26 15:58:54 +02:00
jdlrobson 4389b67989 Explicitly use LESS variable for breakpoint defined in mediawiki ui
$wgResourceLoaderLESSVars is deprecated. Let's not use it anymore.

Change-Id: If28ab6884668700bc46533c8e2c377f17e6be696
Depends-On: Ib9f843147db4473ce5590741e0fb490384b0007e
Bug: T171365
2018-02-06 22:23:32 +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
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