Added styles and table reflow to improve access on mobile, jbroadway#163

jonphipps · May 12, 2013 · 9a4f1e7 · 9a4f1e7
1 parent 30733be
commit 9a4f1e7
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 0 deletions.
diff --git a/apps/admin/css/admin.css b/apps/admin/css/admin.css
@@ -474,3 +474,97 @@ span.dynamic-fileManager {
 	.copyright {
 		text-align: right;
 	}
+
+@media screen and (max-width: 480px) {
+	body, th, td {
+		-webkit-text-size-adjust: 100%;
+		font-size: 13px !important;
+	}
+
+	body, .form {
+		width: 100% !important;
+		min-width: inherit !important;
+	}
+
+	#wrapper {
+		width: 95% !important;
+		min-width: inherit !important;
+		max-width: inherit !important;
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+
+	.container_12, .container_12 .grid_12, .container_12 .grid_9, .container_12 .grid_6, .container_12 .grid_4, .container_12 .grid_3 {
+		width: 100%;
+		clear: both;
+		margin: 0;
+		padding: 0;
+	}
+
+	input:not([type='submit']), select, textarea {
+		width: 97%;
+	}
+
+	.redactor_box, .redactor_editor, .redactor_box textarea {
+		width: 98% !important;
+		max-height: 240px !important;
+		min-width: 98% !important;
+		max-width: 98% !important;
+	}
+
+	/* responsive tables */
+	table {
+		clear:both;
+		position: relative;
+		border: 0;
+	}
+
+	table, thead, tbody, th, td, tr {
+		display: block;
+	}
+
+	th {
+		display: none;
+		position: absolute;
+		top: -9999px;
+		left: -9999px;
+	}
+
+	tr {
+		border-top: 1px solid #666;
+	}
+
+	tr:first-child {
+		border-top: 0;
+	}
+
+	td {
+		position: relative;
+		min-height: 15px;
+	}
+
+	td:last-child {
+		border-bottom: 0;
+	}
+
+	td div.before {
+		position: absolute;
+		top: 3px;
+		left: 0;
+		width: 35%;
+		white-space: nowrap;
+		overflow: hidden;
+		text-align: left;
+		font-weight: bold;
+	}
+
+	td div.after {
+		position: absolute;
+		top: 3px;
+		right: 0;
+		width: 65%;
+		white-space: nowrap;
+		overflow: scroll;
+		text-align: left;
+	}
+}
diff --git a/apps/admin/css/top-bar.css b/apps/admin/css/top-bar.css
@@ -265,3 +265,13 @@ body {
 	.admin-tooltip-body {
 		text-decoration: none !important;
 	}
+
+@media screen and (max-width: 480px) {
+	#admin-bar {
+		-webkit-text-size-adjust: 100%;
+	}
+
+	#admin-bar img, #admin-update-available {
+		display: none;
+	}
+}
diff --git a/apps/admin/js/top-bar.js b/apps/admin/js/top-bar.js
@@ -215,4 +215,27 @@ $(function () {
 	}
 
 	jgrowl_interval ();
+
+	// Set left column headers for responsive tables
+	if ($(window).width () <= 480) {
+		var th = [];
+
+		$('th').each (function () {
+			th.push ($(this).text ());
+		});
+
+		var n = 0;
+		$('td').each (function () {
+			var orig = $(this).html ();
+			$(this).html (
+				'<div class="before">' + th[n] + '</div>' +
+				'<div class="after">' + orig + '</div>' +
+				'<div class="clear"></div>'
+			);
+			n++;
+			if (n >= th.length) {
+				n = 0;
+			}
+		});
+	}
 });