Commit graph

25 commits

Author SHA1 Message Date
Taavi Väänänen a01e0042c3 Fix mobile diff author note on dark mode
Updates the styles for the author note shown at the bottom of the screen
on the diff page on narrow displays to use Codex design tokens so that
it will use dark colors when dark mode is enabled.

The color for the edit count is changed from #72777d (color-placeholder
/ color-disabled) to a darker color #54595d to use a more appropriate
token (color-subtle).

Bug: T370003
Change-Id: I3340e8794036a1c7cd8aa4cfebd2ecfb50d2cbcf
2024-07-23 21:57:13 +00:00
Steph Toyofuku 6f98cc6460 (Almost) no more CSS variables in minerva
Remove direct usage of CSS variables in Minerva, and replace them with
codex design tokens again.  Document this decision in the original ADR

Note: there are still a small number of CSS variables in use, including
most notably the --color-link-red fix, which broke when I removed it,
but this change takes care of all the ones that could be easily replaced

Bug: T363743
Change-Id: I7d3a9dceb908167078987de1733774c8bd4bea2f
2024-06-11 11:44:47 -07:00
Volker E dd154b4ea7 styles: Replace deprecated breakpoints
The values have slightly changed:
- Tablet breakpoint is decreased by 80px,
  pushing lesser devices into a mobile only experience but
  should make barely a difference to vast majority of our users.
- Biggest difference is in `min-width-breakpoint-desktop`,
  which is increased by 120px in comparison to
  `@width-breakpoint-desktop: 1000px`

Also removing one out-dated feature phone clause.

TECHNICAL CHANGES:
* The previous breakpoint was tied to the maximum content width.
The previous maximum content width is preserved, and several media
queries are adjusted to make use of it.
* The header (logo) is not optimized for  640px-720px. For now
a temporary fix is but in place which will be investigated as part
of T366859

VISUAL CHANGES:
* 6 visual changes which improve alignment in language and
visual editor overlay and diffs (where wikidiff2 is not
installed)

Bug: T349793
Depends-On: I3afba8c51f60de9271054499bfa3ffbcc1a9d779
Change-Id: I9552d8ad7509aae90e15edda26e786465773d3ac
2024-06-07 12:52:39 -07:00
Jon Robson db5852ecc7 Remove styles for deleted diff special page
MobileDiff special page no longer exists so none of this CSS which applies to #mw-mf prefixed code is not applying to anything.

Bug: T360389
Change-Id: I6638850a6e1cd1e27072ecd17dd1524f62f976cd
2024-04-25 19:07:12 +00:00
Steph Toyofuku 91c9e68afb Fix borders in night mode palette
Following a discussion in the ticket, update the places where `#eaecf0`
has been hardcoded to reflect whether it is intended to be a border or
background style and replace with CSS variables where applicable.  Add
`--border-color-muted` as a CSS custom property, and update the night
mode palette to use it.  Lastly, add `--color-error`, to be used in a
subsequent patch

Visual changes, but again gated behind night mode feature flag

Bug: T356825
Change-Id: Icb5741190f3e80a20dcedf9b13d6a34fe619b467
2024-02-14 16:18:21 -05:00
Jon Robson a9f45d2adf Always show patrol link on Minerva skin
Bug: T357213
Change-Id: I36a7ce8a86409087e0142fcc11c6285a327b3875
2024-02-12 21:32:19 +00:00
Jon Robson d5d9fe4ea6 Make thanks button show again
Bug: T357202
Change-Id: Ife53355584da6d7d65413173db8bd93d389996c5
2024-02-12 17:36:33 +00:00
Jon Robson d9fa5214a7 Reduce font size of diff heading
Bug: T356728
Change-Id: If7c66ca939d9b27d6d8435336514600453e06670
2024-02-06 19:06:52 +00:00
Jan Drewniak 59fd0cd5dc Convert all color related Less variables to CSS custom properties
All colors used in Minerva are converted from Less variables
into CSS custom properties. A new file called CSSCustomProperties.less
is created in the skins.minerva.base.styles module to store
these custom properties and an ADR is provided on the rationale for
dropping support for browsers that don't support custom properties.

The new CSS custom properties follow Codex design token conventions
where possible (and noted when not).

Link colors are unique because their styles are defined in core,
so in that case the Less variables values are set to custom properties.
Those values are then fed back into MediaWiki core for core link
styling.

Also adds a temporary night-mode color palette under the
.skin-nightmode-1 class on the <html> element.

Bug: T356074
Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff
2024-02-02 17:57:27 +00:00
Jan Drewniak be0b43042e Convert Less variable names from camelCase to snake-case
Converts all Less variable names from CamelCase to snake-case
per the MediaWiki coding conventions.

Removes the following unused Less variables, mostly
related to icons, since those were converted to Codex:
- @icon-touch-area-sm
- @icon-touch-area-md
- @min-size-icon (replaced with @size-icon-medium)
- @icon-glyph-size-sm
- @icon-size-sm
- @icon-padding-sm
- @icon-glyph-size-md
- @icon-size-md
- @margin-icon-md-labelled

