From 215e2618f70c66cec3de582452ad04b720965ef5 Mon Sep 17 00:00:00 2001
From: Kiril Kovachev <Kiril.Kovachev@warwick.ac.uk>
Date: Wed, 16 Oct 2024 15:17:32 +0100
Subject: [PATCH] Better separate and style kanji reading sections

---
 kanken_online/__init__.py          | 12 ++++++------
 kanken_online/static/kanji.css     | 17 +++++++++++++++--
 kanken_online/templates/kanji.html | 14 +++++++-------
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/kanken_online/__init__.py b/kanken_online/__init__.py
index 41a614c..1ba085a 100644
--- a/kanken_online/__init__.py
+++ b/kanken_online/__init__.py
@@ -81,12 +81,12 @@ def create_app(test_config=None):
         out.strokes = kanji_obj.stroke_count
         out.radical = kanji_obj.radical
         out.added_strokes = kanji_obj.radical_added_stroke_count
-        out.goon = " ・ ".join(str(obj.reading) for obj in kanji_obj.goon)
-        out.kanon = ""
-        out.toon = ""
-        out.soon = ""
-        out.kanyoon = ""
-        out.kun = ""
+        out.goon = [str(obj.reading) for obj in kanji_obj.goon]
+        out.kanon = [str(obj.reading) for obj in kanji_obj.kanon]
+        out.toon = [str(obj.reading) for obj in kanji_obj.toon]
+        out.soon = [str(obj.reading) for obj in kanji_obj.soon]
+        out.kanyoon = [str(obj.reading) for obj in kanji_obj.kanyoon]
+        out.kun = [str(obj.reading) for obj in kanji_obj.kun]
         out.meanings = kanji_obj.meanings
         out.glyph_origin = kanji_obj.glyph_origin
         
diff --git a/kanken_online/static/kanji.css b/kanken_online/static/kanji.css
index ed6dc8d..0751544 100644
--- a/kanken_online/static/kanji.css
+++ b/kanken_online/static/kanji.css
@@ -1,4 +1,4 @@
-ul#reading-list {
+ul#reading-list-list {
     list-style-type: none;
 }
 
@@ -28,4 +28,17 @@ ul#reading-list {
 
 #kun::before {
     content: "訓";
-}
\ No newline at end of file
+}
+
+ul.reading-list {
+    list-style-type: none;
+    display: inline-flex;
+}
+
+ul.reading-list > li::after {
+    content: " ・";
+}
+
+ul.reading-list > li:last-child::after {
+    content: none;
+}
diff --git a/kanken_online/templates/kanji.html b/kanken_online/templates/kanji.html
index abd1159..e07f35a 100644
--- a/kanken_online/templates/kanji.html
+++ b/kanken_online/templates/kanji.html
@@ -28,13 +28,13 @@
 </div>
 <div id="readings-and-glyph-origin">
   <div id="reading-box">
-    <ul id="reading-list">
-      <li id="goon">{{ kanji.goon }}</li>
-      <li id="kanon">{{ kanji.kanon }}</li>
-      <li id="kanyoon">{{ kanji.kanyoon }}</li>
-      <li id="toon">{{ kanji.toon }}</li>
-      <li id="soon">{{ kanji.soon }}</li>
-      <li id="kun">{{ kanji.kun }}</li>
+    <ul id="reading-list-list">
+      <li id="goon"><ul class="reading-list">{% for reading in kanji.goon %}<li class="goon-reading">{{reading}}</li>{% endfor %}</ul></li>
+      <li id="kanon"><ul class="reading-list">{% for reading in kanji.kanon %}<li class="kanon-reading">{{reading}}</li>{% endfor %}</ul></li>
+      <li id="kanyoon"><ul class="reading-list">{% for reading in kanji.kanyoon %}<li class="kanyoon-reading">{{reading}}</li>{% endfor %}</ul></li>
+      <li id="toon"><ul class="reading-list">{% for reading in kanji.toon %}<li class="toon-reading">{{reading}}</li>{% endfor %}</ul></li>
+      <li id="soon"><ul class="reading-list">{% for reading in kanji.soon %}<li class="soon-reading">{{reading}}</li>{% endfor %}</ul></li>
+      <li id="kun"><ul class="reading-list">{% for reading in kanji.kun %}<li class="kun-reading">{{reading}}</li>{% endfor %}</ul></li>
     </ul>
   </div>
   <div id="glyph-origin-box">