Improved frontend

file/style/be.bastelstu.wcf.chat.less

@@ -8,21 +8,20 @@
  */
 #tplChat {
 	#content {
-		#timsChatRoomContent {
+		text-align: left;
-			text-align: left;
+		
+		#timsChatTopic {
+			padding: 5px;
+			margin-bottom: @wcfGapSmall;
+			.transition(height, .2s);
+			.transition(padding-top, .2s);
+			.transition(padding-bottom, .2s);
 			
-			#timsChatTopic {
+			&.empty {
-				padding: 5px;
+				height: 0px;
-				.transition(height, .2s);
+				overflow: hidden;
-				.transition(padding-top, .2s);
+				border: 0px;
-				.transition(padding-bottom, .2s);
+				padding: 0px;
-				
-				&.empty {
-					height: 0px;
-					overflow: hidden;
-					border: 0px;
-					padding: 0px;
-				}
 			}
 		}
 	}
@@ -190,7 +189,7 @@
 				
 				ul:not(.dropdownMenu) {
 					> li {
-						margin-top: 5px;
+						margin-top: @wcfGapSmall;
 						background-color: transparent !important;
 						box-shadow: none !important;
 						
@@ -210,12 +209,12 @@
 				}
 				
 				#timsChatRoomList {
-					margin-top: 5px;
+					margin-top: @wcfGapSmall;
 					
 					> div {
 						> div {
 							text-align: center;
-							margin-top: 10px;
+							margin-top: @wcfGapMedium;
 						}
 					}
 				}
@@ -279,7 +278,9 @@
 				}
 			}
 		}
-		
+	}
+	
+	@media only screen and (min-width: 641px) {
 		#timsChatOptions {
 			top: -1px;
 			right: 1px;
@@ -288,16 +289,16 @@
 			width: 100%;
 			
 			> ul {
+				.smallButtons;
 				margin-right: -1px;
 				text-align: right;
 				
 				> li {
 					> a {
-						&.button {
+						.button;
-							.borderRadius(0);
+						.borderRadius(0);
-							margin: 0;
+						margin: 0;
-							padding-right: 7px;
+						padding-right: 7px;
-						}
 					}
 					
 					display: inline-block;
@@ -319,6 +320,72 @@
 		}
 	}
 	
+	@media only screen and (max-width: 640px) {
+		#timsChatMessageContainer {
+			overflow: auto;
+			
+			.timsChatMessage {
+				> time {
+					display: none !important;
+				}
+				
+				> .usernameContainer {
+					min-width: 0px !important;
+				}
+			}
+		}
+		
+		#timsChatOptions {
+			margin-top: 5px;
+			position: relative;
+			
+			&:hover > ul {
+				display: block;
+			}
+			
+			> .invisible {
+				.button;
+				margin-left: @wcfGapSmall;
+				padding-left: 28px;
+				
+				&:before {
+					content: "\f03a";
+					font-family: FontAwesome;
+					font-size: 14px;
+					left: 9px;
+					position: absolute;
+					top: 6px;
+				}
+			}
+			
+			> ul {
+				.dropdown .dropdownMenu;
+				font-size: 120%;
+				left: @wcfGapSmall;
+				
+				> li.active {
+					> ul.invisible {
+						display: block;
+						font-size: 85%;
+						padding-left: 14px;
+					}
+					
+					> a {
+						position: relative;
+						
+						&:after {
+							content: "\f00c";
+							font-family: FontAwesome;
+							font-size: 14px;
+							position: absolute;
+							right: 7px;
+						}
+					}
+				}
+			}
+		}
+	}
+	
 	#toggleRooms .ajaxLoad {
 		position: absolute;
 		right: 5px;
@@ -354,75 +421,44 @@ html.fullscreen {
 		height: 0px;
 	}
 	
-	#content {
-		height: 100%;
-	}
-	
-	#timsChatRoomContent {
-		height: 100%;
-		
-		display: -webkit-box;
-		display: -moz-box;
-		display: -ms-flexbox;
-		display: -webkit-flex;
-		display: flex;
-
-		-webkit-box-direction: normal;
-		-moz-box-direction: normal;
-		-webkit-box-orient: vertical;
-		-moz-box-orient: vertical;
-		-webkit-flex-direction: column;
-		-ms-flex-direction: column;
-		flex-direction: column;
-		
-		-webkit-flex-wrap: nowrap;
-		-ms-flex-wrap: nowrap;
-		flex-wrap: nowrap;
-		
-		-webkit-box-pack: start;
-		-moz-box-pack: start;
-		-webkit-justify-content: flex-start;
-		-ms-flex-pack: start;
-		justify-content: flex-start;
-		
-		-webkit-align-content: stretch;
-		-ms-flex-line-pack: stretch;
-		align-content: stretch;
-		-webkit-box-align: stretch;
-		-moz-box-align: stretch;
-		-webkit-align-items: stretch;
-		-ms-flex-align: stretch;
-		align-items: stretch;
-		
-		> fieldset {
-			-webkit-box-ordinal-group: 1;
-			-moz-box-ordinal-group: 1;
-			-webkit-order: 0;
-			-ms-flex-order: 0;
-			order: 0;
-			-webkit-box-flex: 1;
-			-moz-box-flex: 1;
-			-webkit-flex: 1 100 auto;
-			-ms-flex: 1 100 auto;
-			flex: 1 100 auto;
-			-webkit-align-self: auto;
-			-ms-flex-item-align: auto;
-			align-self: auto;
-			
-			> div {
-				height: 100%;
-			}
-		}
-		
-		#timsChatControls {
-			margin-bottom: 15px;
-		}
-	}
-
-	
 	height: 100%;
 	overflow: hidden;
 	
