From b5bbe6591ef601a373a108b308ae9385935e4201 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@designcreateplay.com>
Date: Tue, 23 Feb 2016 12:51:06 -0500
Subject: [PATCH] chat controls on mobile

---
 less/chats.less    |  6 ++++++
 less/mobile.less   |  1 -
 templates/chat.tpl | 24 ++++++++++++++++--------
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/less/chats.less b/less/chats.less
index 5fba15d..862b925 100644
--- a/less/chats.less
+++ b/less/chats.less
@@ -218,6 +218,12 @@
 		resize: none;
 		height: 42px;
 	}
+
+	.since-bar {
+		display: block;
+		padding: 1rem 0;
+		text-align: center;
+	}
 }
 
 .expanded-chat {
diff --git a/less/mobile.less b/less/mobile.less
index 1b769ca..07a6981 100644
--- a/less/mobile.less
+++ b/less/mobile.less
@@ -28,7 +28,6 @@
 				height: 100%;
 			}
 		}
-
 	}
 }
 
diff --git a/templates/chat.tpl b/templates/chat.tpl
index 14cda4d..932654e 100644
--- a/templates/chat.tpl
+++ b/templates/chat.tpl
@@ -6,19 +6,27 @@
 			<div class="modal-header">
 				<button id="chat-close-btn" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 				<button type="button" class="close hidden-xs hidden-sm" data-action="maximize"><span aria-hidden="true"><i class="fa fa-expand"></i></span><span class="sr-only">[[modules:chat.maximize]]</span></button>
+				<button class="close" component="chat/controlsToggle"><i class="fa fa-gear"></i></button>
 
-				<!-- IF showUserInput -->
-				<div class="users-tag-container inline-block">
-					<input class="users-tag-input" type="text" class="form-control" placeholder="enter users here" tabindex="4"/>
-				</div>
-				<!-- ENDIF showUserInput -->
+				<h4>{roomName}</h4>
 
-				<input class="form-control" component="chat/room/name" value="{roomName}" <!-- IF !isOwner -->disabled<!-- ENDIF !isOwner -->/>
+				<form component="chat/controls" style="display: none;">
+					<!-- IF showUserInput -->
+					<div class="users-tag-container">
+						<input class="users-tag-input" type="text" class="form-control" placeholder="enter users here" tabindex="4"/>
+					</div>
+					<!-- ENDIF showUserInput -->
+					<input class="form-control" component="chat/room/name" value="{roomName}" <!-- IF !isOwner -->disabled<!-- ENDIF !isOwner -->/>
+					<span class="since-bar">
+						<a href="#" class="selected" data-since="recent">[[recent:title]]</a> &bull;
+						<a href="#" data-since="week">[[modules:chat.seven_days]]</a> &bull;
+						<a href="#" data-since="month">[[modules:chat.thirty_days]]</a> &bull;
+						<a href="#" data-since="threemonths">[[modules:chat.three_months]]</a>
+					</span>
+				</form>
 			</div>
 
 			<div class="modal-body">
-				<span class="since-bar">
-				<a href="#" class="selected" data-since="recent">[[recent:title]]</a> &bull; <a href="#" data-since="week">[[modules:chat.seven_days]]</a> &bull; <a href="#" data-since="month">[[modules:chat.thirty_days]]</a> &bull; <a href="#" data-since="threemonths">[[modules:chat.three_months]]</a></span>
 				<ul class="chat-content" component="chat/messages"></ul>
 
 				<div class="input-group">