Commit graph

96 commits

Author SHA1 Message Date
Jan Drewniak a1d52a1cdd Remove hard-coded z-index value from page-issues read-more link
Defines the z-index value of the "fade-out" below the read-more text
as a variable instead of a hard-coded value. The variable is essentially
1 value below the z-index of the parent element.

The output of this change remains the same, the parent z-index value
is 0 so the "fade-out" z-index value still remains -1.

Bug: T214550
Change-Id: Ib1fa53cbb83e995c3c7b0320ba177ea087a8931b
2019-02-20 00:45:20 +00:00
jenkins-bot 680019d45e Merge "Revert "Switch to outside list style for ordered lists too"" 2019-02-19 23:41:42 +00:00
Jdlrobson ddc667905e Revert "Switch to outside list style for ordered lists too"
Per discussion in humans of the web, 
this causes problems with lists with items >= 100. Reverting (and
later SWATing) with this new information.

This reverts commit abf223da58.

Bug:  T150377
Change-Id: I962824dae8c855bb3d01ba346ae08aa3f6234073
2019-02-19 23:32:37 +00:00
jenkins-bot 718527e061 Merge "Switch to outside list style for ordered lists too" 2019-02-11 20:13:26 +00:00
jenkins-bot e79e2202b9 Merge "Apply <sup> styling to Parsoid refs as well" 2019-02-09 19:23:55 +00:00
Ed Sanders cc727b9c11 Apply <sup> styling to Parsoid refs as well
Currently they are 0.8em, instead of 0.75em.

Change-Id: Ieb91c1251839ff4bb54451aae69af9fb88322219
2019-02-09 14:10:52 +00:00
Bartosz Dziewoński abf223da58 Switch to outside list style for ordered lists too
See design rationale on T150377.

Furthermore, 'inside' lists cause rendering issues inside VisualEditor
(tested with Chrome 71 and Firefox 65 on desktop), as seen on T208102.

Bug: T150377
Bug: T208102
Change-Id: Ia8e47ab98226a78cb5a3a4ef5f09d729ea3c8791
2019-02-08 18:40:19 +01:00
Jan Drewniak 73885e01c2 Change z-index of page-issues read-more link
Changes z-index from 1 to 0 on page-issues link to avoid showing
white background when navigation menu slides over.

Also changing z-index value on SpecialNotificationsOverlay.less
from the hard-coded value of 2 to @z-indexOverOverlay
(which is set to 2).

Bug: T214550
Change-Id: If033755115f2a266869fb87c4314798c422d88ed
2019-02-07 19:37:02 -05:00
Jan Drewniak 6627078c08 Remove a .content-header CSS selector.
A `.content-header` is often placed inside a `.content` div,
so this selector causes a 90% width on a container element as well as
it's child element, which is probably undesirable.

Bug: T210745
Change-Id: Ib559db66a513537127ad543cb54a119af8ebf8df
2019-01-23 22:44:56 +01:00
jenkins-bot 33736e3ead Merge "Reduce unnecessary selector specificity" 2019-01-19 04:38:54 +00:00
Volker E 994edd76e0 Reduce unnecessary selector specificity
Bug: T214218
Change-Id: If0afb83d7f5f9b288427aaf09951348ed94cd74e
2019-01-18 17:23:48 -08:00
jdlrobson 1166009c00 skins.minerva.tablet.styles can be merged
This module is unnecessary - it's loaded unconditionally on a page.
Instead bundle the related CSS inside skins.minerva.content.styles

Change-Id: Ieb37d63332ff5b0cf39835b64cc9f0dcaf62c34f
2019-01-15 12:30:30 -08:00
Huji Lee fa5dff873f Change the "visited" color for links to increase readability
Please see Phab task about why this is necessary and how the new
color was selected.

Bug: T204081
Change-Id: If11f308bad5f7260c82bafe0e8d584763773869e
2019-01-13 19:44:38 -05:00
Stephen Niedzielski 7826a451c9 Fix: use hand cursor for links without href
Links without hypertext references are still functionally links and
should be presented in the same way. This patch forces the hand cursor
to be used for such links which affects the red links drawer's "no
thanks" link.

