Refactor Apple keyboard logic to be more explicit

client/components/Windows/Help.vue

@@ -97,8 +97,8 @@
 
 			<div class="help-item">
 				<div class="subject">
-					<span class="key-all"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>↓</kbd></span>
+					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>↓</kbd></span>
-					<span class="key-apple"><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>↓</kbd></span>
+					<span v-else><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>↓</kbd></span>
 				</div>
 				<div class="description">
 					<p>Switch to the next lobby in the channel list.</p>
@@ -107,8 +107,8 @@
 
 			<div class="help-item">
 				<div class="subject">
-					<span class="key-all"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>↑</kbd></span>
+					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>↑</kbd></span>
-					<span class="key-apple"><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>↑</kbd></span>
+					<span v-else><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>↑</kbd></span>
 				</div>
 				<div class="description">
 					<p>Switch to the previous lobby in the channel list.</p>
@@ -117,8 +117,8 @@
 
 			<div class="help-item">
 				<div class="subject">
-					<span class="key-all"><kbd>Alt</kbd> <kbd>↓</kbd></span>
+					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>↓</kbd></span>
-					<span class="key-apple"><kbd>⌥</kbd> <kbd>↓</kbd></span>
+					<span v-else><kbd>⌥</kbd> <kbd>↓</kbd></span>
 				</div>
 				<div class="description">
 					<p>Switch to the next window in the channel list.</p>
@@ -127,8 +127,8 @@
 
 			<div class="help-item">
 				<div class="subject">
-					<span class="key-all"><kbd>Alt</kbd> <kbd>↑</kbd></span>
+					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>↑</kbd></span>
-					<span class="key-apple"><kbd>⌥</kbd> <kbd>↑</kbd></span>
+					<span v-else><kbd>⌥</kbd> <kbd>↑</kbd></span>
 				</div>
 				<div class="description">
 					<p>Switch to the previous window in the channel list.</p>
@@ -137,8 +137,8 @@
 
 			<div class="help-item">
 				<div class="subject">
-					<span class="key-all"><kbd>Alt</kbd> <kbd>A</kbd></span>
+					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>A</kbd></span>
-					<span class="key-apple"><kbd>⌥</kbd> <kbd>A</kbd></span>
+					<span v-else><kbd>⌥</kbd> <kbd>A</kbd></span>
 				</div>
 				<div class="description">
 					<p>Switch to the first window with unread messages.</p>
@@ -147,8 +147,8 @@
 
 			<div class="help-item">
 				<div class="subject">
-					<span class="key-all"><kbd>Ctrl</kbd> <kbd>K</kbd></span>
+					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>K</kbd></span>
-					<span class="key-apple"><kbd>⌘</kbd> <kbd>K</kbd></span>
+					<span v-else><kbd>⌘</kbd> <kbd>K</kbd></span>
 				</div>
 				<div class="description">
 					<p>
@@ -176,8 +176,8 @@
 
 			<div class="help-item">
 				<div class="subject">
-					<span class="key-all"><kbd>Ctrl</kbd> <kbd>B</kbd></span>
+					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>B</kbd></span>
-					<span class="key-apple"><kbd>⌘</kbd> <kbd>B</kbd></span>
+					<span v-else><kbd>⌘</kbd> <kbd>B</kbd></span>
 				</div>
 				<div class="description">
 					<p>
@@ -189,8 +189,8 @@
 
 			<div class="help-item">
 				<div class="subject">
-					<span class="key-all"><kbd>Ctrl</kbd> <kbd>U</kbd></span>
+					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>U</kbd></span>
-					<span class="key-apple"><kbd>⌘</kbd> <kbd>U</kbd></span>
+					<span v-else><kbd>⌘</kbd> <kbd>U</kbd></span>
 				</div>
 				<div class="description">
 					<p>
@@ -202,8 +202,8 @@
 
 			<div class="help-item">
 				<div class="subject">
-					<span class="key-all"><kbd>Ctrl</kbd> <kbd>I</kbd></span>
+					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>I</kbd></span>
-					<span class="key-apple"><kbd>⌘</kbd> <kbd>I</kbd></span>
+					<span v-else><kbd>⌘</kbd> <kbd>I</kbd></span>
 				</div>
 				<div class="description">
 					<p>
@@ -215,8 +215,8 @@
 
 			<div class="help-item">
 				<div class="subject">
-					<span class="key-all"><kbd>Ctrl</kbd> <kbd>S</kbd></span>
+					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>S</kbd></span>
-					<span class="key-apple"><kbd>⌘</kbd> <kbd>S</kbd></span>
+					<span v-else><kbd>⌘</kbd> <kbd>S</kbd></span>
 				</div>
 				<div class="description">
 					<p>
@@ -228,8 +228,8 @@
 
 			<div class="help-item">
 				<div class="subject">
-					<span class="key-all"><kbd>Ctrl</kbd> <kbd>M</kbd></span>
+					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>M</kbd></span>
-					<span class="key-apple"><kbd>⌘</kbd> <kbd>M</kbd></span>
+					<span v-else><kbd>⌘</kbd> <kbd>M</kbd></span>
 				</div>
 				<div class="description">
 					<p>
@@ -241,8 +241,8 @@
 
 			<div class="help-item">
 				<div class="subject">
-					<span class="key-all"><kbd>Ctrl</kbd> <kbd>O</kbd></span>
+					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>O</kbd></span>
-					<span class="key-apple"><kbd>⌘</kbd> <kbd>O</kbd></span>
+					<span v-else><kbd>⌘</kbd> <kbd>O</kbd></span>
 				</div>
 				<div class="description">
 					<p>
@@ -694,5 +694,10 @@ export default {
 		SidebarToggle,
 		VersionChecker,
 	},
+	data() {
+		return {
+			isApple: navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i) || false,
+		};
+	},
 };
 </script>

client/css/style.css

@@ -1904,15 +1904,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	margin-bottom: 0;
 }
 
-.is-apple #help .key-all,
-#help .key-apple {
-	display: none;
-}
-
-.is-apple #help .key-apple {
-	display: inline-block;
-}
-
 .whois {
 	display: grid;
 	grid-template-columns: max-content auto;

client/js/vue.js

@@ -17,10 +17,6 @@ const vueApp = new Vue({
 	el: "#viewport",
 	router,
 	mounted() {
-		if (navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)) {
-			document.body.classList.add("is-apple");
-		}
-
 		document.addEventListener("visibilitychange", this.synchronizeNotifiedState);
 		document.addEventListener("focus", this.synchronizeNotifiedState);
 		document.addEventListener("click", this.synchronizeNotifiedState);