From 39aae80a3106ec6c5e792ab2934edb0425a63618 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Wed, 4 Jan 2023 23:16:29 +0100 Subject: add vertical layout for mobile screens --- anki-card-template/back-template.m4 | 8 +++-- anki-card-template/card.css | 58 ++++++++++++++++++++++++++---------- anki-card-template/card.html | 18 +++++++++-- anki-card-template/card.js | 16 ++++++++++ anki-card-template/front-template.m4 | 4 ++- 5 files changed, 82 insertions(+), 22 deletions(-) diff --git a/anki-card-template/back-template.m4 b/anki-card-template/back-template.m4 index 1a0607d..f2e0e0a 100644 --- a/anki-card-template/back-template.m4 +++ b/anki-card-template/back-template.m4 @@ -1,10 +1,14 @@ -
+
+
{{Complete sentence}} -
+
+
+
{{Target word reading}} {{Target word translation}}
+
diff --git a/anki-card-template/card.css b/anki-card-template/card.css index 8c2b0d0..38d923d 100644 --- a/anki-card-template/card.css +++ b/anki-card-template/card.css @@ -1,25 +1,24 @@ -.mobile .card .foreign { font-size: 1.75rem; } -.mobile .card .native { font-size: 1.25rem; } +.mobile #card .foreign { font-size: 1.75rem; } +.mobile #card .native { font-size: 1.25rem; } -.card .foreign { font-size: 1.5rem; } -.card .native { font-size: 1.0rem; } +#card .foreign { font-size: 1.5rem; } +#card .native { font-size: 1.0rem; } -.card { text-align: center; } -.card span { display: block; } +#card { text-align: center; } +#card span { display: block; } -hr { - height: 10px; +#separator { border: none; opacity: 20%; } -hr { background-color: black; } -.nightMode hr { background-color: white; } - -.card.front #target-word-reading, -.card.front #target-word-translation, -.card.front #sentence-translation, -.card.front hr, -.card.front ruby rt.hidden { +#separator { background-color: black; } +.nightMode #separator { background-color: white; } + +#card.front #target-word-reading, +#card.front #target-word-translation, +#card.front #sentence-translation, +#card.front hr, +#card.front ruby rt.hidden { display: none; } @@ -31,3 +30,30 @@ hr { background-color: black; } } .spoiler.hidden { filter: blur(0.3rem); } .spoiler.visible { filter: blur(0rem); } + +#card.vertical-layout > * { grid-row: 1; } +#card.vertical-layout { + display: grid; + grid-auto-columns: 1fr auto auto; +} +#card.vertical-layout #back { + display: flex; + flex-direction: column; + justify-content: center; +} + +#card.vertical-layout #back { grid-column: 1; } +#card.vertical-layout #separator { grid-column: 2; } +#card.vertical-layout #front { grid-column: 3; } + +#card.vertical-layout #sentence { writing-mode: vertical-rl; } + +#card.horizontal-layout #separator { + height: 10px; + margin: 1em 0; +} +#card.vertical-layout #separator { + width: 10px; + margin: 0 1em; +} + diff --git a/anki-card-template/card.html b/anki-card-template/card.html index 71ca300..69edc1d 100644 --- a/anki-card-template/card.html +++ b/anki-card-template/card.html @@ -5,18 +5,30 @@ card template test + -
+
+
[俺](おれ)の[目](め)の[前](まえ)に{全}(ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\n\*escape\* (test) -
+
+
+
立つ【た・つ】 To stand
+
- + + + diff --git a/anki-card-template/card.js b/anki-card-template/card.js index 0509c3e..d86ac87 100644 --- a/anki-card-template/card.js +++ b/anki-card-template/card.js @@ -43,6 +43,18 @@ function parseSentence(input) { return out; } +function layout() { + // set vertical layout on vertical displays (primarily mobile screens) + var el = document.getElementById("card"); + if (screen.orientation.type.startsWith("landscape") && el.classList.contains("vertical-layout")) { + el.classList.remove("vertical-layout"); + el.classList.add("horizontal-layout"); + } else if (screen.orientation.type.startsWith("portrait") && el.classList.contains("horizontal-layout")) { + el.classList.remove("horizontal-layout"); + el.classList.add("vertical-layout"); + } +} + function run() { // parse all elements with class parse for (var el of document.getElementsByClassName("parse")) { @@ -64,7 +76,11 @@ function run() { if(document.getElementById("target-word-reading").innerText.length == 0) { document.getElementById("sentence-translation").classList.remove("hidden"); } + + layout(); } run(); window.onload = () => run(); +window.onresize = () => layout(); +window.ondeviceorientation = () => layout(); diff --git a/anki-card-template/front-template.m4 b/anki-card-template/front-template.m4 index bb1fdb9..470cc56 100644 --- a/anki-card-template/front-template.m4 +++ b/anki-card-template/front-template.m4 @@ -1,6 +1,8 @@ -
+
+
{{Complete sentence}}
+
-- cgit v1.2.3