From 541902b229cbaaabceb934c1b2388187fd8a69a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Fri, 18 Nov 2022 10:42:38 +0000
Subject: [PATCH] feat: better help layout
---
frontends/web/react/components/help/help.css | 5 +++
frontends/web/react/components/help/help.tsx | 41 +++++++++++++++-----
2 files changed, 37 insertions(+), 9 deletions(-)
diff --git a/frontends/web/react/components/help/help.css b/frontends/web/react/components/help/help.css
index 33a52b36..ae74ede5 100644
--- a/frontends/web/react/components/help/help.css
+++ b/frontends/web/react/components/help/help.css
@@ -10,6 +10,11 @@
margin: 10px 0px 4px 0px;
}
+.help > ul .key-container {
+ display: inline-block;
+ min-width: 86px;
+}
+
.help > ul .key {
border: 1px solid #ffffff;
display: inline-block;
diff --git a/frontends/web/react/components/help/help.tsx b/frontends/web/react/components/help/help.tsx
index f7511cf9..118e5692 100644
--- a/frontends/web/react/components/help/help.tsx
+++ b/frontends/web/react/components/help/help.tsx
@@ -12,29 +12,52 @@ export const Help: FC<HelpProps> = ({ style = [] }) => {
<div className={classes()}>
<ul>
<li>
- <span className="key">Enter</span> - Start
+ <span className="key-container">
+ <span className="key">Enter</span>
+ </span>
+ Start button
</li>
<li>
- <span className="key">Space</span> - Select
+ <span className="key-container">
+ <span className="key">Space</span>
+ </span>
+ Select button
</li>
<li>
- <span className="key">A</span> - A
+ <span className="key-container">
+ <span className="key">A</span>
+ </span>
+ A button
</li>
<li>
- <span className="key">S</span> - B
+ <span className="key-container">
+ <span className="key">S</span>
+ </span>
+ B button
</li>
<li>
- <span className="key">Escape</span> - Exit fullscreen
+ <span className="key-container">
+ <span className="key">Escape</span>
+ </span>
+ Exit fullscreen
</li>
<li>
- <span className="key">Ctrl + D</span> - Turbo speed
+ <span className="key-container">
+ <span className="key">Ctrl + D</span>
+ </span>
+ Turbo speed
</li>
<li>
- <span className="key">Ctrl + F</span> - Toggle fullscreen
+ <span className="key-container">
+ <span className="key">Ctrl + F</span>
+ </span>
+ Toggle fullscreen
</li>
<li>
- <span className="key">Ctrl + K</span> - Toggle on-screen
- keyboard
+ <span className="key-container">
+ <span className="key">Ctrl + K</span>
+ </span>
+ Toggle on-screen keyboard
</li>
</ul>
</div>
--
GitLab