Improved frontend

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

@@ -8,11 +8,11 @@
  */
 #tplChat {
 	#content {
-		#timsChatRoomContent {
 		text-align: left;
 		
 		#timsChatTopic {
 			padding: 5px;
+			margin-bottom: @wcfGapSmall;
 			.transition(height, .2s);
 			.transition(padding-top, .2s);
 			.transition(padding-bottom, .2s);
@@ -25,7 +25,6 @@
 			}
 		}
 	}
-	}
 	
 	.timsChatMessageContainer {
 		height: 200px;
@@ -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,17 +289,17 @@
 			width: 100%;
 			
 			> ul {
+				.smallButtons;
 				margin-right: -1px;
 				text-align: right;
 				
 				> li {
 					> a {
-						&.button {
+						.button;
 						.borderRadius(0);
 						margin: 0;
 						padding-right: 7px;
 					}
-					}
 					
 					display: inline-block;
 					margin-left: -5px;
@@ -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,74 +421,43 @@ html.fullscreen {
 		height: 0px;
 	}
 	
+	height: 100%;
+	overflow: hidden;
+	
 	#content {
 		height: 100%;
-	}
 		
-	#timsChatRoomContent {
+		> div {
+			width: 100%;
 			height: 100%;
 
-		display: -webkit-box;
 			display: -moz-box;
-		display: -ms-flexbox;
+			display: -webkit-box;
 			display: -webkit-flex;
+			display: -ms-flexbox;
 			display: flex;
 			
-		-webkit-box-direction: normal;
-		-moz-box-direction: normal;
 			-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;
 			
-		-webkit-flex-wrap: nowrap;
+			.timsChatMessageContainer {
-		-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;
+				-webkit-flex: 1 0 auto;
-			-ms-flex: 1 100 auto;
+				-ms-flex: 1 0 auto;
-			flex: 1 100 auto;
+				flex: 1 0 auto;
-			-webkit-align-self: auto;
-			-ms-flex-item-align: auto;
-			align-self: auto;
-			
-			> div {
-				height: 100%;
-			}
 			}
 
 			#timsChatControls {
 				margin-bottom: 15px;
 			}
 		}
-
+	}
-	
-	height: 100%;
-	overflow: hidden;
 	
 	#tplChat, #tplChatLog {
 		height: 100%;

template/chat.tpl

@@ -88,15 +88,13 @@
 {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">
 		<p class="error noJsOnly" style="display: none;">{lang}chat.general.noJs{/lang}</p>
 		<ul>
 		</ul>
 	</div>
-	</fieldset>
 
 	<form id="timsChatForm" action="{link application='chat' controller='Chat' action='Send'}{/link}" method="post">
 		<fieldset>
@@ -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>