[FEATURE] Added new icons, added pagination

This commit uses the class icons instead of actual images. Also changed
the layout a slight bit to give room for data in the header just as used
in the tab involved version.

public/site_assets/test/css/fontello-codes.css

@@ -15,7 +15,11 @@
 .icon-ok:before { content: '\e80b'; } /* '' */
 .icon-off:before { content: '\e811'; } /* '' */
 .icon-indent-left:before { content: '\e80d'; } /* '' */
+.icon-forward:before { content: '\e81d'; } /* '' */
+.icon-fast-forward:before { content: '\e820'; } /* '' */
+.icon-fast-backward:before { content: '\e81f'; } /* '' */
 .icon-gauge:before { content: '\e803'; } /* '' */
+.icon-backward:before { content: '\e81e'; } /* '' */
 .icon-right-open:before { content: '\e800'; } /* '' */
 .icon-left-open:before { content: '\e801'; } /* '' */
 .icon-bell:before { content: '\e817'; } /* '' */

public/site_assets/test/css/fontello-ie7-codes.css

@@ -15,7 +15,11 @@
 .icon-ok { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-indent-left { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-forward { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-fast-forward { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-fast-backward { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-gauge { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-backward { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-right-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-left-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-bell { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

public/site_assets/test/css/fontello-ie7.css

@@ -26,7 +26,11 @@
 .icon-ok { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-indent-left { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-forward { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-fast-forward { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-fast-backward { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-gauge { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-backward { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-right-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-left-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-bell { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

public/site_assets/test/css/fontello.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'fontello';
-  src: url('../font/fontello.eot?85885125');
-  src: url('../font/fontello.eot?85885125#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff?85885125') format('woff'),
-       url('../font/fontello.ttf?85885125') format('truetype'),
-       url('../font/fontello.svg?85885125#fontello') format('svg');
+  src: url('../font/fontello.eot?74243129');
+  src: url('../font/fontello.eot?74243129#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff?74243129') format('woff'),
+       url('../font/fontello.ttf?74243129') format('truetype'),
+       url('../font/fontello.svg?74243129#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -14,7 +14,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'fontello';
-    src: url('../font/fontello.svg?85885125#fontello') format('svg');
+    src: url('../font/fontello.svg?74243129#fontello') format('svg');
   }
 }
 */
@@ -66,7 +66,11 @@
 .icon-ok:before { content: '\e80b'; } /* '' */
 .icon-off:before { content: '\e811'; } /* '' */
 .icon-indent-left:before { content: '\e80d'; } /* '' */
+.icon-forward:before { content: '\e81d'; } /* '' */
+.icon-fast-forward:before { content: '\e820'; } /* '' */
+.icon-fast-backward:before { content: '\e81f'; } /* '' */
 .icon-gauge:before { content: '\e803'; } /* '' */
+.icon-backward:before { content: '\e81e'; } /* '' */
 .icon-right-open:before { content: '\e800'; } /* '' */
 .icon-left-open:before { content: '\e801'; } /* '' */
 .icon-bell:before { content: '\e817'; } /* '' */

public/site_assets/test/css/layout.css

@@ -347,7 +347,7 @@ background: #ffffff;
 
 #main .module header h3 {
 display: block;
-width: 90%;
+width: 60%;
 float: left;
 }
 

public/site_assets/test/font/fontello.svg

@@ -22,7 +22,11 @@
 <glyph glyph-name="ok" unicode="&#xe80b;" d="M0 260l162 162 166-164 508 510 164-164-510-510-162-162-162 164z" horiz-adv-x="1000" />
 <glyph glyph-name="off" unicode="&#xe811;" d="M0 350q0 207 146 353l102-102q-105-104-105-252t104-253 253-104 253 104 104 253-105 252l102 102q146-146 146-353t-146-353-353-146-353 146-146 353z m428-78l0 578 145 0 0-578-145 0z" horiz-adv-x="1000" />
 <glyph glyph-name="indent-left" unicode="&#xe80d;" d="M0-66l0 146 1000 0 0-146-1000 0z m0 229l0 375 281-187z m0 457l0 146 1000 0 0-146-1000 0z m422-457l0 146 578 0 0-146-578 0z m0 229l0 146 578 0 0-146-578 0z" horiz-adv-x="1000" />
+<glyph glyph-name="forward" unicode="&#xe81d;" d="M0 6l0 687 312-312 0 312 344-344-344-344 0 312z" horiz-adv-x="656" />
+<glyph glyph-name="fast-forward" unicode="&#xe820;" d="M0 6l0 687 312-312 0 312 312-312 0 344 125 0 0-750-125 0 0 344-312-312 0 312z" horiz-adv-x="750" />
+<glyph glyph-name="fast-backward" unicode="&#xe81f;" d="M0-25l0 750 125 0 0-344 312 312 0-312 312 312 0-687-312 312 0-312-312 312 0-344-125 0z" horiz-adv-x="750" />
 <glyph glyph-name="gauge" unicode="&#xe803;" d="M0 188q0 207 146 353t353 146 353-146 146-353q0-92-31-176l-137 0q43 82 43 176 0 154-109 265t-266 110-266-110-109-265q0-94 43-176l-137 0q-31 84-31 176z m250 180q0 25 19 44t44 19 44-19 19-44-19-44-44-19-44 19-19 44z m187 61q0 25 19 44t44 19 44-19 19-44-19-44-44-19-44 19-19 44z m14-416l0 49 49 246 49-246 0-49-98 0z m174 355q0 25 19 44t44 19 44-19 19-44-19-44-44-19-44 19-19 44z" horiz-adv-x="1000" />
+<glyph glyph-name="backward" unicode="&#xe81e;" d="M0 350l344 344 0-312 312 312 0-687-312 312 0-312z" horiz-adv-x="656" />
 <glyph glyph-name="right-open" unicode="&#xe800;" d="M0-2l352 352-352 352 148 148 352-352 148-148-148-148-352-352z" horiz-adv-x="648" />
 <glyph glyph-name="left-open" unicode="&#xe801;" d="M0 350l148 148 352 352 148-148-352-352 352-352-148-148-352 352z" horiz-adv-x="648" />
 <glyph glyph-name="bell" unicode="&#xe817;" d="M0 10l0 45 197 170 0 266q0 107 67 190t171 104l0 62 131 0 0-62q102-21 170-104t68-190l0-266 195-170 0-45-1000 0z m428-87q0 30 21 52t52 21 52-21 21-52-21-51-52-21-52 21-21 51z" horiz-adv-x="1000" />

public/site_assets/test/js/custom.js

@@ -1,5 +1,5 @@
 $(document).ready(function() {
-  $(".tablesorter").tablesorter();
+  $(".tablesorter").tablesorter().tablesorterPager({positionFixed: false, container: $("#pager"), cssNext: ".icon-forward", cssPrev: ".icon-backward", cssFirst: ".icon-fast-backward", cssLast: ".icon-fast-forward"});
   $(".tab_content").hide(); //Hide all content
   $("ul.tabs li:first").addClass("active").show(); //Activate first tab
   $(".tab_content:first").show(); //Show first tab content

public/site_assets/test/js/jquery.tablesorter.pager.js

@@ -0,0 +1,184 @@
+(function($) {
+	$.extend({
+		tablesorterPager: new function() {
+			
+			function updatePageDisplay(c) {
+				var s = $(c.cssPageDisplay,c.container).val((c.page+1) + c.seperator + c.totalPages);	
+			}
+			
+			function setPageSize(table,size) {
+				var c = table.config;
+				c.size = size;
+				c.totalPages = Math.ceil(c.totalRows / c.size);
+				c.pagerPositionSet = false;
+				moveToPage(table);
+				fixPosition(table);
+			}
+			
+			function fixPosition(table) {
+				var c = table.config;
+				if(!c.pagerPositionSet && c.positionFixed) {
+					var c = table.config, o = $(table);
+					if(o.offset) {
+						c.container.css({
+							top: o.offset().top + o.height() + 'px',
+							position: 'absolute'
+						});
+					}
+					c.pagerPositionSet = true;
+				}
+			}
+			
+			function moveToFirstPage(table) {
+				var c = table.config;
+				c.page = 0;
+				moveToPage(table);
+			}
+			
+			function moveToLastPage(table) {
+				var c = table.config;
+				c.page = (c.totalPages-1);
+				moveToPage(table);
+			}
+			
+			function moveToNextPage(table) {
+				var c = table.config;
+				c.page++;
+				if(c.page >= (c.totalPages-1)) {
+					c.page = (c.totalPages-1);
+				}
+				moveToPage(table);
+			}
+			
+			function moveToPrevPage(table) {
+				var c = table.config;
+				c.page--;
+				if(c.page <= 0) {
+					c.page = 0;
+				}
+				moveToPage(table);
+			}
+						
+			
+			function moveToPage(table) {
+				var c = table.config;
+				if(c.page < 0 || c.page > (c.totalPages-1)) {
+					c.page = 0;
+				}
+				
+				renderTable(table,c.rowsCopy);
+			}
+			
+			function renderTable(table,rows) {
+				
+				var c = table.config;
+				var l = rows.length;
+				var s = (c.page * c.size);
+				var e = (s + c.size);
+				if(e > rows.length ) {
+					e = rows.length;
+				}
+				
+				
+				var tableBody = $(table.tBodies[0]);
+				
+				// clear the table body
+				
+				$.tablesorter.clearTableBody(table);
+				
+				for(var i = s; i < e; i++) {
+					
+					//tableBody.append(rows[i]);
+					
+					var o = rows[i];
+					var l = o.length;
+					for(var j=0; j < l; j++) {
+						
+						tableBody[0].appendChild(o[j]);
+
+					}
+				}
+				
+				fixPosition(table,tableBody);
+				
+				$(table).trigger("applyWidgets");
+				
+				if( c.page >= c.totalPages ) {
+        			moveToLastPage(table);
+				}
+				
+				updatePageDisplay(c);
+			}
+			
+			this.appender = function(table,rows) {
+				
+				var c = table.config;
+				
+				c.rowsCopy = rows;
+				c.totalRows = rows.length;
+				c.totalPages = Math.ceil(c.totalRows / c.size);
+				
+				renderTable(table,rows);
+			};
+			
+			this.defaults = {
+				size: 10,
+				offset: 0,
+				page: 0,
+				totalRows: 0,
+				totalPages: 0,
+				container: null,
+				cssNext: '.next',
+				cssPrev: '.prev',
+				cssFirst: '.first',
+				cssLast: '.last',
+				cssPageDisplay: '.pagedisplay',
+				cssPageSize: '.pagesize',
+				seperator: "/",
+				positionFixed: true,
+				appender: this.appender
+			};
+			
+			this.construct = function(settings) {
+				
+				return this.each(function() {	
+					
+					config = $.extend(this.config, $.tablesorterPager.defaults, settings);
+					
+					var table = this, pager = config.container;
+				
+					$(this).trigger("appendCache");
+					
+					config.size = parseInt($(".pagesize",pager).val());
+					
+					$(config.cssFirst,pager).click(function() {
+						moveToFirstPage(table);
+						return false;
+					});
+					$(config.cssNext,pager).click(function() {
+						moveToNextPage(table);
+						return false;
+					});
+					$(config.cssPrev,pager).click(function() {
+						moveToPrevPage(table);
+						return false;
+					});
+					$(config.cssLast,pager).click(function() {
+						moveToLastPage(table);
+						return false;
+					});
+					$(config.cssPageSize,pager).change(function() {
+						setPageSize(table,parseInt($(this).val()));
+						return false;
+					});
+				});
+			};
+			
+		}
+	});
+	// extend plugin scope
+	$.fn.extend({
+        tablesorterPager: $.tablesorterPager.construct
+	});
+	
+})(jQuery);				

public/templates/test/account/notifications/default.tpl

@@ -3,7 +3,9 @@
   <input type="hidden" name="action" value="{$smarty.request.action}">
   <input type="hidden" name="do" value="save">
   <article class="module width_quarter">
-    <header><h3>Notification Settings</h3></header>
+    <header>
+      <h3>Notification Settings</h3>
+    </header>
     <div class="module_content">
     <table width="100%">
       <tr>
@@ -53,7 +55,10 @@
 </form>
 
 <article class="module width_3_quarter">
-  <header><h3>Notification History</h3></header>
+  <header>
+      <h3>Notification History</h3>
+      <div class="submit_link">{include file="global/pagination.tpl"}</div>
+  </header>
   <table width="100%" class="tablesorter" cellspacing="0">
     <thead style="font-size:13px;">
       <tr>

public/templates/test/admin/user/default.tpl

@@ -24,7 +24,10 @@
 
 
 <article class="module width_full">
-  <header><h3>User Information</h3></header>
+  <header>
+    <h3>User Information</h3>
+    <div class="submit_link">{include file="global/pagination.tpl"}</div>
+  </header>
 <table width="100%" class="tablesort">
   <thead>
     <tr>

public/templates/test/global/pagination.tpl

@@ -0,0 +1,15 @@
+<div id="pager{$ID|default:""}">
+  <form>
+    <i class="icon-fast-backward"></i>
+    <i class="icon-backward"></i>
+    <input type="text" class="pagedisplay"/>
+    <i class="icon-forward"></i>
+    <i class="icon-fast-forward"></i>
+    <select class="pagesize">
+      <option selected="selected"  value="10">10</option>
+      <option value="20">20</option>
+      <option value="30">30</option>
+      <option  value="40">40</option>
+    </select>
+  </form>
+</div>

public/templates/test/master.tpl

@@ -14,11 +14,13 @@
 	<link rel="stylesheet" href="{$PATH}/css/ie.css" type="text/css" media="screen" />
 	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 	<![endif]-->
-	<script type="text/javascript" src="{$PATH}/js/jquery-1.9.1.min.js" type="text/javascript"></script>
+	<script type="text/javascript" src="{$PATH}/js/jquery-2.0.3.min.js" type="text/javascript"></script>
+	<script type="text/javascript" src="{$PATH}/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
 	<script type="text/javascript" src="{$PATH}/js/hideshow.js" type="text/javascript"></script>
   <script type="text/javascript" src="{$PATH}/js/jquery.visualize.js"></script>
   <script type="text/javascript" src="{$PATH}/js/jquery.tooltip.visualize.js"></script>
 	<script type="text/javascript" src="{$PATH}/js/jquery.tablesorter.min.js" type="text/javascript"></script>
+	<script type="text/javascript" src="{$PATH}/js/jquery.tablesorter.pager.js" type="text/javascript"></script>
 	<script type="text/javascript" src="{$PATH}/js/jquery.equalHeight.js"></script>
 	<script type="text/javascript" src="{$PATH}/js/custom.js"></script>
   <!--[if IE]><script type="text/javascript" src="{$PATH}/js/excanvas.js"></script><![endif]-->