Skip to content

Commit 6463625

Browse files
author
Alessandro Benoit
committed
Multiple enhancement and fixes
* Added gulpfile to improve workflow * Added keepHtml option to keep cell html (only work with rowHeaders = false) * Multiple css fixes
1 parent 5c8513a commit 6463625

11 files changed

+276
-133
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎README.md

100644100755
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ If you need more control here's the plugin settings:
5858

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

6465
## Credits and contacts

‎bower.json

100644100755
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ReStable",
3-
"version": "0.1.1",
3+
"version": "0.1.2",
44
"description": "jQuery plugin that make tables responsive",
55
"keywords": [
66
"table",

‎demo/index.html

100644100755
Lines changed: 162 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -15,27 +15,29 @@
1515
$(window).ready(function () {
1616
$('#table1').ReStable();
1717
$('#table2').ReStable({rowHeaders:false});
18+
$('#table3').ReStable({keepHtml : true,rowHeaders : false});
19+
$('#table4').ReStable({keepHtml : true,rowHeaders : false});
1820
});
1921
</script>
2022
</head>
2123
<body>
22-
23-
<div class="container">
24-
25-
<h1>jQuery ReStable <span>v0.1.1</span></h1>
26-
27-
<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>
28-
29-
<a href="" class="download_button">Download it on GitHub</a>
30-
31-
<p>To use it you just have to include jQuery and a copy of the plugin in your head or footer:</p>
32-
<pre>&#x3C;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&#x3E;&#x3C;/script&#x3E;
24+
25+
<div class="container">
26+
27+
<h1>jQuery ReStable <span>v0.1.1</span></h1>
28+
29+
<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>
30+
31+
<a href="https://github.com/micc83/ReStable" class="download_button">Download it on GitHub</a>
32+
33+
<p>To use it you just have to include jQuery and a copy of the plugin in your head or footer:</p>
34+
<pre>&#x3C;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&#x3E;&#x3C;/script&#x3E;
3335
&#x3C;script type="text/javascript" src="jquery.restable.min.js"&#x3E;&#x3C;/script&#x3E;
3436
&#x3C;link rel="stylesheet" href="jquery.restable.min.css"&#x3E;</pre>
3537

36-
<p>Let's say this is your table:</p>
37-
38-
<pre>&lt;table class="mytable"&gt;
38+
<p>Let's say this is your table:</p>
39+
40+
<pre>&lt;table class="mytable"&gt;
3941
&lt;thead&gt;
4042
&lt;tr&gt;
4143
&lt;td&gt;Period&lt;/td&gt;
@@ -65,116 +67,162 @@ <h1>jQuery ReStable <span>v0.1.1</span></h1>
6567
&lt;/tr&gt;
6668
&lt;/tbody&gt;
6769
&lt;/table&gt;</pre>
68-
69-
<p>Now the only thing to do is to trigger the action with:</p>
70-
71-
<pre>$(window).ready(function () {
70+
71+
<p>Now the only thing to do is to trigger the action with:</p>
72+
73+
<pre>$(window).ready(function () {
7274
$.ReStable();
7375
});</pre>
7476

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

77-
<pre>$(window).ready(function () {
79+
<pre>$(window).ready(function () {
7880
$('.mytable').ReStable();
7981
});</pre>
80-
<p>If you need more control here's the plugin settings:</p>
81-
<pre>$('.mytable').ReStable({
82+
<p>If you need more control here's the plugin settings:</p>
83+
<pre>$('.mytable').ReStable({
8284
rowHeaders: true, // Table has row headers?
83-
maxWidth: 480 // Size to which the table become responsive
85+
maxWidth: 480, // Size to which the table become responsive
86+
keepHtml: false // Keep the html content of cells, only work with rowHeaders = false
8487
});</pre>
85-
86-
<h2>Some examples</h2>
87-
88-
<span class="title">Example A - Responsive Pricelist Table (with row headers)</span>
89-
90-
<table id="table1">
91-
<thead>
92-
<tr>
93-
<th>Period</th>
94-
<th>Full Board</th>
95-
<th>Half Board</th>
96-
<th>Bed and Breakfast</th>
97-
</tr>
98-
</thead>
99-
<tbody>
100-
<tr>
101-
<td>01/10/12 - 02/10/12</td>
102-
<td>20 €</td>
103-
<td>30 €</td>
104-
<td>40 €</td>
105-
</tr>
106-
<tr>
107-
<td>03/10/12 - 04/10/12</td>
108-
<td>40 €</td>
109-
<td>50 €</td>
110-
<td>60 €</td>
111-
</tr>
112-
<tr>
113-
<td>05/10/12 - 06/10/12</td>
114-
<td>70 €</td>
115-
<td>80 €</td>
116-
<td>90 €</td>
117-
</tr>
118-
</tbody>
119-
</table>
120-
121-
<pre>$('#table1').ReStable();</pre>
122-
123-
<span class="title">Example B - Responsive Columns Table (without row headers)</span>
124-
125-
<table id="table2">
126-
<thead>
127-
<tr>
128-
<td>Carbon</td>
129-
<td>Hydrogen</td>
130-
<td>Nitrogen</td>
131-
<td>Oxygen</td>
132-
</tr>
133-
</thead>
134-
<tbody>
135-
<tr>
136-
<td>10</td>
137-
<td>15</td>
138-
<td>1</td>
139-
<td>0</td>
140-
</tr>
141-
<tr>
142-
<td>8</td>
143-
<td>11</td>
144-
<td>1</td>
145-
<td>2</td>
146-
</tr>
147-
<tr>
148-
<td>10</td>
149-
<td>15</td>
150-
<td>1</td>
151-
<td>1</td>
152-
</tr>
153-
<tr>
154-
<td>12</td>
155-
<td>17</td>
156-
<td>1</td>
157-
<td>1</td>
158-
</tr>
159-
<tr>
160-
<td>14</td>
161-
<td>19</td>
162-
<td>1</td>
163-
<td>2</td>
164-
</tr>
165-
</tbody>
166-
</table>
167-
168-
<pre>$('#table2').ReStable({
88+
89+
<h2>Some examples</h2>
90+
91+
<span class="title">Example A - Responsive Pricelist Table (with row headers)</span>
92+
93+
<table id="table1">
94+
<thead>
95+
<tr>
96+
<th>Period</th>
97+
<th>Full Board</th>
98+
<th>Half Board</th>
99+
<th>Bed and Breakfast</th>
100+
</tr>
101+
</thead>
102+
<tbody>
103+
<tr>
104+
<td>01/10/12 - 02/10/12</td>
105+
<td>20 €</td>
106+
<td>30 €</td>
107+
<td>40 €</td>
108+
</tr>
109+
<tr>
110+
<td>03/10/12 - 04/10/12</td>
111+
<td>40 €</td>
112+
<td>50 €</td>
113+
<td>60 €</td>
114+
</tr>
115+
<tr>
116+
<td>05/10/12 - 06/10/12</td>
117+
<td>70 €</td>
118+
<td>80 €</td>
119+
<td>90 €</td>
120+
</tr>
121+
</tbody>
122+
</table>
123+
124+
<pre>$('#table1').ReStable();</pre>
125+
126+
<span class="title">Example B - Responsive Columns Table (without row headers)</span>
127+
128+
<table id="table2">
129+
<thead>
130+
<tr>
131+
<td>Carbon</td>
132+
<td>Hydrogen</td>
133+
<td>Nitrogen</td>
134+
<td>Oxygen</td>
135+
</tr>
136+
</thead>
137+
<tbody>
138+
<tr>
139+
<td>10</td>
140+
<td>15</td>
141+
<td>1</td>
142+
<td>0</td>
143+
</tr>
144+
<tr>
145+
<td>8</td>
146+
<td>11</td>
147+
<td>1</td>
148+
<td>2</td>
149+
</tr>
150+
<tr>
151+
<td>10</td>
152+
<td>15</td>
153+
<td>1</td>
154+
<td>1</td>
155+
</tr>
156+
<tr>
157+
<td>12</td>
158+
<td>17</td>
159+
<td>1</td>
160+
<td>1</td>
161+
</tr>
162+
<tr>
163+
<td>14</td>
164+
<td>19</td>
165+
<td>1</td>
166+
<td>2</td>
167+
</tr>
168+
</tbody>
169+
</table>
170+
171+
<pre>$('#table2').ReStable({
169172
rowHeaders : false
170173
});</pre>
171174

172-
<h2>Credits and contacts</h2>
173-
174-
<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>
175-
176-
177-
</div>
178-
175+
<span class="title">Example C - Responsive Columns Table with html support (without row headers)</span>
176+
177+
<table id="table3">
178+
<thead>
179+
<tr>
180+
<th>Avatar</th>
181+
<th>Username</th>
182+
<th>Email</th>
183+
<th>Description</th>
184+
</tr>
185+
</thead>
186+
<tbody>
187+
<tr>
188+
<td><img src="http://www.placehold.it/400x400"></td>
189+
<td>Pinco</td>
190+
<td><a href="mailto:[email protected]">[email protected]</a></td>
191+
<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>
192+
</tr>
193+
<tr>
194+
<td><img src="http://www.placehold.it/400x400"></td>
195+
<td>Pallino</td>
196+
<td><a href="mailto:[email protected]">[email protected]</a></td>
197+
<td><p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing</strong> elit.</p></td>
198+
</tr>
199+
<tr>
200+
<td><img src="http://www.placehold.it/400x400"></td>
201+
<td>Asdrubale</td>
202+
<td><a href="mailto:[email protected]">[email protected]</a></td>
203+
<td>
204+
<p>Nulla molestie vulputate lectus, eu aliquam erat cursus ac. Etiam finibus pellentesque turpis vitae lacinia.</p>
205+
<ul>
206+
<li>Element 1</li>
207+
<li>Element 2</li>
208+
<li>Element 3</li>
209+
</ul>
210+
</td>
211+
</tr>
212+
</tbody>
213+
</table>
214+
215+
<pre>$('#table3').ReStable({
216+
keepHtml : true,
217+
rowHeaders : false
218+
});</pre>
219+
220+
<h2>Credits and contacts</h2>
221+
222+
<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>
223+
224+
225+
</div>
226+
179227
</body>
180228
</html>

‎demo/main.css

100644100755
Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ body { font-family: "Helvetica Neue"; }
22
.container {margin: 0 auto;width: 90%;padding: 0 5% 20px 5%;max-width: 960px;}
33

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

88
.title {font-weight: 800;font-size: 12px;text-transform: uppercase;padding: 15px 0;display: block;}
@@ -16,4 +16,5 @@ table {width: 100%;text-align: center;border: 0;border-collapse: collapse;border
1616
table td, table th {padding: 10px;margin: 0;}
1717
table thead {background-color: #bbb;color: #fff;font-weight: 800;}
1818
table tbody tr td{border-bottom: 1px solid #eee;}
19-
table tbody tr:hover td{background-color: #eee;}
19+
table tbody tr:hover td{background-color: #eee;}
20+
table img {max-width: 100px;}

‎gulpfile.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
'use strict';
3+
4+
var gulp = require('gulp');
5+
var $ = require('gulp-load-plugins')();
6+
7+
var pkg = require('./package.json');
8+
var banner = ['/**',
9+
' * <%= pkg.name %> - <%= pkg.description %>',
10+
' * @version v<%= pkg.version %>',
11+
' * @link <%= pkg.homepage %>',
12+
' * @license <%= pkg.license %>',
13+
' */',
14+
''].join('\n');
15+
16+
gulp.task('minify-css', function () {
17+
return gulp.src('jquery.restable.css')
18+
.pipe($.csso())
19+
.pipe($.rename({suffix: '.min'}))
20+
.pipe($.header(banner, {pkg:pkg}))
21+
.pipe(gulp.dest(''))
22+
.pipe($.size());
23+
});
24+
25+
gulp.task('minify-js', function () {
26+
return gulp.src('jquery.restable.js')
27+
.pipe($.jshint())
28+
.pipe($.jshint.reporter('jshint-stylish'))
29+
.pipe($.uglify())
30+
.pipe($.rename({suffix: '.min'}))
31+
.pipe($.header(banner, {pkg:pkg}))
32+
.pipe(gulp.dest(''))
33+
.pipe($.size());
34+
});
35+
36+
gulp.task('default', ['minify-css', 'minify-js']);

0 commit comments

Comments
 (0)