Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reflow Table #181

Open
wants to merge 16 commits into
base: develop
Choose a base branch
from
19 changes: 18 additions & 1 deletion css/gumby.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@charset "UTF-8";
@charset "CP850";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello,
why ???

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know, it's UTF-8 in the gumby.scss, compass compiles it like that.

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
/**
* Gumby Framework
Expand Down Expand Up @@ -1666,6 +1666,23 @@ table.rounded thead ~ tr:last-child td:last-child, table.rounded tbody tr:last-c
table.rounded thead ~ tr:last-child td:first-child, table.rounded tbody tr:last-child td:first-child { border-bottom-left-radius: 4px; }
table.rounded thead th, table.rounded thead td, table.rounded caption + tbody tr:first-child td, table.rounded > tbody:first-child tr:first-child td { border-top: 0; }

/* Mobile first styles: Begin with the stacked presentation at narrow widths */
@media only all { .reflow { /* Hide the table headers */ /* Show the table cells as a block level element */ /* Add a fair amount of top margin to visually separate each row when stacked */ }
.reflow thead td, .reflow thead th { display: none; }
.reflow td, .reflow th { text-align: left; display: block; font-size: 16px; font-size: 1rem; /* Make the label elements a percentage width */ /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */ }
.reflow td b.ui-table-cell-label, .reflow th b.ui-table-cell-label { padding: .4em; min-width: 30%; display: inline-block; margin: -.4em 1em -.4em -.4em; font-weight: bold; font-size: 18px; font-size: 1.125rem; }
.reflow td b.ui-table-cell-label-top, .reflow th b.ui-table-cell-label-top { display: block; padding: .4em 0; margin: .4em 0; text-transform: uppercase; font-size: 26px; font-size: 1.625rem; font-weight: normal; }
.reflow tbody th { margin-top: 3em; } }
@media (min-width: 730px) { .reflow { display: table-row-group; }
.reflow td, .reflow th { display: table-cell; margin: 0; }
.reflow td .ui-table-cell-label, .reflow th .ui-table-cell-label { display: none; }
.reflow tbody td, .reflow tbody th { display: table-cell; margin: 0; }
.reflow tbody td .ui-table-cell-label, .reflow tbody th .ui-table-cell-label { display: none; }
.reflow thead td, .reflow thead th { display: table-cell; margin: 0; }
.reflow thead td .ui-table-cell-label, .reflow thead th .ui-table-cell-label { display: none; } }
/* Hack to make IE9 and WP7.5 treat cells like block level elements, scoped to ui-responsive class */
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/
@media (max-width: 730px) { .ui-table-reflow td, .ui-table-reflow th { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; clear: left; } }
/* Tooltips */
.ttip { position: relative; cursor: pointer; }
.ttip:after { display: block; background: #3085d6; border: 1px solid #3085d6; border-bottom: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; padding: 0.5em 0.75em; width: auto; min-width: 130px; max-width: 500px; position: absolute; left: 0; bottom: 101%; margin-bottom: 8px; text-align: left; color: #fff; content: attr(data-tooltip); line-height: 1.5; font-size: 16px; font-weight: normal; font-style: normal; -webkit-transition: opacity 0.1s ease; -moz-transition: opacity 0.1s ease; -o-transition: opacity 0.1s ease; transition: opacity 0.1s ease; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #65a4e1), color-stop(100%, #3085d6)); background-image: -webkit-linear-gradient(top, #65a4e1, #3085d6); background-image: -moz-linear-gradient(top, #65a4e1, #3085d6); background-image: -o-linear-gradient(top, #65a4e1, #3085d6); background-image: linear-gradient(top, #65a4e1, #3085d6); -webkit-box-shadow: 0 0 5px 0 rgba(48, 133, 214, 0.25); -moz-box-shadow: 0 0 5px 0 rgba(48, 133, 214, 0.25); box-shadow: 0 0 5px 0 rgba(48, 133, 214, 0.25); }
Expand Down
2 changes: 1 addition & 1 deletion gumby.min.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@
<script src="js/libs/ui/gumby.toggleswitch.js"></script>
<script src="js/libs/ui/gumby.checkbox.js"></script>
<script src="js/libs/ui/gumby.radiobtn.js"></script>
<script src="js/libs/ui/gumby.tablereflow.js"></script>
<script src="js/libs/ui/gumby.tabs.js"></script>
<script src="js/libs/ui/gumby.navbar.js"></script>
<script src="js/libs/ui/jquery.validation.js"></script>
Expand Down
146 changes: 146 additions & 0 deletions js/libs/ui/gumby.tablereflow.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
/**
* Gumby TableReflow
*/
!function($) {

'use strict';

function TableReflow($el) {

Gumby.debug('Initializing TableReflow', $el);

this.$el = $el;
this.cellLabels = "ui-table-cell-label";


var scope = this;

scope.refresh();
scope.updateReflow();
}

TableReflow.prototype.getAttribute = function( element, key ) {
var data;

element = element.jquery ? element[0] : element;

if ( element && element.getAttribute ) {
data = element.getAttribute( "gumby-" + key );
}

// Copied from core's src/data.js:dataAttr()
// Convert from a string to a proper data type
try {
data = data === "true" ? true :
data === "false" ? false :
data === "null" ? null :
// Only convert to a number if it doesn't change the string
+data + "" === data ? +data :
rbrace.test( data ) ? JSON.parse( data ) :
data;
} catch( err ) {}

return data;
}

TableReflow.prototype.setHeaders = function() {
var trs = this.$el.find( "thead tr" );

this.headers = this.$el.find( "tr:eq(0)" ).children();
this.allHeaders = this.headers.add( trs.children() );
}

TableReflow.prototype.refresh = function( /* create */ ) {
var table = this.$el,
trs = table.find( "thead tr" );

// updating headers on refresh (fixes #5880)
this.setHeaders();

// Iterate over the trs
trs.each( function() {
var columnCount = 0;

// Iterate over the children of the tr
$( this ).children().each( function() {
var span = parseInt( this.getAttribute( "colspan" ), 10 ),
selector = ":nth-child(" + ( columnCount + 1 ) + ")",
j;

this.setAttribute( "gumby-" + "colstart", columnCount + 1 );

if ( span ) {
for( j = 0; j < span - 1; j++ ) {
columnCount++;
selector += ", :nth-child(" + ( columnCount + 1 ) + ")";
}
}

// Store "cells" data on header as a reference to all cells in the
// same column as this TH
$( this ).data( "cells", table.find( "tr" ).not( trs.eq( 0 ) ).not( this ).children( selector ) );

columnCount++;
});
});
}

TableReflow.prototype.updateReflow = function() {
var table = this;

// get headers in reverse order so that top-level headers are appended last
$( table.allHeaders.get().reverse() ).each( function() {
var cells = $( this ).data( "cells" ),
colstart = table.getAttribute( this, "colstart" ),
hierarchyClass = cells.not( this ).filter( "thead th" ).length && " ui-table-cell-label-top",
text = $( this ).text(),
iteration, filter;

if ( text !== "" ) {

if ( hierarchyClass ) {
iteration = parseInt( this.getAttribute( "colspan" ), 10 );
filter = "";

if ( iteration ) {
filter = "td:nth-child("+ iteration +"n + " + ( colstart ) +")";
}

table.addLabels( cells.filter( filter ), table.cellLabels + hierarchyClass, text );
} else {
table.addLabels( cells, table.cellLabels, text );
}

}
});
}

TableReflow.prototype.addLabels = function( cells, label, text ) {
cells.not( ":has(b." + label + ")" ).prepend( "<b class='" + label + "'>" + text + "</b>" );
};

Gumby.addInitalisation('tablereflow', function() {
$('.reflow').each(function() {
var $this = $(this);
// this element has already been initialized
if($this.data('isReflow')) {
return true;
}
// mark element as initialized
$this.data('isReflow', true);
new TableReflow($this);
});
});

// register UI module
Gumby.UIModule({
module: 'tablereflow',
events: ['initialize'],
init: function() {
Gumby.initialize('tablereflow');
}
});



}(jQuery);
91 changes: 91 additions & 0 deletions sass/ui/_tables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -87,3 +87,94 @@ table {
}
}
}

