From 13c53454eb362adc69f701fec4bfa80e805c50c6 Mon Sep 17 00:00:00 2001 From: Sumit Asthana Date: Thu, 5 Mar 2015 15:38:26 +0530 Subject: [PATCH] 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 --- .../mediawiki.action.view.categoryPage.less | 13 +++++-------- .../src/mediawiki.less/mediawiki.mixins.less | 15 ++++++++++----- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less b/resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less index 1f0c626e57..f01115b814 100644 --- 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 349a721a3e..3366f1e12f 100644 --- 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+ } -- 2.20.1