add vertical layout for mobile screens

author: lonkaars <loek@pipeframe.xyz> 2023-01-04 23:16:29 +0100
committer: lonkaars <loek@pipeframe.xyz> 2023-01-04 23:16:29 +0100
commit: 39aae80a3106ec6c5e792ab2934edb0425a63618 (patch)
tree: 0d2762a99be2acadaa560fbed6f1a599ccda0662 /anki-card-template
parent: b49925b09a8962411706b00a446f5cd84007a086 (diff)
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 @@
-<div class="card back">
+<div id="card" class="back horizontal-layout">
+<div id="front">
 <span id="sentence" class="parse foreign">{{Complete sentence}}</span>
-<hr class="split">
+</div>
+<hr id="separator">
+<div id="back">
 <span id="target-word-reading" class="foreign">{{Target word reading}}</span>
 <span id="target-word-translation" class="native">{{Target word translation}}</span>
 <span id="sentence-translation" class="native spoiler hidden">{{Complete sentence translation}}</span>
 </div>
+</div>
 
 <style>undivert(`card.min.css')</style>
 <script defer>undivert(`card.min.js')</script>
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 @@
 	<title>card template test</title>
 	<link rel='stylesheet' type='text/css' media='screen' href='./card.css'>
 	<script defer src='./card.js'></script>
+	<style>
+	body.nightMode {
+		background-color: black;
+		color: white;
+	}
+	</style>
 </head>
 <body>
 
-<div class="card back">
+<div id="card" class="back vertical-layout">
+<div id="front">
 <span id="sentence" class="parse foreign">[俺](おれ)の[目](め)の[前](まえ)に{全}(ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\n\*escape\* (<i>test</i>)</span>
-<hr class="split">
+</div>
+<hr id="separator">
+<div id="back">
 <span id="target-word-reading" class="foreign">立つ【た・つ】</span>
 <span id="target-word-translation" class="native">To stand</span>
 <span id="sentence-translation" class="native spoiler hidden">Before my eyes stood Alice, butt-naked.</span>
 </div>
+</div>
 
-<button onclick="document.getElementsByClassName('card')[0].classList.toggle('back'); document.getElementsByClassName('card')[0].classList.toggle('front')">toggle view</button>
+<button onclick="document.getElementById('card').classList.toggle('back'); document.getElementById('card').classList.toggle('front')">toggle view</button>
+<button onclick="document.getElementById('card').classList.toggle('horizontal-layout'); document.getElementById('card').classList.toggle('vertical-layout')">toggle layout</button>
+<button onclick="document.body.classList.toggle('nightMode')">toggle dark</button>
 
 </span>
 </html>
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 @@
-<div class="card front">
+<div id="card" class="front horizontal-layout">
+<div id="front">
 <span id="sentence" class="parse foreign">{{Complete sentence}}</span>
 </div>
+</div>
 
 <style>undivert(`card.min.css')</style>
 <script defer>undivert(`card.min.js')</script>
author	lonkaars <loek@pipeframe.xyz>	2023-01-04 23:16:29 +0100
committer	lonkaars <loek@pipeframe.xyz>	2023-01-04 23:16:29 +0100
commit	39aae80a3106ec6c5e792ab2934edb0425a63618 (patch)
tree	0d2762a99be2acadaa560fbed6f1a599ccda0662 /anki-card-template
parent	b49925b09a8962411706b00a446f5cd84007a086 (diff)