hamburger for moderation buttons at low-res

Signed-off-by: emanuele <emanuele45@gmail.com>
elkarte · Aug 9, 2015 · 559b0cc · 559b0cc
1 parent bd3f20c
commit 559b0cc
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/themes/default/Display.template.php b/themes/default/Display.template.php
@@ -782,7 +782,8 @@ function template_pages_and_buttons_below()
 	theme_linktree();
 
 	echo '
-			<div id="moderationbuttons">', template_button_strip($context['mod_buttons'], 'bottom', array('id' => 'moderationbuttons_strip')), '</div>';
+			<i class="fa fa-2x fa-bars hamburger_30" data-id="moderationbuttons"></i>
+			<div id="moderationbuttons" class="hide_30 hamburger_30">', template_button_strip($context['mod_buttons'], 'bottom', array('id' => 'moderationbuttons_strip')), '</div>';
 
 	// Show the jump-to box, or actually...let Javascript do it.
 	echo '

diff --git a/themes/default/css/index.css b/themes/default/css/index.css
@@ -1186,6 +1186,9 @@ a.bbc_link {
 	font-size: 0.786em;
 	line-height: 2em;
 }
+.fa.hamburger_30 {
+	display: none;
+}
 
 /* The quick buttons. */
 /* ------------------------------------------------------- */
@@ -4654,7 +4657,7 @@ dl.no_members {
 	.forumposts .windowbg, .forumposts .windowbg2 {
 		margin-bottom: 6px;
 	}
-	#moderationbuttons, a.linklevel1.button_strip_notify,
+	a.linklevel1.button_strip_notify,
 	a.linklevel1.button_strip_print, a.linklevel1.button_strip_send, .inline_mod_check,
 	a.linklevel1.quotetonew_button, a.linklevel1.button_strip_post_poll,
 	.keyinfo .post_subject, li.listlevel1.quickmod_select_all,
@@ -4798,4 +4801,26 @@ dl.no_members {
 		height: inherit;
 		max-height: none;
 	}
+	.fa.hamburger_30 {
+		padding-top: 0.1em;
+		display: inline-block;
+		vertical-align: middle;
+	}
+	.fa.hamburger_30:before {
+		margin: 0.2em;
+	}
+	#display_jump_to {
+		display: inline-block;
+	}
+	.hide_30.hamburger_30 {
+		left: -9999px;
+		position: absolute;
+	}
+	.fa.hamburger_30.visible {
+		display: none;
+	}
+	.hide_30.hamburger_30.visible {
+		left: auto;
+		position: relative;
+	}
 }
diff --git a/themes/default/scripts/theme.js b/themes/default/scripts/theme.js
@@ -107,6 +107,12 @@ $(document).ready(function() {
 			}
 		});
 	});
+	$('.hamburger_30').click(function(e) {
+		e.preventDefault();
+		var id = $(this).data('id');
+		$('#' + id).addClass('visible');
+		$(this).addClass('visible');
+	});
 });
 
 /**