diff options
| -rw-r--r-- | lib/DBInfoscreen/I18N/en.pm | 1 | ||||
| -rw-r--r-- | public/static/js/collapse.js | 13 | ||||
| -rw-r--r-- | sass/app.scss | 21 | ||||
| -rw-r--r-- | templates/layouts/app.html.ep | 36 |
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 --> % } |