Format whois as a definition list

client/css/style.css

@@ -1483,6 +1483,25 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	display: inline-block;
 }
 
+.whois {
+	display: -ms-grid; /* Edge 15- */
+	display: grid;
+	-ms-grid-template-columns: max-content auto;
+	grid-template-columns: max-content auto;
+	margin: 0;
+}
+
+.whois dt {
+	-ms-grid-column-start: 1;
+	grid-column-start: 1;
+	margin-right: 20px;
+}
+
+.whois dd {
+	-ms-grid-column-start: 2;
+	grid-column-start: 2;
+}
+
 #form {
 	background: #eee;
 	border-top: 1px solid #ddd;

client/views/actions/whois.tpl

@@ -1,93 +1,80 @@
-<div>
+<p>{{> ../user_name nick=whois.nick}}</p>
-	{{> ../user_name nick=whois.nick}}
+<dl class="whois">
-	<i class="hostmask">({{whois.user}}@{{whois.host}})</i>
-</div>
-{{#if whois.actualhost}}
-<div>
-	{{> ../user_name nick=whois.nick}}'s actual host is: <i>{{whois.actualhost}}</i> (<i>{{whois.actualip}}</i>)
-</div>
-{{/if}}
-{{#if whois.real_name}}
-<div>
-	{{> ../user_name nick=whois.nick}}'s real name is:
-	<b>{{{parse whois.real_name}}}</b>
-</div>
-{{/if}}
 {{#if whois.account}}
-<div>
+	<dt>Logged in as:</dt>
-	{{> ../user_name nick=whois.nick}}
+	<dd>{{whois.account}}</dd>
-	is logged in as <b>{{whois.account}}</b>
-</div>
 {{/if}}
+
+	<dt>Host mask:</dt>
+	<dd class="hostmask">{{whois.user}}@{{whois.host}}</dd>
+
+{{#if whois.actualhost}}
+	<dt>Actual host:</dt>
+	<dd class="hostmask"><a href="https://ipinfo.io/{{whois.actualip}}" target="_blank" rel="noopener">{{whois.actualip}}</a>{{#equal whois.actualhost whois.actualip}}{{else}} ({{whois.actualhost}}){{/equal}}</dd>
+{{/if}}
+
+{{#if whois.real_name}}
+	<dt>Real name:</dt>
+	<dd>{{{parse whois.real_name}}}</dd>
+{{/if}}
+
 {{#if whois.registered_nick}}
-<div>
+	<dt>Registered nick:</dt>
-	{{> ../user_name nick=whois.nick}}
+	<dd>{{whois.registered_nick}}</dd>
-	{{whois.registered_nick}}
-</div>
-{{/if}}
-{{#if whois.modes}}
-<div>
-	{{> ../user_name nick=whois.nick}}
-	{{whois.modes}}
-</div>
-{{/if}}
-{{#if whois.special}}
-<div>
-	{{> ../user_name nick=whois.nick}}
-	{{whois.special}}
-</div>
-{{/if}}
-{{#if whois.operator}}
-<div>
-	{{> ../user_name nick=whois.nick}}
-	{{whois.operator}}
-</div>
-{{/if}}
-{{#if whois.helpop}}
-<div>
-	{{> ../user_name nick=whois.nick}}
-	is available for help
-</div>
-{{/if}}
-{{#if whois.bot}}
-<div>
-	{{> ../user_name nick=whois.nick}}
-	is a bot
-</div>
 {{/if}}
+
 {{#if whois.channels}}
-<div>
+	<dt>Channels:</dt>
-	{{> ../user_name nick=whois.nick}}
+	<dd>{{{parse whois.channels}}}</dd>
-	is on the following channels: {{{parse whois.channels}}}
-</div>
 {{/if}}
-{{#if whois.server}}
+
-<div>
+{{#if whois.modes}}
-	{{> ../user_name nick=whois.nick}}
+	<dt>Modes:</dt>
-	is connected to {{whois.server}} <i>({{whois.server_info}})</i>
+	<dd>{{whois.modes}}</dd>
-</div>
 {{/if}}
-{{#if whois.secure}}
+
-<div>
+{{#if whois.special}}
-	{{> ../user_name nick=whois.nick}}
+	<dt>Special:</dt>
-	is using a secure connection
+	<dd>{{whois.special}}</dd>
-</div>
 {{/if}}
+
+{{#if whois.operator}}
+	<dt>Operator:</dt>
+	<dd>{{whois.operator}}</dd>
+{{/if}}
+
+{{#if whois.helpop}}
+	<dt>Available for help:</dt>
+	<dd>Yes</dd>
+{{/if}}
+
+{{#if whois.bot}}
+	<dt>Is a bot:</dt>
+	<dd>Yes</dd>
+{{/if}}
+
 {{#if whois.away}}
-<div>
+	<dt>Away:</dt>
-	{{> ../user_name nick=whois.nick}}
+	<dd>{{{parse whois.away}}}</dd>
-	is away <i>({{whois.away}})</i>
-</div>
 {{/if}}
+
+{{#if whois.secure}}
+	<dt>Secure connection:</dt>
+	<dd>Yes</dd>
+{{/if}}
+
+{{#if whois.server}}
+	<dt>Connected to:</dt>
+	<dd>{{whois.server}} <i>({{whois.server_info}})</i></dd>
+{{/if}}
+
 {{#if whois.logonTime}}
-<div>
+	<dt>Connected at:</dt>
-	{{> ../user_name nick=whois.nick}}
+	<dd>{{localetime whois.logonTime}}</dd>
-	connected at {{localetime whois.logonTime}}
-</div>
 {{/if}}
+
 {{#if whois.idle}}
-<div>
+	<dt>Idle since:</dt>
-	{{> ../user_name nick=whois.nick}}
+	<dd>{{localetime whois.idleTime}}</dd>
-	has been idle since {{localetime whois.idleTime}}
-</div>
 {{/if}}
+</dl>