From fcadbc352b5fccd282f3e083479f3a8ff5fc5c13 Mon Sep 17 00:00:00 2001
From: konrad <k@knt.li>
Date: Sun, 14 Nov 2021 16:35:41 +0000
Subject: [PATCH] feat: re-style the keyboard shortcuts menu (#996)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/996
Reviewed-by: dpschen <dpschen@noreply.kolaente.de>
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>
---
 .../misc/keyboard-shortcuts/index.vue         | 35 +++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/misc/keyboard-shortcuts/index.vue b/src/components/misc/keyboard-shortcuts/index.vue
index c46d209e..a1b7be30 100644
--- a/src/components/misc/keyboard-shortcuts/index.vue
+++ b/src/components/misc/keyboard-shortcuts/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<modal @close="close()">
-		<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')">
+		<card class="has-background-white has-no-shadow keyboard-shortcuts" :title="$t('keyboardShortcuts.title')">
 			<template v-for="(s, i) in shortcuts" :key="i">
 				<h3>{{ $t(s.title) }}</h3>
 
@@ -12,10 +12,11 @@
 					</div>
 				</div>
 
-				<dl>
+				<dl class="shortcut-list">
 					<template v-for="(sc, si) in s.shortcuts" :key="si">
-						<dt>{{ $t(sc.title) }}</dt>
+						<dt class="shortcut-title">{{ $t(sc.title) }}</dt>
 						<shortcut
+							class="shortcut-keys"
 							is="dd"
 							:keys="sc.keys"
 							:combination="typeof sc.combination !== 'undefined' ? $t(`keyboardShortcuts.${sc.combination}`) : null"/>
@@ -47,8 +48,30 @@ export default {
 }
 </script>
 
-<style>
-dt {
-	font-weight: bold;
+<style scoped>
+.keyboard-shortcuts {
+	text-align: left;
+}
+
+.message:not(:last-child) {
+	margin-bottom: 1rem;
+}
+
+.message-body {
+	padding: .75rem;
+}
+
+.shortcut-list {
+	display: grid;
+	grid-template-columns: 2fr 1fr;
+}
+
+.shortcut-title {
+	margin-bottom: .5rem;
+}
+
+.shortcut-keys {
+	justify-content: end;
+	margin-bottom: .5rem;
 }
 </style>
\ No newline at end of file