Commit graph

24 commits

Author SHA1 Message Date
bwang f1c828e19d Refactor Minerva header and overlay headers to use flexbox
- Move new header styles to header.less
- Remove unnecessary styles
- Update search overlay to be aligned with the heading searchbox on all screen sizes
- Add temporary skin style to ensure no regressions in mobile VE

Bug: T294033
Change-Id: Ib9867d1b76b602f3355e9f2689f137bc84b0c929
2021-11-04 15:50:00 -05:00
bwang d1049e5407 Restrict overlay button styles to non icon buttons
Bug: T294146
Change-Id: I5f5568407dda5f3a021d64de9efc2bc7aeb5b458
2021-10-22 18:48:26 +00:00
Kosta Harlan 9fac869b8e Revert "Search header should be vertically centered, not top aligned."
This reverts commit d6d26e45bb.

Reason for revert: T292030

Bug: T292030
Change-Id: Ie564139ae0ae5e79389fd9b2beca4e69f36e3e5e
2021-09-29 08:30:03 +00:00
jdlrobson d6d26e45bb Search header should be vertically centered, not top aligned.
Change-Id: I6aa643266a85ec61f2220b12907822d2d03f33c9
2021-09-27 21:35:27 +00:00
Bartosz Dziewoński aadd499753 Generalize SearchOverlay styles to all "header-chrome" overlays
Although in practice, SearchOverlay is the only one.

Change-Id: Ibd70fab0ddf0f9513388c76717392871abd8bf26
2019-09-16 21:29:59 +02:00
Bartosz Dziewoński d8deb264f2 Only apply padding-top to overlays with headers
The incorrect padding-top was causing overlays with no headers to
always be scrollable. The issue was noticeable e.g. on the search
overlay or the editor loading overlay in MobileFrontend.

Change-Id: I28ece81402041eea10124c2076cff5a1cba049cf
2019-09-16 21:22:22 +02:00
Jdlrobson 4542840cf6 Merge "Utilize the mw-ui-icon-flush-left/right classes to align icons" 2019-09-13 20:33:55 +00:00
Jan Drewniak 633c48bddf Utilize the mw-ui-icon-flush-left/right classes to align icons
Affected icons:
- hamburger menu
- "search|notifications|user" menu in page header
- notification "circle" icon
- page actions menu
- section edit icon

Bug: T229440
Change-Id: I5587855d0d9ecf2fac20ce16845e6749c26ab7c2
2019-09-13 12:09:43 -07:00
jdlrobson 19d8f8896e Drop width declaration on close button
Not necessary or compatible with new icons.
A padding left is needed so that the cancel icon
matches up with the content body.

See "The "X" has too much padding, which is causing two issues:"
in attached issue

Bug: T229440#5490743
Change-Id: If76602436e797f2896004181eb776f049cf52fd5
2019-09-13 17:54:46 +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 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 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
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
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
jdlrobson 625720420e Set header height to fixed pixel
Bug: T195795
Change-Id: I4eed89f6a64eeb369c1ab0bb47f0462de7b0ceb3
2019-07-17 10:17:53 -07: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
Jan Drewniak c9f3a17200 Align ImageOverlay prev/next buttons with top of viewport.
The prev/next buttons on the ImageOverlay were pushed down by the
value of `@headerHeight`, however the header is not visible in the
ImageOverlay, so this positioning is unnecessary.

Bug: T213336
Depends-On: Iff5994c23e631d13d168f0c936e330c74dc7497f
Change-Id: I53fb585ab580b777a829a4c0f64088430b527335
2019-02-04 11:08:46 -05:00
jenkins-bot 68d1bc61f6 Merge "Limit editor text area styles to where they are needed" 2018-07-26 23:28:55 +00:00
jdlrobson c7cb4ecee0 Limit editor text area styles to where they are needed
Currently we load textarea styles across all pages. However, in practice
textareas only show up in the edit page and inside our JavaScript overlays

To avoid loading these styles as rendering blocking CSS

Additional changes:
* Drop css reset for textarea so that textareas where unstyled
have sensible defaults. Note given the usage of OOUI and MediaWiki UI
this should be minimal/no disruption.
* For consistency intentionally change the padding of the non-js editor
to be consistent with other textareas
* The padding-left/padding-right rules currently override the default rule
so consolidate them into one single rule

Note:
* This will not break non-JavaScript editor mode as the module
mediawiki.action.edit.styles is loaded on that page as a render blocking
style.

Bug: T199000
Depends-On: I1ab170fc4089b0c8129a3e62ee78efad1c6709fa
Change-Id: I91743fdf1942a1b1b750422e973bf98fc4d106db
2018-07-26 10:35:16 +08:00
jdlrobson 8351c88c50 Move overlay-header styles to Overlay
.header > form matches no element on the page
all other selectors are linked to the mobile Overlay so should
be shipped along with those styles.

Remove .header-action rule, given that header-action's only appear
inside Overlays (Editor, Category and Talk)

A more generic rule already exists (.overlay .header-action > *)
for overlays that sets the min-height

Change-Id: I114fe80e50bb833e9e6bb0fb6b13c2e929244ddf
2018-07-25 02:45:34 +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
James D. Forrester c87cbc7474 build: Organise Gruntfile.js more consistently
This also adds linting for skinStyles, with a few fixes to make these pass.

Change-Id: Id26b0bad21850d985eaaceda24fa50ad6f886458
2017-10-31 14:41:25 -07: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