Category view modified to use column width

Category view used css media queries to set column count to 3 beyond 768px and
reduces the count to 1 below it. This behaviour has been changed by setting the
column width to 25em and allowing the column number to adjust automatically.
As a result, media queries have been removed.
See https://css-tricks.com/almanac/properties/c/column-width/
Follow up on https://gerrit.wikimedia.org/r/#/c/187952/

Bug: T55130
Change-Id: I20b68dea8f64b2d07866f4aa20ef83941c879697

diff --git a/resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less b/resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less
index 1f0c626..f01115b 100644 (file)
--- a/resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less
+++ b/resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less
@@ -1,14 +1,11 @@
 @import "mediawiki.mixins";
 
 .mw-category {
-       .column-count(1);
-
+       .column-count(3);
+       .column-width(25em);
        .mw-category-group {
-               .column-break-inside(avoid);
-       }
-}
-@media screen and ( min-width: 768px ) {
-       .mw-category {
-               .column-count(3);
+               li {
+                       .column-break-inside-avoid;
+               }
        }
 }

diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less b/resources/src/mediawiki.less/mediawiki.mixins.less
index 349a721..3366f1e 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.mixins.less
@@ -76,12 +76,17 @@
 .column-count(@value) {
        -webkit-column-count: @value;
        -moz-column-count: @value;
-       -o-column-count: @value;
        column-count: @value;
 }
 
-.column-break-inside(@value) {
-       -webkit-column-break-inside: @value; // Chrome Any, Safari 3+, Opera 11.1+
-       page-break-inside: @value; // Firefox 1.5+
-       break-inside: @value; // IE 10+
+.column-width(@value) {
+       -webkit-column-width: @value;// Chrome Any, Safari 3+, Opera 11.1+
+       -moz-column-width: @value;// Firefox 1.5+
+       column-width: @value;// IE 10+
+}
+
+.column-break-inside-avoid {
+       -webkit-column-break-inside: avoid; // Chrome Any, Safari 3+, Opera 11.1+
+       page-break-inside: avoid; // Firefox 1.5+
+       break-inside: avoid-column; // IE 10+
 }