Sumit has uploaded a new change for review.
https://gerrit.wikimedia.org/r/187952
Change subject: CategoryView modified to use css columns
......................................................................
CategoryView modified to use css columns
The categories on Category page were listed using table layout. This layout has
been changed to the responsive css column structure, which is 3 column wide
beyond 768px, otherwise shrinks to a single column.
Bug: T85496
Change-Id: I437e6079b20e110047f93fb5c09aae40189f1ec0
---
M includes/CategoryViewer.php
M resources/Resources.php
A resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less
M resources/src/mediawiki.less/mediawiki.mixins.less
4 files changed, 36 insertions(+), 7 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/52/187952/1
diff --git a/includes/CategoryViewer.php b/includes/CategoryViewer.php
index c898ec9..4bff6ee 100644
--- a/includes/CategoryViewer.php
+++ b/includes/CategoryViewer.php
@@ -89,6 +89,9 @@
) {
$this->title = $title;
$this->setContext( $context );
+ $this->getOutput()->addModuleStyles( array(
+ 'mediawiki.action.categoryPage.styles'
+ ) );
$this->from = $from;
$this->until = $until;
$this->limit = $context->getConfig()->get(
'CategoryPagingLimit' );
@@ -533,9 +536,6 @@
* TODO: Take the headers into account when creating columns, so they're
* more visually equal.
*
- * More distant TODO: Scrap this and use CSS columns, whenever IE
finally
- * supports those.
- *
* @param array $articles
* @param string[] $articles_start_char
* @return string
@@ -546,11 +546,10 @@
# Split into three columns
$columns = array_chunk( $columns, ceil( count( $columns ) / 3
), true /* preserve keys */ );
- $ret = '<table style="width: 100%;"><tr style="vertical-align:
top;">';
+ $ret = Html::openElement( 'div', array( 'class' =>
'mw-category' ) );
$prevchar = null;
foreach ( $columns as $column ) {
- $ret .= '<td style="width: 33.3%;">';
$colContents = array();
# Kind of like array_flip() here, but we keep
duplicates in an
@@ -583,10 +582,10 @@
$prevchar = $char;
}
- $ret .= "</td>\n";
+ $ret .= "\n";
}
- $ret .= '</tr></table>';
+ $ret .= Html::closeElement( 'div' );;
return $ret;
}
diff --git a/resources/Resources.php b/resources/Resources.php
index 6e8cd99..4ee516b 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1094,6 +1094,10 @@
'metadata-collapse',
),
),
+ 'mediawiki.action.view.categoryPage.styles' => array(
+ 'styles' =>
'resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less',
+ 'targets' => array( 'desktop', 'mobile' )
+ ),
'mediawiki.action.view.postEdit' => array(
'templates' => array(
'postEdit.html' =>
'resources/src/mediawiki.action/templates/postEdit.html',
diff --git
a/resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less
b/resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less
new file mode 100644
index 0000000..df1efeb
--- /dev/null
+++ b/resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less
@@ -0,0 +1,19 @@
+@import "mediawiki.mixins";
+
+.mw-category {
+ .column-count(1);
+ ul {
+ li {
+ -webkit-column-break-inside: avoid;
+ -moz-column-break-inside: avoid;
+ -o-column-break-inside: avoid;
+ -ms-column-break-inside: avoid;
+ column-break-inside: avoid;
+ }
+ }
+}
+@media screen and ( min-width: 768px ) {
+ .mw-category {
+ .column-count(3);
+ }
+}
diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less
b/resources/src/mediawiki.less/mediawiki.mixins.less
index c84c884..e6e8a5a 100644
--- a/resources/src/mediawiki.less/mediawiki.mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.mixins.less
@@ -64,3 +64,10 @@
-webkit-box-shadow: @value; // Safari 3.1-5.0, iOS 3.2-4.3, Android
2.1-3.0
box-shadow: @value; // Chrome 10+, Firefox 4+, IE 9+, Safari 5.1+,
Opera 11+, iOS 5+, Android 4+
}
+
+.column-count(@value) {
+ -webkit-column-count: @value;
+ -moz-column-count: @value;
+ -o-column-count: @value;
+ column-count: @value;
+}
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/187952
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I437e6079b20e110047f93fb5c09aae40189f1ec0
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Sumit <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
