PrivateCoffee/travelynx
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Further color improvements

Browse source
This commit is contained in:
marudor 2019-05-16 16:10:53 +02:00
parent 87e74ca90d
commit 84b32b28e9
No known key found for this signature in database
GPG key ID: 914085684F88D2C1
31 changed files with 79 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public/static/css/dark.js Normal file
View file

@ -0,0 +1 @@
!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([,function(e,t,r){}]);

4
public/static/css/dark.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
public/static/css/light.js Normal file
View file

@ -0,0 +1 @@
!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){}]);

2
public/static/css/light.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
public/static/css/local.css
View file

@ -11,10 +11,6 @@ td.cancelled {
text-decoration: line-through; text-decoration: line-through;
} }
a.unmarked {
color: rgba(0, 0, 0, 0.87);
}
h1 { h1 {
font-size: 2.92rem; font-size: 2.92rem;
margin: 1.9466666667rem 0 1.168rem 0; margin: 1.9466666667rem 0 1.168rem 0;

12
public/static/js/theme.js
View file

@ -1,12 +0,0 @@
var validThemes = ['dark.min', 'light.min'];
var currentTheme = localStorage.getItem('theme');
if (!validThemes.includes(currentTheme)) {
currentTheme = window.matchMedia('(prefers-color-scheme: dark').matches ? 'dark.min' : 'light.min';
}
addStyleSheet(currentTheme, 'theme');
function toggleTheme() {
currentTheme = currentTheme === 'dark.min' ? 'light.min' : 'dark.min';
localStorage.setItem('theme', currentTheme);
addStyleSheet(currentTheme, 'theme');
}

1
public/static/js/theme.min.js vendored
View file

@ -1 +0,0 @@
var validThemes=["dark.min","light.min"],currentTheme=localStorage.getItem("theme");function toggleTheme(){currentTheme="dark.min"===currentTheme?"light.min":"dark.min",localStorage.setItem("theme",currentTheme),addStyleSheet(currentTheme,"theme")}validThemes.includes(currentTheme)||(currentTheme=window.matchMedia("(prefers-color-scheme: dark").matches?"dark.min":"light.min"),addStyleSheet(currentTheme,"theme");

10
sass/package-lock.json generated
View file

@ -6464,16 +6464,6 @@
"get-stdin": "^4.0.1" "get-stdin": "^4.0.1"
} }
}, },
"style-loader": {
"version": "0.23.1",
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz",
"integrity": "sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==",
"dev": true,
"requires": {
"loader-utils": "^1.1.0",
"schema-utils": "^1.0.0"
}
},
"stylehacks": { "stylehacks": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",

13
sass/src/common/index.scss
View file

@ -2,6 +2,7 @@ $customColors: (
'caution': $error-color, 'caution': $error-color,
'info': $info-color, 'info': $info-color,
'contrast': $off-black, 'contrast': $off-black,
'success': $success-color,
); );
@each $name, $color in $customColors { @each $name, $color in $customColors {
@ -16,3 +17,15 @@ $customColors: (
html { html {
background-color: $bg-color; background-color: $bg-color;
} }
a.unmarked {
color: $off-black;
}
.pagination {
li {
a {
color: $off-black;
}
}
}

4
sass/src/dark/_variables.scss
View file

@ -4,9 +4,9 @@ $info-color: color('yellow', 'darken-4');
$off-black: color('shades', 'white'); $off-black: color('shades', 'white');
$primary-color: color('materialize-red', 'darken-2'); $primary-color: color('materialize-red', 'darken-2');
$secondary-color: color('teal', 'darken-2'); $secondary-color: color('cyan', 'darken-2');
$link-color: color('light-blue', 'darken-1'); $link-color: color('light-blue', 'darken-1');
$collection-link-color: color('teal', 'darken-4'); $collection-link-color: color('cyan', 'darken-4');
$success-color: color('green', 'darken-2'); $success-color: color('green', 'darken-2');
$error-color: color('red', 'darken-2'); $error-color: color('red', 'darken-2');
$input-border-color: $off-black; $input-border-color: $off-black;

7
sass/src/dark/index.scss
View file

@ -3,6 +3,13 @@
@import '../../node_modules/materialize-css/sass/materialize.scss'; @import '../../node_modules/materialize-css/sass/materialize.scss';
@import '../common/index.scss'; @import '../common/index.scss';
.progress.travel-progress {
background-color: color('purple', 'lighten-1');
& > .determinate {
background-color: color('purple', 'darken-1');
}
}
html { html {
background-color: $bg-color; background-color: $bg-color;
} }

7
sass/src/light/index.scss
View file

@ -2,3 +2,10 @@
@import 'variables.scss'; @import 'variables.scss';
@import '../../node_modules/materialize-css/sass/materialize.scss'; @import '../../node_modules/materialize-css/sass/materialize.scss';
@import '../common/index.scss'; @import '../common/index.scss';
.progress.travel-progress {
background-color: color('purple', 'lighten-4');
& > .determinate {
background-color: color('purple', 'darken-3');
}
}

2
scripts/asset-rebuild
View file

@ -2,6 +2,6 @@
set -x set -x
for file in autocomplete geolocation travelynx-actions theme; do for file in autocomplete geolocation travelynx-actions; do
uglifyjs public/static/js/${file}.js -c -m > public/static/js/${file}.min.js uglifyjs public/static/js/${file}.js -c -m > public/static/js/${file}.min.js
done done

2
templates/_cancelled.html.ep
View file

@ -1,4 +1,4 @@
<div class="card yellow lighten-4"> <div class="card info-color">
<div class="card-content"> <div class="card-content">
<span class="card-title">Zugausfall dokumentieren</span> <span class="card-title">Zugausfall dokumentieren</span>
<p>Prinzipiell wärest du nun eingecheckt in <p>Prinzipiell wärest du nun eingecheckt in

6
templates/_checked_in.html.ep
View file

@ -1,4 +1,4 @@
<div class="card autorefresh blue-grey lighten-5"> <div class="card autorefresh">
<div class="card-content"> <div class="card-content">
<i class="material-icons small right sync-failed-marker grey-text" style="display: none;">sync_problem</i> <i class="material-icons small right sync-failed-marker grey-text" style="display: none;">sync_problem</i>
<span class="card-title">Eingecheckt in <%= $journey->{train_type} %> <%= $journey->{train_no} %></span> <span class="card-title">Eingecheckt in <%= $journey->{train_type} %> <%= $journey->{train_no} %></span>
@ -31,8 +31,8 @@
Ankunft in mehr als zwei Stunden Ankunft in mehr als zwei Stunden
% } % }
</div> </div>
<div class="progress purple lighten-4" style="height: 1ex;"> <div class="progress " style="height: 1ex;">
<div class="determinate purple darken-3" style="width: <%= sprintf('%.2f', 100 * ($journey->{journey_completion} // 0)); %>%;"></div> <div class="determinate" style="width: <%= sprintf('%.2f', 100 * ($journey->{journey_completion} // 0)); %>%;"></div>
</div> </div>
</p> </p>
% if ($journey->{arr_name}) { % if ($journey->{arr_name}) {

4
templates/_checked_out.html.ep
View file

@ -1,5 +1,5 @@
<div class="card grey darken-4"> <div class="card">
<div class="card-content white-text"> <div class="card-content">
<span class="card-title">Ausgecheckt</span> <span class="card-title">Ausgecheckt</span>
<p>Aus <%= $journey->{train_type} %> <%= $journey->{train_no} %> <p>Aus <%= $journey->{train_type} %> <%= $journey->{train_no} %>
bis <a href="/s/<%= $journey->{arr_ds100} %>"><%= $journey->{arr_name} %></a></p> bis <a href="/s/<%= $journey->{arr_ds100} %>"><%= $journey->{arr_name} %></a></p>

2
templates/_deletion_note.html.ep
View file

@ -1,6 +1,6 @@
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<div class="card red darken-4"> <div class="card caution-color">
<div class="card-content white-text"> <div class="card-content white-text">
<span class="card-title">Account wird gelöscht</span> <span class="card-title">Account wird gelöscht</span>
<p> <p>

2
templates/_history_stats.html.ep
View file

@ -1,7 +1,7 @@
% if (@{$stats->{inconsistencies}}) { % if (@{$stats->{inconsistencies}}) {
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<div class="card red darken-4"> <div class="card caution-color">
<div class="card-content white-text"> <div class="card-content white-text">
<i class="material-icons small right">warning</i> <i class="material-icons small right">warning</i>
<span class="card-title">Inkonsistente Reisedaten</span> <span class="card-title">Inkonsistente Reisedaten</span>

2
templates/_invalid_input.html.ep
View file

@ -1,6 +1,6 @@
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<div class="card red darken-4"> <div class="card caution-color">
<div class="card-content white-text"> <div class="card-content white-text">
% if ($invalid eq 'csrf') { % if ($invalid eq 'csrf') {
<span class="card-title">Ungültiger CSRF-Token</span> <span class="card-title">Ungültiger CSRF-Token</span>

6
templates/_public_status_card.html.ep
View file

@ -1,5 +1,5 @@
% if ($journey->{checked_in}) { % if ($journey->{checked_in}) {
<div class="card white autorefresh"> <div class="card autorefresh">
<div class="card-content"> <div class="card-content">
<i class="material-icons small right sync-failed-marker grey-text" style="display: none;">sync_problem</i> <i class="material-icons small right sync-failed-marker grey-text" style="display: none;">sync_problem</i>
<span class="card-title"><%= $name %> ist unterwegs</span> <span class="card-title"><%= $name %> ist unterwegs</span>
@ -80,8 +80,8 @@
</div> </div>
% } % }
% else { % else {
<div class="card grey darken-4 autorefresh"> <div class="card autorefresh">
<div class="card-content white-text"> <div class="card-content">
<i class="material-icons small right sync-failed-marker grey-text" style="display: none;">sync_problem</i> <i class="material-icons small right sync-failed-marker grey-text" style="display: none;">sync_problem</i>
<span class="card-title"><%= $name %> ist gerade nicht eingecheckt</span> <span class="card-title"><%= $name %> ist gerade nicht eingecheckt</span>
<p> <p>

2
templates/account.html.ep
View file

@ -5,7 +5,7 @@
% if (my $success = flash('success')) { % if (my $success = flash('success')) {
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<div class="card green darken-4"> <div class="card success-color">
<div class="card-content white-text"> <div class="card-content white-text">
% if ($success eq 'mail') { % if ($success eq 'mail') {
<span class="card-title">Mail-Adresse geändert</span> <span class="card-title">Mail-Adresse geändert</span>

2
templates/change_mail.html.ep
View file

@ -5,7 +5,7 @@
% if (stash('success')) { % if (stash('success')) {
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<div class="card green darken-4"> <div class="card success-color">
<div class="card-content white-text"> <div class="card-content white-text">
<span class="card-title">Mail-Änderung wird durchgeführt</span> <span class="card-title">Mail-Änderung wird durchgeführt</span>
<p> <p>

4
templates/departures.html.ep
View file

@ -2,8 +2,8 @@
<div class="col s12"> <div class="col s12">
% my $status = $self->get_user_status; % my $status = $self->get_user_status;
% if ($status->{checked_in}) { % if ($status->{checked_in}) {
<div class="card grey darken-4"> <div class="card">
<div class="card-content white-text"> <div class="card-content">
<span class="card-title">Aktuell eingecheckt</span> <span class="card-title">Aktuell eingecheckt</span>
<p>In <%= $status->{train_type} %> <%= $status->{train_no} %> <p>In <%= $status->{train_type} %> <%= $status->{train_no} %>
ab <%= $status->{dep_name} %></p> ab <%= $status->{dep_name} %></p>

4
templates/edit_journey.html.ep
View file

@ -2,7 +2,7 @@
% if ($error and $error eq 'notfound') { % if ($error and $error eq 'notfound') {
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<div class="card red darken-4"> <div class="card caution-color">
<div class="card-content white-text"> <div class="card-content white-text">
<span class="card-title">Fehler</span> <span class="card-title">Fehler</span>
<p>Zugfahrt nicht gefunden.</p> <p>Zugfahrt nicht gefunden.</p>
@ -15,7 +15,7 @@
% if ($error) { % if ($error) {
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<div class="card red darken-4"> <div class="card caution-color">
<div class="card-content white-text"> <div class="card-content white-text">
<span class="card-title">Ungültige Eingabe</span> <span class="card-title">Ungültige Eingabe</span>
<p><%= $error %></p> <p><%= $error %></p>

2
templates/exception.html.ep
View file

@ -1,6 +1,6 @@
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<div class="card red darken-4"> <div class="card caution-color">
<div class="card-content white-text"> <div class="card-content white-text">
<span class="card-title">500 Internal Server Error</span> <span class="card-title">500 Internal Server Error</span>
<p>Das hätte nicht passieren sollen.</p> <p>Das hätte nicht passieren sollen.</p>

2
templates/journey.html.ep
View file

@ -1,7 +1,7 @@
% if ($error) { % if ($error) {
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<div class="card red darken-4"> <div class="card caution-color">
<div class="card-content white-text"> <div class="card-content white-text">
<span class="card-title">Fehler</span> <span class="card-title">Fehler</span>
<p>Zugfahrt nicht gefunden.</p> <p>Zugfahrt nicht gefunden.</p>

16
templates/layouts/default.html.ep
View file

@ -31,9 +31,23 @@
st.rel = 'stylesheet'; st.rel = 'stylesheet';
document.head.appendChild(st); document.head.appendChild(st);
} }
}
var otherTheme = {
'dark.min': 'light.min',
'light.min': 'dark.min',
};
var currentTheme = localStorage.getItem('theme');
if (!otherTheme.hasOwnProperty(currentTheme)) {
currentTheme = window.matchMedia('(prefers-color-scheme: dark').matches ? 'dark.min' : 'light.min';
}
addStyleSheet(currentTheme, 'theme');
function toggleTheme() {
currentTheme = otherTheme[currentTheme] || 'light.min';
localStorage.setItem('theme', currentTheme);
addStyleSheet(currentTheme, 'theme');
} }
</script> </script>
%= javascript "/static/${av}/js/theme.min.js"
<noscript> <noscript>
%= stylesheet "/static/${av}/css/light.min.css" %= stylesheet "/static/${av}/css/light.min.css"
</noscript> </noscript>

10
templates/login.html.ep
View file

@ -1,8 +1,8 @@
% if (my $user = current_user()) { % if (my $user = current_user()) {
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<div class="card grey darken-4"> <div class="card">
<div class="card-content white-text"> <div class="card-content">
<span class="card-title">Hallo, <%= $user->{name} %>!</span> <span class="card-title">Hallo, <%= $user->{name} %>!</span>
<p> <p>
Du bist bereits angemeldet. Falls du mehrere Accounts hast Du bist bereits angemeldet. Falls du mehrere Accounts hast
@ -27,8 +27,8 @@
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
% if ($from eq 'register') { % if ($from eq 'register') {
<div class="card grey darken-4"> <div class="card">
<div class="card-content white-text"> <div class="card-content">
<span class="card-title">Bitte warten</span> <span class="card-title">Bitte warten</span>
<p>Ein Verifizierungslink wurde an die von dir angegebene <p>Ein Verifizierungslink wurde an die von dir angegebene
Mail-Adresse geschickt. Sobald du diesen angeklickt hast, Mail-Adresse geschickt. Sobald du diesen angeklickt hast,
@ -37,7 +37,7 @@
</div> </div>
% } % }
% elsif ($from eq 'verification') { % elsif ($from eq 'verification') {
<div class="card green darken-4"> <div class="card success-color">
<div class="card-content white-text"> <div class="card-content white-text">
<span class="card-title">Account freigeschaltet</span> <span class="card-title">Account freigeschaltet</span>
<p>Du kannst dich nun anmelden.</p> <p>Du kannst dich nun anmelden.</p>

2
templates/not_found.html.ep
View file

@ -1,6 +1,6 @@
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<div class="card red darken-4"> <div class="card caution-color">
<div class="card-content white-text"> <div class="card-content white-text">
<span class="card-title">404 Not Found</span> <span class="card-title">404 Not Found</span>
<p>Diese Seite gibt es hier nicht.</p> <p>Diese Seite gibt es hier nicht.</p>

2
templates/recover_password.html.ep
View file

@ -5,7 +5,7 @@
% if (stash('success')) { % if (stash('success')) {
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<div class="card green darken-4"> <div class="card success-color">
<div class="card-content white-text"> <div class="card-content white-text">
<span class="card-title">Passwort-Reset wird durchgeführt</span> <span class="card-title">Passwort-Reset wird durchgeführt</span>
<p> <p>

4
templates/webhooks.html.ep
View file

@ -8,7 +8,7 @@
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
% if ($hook->{errored}) { % if ($hook->{errored}) {
<div class="card red darken-4"> <div class="card caution-color">
<div class="card-content white-text"> <div class="card-content white-text">
<span class="card-title">Web-Hook fehlerhaft</span> <span class="card-title">Web-Hook fehlerhaft</span>
<p><%= $hook->{output} %></p> <p><%= $hook->{output} %></p>
@ -16,7 +16,7 @@
</div> </div>
% } % }
% else { % else {
<div class="card green darken-4"> <div class="card success-color">
<div class="card-content white-text"> <div class="card-content white-text">
<span class="card-title">Web-Hook erfolgreich getestet</span> <span class="card-title">Web-Hook erfolgreich getestet</span>
<p><%= $hook->{output} %></p> <p><%= $hook->{output} %></p>