Update front.html

templates/Japanese fallback/Production/front.html

@@ -1,27 +1,47 @@
 {{#MakeProductionCard}}
 {{#SentKanji}}
 
-<header>{{#Tags}}<div class="tags">{{Tags}}</div>{{/Tags}}</header>
-{{#Image}}<div class="images" >{{Image}}</div>{{/Image}}
-<div class="jpsentence production">{{furigana:SentFurigana}}</div>
-<div style="text-align: center;">{{VocabAudio}}{{SentAudio}}</div>
-<script>
-	document.addEventListener('DOMContentLoaded', threeDots(), false);
+<div class="wrap">
 
-	function threeDots() {
-		const sent = document.getElementsByClassName("production")[0];
-		if (sent) {
-			const hidden = sent.getElementsByTagName("b");
-			for (i = 0; i < hidden.length; i++) {
-				if (hidden[i]) {
-					hidden[i].style.visibility = "visible";
-					//hidden[i].innerText = "【{{kana:VocabFurigana}}】";
-					hidden[i].innerText = "【"+hidden[i].innerText.replace(/[^ぁ-んァ-ン]/g, "")+"】";
-				}
-			}
-		}
-	}
+<header>{{#Tags}}<div class="tags">{{Tags}}</div>{{/Tags}}</header>
+{{#Image}}<div class="images">{{Image}}</div>{{/Image}}
+<div class="sent-center">
+<div class="jpsentence production">{{edit:furigana:SentFurigana}}</div>
+<div>{{VocabAudio}}{{SentAudio}}</div>
+</div>
+</div> <!-- /wrap -->
+
+<script>
+    function threeDots() {
+        const sent = document.getElementsByClassName("production")[0];
+        if (sent) {
+            for (const hidden of sent.getElementsByTagName("b")) {
+                hidden.style.visibility = "visible";
+                hidden.innerText = "【" + hidden.innerText.replace(/[^ぁ-んァ-ン]/g, "") + "】";
+            }
+        }
+    }
+    /* Splits tags into separate divs */
+    function splitTagDiv() {
+        const header = document.querySelector("header");
+        if (!header) return;
+        const split = `{{MorphManFocus}} {{Tags}}`.split(' ');
+
+        header.innerHTML = "";
+
+        for (const tag of split) {
+            if (tag.length < 1)
+                continue;
+            const tag_elem = document.createElement("div");
+            tag_elem.className = "tags";
+            tag_elem.innerHTML = tag;
+            header.appendChild(tag_elem);
+        }
+    }
+
+    threeDots()
+    splitTagDiv()
 </script>
 
 {{/SentKanji}}
-{{/MakeProductionCard}}
+{{/MakeProductionCard}}