Better separate and style kanji reading sections

This commit is contained in:
Kiril Kovachev 2024-10-16 15:17:32 +01:00
parent 1c777aa253
commit 215e2618f7
3 changed files with 28 additions and 15 deletions

View File

@ -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

View File

@ -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: "訓";
}
}
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;
}

View File

@ -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">