Change-Id: Iabfef03f6726bb8a5e3a2bc90f2a7f63c8a10c02
2018-12-17 22:20:25 +00:00
jenkins-bot 9e3e499871 Merge "Tablet style should apply to mbox-text-div as well as mbox-text-span" 2018-12-13 22:32:54 +00:00
jdlrobson 2258da2ff8 Tablet style should apply to mbox-text-div as well as mbox-text-span
Bug: T206887
Change-Id: Id992f92eef8a5b6001e12fa42e2333cd266cc098
2018-12-13 11:41:15 -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
Volker E 51304f9bad Fix invalid selector
Seems like one of the selectors in this group has been removed.
Found with `"block-opening-brace-space-before": "always"` added in
.stylelintrc.json – It's going to be part of next
stylelint-config-wikimedia release. This issue here has caused an
invalid selector though, therefore fixing immediately.

Change-Id: If9603f12b9ad236b1517eb8861d220e991fa0a8d
2018-11-16 18:32:35 -08:00
jdlrobson f173dabf75 Avoid overlapping text on Russian and Farsi projects
Account for the fact that many wikis use `mbox-text-div` rather
than `mbox-text-span` and that the element might not be display
block/inline block

Bug: T206887
Change-Id: I6b3cee4339fc7ddb035a99fb4929b1ab67f22333
2018-11-12 16:44:06 -08:00
Volker E 4496292268 Hygiene: Remove 'blockquotes.less' in print and screen
There's no reason to have this as separate style file in content.styles
as common text styles are taken care of in 'text.less' and
'print/articles.less' for print. Moving contents rule there.

Change-Id: Ie613d95488e9b5a814b6be8f0c856e9e92ab5aed
2018-10-17 08:25:30 -07:00
Ed Sanders 59c45c2b6d Reduce specificity of wikitable overrides
Bug: T205945
Change-Id: I88d5b9699661005144f3eebc804438afaae373aa
2018-10-11 14:38:07 +01: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
Bartosz Dziewoński 6b0ce86410 Make Minerva section editing more like other skins
Goal: Make skins.minerva.editor not rely on Minerva-specific markup.

SkinMinerva.php:
* Add `class="mw-editsection"` to section edit links in SkinMinerva.
  This is the default behavior in SkinTemplate.
* Tweak the page "Edit" link generated in PHP to be the same as the
  link we were generating in JS: add class="edit-page" and change the
  message for the text.
* (Fix an unrelated code comment that was incorrect.)

skins.minerva.content.styles/hacks.less:
* Remove a hack that was hiding .mw-editsection, since we now use it.

skins.minerva.editor/init.js:
* Stop using the `data-section` attribute on links to decide which
  page section to open in the editor. Instead, use the `href`
  attribute and extract the `section` URL parameter from it.
* Stop using the `edit-page` class to find section edit links.
  Instead, use the `mw-editsection` class.
* Remove super weird code that removed the original "Edit" link from
  the page and generated an identical one to replace it, instead of
  just adding event handlers to the existing one.
* Centralize event handling for all types of edit links.

Bug: T198765
Change-Id: I79639c738ff1c3ec4b48ee2e462d23060151a21b
2018-10-04 14:07:27 -07:00
Bartosz Dziewoński 5e7b3994fd Move Parsoid output overrides to 'mediawiki.skinning.content.parsoid' skinStyles
We need to load these only when VisualEditor is loaded. This is
the best way to ensure that. They have been haphazardly placed
in different files.

The goal of this change is to move content styling for Minerva out of
mobile.editor.ve/minerva.less, and thus to be able to move this file
to mediawiki/extensions/MobileFrontend (T202978). But I spotted the
other places while working on that.

Moved as-is:
* skins.minerva.content.styles/links.less
* mobile.editor.ve/minerva.less

No longer needed:
* skins.minerva.content.styles/text.less
  Parsoid now uses <sup> tags for references rather than <span>,
  so the existing rules for <sup> tags are enough. See T45094,
  <https://www.mediawiki.org/wiki/Specs/HTML/1.6.0/Extensions/Cite>.

