[geeklog-hg] geeklog: Denim: added a feature to switch two display modes (bet...

[geeklog-cvs at lists.geeklog.net]

changeset 8833:dc932e6372f7
url:  http://project.geeklog.net/cgi-bin/hgwebdir.cgi/geeklog/rev/dc932e6372f7
user: dengen
date: Sat Sep 29 17:19:48 2012 +0900
description:
Denim: added a feature to switch two display modes (between the wide width mode and the fit width mode) to admin list tables

diffstat:

 public_html/layout/denim/css_ltr/style.css    |  34 +++++++++++++++++++++++++++
 public_html/layout/denim/css_rtl/style.css    |  34 +++++++++++++++++++++++++++
 public_html/layout/denim/javascript/script.js |  27 +++++++++++++++++++++
 3 files changed, 95 insertions(+), 0 deletions(-)

diffs (151 lines):

diff -r f3a0a93c2ea5 -r dc932e6372f7 public_html/layout/denim/css_ltr/style.css
--- a/public_html/layout/denim/css_ltr/style.css	Wed Sep 26 23:11:38 2012 +0900
+++ b/public_html/layout/denim/css_ltr/style.css	Sat Sep 29 17:19:48 2012 +0900
@@ -2847,6 +2847,10 @@
   max-width: none;
 }
 
+.admin-table-changer {
+  display: none;
+}
+
 
 /* #Media Queries
 ================================================== */
@@ -2994,6 +2998,31 @@
 	.admin-list-table {
 	  width: 900px;
 	}
+
+	.table-wrapper-fit {
+	  width: 100%;
+	  overflow: visible;
+	}
+	.table-wrapper-fit > .admin-list-table {
+	  width: 100%;
+	}
+
+	.admin-table-changer {
+	  display: block;
+	  text-align: right; /* rtl */
+	  margin-right: 2px;
+	  margin-bottom: 2px;
+	}
+	a.admin-list-table-changer {
+	  width: 50px;
+	  text-align: center;
+	  font-size: 85%;
+	  padding: 2px 6px;
+	  color: #444;
+	}
+	a.admin-list-table-changer:hover {
+	  text-decoration: none;
+	}
 }
 
 
@@ -3201,6 +3230,11 @@
 	  overflow: scroll;
 	  width: 502px; /* 502 = 528 - 13 - 13 */
 	}
+
+	.table-wrapper-fit {
+	  width: 100%;
+	  overflow: visible;
+	}
 }
 
 /* All Mobile Sizes (devices and browser) */
diff -r f3a0a93c2ea5 -r dc932e6372f7 public_html/layout/denim/css_rtl/style.css
--- a/public_html/layout/denim/css_rtl/style.css	Wed Sep 26 23:11:38 2012 +0900
+++ b/public_html/layout/denim/css_rtl/style.css	Sat Sep 29 17:19:48 2012 +0900
@@ -2847,6 +2847,10 @@
   max-width: none;
 }
 
+.admin-table-changer {
+  display: none;
+}
+
 
 /* #Media Queries
 ================================================== */
@@ -2994,6 +2998,31 @@
 	.admin-list-table {
 	  width: 900px;
 	}
+
+	.table-wrapper-fit {
+	  width: 100%;
+	  overflow: visible;
+	}
+	.table-wrapper-fit > .admin-list-table {
+	  width: 100%;
+	}
+
+	.admin-table-changer {
+	  display: block;
+	  text-align: left; /* rtl */
+	  margin-right: 2px;
+	  margin-bottom: 2px;
+	}
+	a.admin-list-table-changer {
+	  width: 50px;
+	  text-align: center;
+	  font-size: 85%;
+	  padding: 2px 6px;
+	  color: #444;
+	}
+	a.admin-list-table-changer:hover {
+	  text-decoration: none;
+	}
 }
 
 
@@ -3201,6 +3230,11 @@
 	  overflow: scroll;
 	  width: 502px; /* 502 = 528 - 13 - 13 */
 	}
+
+	.table-wrapper-fit {
+	  width: 100%;
+	  overflow: visible;
+	}
 }
 
 /* All Mobile Sizes (devices and browser) */
diff -r f3a0a93c2ea5 -r dc932e6372f7 public_html/layout/denim/javascript/script.js
--- a/public_html/layout/denim/javascript/script.js	Wed Sep 26 23:11:38 2012 +0900
+++ b/public_html/layout/denim/javascript/script.js	Sat Sep 29 17:19:48 2012 +0900
@@ -140,4 +140,31 @@
       });
     }
   }
+
+  var iswide = false;
+  var classname1 = 'table-wrapper';
+  var classname2 = 'table-wrapper-fit';
+  var btntext1 = 'Fit';
+  var btntext2 = 'Expand';
+  
+  if (istouch && !istablet) iswide = true;
+  $('.table-wrapper').before('<div class="admin-table-changer">'
+    + '<a class="admin-list-table-changer button" href="javascript:void(0);">'
+    + (iswide ? btntext1 : btntext2)
+    + '</a></div>');
+  var tablechanger = $('.admin-list-table-changer');
+  if (!iswide) {
+    $('.' + classname1).attr('class', classname2);
+    tablechanger.text(btntext2);
+  }
+  tablechanger.live('click', function() {
+    if (iswide) {
+      $('.' + classname1).attr('class', classname2);
+      tablechanger.text(btntext2);
+    } else {
+      $('.' + classname2).attr('class', classname1);
+      tablechanger.text(btntext1);
+    }
+    iswide = !iswide;
+  });
 });