JGonera has submitted this change and it was merged.
Change subject: alpha: slight tweak to tables
......................................................................
alpha: slight tweak to tables
now one click expands the table, clicking again
collapses it again
using css transforms to avoid using another image
Change-Id: I61bc9bb22b958f840a04ebc31811869f0d8e931e
---
M javascripts/modules/mf-tables.js
M less/modules/mf-tables.less
M stylesheets/modules/mf-tables.css
3 files changed, 23 insertions(+), 12 deletions(-)
Approvals:
JGonera: Verified; Looks good to me, approved
jenkins-bot: Checked
diff --git a/javascripts/modules/mf-tables.js b/javascripts/modules/mf-tables.js
index 67b287a..23ed8f4 100644
--- a/javascripts/modules/mf-tables.js
+++ b/javascripts/modules/mf-tables.js
@@ -3,9 +3,9 @@
( function() {
var STEP_SIZE = 150;
- function initTables( container ) {
+ function initTables( $container ) {
var nav = M.require( 'navigation' ),
- $tables = container ? $( container ).find( 'table' ) :
$( 'table' );
+ $tables = $container ? $container.find( 'table' ) : $(
'table' );
$tables.each( function( i ) {
var $t = $( this ),
@@ -15,7 +15,7 @@
colspan, $tr, maxHeight, $td,
$container = $( '<div class="tableContent">' );
- if ( $t.parents( 'table' ).length === 0 && $tc.length >
1 ) {
+ if ( $t.parents( 'table' ).length === 0 && $tc.length >
0 ) {
$block = $t.parents( '.content_block' );
if ( $block ) {
$t.addClass( 'expando' ).css( { height:
STEP_SIZE } );
@@ -34,16 +34,14 @@
// make the vertical expando
$tr = $( '<tr class="expandoVertical">'
).appendTo( $tc );
- $( '<td>' ).text( 'more' ).attr(
'colspan', colspan ).appendTo( $tr );
+ $( '<td> </td>' ).attr( 'colspan',
colspan ).appendTo( $tr );
$tr.on( 'click', function() {
- var oldHeight = $t.height(),
- newHeight = oldHeight +
STEP_SIZE;
- if ( newHeight < maxHeight ) {
- $t.height( newHeight );
- } else {
- $t.css( 'height', '' );
- $tr.remove();
- }
+ var height,
+ expand = $tr.hasClass(
'expanded' ) ? true : false;
+ height = expand ? STEP_SIZE :
'';
+ $t.css( 'height', height );
+ $tr.toggleClass( 'expanded' );
+ window.scrollTo( 0,
$tr.offset().top );
} );
}
diff --git a/less/modules/mf-tables.less b/less/modules/mf-tables.less
index 68d2952..5a99a4e 100644
--- a/less/modules/mf-tables.less
+++ b/less/modules/mf-tables.less
@@ -10,6 +10,7 @@
table.expando {
position: relative;
overflow: hidden;
+ padding-bottom: 30px;
tbody {
margin-top: 30px;
@@ -41,6 +42,13 @@
tr.expandoVertical {
bottom: 0;
+ &.expanded {
+ td {
+ -webkit-transform:
rotate(180deg);
+ transform: rotate(180deg);
+ }
+ }
+
td {
text-indent: -999px;
overflow: hidden;
diff --git a/stylesheets/modules/mf-tables.css
b/stylesheets/modules/mf-tables.css
index 0b3fb1a..81d1b8d 100644
--- a/stylesheets/modules/mf-tables.css
+++ b/stylesheets/modules/mf-tables.css
@@ -4,6 +4,7 @@
#content table.expando {
position: relative;
overflow: hidden;
+ padding-bottom: 30px;
}
#content table.expando tbody {
margin-top: 30px;
@@ -32,6 +33,10 @@
#content table.expando tbody tr.expandoVertical {
bottom: 0;
}
+#content table.expando tbody tr.expandoVertical.expanded td {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
#content table.expando tbody tr.expandoVertical td {
text-indent: -999px;
overflow: hidden;
--
To view, visit https://gerrit.wikimedia.org/r/50921
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I61bc9bb22b958f840a04ebc31811869f0d8e931e
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: Brion VIBBER <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
