Commit graph

51 commits

Author SHA1 Message Date
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
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
Ed Sanders 8ef144f936 build: Update linters
Change-Id: I5aa3ab891890b52057a5fc855315e5b1b2203037
2024-01-24 22:02:12 +00:00
jenkins-bot c01d353e96 Merge "Long usernames should wrap on history page." 2024-01-19 21:53:37 +00:00
Jon Robson f1c1347d56 Long usernames should wrap on history page.
Bug: T355369
Change-Id: I1f3c3b7e494cc655c98d662e4c0d822da502ea6a
2024-01-18 23:06:15 +00:00
Jon Robson 72726eac36 Fix text overflow in history page
This omitted the important overflow and text-overflow
rules that we use in MobileFrontend. The line height also
needs a slight adjustment.

Bug: T354218
Change-Id: I4b8dee3395603933aba2818725b1f8fbbde0a2a6
2024-01-11 19:38:15 +00:00
Jon Robson 8d305924c9 History: Make sure entire history row is clickable
Bug: T353485
Change-Id: Ie10088636e727c2d5b263426073a02a8f978b692
2023-12-20 18:26:12 +00:00
Jon Robson b1b374b5b3 Relax CSS selector to apply to checkboxes as well as radio buttons
Bug: T353401
Change-Id: I520261fabf404c3a4f96ae4449ce9c445e7da270
2023-12-13 14:00:46 -10:00
Volker E 9a54250830 styles: Replace deprecated color token
All other occurrences in this stylesheet already use the new token.
Seems like this one was missed.

Bug: T331403
Change-Id: I1d385275bd2b679d130eb3180ef2fc63a0f37a6b
2023-11-01 23:52:29 -07:00
Jon Robson e7ed36164f Increase specificity of some selectors
These elements were not hiding correctly.
Follow up to I5a4a2588da3d701be87690038c2c9b2bc1aa0365

Change-Id: I1798fa223d52625b9b16c98561f4b1cab39c5303
2023-10-31 05:02:02 +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
Jon Robson b0aa45822c Stop using mediawiki.ui mixin for history page
Additional change:
* Remove unused import on mediawiki.special.changeslist module
* Increase touch area of undo link for mobile devices

Bug: T345768
Change-Id: I8ded245cf15ca58f91ca1b71beffd91da02cfd92
2023-10-24 18:58:46 +00: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
bwang e09c41b011 Restore mw-ui-button styles to history page buttons
Bug: T345306
Change-Id: I331373de54fe4f4975d3e162efb6daf3258dcd67
2023-09-07 11:56:25 -05:00
Jon Robson 952789bc17 Switch Minerva button template to use Codex and remove mw-ui-button
- Removes 'mw-ui-icon-with-label-desktop' as that is now the default behavior for icon only buttons in Minerva
- Removes icon flushing classes, use codex mixins instead

80 Visual changes relating to minor icon/button subpixel changes in the heading, edit section links, and page actions

Bug: T319260
Change-Id: I503b643d33e43196483af4b5f9dd312237322ac8
2023-08-24 15:57:01 -05:00
Ed Sanders d09600aa51 build: Update linters
Change-Id: Iaa1c41ab1af4802fd71896b471eda8dd8852a323
2023-06-13 13:56:14 +01:00
Jdrewniak cc513b9e72 Revert "styles: Apply Codex z-index tokens"
This reverts commit b28b80e222.

Reason for revert: Changes broke dialogs in mobile VE.

Change-Id: I957661a882b1d8aa50cede906631d29f4a51e530
2023-05-26 15:29:03 +00:00
Volker E b28b80e222 styles: Apply Codex z-index tokens
Applying central Codex design tokens in new architecture.
This replaces all existing MN `z-index` tokens and comments on
replacement choice.

Bug: T285592
Change-Id: I23d794566898946a500c10713802d8dfaad993d1
2023-05-18 23:33:38 -07:00
Volker E 38ca243e39 styles: Replace 'mediawiki.ui/variables' call with skin variables
Replacing 'mediawiki.ui/variables.less' @import with
new skin-aware 'mediawiki.skin.variables.less' standard.
Removing calls for 'mediawiki.skin.variables.less' in favor for
'minerva.variables.less' for consistency.
Also
- replacing several static values with new Codex design token featuring
  skin variables of `background-color`, `color`, `border-*` and
  `transition` categories
- renaming several Less variables to variable naming standard
- moving a small number of MinervaNeue specific variables into
  'minderva.variables.less' file. Those should be replaced in mid-future
  by Codex design tokens

Please note, that this patch is not replacing all values with
possible Codex tokens. It's just applying them on selected
categories for consistency for now to keep the patch easier reviewable.
Further replacements will be done in follow-up patches.

Bump MediaWiki core required version to >= v1.41.0.

Bug: T319381
Bug: T332541
Depends-On: I98c8cc27527533e2efb3b987ee34bc403e988b75
Change-Id: I86c5a35377541a784552c29456e0b8b507b3ee9c
2023-04-24 16:08:27 +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
Jon Robson 57f86745e9 Show the thanks button on mobile special pages
Now the confirmation step code works, we can show this button.
Update styling to generalize the thanks/rollback styling.