/* Mobile first styles: Begin with the stacked presentation at narrow widths */
@media only all {
.reflow {
/* Hide the table headers */
thead {
td, th {
display: none;
}
}

/* Show the table cells as a block level element */
td, th {
text-align: left;
display: block;
@include font-size($norm);

/* Make the label elements a percentage width */
b.ui-table-cell-label {
padding: .4em;
min-width: 30%;
display: inline-block;
margin: -.4em 1em -.4em -.4em;
font-weight: bold;
@include font-size($med);
}

/* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
b.ui-table-cell-label-top {
display: block;
padding: .4em 0;
margin: .4em 0;
text-transform: uppercase;
@include font-size($large);
font-weight: normal;
}
}

/* Add a fair amount of top margin to visually separate each row when stacked */
tbody {
th {
margin-top: 3em;
}
}
}
}

@media ( min-width: $table-reflow-breakpoint ) {
.reflow {
display: table-row-group;

@mixin showheaderrows() {
display: table-cell;
margin: 0;

.ui-table-cell-label {
display: none;
}
}

td, th {
@include showheaderrows();
}

tbody {
td, th {
@include showheaderrows();
}
}

thead {
td, th {
@include showheaderrows();
}
}
}
}


/* Hack to make IE9 and WP7.5 treat cells like block level elements, scoped to ui-responsive class */
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/
@media ( max-width: $table-reflow-breakpoint ) {
.ui-table-reflow {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

needs to be

        .reflow {

instead of

        .ui-table-reflow {

td, th {
width: 100%;
@include box-sizing(border-box);
float: left;
clear: left;
}
}
}
2 changes: 2 additions & 0 deletions sass/var/_settings.scss
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,8 @@ $table-cell-border-style: solid;
$table-border-radius: 4px;
// .striped
$table-stripe-bgcolor: #e5e5e5;
// .reflow
$table-reflow-breakpoint: 730px;

// Tooltips
$tt-min-width: 130px;
Expand Down
57 changes: 57 additions & 0 deletions ui.html
Original file line number Diff line number Diff line change
Expand Up @@ -612,6 +612,62 @@ <h1 class="lead">Tables</h1>
</table>
</div>
</div>
<div class="row">
<div class="twelve columns">
<table class="reflow">
<caption>Table Reflow</caption>
<thead>
<tr>
<th colspan="3">Top Header 1</th>
<th colspan="2">Top Header 2</th>
<th>Top Header 3</th>
</tr>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
<th>Table Header 4</th>
<th>Table Header 5</th>
<th>Table Header 6</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor.</td>
<td>Perspiciatis, vero, obcaecati.</td>
<td>Odio, similique, labore!</td>
<td>Aut, doloremque quaerat.</td>
<td>Fugiat, nam, provident.</td>
<td>Nam, nihil, corporis.</td>
</tr>
<tr>
<td>Lorem ipsum dolor.</td>
<td>Cum, quaerat, magni?</td>
<td>Mollitia, eligendi, ea.</td>
<td>Mollitia, modi, laudantium.</td>
<td>Laboriosam, facilis, hic?</td>
<td>Dignissimos, quis, asperiores!</td>
</tr>
<tr>
<td>Lorem ipsum dolor.</td>
<td>Saepe, eum, numquam.</td>
<td>Ducimus, ullam, quos.</td>
<td>Sapiente, inventore, minus.</td>
<td>Consequatur, porro, blanditiis.</td>
<td>Quisquam, iusto, odit.</td>
</tr>
<tr>
<td>Lorem ipsum dolor.</td>
<td>Molestias, earum, optio.</td>
<td>Aliquid, rerum, repudiandae.</td>
<td>Aut, repellat nulla!</td>
<td>Error, earum, nihil!</td>
<td>Nesciunt, facere, nisi?</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<h1 class="lead">Tabs</h1>
Expand Down Expand Up @@ -1268,6 +1324,7 @@ <h1 class="lead">Icon Map</h1>
<script src="js/libs/ui/gumby.toggleswitch.js"></script>
<script src="js/libs/ui/gumby.checkbox.js"></script>
<script src="js/libs/ui/gumby.radiobtn.js"></script>
<script src="js/libs/ui/gumby.tablereflow.js"></script>
<script src="js/libs/ui/gumby.tabs.js"></script>
<script src="js/libs/ui/gumby.navbar.js"></script>
<script src="js/libs/ui/jquery.validation.js"></script>
Expand Down