Was never needed:
* skins.minerva.content.styles/thumbnails.less
  The styles from the core module 'mediawiki.skinning.content.parsoid'
  are never loaded, so we don't need to override them.

Bug: T202978
Change-Id: I45e1cb89b65a41a29d2b1a361a79199745ccec14
2018-09-17 21:55:32 +00:00
jenkins-bot 3abd6ef9f0 Merge "build: Update linters" 2018-09-12 17:26:12 +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
Ed Sanders 270fb18f2e Scope styling of kbd/samp/code/pre to content areas
Extensions may be using these tags and not want
these styles (especially the border).

Bug: T203474
Change-Id: I03a22cf6377002f968cabdcce9354e73354fb6b8
2018-09-04 21:08:12 +00:00
Jan Drewniak ce2826854b Add bottom margin to page issues
Bug: T202568
Change-Id: Iae5fe40ad8507b218594fe025dd6327ff37b753d
2018-08-30 19:22:49 +00:00
jdlrobson 3c494e0454 On tablet, issues boxes shouldn't take up full screen
Setting width to auto on the ambox itself will ensure section
issues are not pushed below infoboxes, while ensuring that due
to the tbody width 100% rule that they will take up full screen
where possible.

Bug: T202512
Change-Id: I2dd82f18f80012bd95ca271b97a163de918110c5
2018-08-22 14:55:11 -07:00
jdlrobson 26510442f0 Drop portal styles in Minerva
TemplateStyles exists now. Given portals make up a small % of our
content and I can't find any templates using these rules, let's drop
them and guide people to use TemplateStyles instead if anybody
complains.

Change-Id: I738180fa35c6c633791e4ec11ea4b01dd65154cc
2018-08-15 19:40:19 +00:00
jenkins-bot b46f4a24c4 Merge "Correct blur position in tablet mode" 2018-08-09 17:32:11 +00:00
jdlrobson f178228a65 Correct blur position in tablet mode
Addresses problem where text reads like an incomplete sentence
on tablet, see https://phabricator.wikimedia.org/T197931#4475197

Bug: T197931
Change-Id: I71aba2c53570196f51c9e833b1a6d69b2dc983ad
2018-08-09 09:32:18 -07:00
Derk-Jan Hartman d2ca7a0b48 Remove CSS overrides for quotebox from the hacks
Will now be enforced from TemplateStyles

Change-Id: Ia8b0dfe901cfc18f821a236c45bf39123f32779c
2018-08-07 22:38:50 +02:00
jenkins-bot 6c9f2c6ecb Merge "Set flex-direction for thumbnails to avoid overflow issues" 2018-08-02 13:00:25 +00:00
jdlrobson 22cc13bad2 Set flex-direction for thumbnails to avoid overflow issues
`flex-direction:column` causes the flex-child `a` to grow it's height
and sets its width to 'auto' which, like a block-element, makes it
occupy the "available" space.

Bug: T200518
Change-Id: I5af9d082e77dd4ca2d92460824977f085011e622
2018-08-02 12:16:43 +00:00
Stephen Niedzielski 477a044728 Fix: hide new page issues links on focus and tap
Change-Id: I355c5c4b4278071e89aa990a7644a0fb6e901dcb
2018-08-01 14:32:08 -05:00
jdlrobson 28b9517dcb Limit page issues truncation to at least 2 lines
In the case of template {{dictdef}} the issue gets limited to one
line making it unreadable on mobile at certain resolutions due to the
learn more link taking up space that's available to the issue itself

As well as enforcing a max-height, enforce a height so that all issues
can have at least 2 lines to play with on all mobile screen resolutions

Bug: T197931
Change-Id: Icebdcf37d0f307dc82493c5ced53b632a6b09aea
2018-07-26 08:14:08 -05:00
Jan Drewniak a10bb49c01 Truncate page-issues to 2 lines of text.
Truncates ambox template styles to only show 2 lines of text.
"Learn more" link is placed on the same line as message text
and a fade is applied so that it doesn't overlap with the message text.

On table & larger layouts, the "learn more" link is placed on its
own line below the page-issue text.

