Unverified Commit a702051a authored by Birte Kristina Friesel's avatar Birte Kristina Friesel
Browse files

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

parent a36801c9

lib/DBInfoscreen/I18N/en.pm

+0 −1
Original line number Diff line number Diff line
@@ -36,7 +36,6 @@ our %Lexicon = ( 
	'Nur Abfahrt'                           => 'departure only',

	'Nur Ankunft'                           => 'arrival only',

	'Anzeigen'                              => 'Submit',

	'Über DBF'                              => 'About',

	'Datenschutz'                           => 'Privacy',

	'Impressum'                             => 'Imprint',

public/static/js/collapse.js

+13 −0
Original line number Diff line number Diff line
@@ -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/...

sass/app.scss

+17 −4
Original line number Diff line number Diff line
@@ -30,6 +30,7 @@ a { 


p,

div.about,

div.config,

div.input-field,

div.notes {

	max-width: 94%;
@@ -669,16 +670,28 @@ 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 {

div.about {

	margin-top: 1em;

	font-family: Sans-Serif;

	color: $fg2;



	a {

		color: $link-color;

		text-decoration: none;

	}

}



.notice {

	padding: 15px;

templates/layouts/app.html.ep

+21 −15
Original line number Diff line number Diff line
@@ -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 -->

% }