Merge pull request #824 from thelounge/xpaw/time-tooltip

Use css tooltips on time elements, ability to view time on mobile

client/css/style.css

@@ -839,7 +839,6 @@ kbd {
 	word-wrap: break-word;
 	word-break: break-word; /* Webkit-specific */
 	display: flex;
-	overflow: hidden;
 	position: relative;
 }
 
@@ -1520,9 +1519,10 @@ kbd {
 }
 
 /**
-  * Tooltips
+  * Tooltips v0.5.3
   * See http://primercss.io/tooltips/
   */
+
 .tooltipped {
 	position: relative;
 }
@@ -1530,12 +1530,11 @@ kbd {
 .tooltipped:after {
 	position: absolute;
 	z-index: 1000000;
-	display: inline-block;
+	display: none;
-	visibility: hidden;
-	opacity: 0;
 	padding: 5px 8px;
 	font: 12px Lato;
 	line-height: 1.2;
+	-webkit-font-smoothing: subpixel-antialiased;
 	color: #fff;
 	text-align: center;
 	text-decoration: none;
@@ -1548,23 +1547,40 @@ kbd {
 	content: attr(aria-label);
 	background: #222;
 	border-radius: 3px;
-	-webkit-font-smoothing: subpixel-antialiased;
+	opacity: 0;
-	transition: .2s;
 }
 
 .tooltipped:before {
 	position: absolute;
 	z-index: 1000001;
-	display: inline-block;
+	display: none;
-	visibility: hidden;
-	opacity: 0;
 	width: 0;
 	height: 0;
 	color: #fff;
 	pointer-events: none;
 	content: "";
 	border: 5px solid transparent;
-	transition: .2s;
+	opacity: 0;
+}
+
+@-webkit-keyframes tooltip-appear {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes tooltip-appear {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
 }
 
 .tooltipped:hover:before,
@@ -1573,9 +1589,18 @@ kbd {
 .tooltipped:active:after,
 .tooltipped:focus:before,
 .tooltipped:focus:after {
-	visibility: visible;
+	display: inline-block;
-	opacity: 1;
 	text-decoration: none;
+	-webkit-animation-name: tooltip-appear;
+	animation-name: tooltip-appear;
+	-webkit-animation-duration: .1s;
+	animation-duration: .1s;
+	-webkit-animation-fill-mode: forwards;
+	animation-fill-mode: forwards;
+	-webkit-animation-timing-function: ease-in;
+	animation-timing-function: ease-in;
+	-webkit-animation-delay: .4s;
+	animation-delay: .4s;
 }
 
 .tooltipped-s:after,
@@ -1672,6 +1697,17 @@ kbd {
 	border-right-color: #222;
 }
 
+@media only screen and (-webkit-min-device-pixel-ratio: 2),
+	only screen and (min--moz-device-pixel-ratio: 2),
+	only screen and (-moz-min-device-pixel-ratio: 2),
+	only screen and (min-device-pixel-ratio: 2),
+	only screen and (min-resolution: 192dpi),
+	only screen and (min-resolution: 2dppx) {
+	.tooltipped-w:after {
+		margin-right: 4.5px;
+	}
+}
+
 /* End tooltips */
 
 /**
@@ -1764,12 +1800,8 @@ kbd {
 	  * - https://www.w3.org/TR/mediaqueries-4/
 	  * - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
 	  */
-	.tooltipped:hover:before,
+	.tooltipped-no-touch:hover:before,
-	.tooltipped:hover:after,
+	.tooltipped-no-touch:hover:after {
-	.tooltipped:active:before,
-	.tooltipped:active:after,
-	.tooltipped:focus:before,
-	.tooltipped:focus:after {
 		visibility: hidden;
 		opacity: 0;
 	}

client/index.html

@@ -34,11 +34,11 @@
 			</div>
 		</aside>
 		<footer id="footer">
-			<span class="tooltipped tooltipped-n" aria-label="Sign in"><button class="icon sign-in" data-target="#sign-in" aria-label="Sign in"></button></span>
+			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"><button class="icon sign-in" data-target="#sign-in" aria-label="Sign in"></button></span>
-			<span class="tooltipped tooltipped-n" aria-label="Connect to network"><button class="icon connect" data-target="#connect" aria-label="Connect to network"></button></span>
+			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Connect to network"><button class="icon connect" data-target="#connect" aria-label="Connect to network"></button></span>
-			<span class="tooltipped tooltipped-n" aria-label="Client settings"><button class="icon settings" data-target="#settings" aria-label="Client settings"></button></span>
+			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Client settings"><button class="icon settings" data-target="#settings" aria-label="Client settings"></button></span>
-			<span class="tooltipped tooltipped-n" aria-label="Help"><button class="icon help" data-target="#help" aria-label="Help"></button></span>
+			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"><button class="icon help" data-target="#help" aria-label="Help"></button></span>
-			<span class="tooltipped tooltipped-n" aria-label="Sign out"><button class="icon sign-out" id="sign-out" aria-label="Sign out"></button></span>
+			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign out"><button class="icon sign-out" id="sign-out" aria-label="Sign out"></button></span>
 		</footer>
 		<div id="main">
 			<div id="windows">
@@ -68,10 +68,10 @@
 								--><span id="save-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Save"><button id="submit-nick" type="button" aria-label="Save"></button></span>
 							</span>
 							<textarea id="input" class="mousetrap"></textarea>
-							<span id="cycle-nicks-tooltip" class="tooltipped tooltipped-w" aria-label="Cycle through nicks">
+							<span id="cycle-nicks-tooltip" class="tooltipped tooltipped-w tooltipped-no-touch" aria-label="Cycle through nicks">
 								<button id="cycle-nicks" type="button" aria-label="Cycle through nicks"></button>
 							</span>
-							<span id="submit-tooltip" class="tooltipped tooltipped-w" aria-label="Send message">
+							<span id="submit-tooltip" class="tooltipped tooltipped-w tooltipped-no-touch" aria-label="Send message">
 								<button id="submit" type="submit" aria-label="Send message"></button>
 							</span>
 						</div>
@@ -523,7 +523,7 @@
 						</div>
 
 						<h2>Commands</h2>
-						
+
 						<p>All commands can be autocompleted with <kbd>tab</kbd>.</p>
 
 						<div class="help-item">

client/views/msg.tpl

@@ -1,5 +1,5 @@
 <div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}" id="msg-{{id}}" data-time="{{time}}" data-from="{{from}}">
-	<span class="time" title="{{localetime time}}">
+	<span class="time tooltipped tooltipped-e" aria-label="{{localetime time}}">
 		{{tz time}}
 	</span>
 	<span class="from">

client/views/msg_action.tpl

@@ -1,5 +1,5 @@
 <div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}" id="msg-{{id}}" data-time="{{time}}">
-	<span class="time" title="{{localetime time}}">
+	<span class="time tooltipped tooltipped-e" aria-label="{{localetime time}}">
 		{{tz time}}
 	</span>
 	<span class="from"></span>

client/views/msg_unhandled.tpl

@@ -1,5 +1,5 @@
 <div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}" data-time="{{time}}">
-	<span class="time" title="{{localetime time}}">
+	<span class="time tooltipped tooltipped-e" aria-label="{{localetime time}}">
 		{{tz time}}
 	</span>
 	<span class="from">[{{command}}]</span>