mw.widgets: Use CSS grid for the calendar in supporting browsers

Bug: T214997
Change-Id: I05dca01585f3de86580e7ae94ceeae1716f56ba3

diff --git a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
index 253784e..7932f73 100644 (file)
--- 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,