Skip to content

Commit

Permalink
Multiple enhancement and fixes
Browse files Browse the repository at this point in the history 
* Added gulpfile to improve workflow
* Added keepHtml option to keep cell html (only work with rowHeaders = false)
* Multiple css fixes
  • Loading branch information
@micc83
micc83 committed Oct 21, 2014
1 parent 5c8513a commit 6463625
Show file tree
Hide file tree
Showing 11 changed files with 276 additions and 133 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
3 changes: 2 additions & 1 deletion README.md
100644 → 100755
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@ If you need more control here's the plugin settings:

$('.mytable').ReStable({
rowHeaders: true, // Table has row headers?
maxWidth: 480 // Size to which the table become responsive
maxWidth: 480, // Size to which the table become responsive
keepHtml: false // Keep the html content of cells, only work with rowHeaders = false
});

## Credits and contacts
Expand Down
2 changes: 1 addition & 1 deletion bower.json
100644 → 100755
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ReStable",
"version": "0.1.1",
"version": "0.1.2",
"description": "jQuery plugin that make tables responsive",
"keywords": [
"table",
Expand Down
276 changes: 162 additions & 114 deletions demo/index.html
100644 → 100755
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,29 @@
$(window).ready(function () {
$('#table1').ReStable();
$('#table2').ReStable({rowHeaders:false});
$('#table3').ReStable({keepHtml : true,rowHeaders : false});
$('#table4').ReStable({keepHtml : true,rowHeaders : false});
});
</script>
</head>
<body>
<div class="container">
<h1>jQuery ReStable <span>v0.1.1</span></h1>
<p><strong>jQuery ReStable</strong> is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.</p>
<a href="" class="download_button">Download it on GitHub</a>
<p>To use it you just have to include jQuery and a copy of the plugin in your head or footer:</p>
<pre>&#x3C;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&#x3E;&#x3C;/script&#x3E;
<div class="container">
<h1>jQuery ReStable <span>v0.1.1</span></h1>
<p><strong>jQuery ReStable</strong> is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.</p>
<a href="https://github.com/micc83/ReStable" class="download_button">Download it on GitHub</a>
<p>To use it you just have to include jQuery and a copy of the plugin in your head or footer:</p>
<pre>&#x3C;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&#x3E;&#x3C;/script&#x3E;
&#x3C;script type="text/javascript" src="jquery.restable.min.js"&#x3E;&#x3C;/script&#x3E;
&#x3C;link rel="stylesheet" href="jquery.restable.min.css"&#x3E;</pre>

<p>Let's say this is your table:</p>
<pre>&lt;table class="mytable"&gt;
<p>Let's say this is your table:</p>
<pre>&lt;table class="mytable"&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;td&gt;Period&lt;/td&gt;
Expand Down Expand Up @@ -65,116 +67,162 @@ <h1>jQuery ReStable <span>v0.1.1</span></h1>
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</pre>
<p>Now the only thing to do is to trigger the action with:</p>
<pre>$(window).ready(function () {
<p>Now the only thing to do is to trigger the action with:</p>
<pre>$(window).ready(function () {
$.ReStable();
});</pre>

<p>This will target automatically all the tables in the page but you can, off course, target one or more elements with:</p>
<p>This will target automatically all the tables in the page but you can, off course, target one or more elements with:</p>

<pre>$(window).ready(function () {
<pre>$(window).ready(function () {
$('.mytable').ReStable();
});</pre>
<p>If you need more control here's the plugin settings:</p>
<pre>$('.mytable').ReStable({
<p>If you need more control here's the plugin settings:</p>
<pre>$('.mytable').ReStable({
rowHeaders: true, // Table has row headers?
maxWidth: 480 // Size to which the table become responsive
maxWidth: 480, // Size to which the table become responsive
keepHtml: false // Keep the html content of cells, only work with rowHeaders = false
});</pre>
<h2>Some examples</h2>
<span class="title">Example A - Responsive Pricelist Table (with row headers)</span>
<table id="table1">
<thead>
<tr>
<th>Period</th>
<th>Full Board</th>
<th>Half Board</th>
<th>Bed and Breakfast</th>
</tr>
</thead>
<tbody>
<tr>
<td>01/10/12 - 02/10/12</td>
<td>20 €</td>
<td>30 €</td>
<td>40 €</td>
</tr>
<tr>
<td>03/10/12 - 04/10/12</td>
<td>40 €</td>
<td>50 €</td>
<td>60 €</td>
</tr>
<tr>
<td>05/10/12 - 06/10/12</td>
<td>70 €</td>
<td>80 €</td>
<td>90 €</td>
</tr>
</tbody>
</table>
<pre>$('#table1').ReStable();</pre>
<span class="title">Example B - Responsive Columns Table (without row headers)</span>
<table id="table2">
<thead>
<tr>
<td>Carbon</td>
<td>Hydrogen</td>
<td>Nitrogen</td>
<td>Oxygen</td>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>15</td>
<td>1</td>
<td>0</td>
</tr>
<tr>
<td>8</td>
<td>11</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>10</td>
<td>15</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>12</td>
<td>17</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>14</td>
<td>19</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
<pre>$('#table2').ReStable({
<h2>Some examples</h2>
<span class="title">Example A - Responsive Pricelist Table (with row headers)</span>
<table id="table1">
<thead>
<tr>
<th>Period</th>
<th>Full Board</th>
<th>Half Board</th>
<th>Bed and Breakfast</th>
</tr>
</thead>
<tbody>
<tr>
<td>01/10/12 - 02/10/12</td>
<td>20 €</td>
<td>30 €</td>
<td>40 €</td>
</tr>
<tr>
<td>03/10/12 - 04/10/12</td>
<td>40 €</td>
<td>50 €</td>
<td>60 €</td>
</tr>
<tr>
<td>05/10/12 - 06/10/12</td>
<td>70 €</td>
<td>80 €</td>
<td>90 €</td>
</tr>
</tbody>
</table>
<pre>$('#table1').ReStable();</pre>
<span class="title">Example B - Responsive Columns Table (without row headers)</span>
<table id="table2">
<thead>
<tr>
<td>Carbon</td>
<td>Hydrogen</td>
<td>Nitrogen</td>
<td>Oxygen</td>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>15</td>
<td>1</td>
<td>0</td>
</tr>
<tr>
<td>8</td>
<td>11</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>10</td>
<td>15</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>12</td>
<td>17</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>14</td>
<td>19</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
<pre>$('#table2').ReStable({
rowHeaders : false
});</pre>

<h2>Credits and contacts</h2>

<p><strong>ReStable</strong> has been made by <a href="http://codeb.it" target="_blank">me</a>. You can contact me at <a href="mailto:[email protected]">[email protected]</a> or <a href="https://twitter.com/Micc1983" target="_blank">twitter</a> for any issue or feauture request.</p>


</div>

<span class="title">Example C - Responsive Columns Table with html support (without row headers)</span>

<table id="table3">
<thead>
<tr>
<th>Avatar</th>
<th>Username</th>
<th>Email</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="http://www.placehold.it/400x400"></td>
<td>Pinco</td>
<td><a href="mailto:[email protected]">[email protected]</a></td>
<td><p>Lorem ipsum dolor sit amet, consectetur <strong>adipiscing elit</strong>. Nulla molestie vulputate lectus, eu aliquam erat cursus ac. Etiam finibus <em>pellentesque turpis</em> vitae lacinia. Suspendisse lorem nibh, gravida aliquam arcu in, iaculis consectetur nisl. Pellentesque eu mattis sapien.</p></td>
</tr>
<tr>
<td><img src="http://www.placehold.it/400x400"></td>
<td>Pallino</td>
<td><a href="mailto:[email protected]">[email protected]</a></td>
<td><p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing</strong> elit.</p></td>
</tr>
<tr>
<td><img src="http://www.placehold.it/400x400"></td>
<td>Asdrubale</td>
<td><a href="mailto:[email protected]">[email protected]</a></td>
<td>
<p>Nulla molestie vulputate lectus, eu aliquam erat cursus ac. Etiam finibus pellentesque turpis vitae lacinia.</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</td>
</tr>
</tbody>
</table>

<pre>$('#table3').ReStable({
keepHtml : true,
rowHeaders : false
});</pre>

<h2>Credits and contacts</h2>

<p><strong>ReStable</strong> has been made by <a href="http://codeb.it" target="_blank">me</a>. You can contact me at <a href="mailto:[email protected]">[email protected]</a> or <a href="https://twitter.com/Micc1983" target="_blank">twitter</a> for any issue or feauture request.</p>


</div>

</body>
</html>
5 changes: 3 additions & 2 deletions demo/main.css
100644 → 100755
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ body { font-family: "Helvetica Neue"; }
.container {margin: 0 auto;width: 90%;padding: 0 5% 20px 5%;max-width: 960px;}

a { text-decoration: none;color: #4988C6; }
p {color: #444;}
p, ul {color: #444;}
h1 span {color: #ddd;font-size: 26px;}

.title {font-weight: 800;font-size: 12px;text-transform: uppercase;padding: 15px 0;display: block;}
Expand All @@ -16,4 +16,5 @@ table {width: 100%;text-align: center;border: 0;border-collapse: collapse;border
table td, table th {padding: 10px;margin: 0;}
table thead {background-color: #bbb;color: #fff;font-weight: 800;}
table tbody tr td{border-bottom: 1px solid #eee;}
table tbody tr:hover td{background-color: #eee;}
table tbody tr:hover td{background-color: #eee;}
table img {max-width: 100px;}
36 changes: 36 additions & 0 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@

'use strict';

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

var pkg = require('./package.json');
var banner = ['/**',
' * <%= pkg.name %> - <%= pkg.description %>',
' * @version v<%= pkg.version %>',
' * @link <%= pkg.homepage %>',
' * @license <%= pkg.license %>',
' */',
''].join('\n');

gulp.task('minify-css', function () {
return gulp.src('jquery.restable.css')
.pipe($.csso())
.pipe($.rename({suffix: '.min'}))
.pipe($.header(banner, {pkg:pkg}))
.pipe(gulp.dest(''))
.pipe($.size());
});

gulp.task('minify-js', function () {
return gulp.src('jquery.restable.js')
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.uglify())
.pipe($.rename({suffix: '.min'}))
.pipe($.header(banner, {pkg:pkg}))
.pipe(gulp.dest(''))
.pipe($.size());
});

gulp.task('default', ['minify-css', 'minify-js']);
Loading

0 comments on commit 6463625

Please sign in to comment.