chat controls on mobile

less/chats.less

@@ -218,6 +218,12 @@
 		resize: none;
 		height: 42px;
 	}
+
+	.since-bar {
+		display: block;
+		padding: 1rem 0;
+		text-align: center;
+	}
 }
 
 .expanded-chat {

less/mobile.less

@@ -28,7 +28,6 @@
 				height: 100%;
 			}
 		}
-
 	}
 }
 

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>
 
+				<h4>{roomName}</h4>
+
+				<form component="chat/controls" style="display: none;">
 					<!-- IF showUserInput -->
-				<div class="users-tag-container inline-block">
+					<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">