Bug: T197931
Change-Id: Id607dea537c212298c02a0e1639aef2a786eb424
2018-07-26 08:14:08 -05:00
Stephen Niedzielski 9a7ee86fc1 Update: remove the internal link icons
Bug: T190549
Change-Id: I87c55d26d36eead60c0137e244bdcc09f4239a76
2018-07-25 10:55:39 +08:00
Stephen Niedzielski d2f6c38fe7 Update: page issue icons
- Fix a bug where the all issues endpoint would incorrectly collect
  issues from all sections.

- Update the page issue iconography. This increases the size of the
  delivered code and images by 1743 B minified uncompressed according to
  mw.inspect() (from 16.4 KiB to 18.1 KiB).

- Add support for identifying page issue severity based on template CSS
  classes.

- For multiple issues templates, show the highest priority icon.

Bug: T191528
Change-Id: Ie0a4c83ec7cfb856ec581d058797109746e3cb99
2018-07-17 15:54:17 -05:00
jdlrobson 596e405807 Tie issues to sections
Parse all issues inside a page, and load them into the issues overlay.

In group A, given issues inside later sections are hidden, it will not be possible
to navigate to these new overlay screens. In group A, lead section issues will continue
to only show lead section issues.

Changes:
* The /issues route is replaced by the more specific /issues/all and
/issues/{section num}, issues are stored in an "allIssues" module object.
* Begin using constants for namespaces for better readability
* Drop width 100% - this breaks display on tablet devices of issues within
sections
* Improve createBanner documentation to explain different treatments
* Set the issues overlay header inside initPageIssues when setting up
the route.

Bug: T197932
Change-Id: I21470648a61d57cfa4befceec596cf0f6e2110ec
2018-07-11 09:47:46 -07:00
Jan Drewniak c10c3f011e Increasing specificity of '.center' class
Bug: T193595
Change-Id: Id365952881118bc3587fe8a0c897892e61f41df1
2018-06-28 22:21:05 +02:00
Stephen Niedzielski 5d938aa9e8 Update: link icons for standard density displays and CSS
The previous lot of link icons look great on high DPI displays but not
as nice as they could on standard resolution displays. According to
Volker, this is because the SVG paths must appear on integer coordinates
and scale up instead of down. The new assets have been designed with
this consideration in mind.

Also, workaround redundant CSS by adding commenting out the "unvaried"
black SVG background-image selector, selectorWithoutVariant.

Bug: T190549
Bug: T197909
Change-Id: Id341d383018a436401541e82cc75d826688eaaae
2018-06-21 17:11:46 -05:00
jenkins-bot 041eaadcb5 Merge "Mobile page issues - visual styling changes" 2018-06-19 22:13:31 +00:00
jdlrobson a231525112 Mobile page issues - visual styling changes
Changes:
* Introduce Jan's beautifully documented $wgMinervaABSamplingRate
Set to 1 to A/B test 50% of the population
* Split out ambox template styles into a separate file referenced
by hacks.less
* Update cleanuptemplates setup script to consider two buckets

Test pages:
* Shqiponja_Partizane
* World_War_II_in_Albania
* Liberation_of_Tirana
* French_Consulate
* Abd_ar-Rahman_IV
* M109_howitzer
* Aimoin
* Transport_in_Brazil
* Transport_in_Cape_Verde

Bug: T191303
Change-Id: I8d11e655ccb847b7999e64dda57b225ad8b1c23a
2018-06-19 14:11:19 -07:00
eranroz 8ca00225dd Fixing alignment of infoboxes for RTL/LTR
Explicitly set align to left on LTR wikis, and same for RTL wikis.
(tested in en wiki with ?uselang=he and he wiki with ?uselang=en)

Bug: T161399
Change-Id: Ic70acf2c56b52fe52eaac021581617342e3ae74f
2018-06-17 22:14:11 +03:00
Stephen Niedzielski 3485269be1 Update: add internal and revise external link icons
Bug: T190549
Change-Id: Iad7fdc2f2a730fa8874487c0d83355f21a0bf7ea
2018-06-15 12:31:42 -05: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
jenkins-bot e08d4a4af4 Merge "Edit infobox style to properly position captions" 2018-05-30 09:54:26 +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