Depends-On: Ia03038e86c6a607c8b75eefedbf0285ca1a2f8c8
Depends-On: I5286e80f9dd683ba55b03664dc31de77c19722b7
Bug: T230657
Change-Id: Iab32d8b30d4f2d946ffdaefea72ca9b43448998d
2022-12-15 22:46:33 +00:00
ELLENR 8b9f1b0757 adjusted button css layou
buttons are not displayed in AMC page history

Bug: T312311
Change-Id: I390551a98d671d46e4e4d5f9f601124d1ac3f176
2022-09-26 09:43:42 -06:00
Ed Sanders f3ba1af953 Cleanup: Use .position-sticky() mixin from core
Change-Id: I2972eb33dc5ce54fa3ad23e1b52893b52ee13526
2022-08-16 07:51:03 +00:00
Ed Sanders d926771bd8 Remove deprecated vendor prefixes and their mixins
Additional change:
* The animation stylesheet pulled down for the storybook instance
in dev-scripts/setup-storybook.sh is no longer referenced anywhere
in assets so can be removed.

Bug: T306486
Bug: T308351
Bug: T308360
Change-Id: Ia9f2a05cde2724486f7e449261c5d4875388f5ab
2022-05-23 23:18:43 +00:00
Ed Sanders 86caa17713 build: Update linters and linter config
* Update stylelint-config-wikimedia to 0.13.0
* Ensure eslintrc.js and root files are linted
  with server config

Change-Id: I59c49fedd5b0c4c5620f960b78e4f781a6bc5abb
2022-05-18 14:33:23 +01:00
Volker E fea419f543 Use default @border-radius-base variable
Following WikimediaUI Base variable naming scheme.

Bug: T255230
Change-Id: I71f49d2b554dbca726aee43b19b1554969449403
2020-06-25 19:07:17 +00:00
Volker E 4cef1791c2 Use correctly named variables background-color-base and color-base--inverted
Depends-On: I7b7534223c672a47a11e69fc07bea535ec0085a1
Bug: T255230
Change-Id: Ibf5c0410e446cff18fc26fe2e80d120a72209c04
2020-06-25 19:07:12 +00:00
Volker E 1c340f2b36 PageHistory: Remove input overrides breaking mobile Firefox
Luckily, the reset rules, that these overrides have tackled, don't
exist any more. Applying border-color or background removes all default
OS styling from radio and checkbox inputs. If not done comprehensibly
(as in this case before current patch), it renders affected inputs weakly.

Bug: T247683
Change-Id: If5823a435e8f11b7e445c5db62641173d4e6df9d
2020-05-18 13:20:37 -07:00
Jan Drewniak 833a93d909 AMC history page visual fixes
- Reduces space between diff size and comment block.
- Places tags and undo button on same line.

Bug: T249518
Change-Id: I8451654933875346720dbbe8fdcd2da070fe29f9
2020-05-11 11:19:18 +02:00
Jan Drewniak d781d08c5e Small fixes to AMC history page items
This fixes the alignment of the (cur|prev) buttons, by floating
them right, and removes some space between the "undo" button and
the tags by floating it right as well.

Bug: T249518
Change-Id: I9ff697f4146073355f8b9a61f4b0633e24c85ce6
2020-05-07 15:59:17 +02:00
Ed Sanders 2a52e7f15c build: Update linters
Change-Id: Iaf0c760d5a69bc41505b782ab9f05864c37c7196
2020-04-13 16:05:10 +01:00
jdlrobson 313f2ac220 AMC History page design tweaks
Since a few months ago this page has regressed with changes to the
other pages e.g. Special:RecentChanges

Since the history page has its own stylesheet these styles can be
applied safely without worrying about them impacting other pages.

Change-Id: Ia8d038b6d22a3fe1b537aebe483d5d1683d785a2
2020-04-03 06:42:45 +00:00
Umherirrender 53fab7c03d Always enable stylelint rules after disable
Change-Id: I3c677fb6e3ff9666e8e50f3a2ad9cd9ac57c29b8
2020-03-11 15:50:14 -07:00
Volker E 30fbd44efd Reduce selector specificity to necessary minimum
Further reducing selector specificity. `.action-history` does
a sufficient job.

Change-Id: I9393316b28aa86d99797a03ca164a589f5a942a9
2020-03-05 14:00:43 -08:00
Volker E f955bda480 Word-break overlong usernames
Also de-specify styles, we're already in `.action-history`, specificity
resulted from form elements below.

Bug: T237230
Change-Id: I82d9ab071084624025f1c723d2772a409750dbc9
2020-03-05 13:28:35 -08:00
Umherirrender 4ccaf6e959 Move comments out of class lists
Bypass upstream bug and allow stylelint upgrade
https://github.com/stylelint/stylelint/issues/4049

Change-Id: Ibb0a1cc714324db96cf6c7973cfd8c4616e159b8
2020-02-06 01:05:27 +00: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
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
jdlrobson 59b093a889 Specify LESS suffix in import statements
Follow up to I379334d7729e587a2a0029550e30e7c46a4f7a7a

Change-Id: I549b1400904c7b1d4e40f5418dd665a759728f93
2019-10-07 18:06:57 +00:00
jdlrobson 5b3572ee39 Style rollback link on RecentChanges, Contributions and Watchlist
Bug: T232284
Change-Id: I8c38bb3715b5acaaf49333fcd50bac534dd6eef5
2019-10-02 23:20:23 +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
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
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
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
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