From 377dcabeaadc62b03d596f98c76de0a213a7cdf1 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= Date: Wed, 30 Jan 2019 15:54:42 -0800 Subject: [PATCH] mw.widgets: Use CSS grid for the calendar in supporting browsers Bug: T214997 Change-Id: I05dca01585f3de86580e7ae94ceeae1716f56ba3 --- .../mw.widgets.CalendarWidget.less | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less index 253784e8f5..7932f735c6 100644 --- a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less +++ b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less @@ -63,6 +63,7 @@ .mw-widget-calendarWidget-body-wrapper { .mw-widget-calendarWidget-body { display: inline-block; + display: inline-grid; // Fit 7 days, 3em each width: @calendarWidth; // Fit 6 weeks + heading line, 2em each @@ -108,6 +109,7 @@ .mw-widget-calendarWidget-body { display: block; + display: grid; } .mw-widget-calendarWidget-body:first-child { @@ -123,6 +125,7 @@ .mw-widget-calendarWidget-body { display: block; + display: grid; } .mw-widget-calendarWidget-body:first-child { @@ -132,6 +135,20 @@ } } +// Support: Browsers that render CSS Grid. All others ignore unknown `grid-*` properties. +// This avoids any calculation issues pushing items to next line. +.mw-widget-calendarWidget-body-month { + grid-template-columns: auto auto auto auto auto auto auto; +} + +.mw-widget-calendarWidget-body-year { + grid-template-columns: auto auto; +} + +.mw-widget-calendarWidget-body-duodecade { + grid-template-columns: auto auto auto auto auto; +} + .mw-widget-calendarWidget-day, .mw-widget-calendarWidget-day-heading, .mw-widget-calendarWidget-month, -- 2.20.1