Commit graph

9 commits

Author SHA1 Message Date
jdlrobson
c1ca90ce4b Reduce ResourceLoader modules used by Monobook
MonoBook supports two modes - one that is responsive and one that
is not. To do this it adds 3 modules. These can be reduced to 1
module by loading all the code and adding client side checks to
determine whether to use it.

The skin--responsive class is added by core for responsive skins so
can be used to make that check.

This does lead to additional download for all users (particularly
the addition of oojs-ui.styles.icons-alerts) but given the default
behaviour is to load these, and non-responsive skin requires an opt
in I don't see this as a problem.

Thanks to gzip the increase in render blocking styles is minimal:

Before:
skins.monobook.styles: 15.21KB
skins.monobook.responsive: 16.14KB

After:
skins.monobook.styles: 16.63KB

See bug for QA plan.

Bug: T285492
Change-Id: I76bb644145539c8ec0220704c8fe9a78a4819c03
2021-08-03 12:45:59 -07:00
Bartosz Dziewoński
6c53b601f8 Use media queries rather than manual checks for mobile hacks
If the page was long enough to have a vertical scrollbar, the check
for `$( window ).width()` would be incorrect because of the width of
the scrollbar itself. The correct value is `$( window ).outerWidth()`.

But rather than deal with that, we can instead use the API
specifically for matching media queries [1], then copy-paste the
media query from CSS and not have to think about it at all!

[1] https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

Bug: T227916
Change-Id: I79478040620391f5391b10aee52134fde0b88adf
2019-07-12 21:59:26 +02:00
Bartosz Dziewoński
3f52a1796c Fix funny Echo integration when mobile hack kicks in after using the icons
When the icons are clicked for the first time, they are replaced with
a JS interface by Echo code, so don't cache them in a long-lived variable.

Otherwise if the user clicks one of the notification icons, then
resizes the browser to a mobile width, and then resizes it back, we
would insert duplicate Echo icons.

Also rename the temporary variable per conventions.

Bug: T227916
Change-Id: I08f2e3d2e293d727ac4492d1fb6fe2c7c65df4ad
2019-07-12 21:57:12 +02:00
Ed Sanders
244bc6b050 build: Update eslint-config-wikimedia to 0.11.0
Change-Id: I408ff717768a00de74868b52d390dcc4b3269bcd
2019-03-13 22:57:00 +00:00
Ed Sanders
7712f1bf22 build: Update eslint-config-wikimedia to 0.10.0
Change-Id: I58983b156eab7090c245ad6febfa47f1552c7188
2019-01-14 21:00:07 +00:00
Kunal Mehta
1a1e3ee1a9 Stop using mediaWiki and jQuery globals to fix eslint
Follows up 91f950d6b0677 in MediaWiki core.

Bug: T206324
Change-Id: I28360423cea110259353bb09082e5346f2606e44
2018-10-08 21:25:32 -07:00
Isarra
406adb14f2 Set mobile width cutoff to 550px
Should avoid more of the issues with unwanted appearance of mobile
layouts. Cutoff results in layout switch when sidebar becomes ~a
third of the total window width.

bug: T196213
Change-Id: I9b8baee5fe53316128f864e732c86750b4e5470e
2018-06-06 21:06:13 +00:00
Isarra
ca53e721ab Mobile - reorganise and clean up p-personal js dropdown
* Reorder ULS and Echo links
* Rename conditional module load hook to be more generic, and add
  ULS module
* Remove .active bolding from dropdown

Change-Id: I7e746e7c5af8ffd7c4ca06742ab1fe6bc94ba531
2018-05-20 10:29:50 +00:00
Isarra
ef1f98e7bd Responsive support: Echo hacks
Have echo just show the numbers instead of the badges, and add a
text link to special:notifications in the dropdown, as opposed to
entirely reimplementing the flyout layout

Change-Id: I072dbc2b7bf70b6675469e09e3beb3927e06d0f7
2018-05-19 21:15:31 +00:00