From 64636253e42f161032e051c21fa915e6d81aac9c Mon Sep 17 00:00:00 2001 From: Alessandro Benoit Date: Tue, 21 Oct 2014 10:50:56 +0200 Subject: [PATCH 1/3] Multiple enhancement and fixes * Added gulpfile to improve workflow * Added keepHtml option to keep cell html (only work with rowHeaders = false) * Multiple css fixes --- .gitignore | 1 + README.md | 3 +- bower.json | 2 +- demo/index.html | 276 +++++++++++++++++++++++----------------- demo/main.css | 5 +- gulpfile.js | 36 ++++++ jquery.restable.css | 35 +++-- jquery.restable.js | 13 +- jquery.restable.min.css | 8 +- jquery.restable.min.js | 9 +- package.json | 21 +++ 11 files changed, 276 insertions(+), 133 deletions(-) create mode 100644 .gitignore mode change 100644 => 100755 README.md mode change 100644 => 100755 bower.json mode change 100644 => 100755 demo/index.html mode change 100644 => 100755 demo/main.css create mode 100755 gulpfile.js mode change 100644 => 100755 jquery.restable.css mode change 100644 => 100755 jquery.restable.js mode change 100644 => 100755 jquery.restable.min.css mode change 100644 => 100755 jquery.restable.min.js create mode 100755 package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/README.md b/README.md old mode 100644 new mode 100755 index 9d8d88b..368f41f --- a/README.md +++ b/README.md @@ -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 diff --git a/bower.json b/bower.json old mode 100644 new mode 100755 index 960b533..a777c83 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "ReStable", - "version": "0.1.1", + "version": "0.1.2", "description": "jQuery plugin that make tables responsive", "keywords": [ "table", diff --git a/demo/index.html b/demo/index.html old mode 100644 new mode 100755 index 3233608..a4f169d --- a/demo/index.html +++ b/demo/index.html @@ -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}); }); - -
- -

jQuery ReStable v0.1.1

- -

jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.

- - Download it on GitHub - -

To use it you just have to include jQuery and a copy of the plugin in your head or footer:

- 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
+        
+        

+        
+            
jQuery ReStable v0.1.1

+            
+            
jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.

+            
+            Download it on GitHub
+            
+            
To use it you just have to include jQuery and a copy of the plugin in your head or footer:

+            
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
 <script type="text/javascript" src="jquery.restable.min.js"></script>
 <link rel="stylesheet" href="jquery.restable.min.css">

 
-			
Let's say this is your table:

-			
-			
<table class="mytable">
+            
Let's say this is your table:

+            
+            
<table class="mytable">
     <thead>
         <tr>
             <td>Period</td>
@@ -65,116 +67,162 @@ 
jQuery ReStable v0.1.1

         </tr>
     </tbody>
 </table>

-			
-			
Now the only thing to do is to trigger the action with:

