Move theme switcher to bottom; add 'use device theme'

4 files changed, 51 insertions, 20 deletions

diff --git a/lib/DBInfoscreen/I18N/en.pm b/lib/DBInfoscreen/I18N/en.pm
index 50790c5..8557781 100644
--- a/lib/DBInfoscreen/I18N/en.pm
+++ b/lib/DBInfoscreen/I18N/en.pm
@@ -36,7 +36,6 @@ our %Lexicon = (
 	'Nur Abfahrt'                           => 'departure only',
 	'Nur Ankunft'                           => 'arrival only',
 	'Anzeigen'                              => 'Submit',
-	'Über DBF'                              => 'About',
 	'Datenschutz'                           => 'Privacy',
 	'Impressum'                             => 'Imprint',
 
diff --git a/public/static/js/collapse.js b/public/static/js/collapse.js
index 2beead1..30e111e 100644
--- a/public/static/js/collapse.js
+++ b/public/static/js/collapse.js
@@ -4,6 +4,19 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+function setLang(lang) {
+	document.cookie = 'lang=' + lang;
+	location.reload();
+}
+
+function setTheme(theme) {
+	localStorage.setItem('theme', theme);
+	if (!otherTheme.hasOwnProperty(theme)) {
+		theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+	}
+	addStyleSheet(theme, 'theme');
+}
+
 function reload_app() {
 	// TODO use a variable instead of window.location.href, as
 	// window.location.href may be /z/...
diff --git a/sass/app.scss b/sass/app.scss
index b561c77..f63c85c 100644
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -30,6 +30,7 @@ a {
 
 p,
 div.about,
+div.config,
 div.input-field,
 div.notes {
 	max-width: 94%;
@@ -669,15 +670,27 @@ div.candidatelist a .traininfo {
 	padding-bottom: 0.3em;
 }
 
-div.about {
+div.config {
 	margin-top: 2em;
 	font-family: Sans-Serif;
 	color: $fg2;
+
+	a {
+		color: $link-color;
+		cursor: pointer;
+		text-decoration: none;
+	}
 }
 
-div.about a {
-	color: $link-color;
-	text-decoration: none;
+div.about {
+	margin-top: 1em;
+	font-family: Sans-Serif;
+	color: $fg2;
+
+	a {
+		color: $link-color;
+		text-decoration: none;
+	}
 }
 
 .notice {
diff --git a/templates/layouts/app.html.ep b/templates/layouts/app.html.ep
index 1795471..7e8e38a 100644
--- a/templates/layouts/app.html.ep
+++ b/templates/layouts/app.html.ep
@@ -27,14 +27,14 @@
 	% }
 	<script>
 		function addStyleSheet(name, id) {
-			var path = '/static/<%=$av%>/css/' + name + '.min.css';
-			var old = document.getElementById(id);
+			const path = '/static/<%=$av%>/css/' + name + '.min.css';
+			const old = document.getElementById(id);
 			if (old && (old.href != path)) {
 				old.href = path;
 				document.cookie = 'theme=' + name;
 			}
 		}
-		var otherTheme = {
+		const otherTheme = {
 			'dark': 'light',
 			'light': 'dark',
 		};
@@ -43,12 +43,6 @@
 			currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 		}
 		addStyleSheet(currentTheme, 'theme');
-
-		function toggleTheme() {
-			currentTheme = otherTheme[currentTheme] || 'light';
-			localStorage.setItem('theme', currentTheme);
-			addStyleSheet(currentTheme, 'theme');
-		}
 	</script>
 	%= stylesheet "/static/${av}/css/material-icons.css"
 	%= stylesheet "/static/${av}/css/jquery-ui.min.css"
@@ -88,9 +82,6 @@
 						<a href="<%= stash('api_link') %>"><span class="visually-hidden"><%= stash('api_text') %></span><i class="material-icons" aria-hidden="true"><%= stash('api_icon') %></i></a>
 					</li>
 				% }
-				<li class="waves-effect waves-light">
-					<a onClick="javascript:toggleTheme()"><span class="visually-hidden">Farbschema invertieren</span><i class="material-icons" aria-hidden="true">invert_colors</i></a>
-				</li>
 				% if (stash('hide_opts')) {
 					<li><a href="/"><span class="visually-hidden">Hauptseite</span><i class="material-icons" aria-hidden="true">edit</i></a></li>
 				% }
@@ -296,13 +287,28 @@
 </div> <!-- container -->
 
 <div class="container">
+<div class="config">
+Theme:
+<a onClick="javascript:setTheme('dark')">dark</a>
+·
+<a onClick="javascript:setTheme('light')">light</a>
+·
+<a onClick="javascript:setTheme('default')">device theme</a>
+<!--<br/>
+Language:
+<a onClick="javascript:setLang('de')">DE</a>
+·
+<a onClick="javascript:setLang('en')">EN</a>
+·
+<a onClick="javascript:setLang('default')">system language</a>
+<br/>-->
+</div>
 <div class="about">
-<a href="_about"><%= l 'Über DBF' %></a>
+<a href="_about">DBF</a> v<%= stash('version') // '???' %>
 ·
 <a href="_datenschutz" rel="nofollow"><%= l 'Datenschutz' %></a>
 ·
-<a href="_impressum" rel="nofollow"><%= l 'Impressum' %></a><br/>
-Version <%= stash('version') // '???' %>
+<a href="_impressum" rel="nofollow"><%= l 'Impressum' %></a>
 </div> <!-- about -->
 </div> <!-- container -->
 % }