Bug: T350581
Change-Id: I1b16e77942d9bea20dcc5636a63d64aa2325a173
2024-01-31 15:24:31 -08:00
Jon Robson bc2c87f4d0 Fixes: Diff footer is overlaying the text when visual diff is clicked
Bug: T353407
Change-Id: I9246c0df582cab485b425dc77e05dc4435656511
2024-01-31 18:09:04 +00:00
Jon Robson 5e4e3bd549 Style thanks confirmable panel on mobile
To test you must be using desktop Minerva
This addresses only the problem described in
T353062#9438627.

Bug: T353062
Change-Id: Ia7053b94aae1b6ab48307769de063d825a47c1db
2024-01-12 16:37:21 +00:00
Jon Robson 67403c89b6 Switch to non-compact mode on tablet breakpoint instead of desktop
Bug: T353478
Change-Id: I2b6141f949c663f3d3d720f087d0d0a0936f89f3
2023-12-20 18:42:31 +00:00
Ed Sanders 86289e7b26 Show diff switcher on narrow screens
The visual diff is sometimes cluttered at narrow widths, but as
we show the switcher on tablet and desktop, and it stores a preference,
users may see the visual diff on phones anyway.

The layout is sometimes cluttered but not completely useless, and
users can always switch back.

As a follow-up we should improve the layout of the visual diff sidebar
on narrow screens.

Bug: T351946
Change-Id: I5533126195331b46040e708b7b35627e74a3001d
2023-11-30 18:43:39 +00:00
Jon Robson 3dada0a92f Restore content below diff
Mobile page doesn't traditionally show the full revision under
the diff. If we want to continue to do this it would be better
to find a solution on the server then resort to this CSS hack.

Bug: T350454
Bug: T350650
Change-Id: Ic26c577ca4bcf8793f8678e30d91b0315da4df99
2023-11-08 18:54:31 +00:00
Jon Robson ff8af8a620 Last modified bar should not be double height
Bug: T350515
Change-Id: I5044e38a2aa1582916339a0a85baed133e9c493c
2023-11-07 21:30:52 +00:00
Jon Robson 99b32fb309 Omit the last modified bar in the HTML rather than hiding it via CSS
The mediawiki.diff.styles can be loaded on pages other than the diff
page itself, so it is better to move this logic into SkinMinerva and
avoid outputting it for diff pages full stop.

Note this module is loaded on Special:MobileDiff and desktop
Minerva history page (without redirect) so we need to cater
for both cases.

Bug: T350515
Change-Id: If2d908b7cbe257184e0c899f78a04d4d5935ea8c
2023-11-06 19:48:25 +00:00
Jon Robson f2243e7820 Fixes: Duplicate diff navigation links on mobile
Bug: T350440
Change-Id: I21cda31e137ac28990e693b83099b3328905089e
2023-11-03 17:08:32 +00:00
jenkins-bot 3a4b1f1082 Merge "Style the desktop diff and history page of Minerva to look like mobile pages" 2023-10-30 14:53:32 +00:00
Ed Sanders 8369a0e859 Diffs: Explicitly set font size to 100%
This should result in no-change, but prevents a regression after I65b6a778d.

Change-Id: I0085124a8590ede25d818033b669aff18afc19d6
2023-10-26 17:38:36 +01:00
Jon Robson a3f03245fd Style the desktop diff and history page of Minerva to look like mobile pages
Depends-On: Ie8ac1aab6d2fe5f4575a6891c36efe497458e093
Bug: T305113
Bug: T240624
Change-Id: I5a4a2588da3d701be87690038c2c9b2bc1aa0365
2023-10-20 18:35:10 +00:00
Umherirrender 5bd834e0c7 build: Updating npm dependencies
* stylelint-config-wikimedia: 0.13.0 → 0.14.0

Run stylelint fix to fix the new stylelint rule

Change-Id: I7738ae421e84dd3171355391ebc82dd812b39ca4
2023-03-31 21:50:36 +02:00
jdlrobson a7b66f6f63 Remove MinervaTemplate::getContentHtml
* Move method to SkinMinerva
* Turn preparePageContent into a getter that returns the subject
page
* Use getSubjectPage in template

For mobile special pages this now means the page has two .content elements
On those pages I've disabled the initial content element. It also means
various .content <heading> and .content ul  rules now apply that need to be
disabled.

While testing several other issues were taken care of - for example
the h2 in errors

Depends-On: I7761396d6a33830f279742be01240796573556a7
Bug: T291871
Change-Id: I13bc4b5dae7aed86eca31ef306212365e1759481
2021-10-15 20:49:23 +00:00
Umherirrender 53fab7c03d Always enable stylelint rules after disable
Change-Id: I3c677fb6e3ff9666e8e50f3a2ad9cd9ac57c29b8
2020-03-11 15:50:14 -07:00
jdlrobson 2bf442db12 Diff styles for moving paragraphs and empty lines
* Fix styling of empty lines - cover full width
* Disable the pseudo element shipped in core
* Move styles from mobile.special.mobilediff.styles into mediawiki.diff.styles
since the latter is always present, the former isn't if MobileFrontend is not
available.

Bug: T242310
Bug: T243235
Change-Id: Ic7d12fe890622e7b3ccc7bc56765f505ac0ab651
2020-01-20 22:08:53 +00:00