-			
-			
$(window).ready(function () {
+            
+            
Now the only thing to do is to trigger the action with:

+            
+            
$(window).ready(function () {
     $.ReStable();
 });

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

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

 
-			
$(window).ready(function () {
+            
$(window).ready(function () {
     $('.mytable').ReStable();
 });

-			
If you need more control here's the plugin settings:

-			        
$('.mytable').ReStable({
+            
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
 });

-			
-			
Some examples

-			
-	        Example A - Responsive Pricelist Table (with row headers)
-	        
-	        
-	            
-	                
-	                    
-	                    
-	                    
-	                    
-	                
-	            
-	            
-	                
-	                    
-	                    
-	                    
-	                    
-	                
-	                
-	                    
-	                    
-	                    
-	                    
-	                
-	                
-	                    
-	                    
-	                    
-	                    
-	                
-	            
-	        
PeriodFull BoardHalf BoardBed and Breakfast
01/10/12 - 02/10/1220 €30 €40 €
03/10/12 - 04/10/1240 €50 €60 €
05/10/12 - 06/10/1270 €80 €90 €

-	        
-	        
$('#table1').ReStable();

-	        
-	        Example B - Responsive Columns Table (without row headers)
-	        
-	        
-	            
-	                
-	                    
-	                    
-	                    
-	                    
-	                
-	            
-	            
-	                
-	                    
-	                    
-	                    
-	                    
-	                
-	                
-	                    
-	                    
-	                    
-	                    
-	                
-	                
-	                    
-	                    
-	                    
-	                    
-	                
-	                
-	                    
-	                    
-	                    
-	                    
-	                
-	                
-	                    
-	                    
-	                    
-	                    
-	                
-	            
-	        
CarbonHydrogenNitrogenOxygen
101510
81112
101511
121711
141912

-			
-			
$('#table2').ReStable({
+            
+            
Some examples

+            
+            Example A - Responsive Pricelist Table (with row headers)
+            
+            
+                
+                    
+                        
+                        
+                        
+                        
+                    
+                
+                
+                    
+                        
+                        
+                        
+                        
+                    
+                    
+                        
+                        
+                        
+                        
+                    
+                    
+                        
+                        
+                        
+                        
+                    
+                
+            
PeriodFull BoardHalf BoardBed and Breakfast
01/10/12 - 02/10/1220 €30 €40 €
03/10/12 - 04/10/1240 €50 €60 €
05/10/12 - 06/10/1270 €80 €90 €

+            
+            
$('#table1').ReStable();

+            
+            Example B - Responsive Columns Table (without row headers)
+            
+            
+                
+                    
+                        
+                        
+                        
+                        
+                    
+                
+                
+                    
+                        
+                        
+                        
+                        
+                    
+                    
+                        
+                        
+                        
+                        
+                    
+                    
+                        
+                        
+                        
+                        
+                    
+                    
+                        
+                        
+                        
+                        
+                    
+                    
+                        
+                        
+                        
+                        
+                    
+                
+            
CarbonHydrogenNitrogenOxygen
101510
81112
101511
121711
141912

+            
+            
$('#table2').ReStable({
     rowHeaders : false
 });

 
-			
Credits and contacts

-			        
-			
ReStable has been made by me. You can contact me at micc83@gmail.com or twitter for any issue or feauture request.

-			        
-		
-		

-		
+            Example C - Responsive Columns Table with html support (without row headers)
+
+            
+                
+                    
+                        
+                        
+                        
+                        
+                    
+                
+                
+                    
+                        
+                        
+                        
+                        
+                    
+                    
+                        
+                        
+                        
+                        
+                    
+                    
+                        
+                        
+                        
+                        
+                    
+                
+            
AvatarUsernameEmailDescription
Pincopinco@example.it
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie vulputate lectus, eu aliquam erat cursus ac. Etiam finibus pellentesque turpis vitae lacinia. Suspendisse lorem nibh, gravida aliquam arcu in, iaculis consectetur nisl. Pellentesque eu mattis sapien.
Pallinopallino@example.it
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Asdrubaleasdrubale@example.it
+                            
Nulla molestie vulputate lectus, eu aliquam erat cursus ac. Etiam finibus pellentesque turpis vitae lacinia.

+                            
    
+                                
  • Element 1
    • 
+                                
  • Element 2
    • 
+                                
  • Element 3
    • 
+                            

+                        

+
+            
$('#table3').ReStable({
+    keepHtml : true,
+    rowHeaders : false
+});

+
+            
Credits and contacts

+                    
+            
ReStable has been made by me. You can contact me at micc83@gmail.com or twitter for any issue or feauture request.

+                    
+        
+
+ diff --git a/demo/main.css b/demo/main.css old mode 100644 new mode 100755 index a966d2a..01365c8 --- a/demo/main.css +++ b/demo/main.css @@ -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;} @@ -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;} \ No newline at end of file +table tbody tr:hover td{background-color: #eee;} +table img {max-width: 100px;} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100755 index 0000000..bd9112b --- /dev/null +++ b/gulpfile.js @@ -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']); diff --git a/jquery.restable.css b/jquery.restable.css old mode 100644 new mode 100755 index 7b55291..e563fe6 --- a/jquery.restable.css +++ b/jquery.restable.css @@ -1,6 +1,10 @@ /* Table */ ul.tabletolist { - border-bottom: 2px solid #eee;font-size: 14px; + border-bottom: 2px solid #eee;font-size: 14px;margin:0 0 20px 0 !important; +} +/* Image */ +ul.tabletolist .row_data img { + max-width: 100%; } /* Table with no row headers */ ul.tabletolist.nrh { @@ -11,30 +15,45 @@ ul.tabletolist.nrh > li { border-top: 2px solid #ddd; } /* Table defaults */ -ul.tabletolist, ul.tabletolist ul { - padding:0 !important;margin:0 !important;list-style:none !important; +ul.tabletolist, ul.tabletolist > li > ul { + padding:0 !important;list-style:none !important; +} +/* Inner list */ +ul.tabletolist > li > ul { + margin:0 !important; } /* Table titles */ ul.tabletolist > li .titles { background-color: #bbb;display:block;color:#fff;padding:10px;font-weight:800; } /* Table rows */ -ul.tabletolist ul > li { +ul.tabletolist > li > ul > li { font-weight:200;border-bottom:1px solid #eee;padding:10px; } /* Table rows hover */ -ul.tabletolist ul > li:hover { +ul.tabletolist > li > ul > li:hover { background-color: #efefef } /* Table last child row */ -ul.tabletolist ul > li:last-child { +ul.tabletolist > li > ul > li:last-child { border-bottom:none; } /* Table row header */ ul.tabletolist ul > li .row_headers { - font-size:12px; + font-size:12px;max-width: 40%; } /* Table row data */ ul.tabletolist ul > li .row_data { - float:right;font-weight:800; + float:right;font-weight:800;max-width: 60%; +} +/* Clearfix */ +ul.tabletolist > li > ul > li {*zoom: 1;} +ul.tabletolist > li > ul > li:before, ul.tabletolist > li > ul > li:after {content: " ";display: table;} +ul.tabletolist > li > ul > li:after {clear: both;} +/* Html table row data */ +ul.tabletolist ul > li .row_data.html { + font-weight: 400; +} +ul.tabletolist ul > li .row_data.html ul { + list-style-type: disc; } diff --git a/jquery.restable.js b/jquery.restable.js old mode 100644 new mode 100755 index 083e154..fe64b82 --- a/jquery.restable.js +++ b/jquery.restable.js @@ -1,4 +1,3 @@ -/*! ReStable v0.1.1 by Alessandro Benoit */ (function ($, window, i) { 'use strict'; @@ -8,7 +7,8 @@ // Settings var s = $.extend({ rowHeaders: true, - maxWidth: 480 + maxWidth: 480, + keepHtml: false }, options); // Build the responsive menu container and fill it with build_menu() @@ -44,7 +44,11 @@ $result[value][$row.children('td:nth-child(1)').text()] = $row.children('td:nth-child(' + (index + 1) + ')').text(); } else { if (!$result[$row_number]) { $result[$row_number] = {}; } - $result[$row_number][value] = $row.children('td:nth-child(' + index + ')').text(); + if (s.keepHtml){ + $result[$row_number][value] = $row.children('td:nth-child(' + index + ')').html(); + } else { + $result[$row_number][value] = $row.children('td:nth-child(' + index + ')').text(); + } } }); @@ -66,7 +70,8 @@ $.each(value, function (index, value) { $('
  • ', { - html: '' + index + ' ' + value + '' + 'class': 'cf', + html: '' + index + ' ' + value + '' }).appendTo($myrowul); }); diff --git a/jquery.restable.min.css b/jquery.restable.min.css old mode 100644 new mode 100755 index 62e415b..1901460 --- a/jquery.restable.min.css +++ b/jquery.restable.min.css @@ -1 +1,7 @@ -ul.tabletolist{border-bottom:2px solid #eee;font-size:14px}ul.tabletolist.nrh{border-bottom:2px solid #ddd}ul.tabletolist.nrh > li{border-top:2px solid #ddd}ul.tabletolist,ul.tabletolist ul{list-style:none!important;margin:0!important;padding:0!important}ul.tabletolist > li .titles{background-color:#bbb;color:#fff;display:block;font-weight:800;padding:10px}ul.tabletolist ul > li{border-bottom:1px solid #eee;font-weight:200;padding:10px}ul.tabletolist ul > li:hover{background-color:#efefef}ul.tabletolist ul > li:last-child{border-bottom:none}ul.tabletolist ul > li .row_headers{font-size:12px}ul.tabletolist ul > li .row_data{float:right;font-weight:800} \ No newline at end of file +/** + * jquery-restable - jQuery plugin that make tables responsive + * @version v0.1.2 + * @link http://codeb.it/restable/ + * @license MIT + */ +ul.tabletolist{border-bottom:2px solid #eee;font-size:14px;margin:0 0 20px!important}ul.tabletolist .row_data img{max-width:100%}ul.tabletolist.nrh{border-bottom:2px solid #ddd}ul.tabletolist.nrh>li{border-top:2px solid #ddd}ul.tabletolist,ul.tabletolist>li>ul{padding:0!important;list-style:none!important}ul.tabletolist>li>ul{margin:0!important}ul.tabletolist>li .titles{background-color:#bbb;display:block;color:#fff;padding:10px;font-weight:800}ul.tabletolist>li>ul>li{font-weight:200;border-bottom:1px solid #eee;padding:10px}ul.tabletolist>li>ul>li:hover{background-color:#efefef}ul.tabletolist>li>ul>li:last-child{border-bottom:none}ul.tabletolist ul>li .row_headers{font-size:12px;max-width:40%}ul.tabletolist ul>li .row_data{float:right;font-weight:800;max-width:60%}ul.tabletolist>li>ul>li{*zoom:1}ul.tabletolist>li>ul>li:before{content:" ";display:table}ul.tabletolist>li>ul>li:after{content:" ";display:table;clear:both}ul.tabletolist ul>li .row_data.html{font-weight:400}ul.tabletolist ul>li .row_data.html ul{list-style-type:disc} \ No newline at end of file diff --git a/jquery.restable.min.js b/jquery.restable.min.js old mode 100644 new mode 100755 index ac3af6d..8e1e79a --- a/jquery.restable.min.js +++ b/jquery.restable.min.js @@ -1,2 +1,7 @@ -/*! ReStable v0.1.1 by Alessandro Benoit */ -(function(e,t,n){"use strict";e.fn.ReStable=function(r){function o(t,n){var r=[],i={},o=e(t).find("tr").first().children("td,th"),u=0,a;if(s.rowHeaders){o=o.slice(1)}o.each(function(){r.push(e(this).text())});e(t).find("tr").slice(1).each(function(){var t=e(this);u+=1;e.each(r,function(e,n){e+=1;if(s.rowHeaders){if(!i[n]){i[n]={}}i[n][t.children("td:nth-child(1)").text()]=t.children("td:nth-child("+(e+1)+")").text()}else{if(!i[u]){i[u]={}}i[u][n]=t.children("td:nth-child("+e+")").text()}})});a=e("