summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorBirte Kristina Friesel <derf@finalrewind.org>2023-12-03 12:07:07 +0100
committerBirte Kristina Friesel <derf@finalrewind.org>2023-12-03 12:07:07 +0100
commita702051aef4b32fca7fd516a34415fcbb1e8c871 (patch)
treec5aa171840e44874484d1fe6d0d7e190070aab5d
parenta36801c967c790ed10d7d074af12f9832a42aa50 (diff)
Move theme switcher to bottom; add 'use device theme'
-rw-r--r--lib/DBInfoscreen/I18N/en.pm1
-rw-r--r--public/static/js/collapse.js13
-rw-r--r--sass/app.scss21
-rw-r--r--templates/layouts/app.html.ep36
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 -->
% }