From 0d31404e538bc3ed60dfa78a8d9df757f98b82c3 Mon Sep 17 00:00:00 2001
From: Lars-Dominik Braun <lars@6xq.net>
Date: Sat, 17 Oct 2020 10:25:59 +0200
Subject: report: Move remarks into <details> element

Hide them by default
---
 lulua/data/report/index.html | 14 +++++++++++---
 lulua/data/report/style.css  | 12 ++++++++++--
 2 files changed, 21 insertions(+), 5 deletions(-)

(limited to 'lulua')

diff --git a/lulua/data/report/index.html b/lulua/data/report/index.html
index b894f14..a18dcb7 100644
--- a/lulua/data/report/index.html
+++ b/lulua/data/report/index.html
@@ -203,7 +203,9 @@
 		{% endfor %}
 		</tr>
 		</tbody></table>
-		<figcaption>
+		</figure>
+		<details class="remarks">
+		<summary></summary>
 		<p>
 		The chosen Quran representation does not include all quranic
 		diacritization symbols, like <a
@@ -212,8 +214,7 @@
 		This makes comparison fairer, since most keyboards presented below do
 		not include any of them.
 		</p>
-		</figcaption>
-		</figure>
+		</details>
 
 		<p>
 		The plot below shows <bdo dir="ltr" lang="ar">ا ل ي م و ن</bdo> can be
@@ -296,6 +297,13 @@
 		symbols algorithmically distributed on the second layer using the raw
 		Wikitext from the Arabic Wikipedia dataset.
 		</p>
+		<details class="remarks">
+		<summary></summary>
+		<p>(This is <a
+		href="https://github.com/mw8/white_keyboard_layout/blob/master/README.md#finding-the-optimal-layout">a
+		common way</a> of arranging brackets, because most algorithms ignore
+		human desire for symmetry.)</p>
+		</details>
 
 		<p>
 		The most frequent letters have all been assigned to the home row, which
diff --git a/lulua/data/report/style.css b/lulua/data/report/style.css
index da2787f..f62fcef 100644
--- a/lulua/data/report/style.css
+++ b/lulua/data/report/style.css
@@ -232,6 +232,14 @@ dl.colorcodes .finger.thumb::before {
 .layer.fourth:before {
 	content: "⭨";
 }
-p.remark {
-	font-size: 0.9em;
+details.remarks {
+	font-size: 0.8em;
+	margin: -1em 0;
+}
+details[open].remarks {
+	margin-bottom: 1em;
+}
+details.remarks summary {
+	list-style-type: "+";
+	cursor: pointer;
 }
-- 
cgit v1.2.3