+	#content {
+		height: 100%;
+		
+		> div {
+			width: 100%;
+			height: 100%;
+
+			display: -moz-box;
+			display: -webkit-box;
+			display: -webkit-flex;
+			display: -ms-flexbox;
+			display: flex;
+			
+			-webkit-box-orient: vertical;
+			-moz-box-orient: vertical;
+			-webkit-box-direction: normal;
+			-moz-box-direction: normal;
+			-webkit-flex-direction: column;
+			-ms-flex-direction: column;
+			flex-direction: column;
+			
+			.timsChatMessageContainer {
+				-webkit-box-flex: 1;
+				-moz-box-flex: 1;
+				-webkit-flex: 1 0 auto;
+				-ms-flex: 1 0 auto;
+				flex: 1 0 auto;
+			}
+
+			#timsChatControls {
+				margin-bottom: 15px;
+			}
+		}
+	}
+	
 	#tplChat, #tplChatLog {
 		height: 100%;
 		overflow: hidden;

template/chat.tpl

@@ -88,16 +88,14 @@
 {capture assign='headerNavigation'}{include application='chat' file='navigationInclude'}{/capture}
 {include file='header' sandbox=false sidebarOrientation='right'}
 
-<div id="timsChatRoomContent">
+<div>
 	<div id="timsChatTopic" class="container{if $room->topic|language === ''} empty{/if}">{$room->topic|language}</div>
-	<fieldset>
+	<div id="timsChatMessageContainer" class="timsChatMessageContainer container box shadow1">
-		<div id="timsChatMessageContainer" class="timsChatMessageContainer container box shadow1">
+		<p class="error noJsOnly" style="display: none;">{lang}chat.general.noJs{/lang}</p>
-			<p class="error noJsOnly" style="display: none;">{lang}chat.general.noJs{/lang}</p>
+		<ul>
-			<ul>
+		</ul>
-			</ul>
+	</div>
-		</div>
+
-	</fieldset>
-	
 	<form id="timsChatForm" action="{link application='chat' controller='Chat' action='Send'}{/link}" method="post">
 		<fieldset>
 			<dl class="wide" id="timsChatInputContainer">
@@ -108,7 +106,7 @@
 			</dl>
 		</fieldset>
 	</form>
-	
+
 	<div id="timsChatControls" class="marginTop">
 		{if MODULE_SMILEY}
 			<div class="tabMenuContainer">
@@ -116,34 +114,35 @@
 			</div>
 		{/if}
 		<nav id="timsChatOptions">
-			<ul class="smallButtons">
+			<span class="invisible">{lang}chat.general.controls{/lang}</span>
+			<ul>
 				<li>
-					<a id="timsChatAutoscroll" accesskey="d" class="timsChatToggle jsTooltip button" title="{lang}wcf.global.button.disable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="1">
+					<a id="timsChatAutoscroll" accesskey="d" class="timsChatToggle jsTooltip" title="{lang}wcf.global.button.disable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="1">
 						<span class="icon icon16 icon-circle-blank"></span><span>{lang}chat.general.scroll{/lang}</span>
 					</a>
 				</li>
 				<li>
-					<a id="timsChatFullscreen" accesskey="f" class="timsChatToggle jsTooltip button" title="{lang}wcf.global.button.disable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="0">
+					<a id="timsChatFullscreen" accesskey="f" class="timsChatToggle jsTooltip" title="{lang}wcf.global.button.disable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="0">
 						<span class="icon icon16 icon-off"></span><span>{lang}chat.general.fullscreen{/lang}</span>
 					</a>
 				</li>
 				<li>
-					<a id="timsChatNotify" accesskey="n" class="timsChatToggle jsTooltip button" title="{lang}wcf.global.button.enable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="0">
+					<a id="timsChatNotify" accesskey="n" class="timsChatToggle jsTooltip" title="{lang}wcf.global.button.enable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="0">
 						<span class="icon icon16 icon-off"></span><span>{lang}chat.general.notify{/lang}</span>
 					</a>
 				</li>
 				<li{if !MODULE_SMILEY} style="display: none;"{/if}>
-					<a id="timsChatSmilies" accesskey="e" class="timsChatToggle jsTooltip button" title="{lang}wcf.global.button.{if ENABLE_SMILIES_DEFAULT_VALUE}dis{else}en{/if}able{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="{@ENABLE_SMILIES_DEFAULT_VALUE}">
+					<a id="timsChatSmilies" accesskey="e" class="timsChatToggle jsTooltip" title="{lang}wcf.global.button.{if ENABLE_SMILIES_DEFAULT_VALUE}dis{else}en{/if}able{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="{@ENABLE_SMILIES_DEFAULT_VALUE}">
 						<span class="icon icon16 icon-{if ENABLE_SMILIES_DEFAULT_VALUE}circle-blank{else}off{/if}"></span><span>{lang}chat.general.smilies{/lang}</span>
 					</a>
 				</li>
 				<li>
-					<a id="timsChatClear" class="button">
+					<a id="timsChatClear">
 						<span class="icon icon16 icon-remove"></span><span>{lang}chat.general.clear{/lang}</span>
 					</a>
 				</li>
 				<li>
-					<a id="timsChatMark" class="jsTooltip button" title="{lang}chat.general.mark.description{/lang}">
+					<a id="timsChatMark" class="jsTooltip" title="{lang}chat.general.mark.description{/lang}">
 						<span class="icon icon16 icon-check"></span><span>{lang}chat.general.mark{/lang}</span>
 					</a>
 				</li>