Add dark mode (only available with prefers-color-scheme currently)
This commit is contained in:
marudor
parent
b85db3a10d
commit
5c2388d3a2
18 changed files with 7359 additions and 14 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -64,3 +64,6 @@ tags
|
|||
[._]*.un~
|
||||
|
||||
# End of https://www.gitignore.io/api/vim,perl
|
||||
|
||||
### theme stuff ###
|
||||
sass/node_modules
|
||||
|
|
|
|||
12
public/static/css/dark.min.css
vendored
Normal file
12
public/static/css/dark.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
12
public/static/css/light.min.css
vendored
Normal file
12
public/static/css/light.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
7
sass/.prettierrc
Normal file
7
sass/.prettierrc
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"singleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"printWidth": 80,
|
||||
"semi": true,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
7163
sass/package-lock.json
generated
Normal file
7163
sass/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
32
sass/package.json
Normal file
32
sass/package.json
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "travelynx",
|
||||
"version": "1.0.0",
|
||||
"description": "travelynx - Railway Travel Logger",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/derf/travelynx.git"
|
||||
},
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/derf/travelynx/issues"
|
||||
},
|
||||
"homepage": "https://github.com/derf/travelynx#readme",
|
||||
"devDependencies": {
|
||||
"css-loader": "^2.1.1",
|
||||
"cssnano": "^4.1.10",
|
||||
"materialize-css": "^1.0.0-rc.2",
|
||||
"mini-css-extract-plugin": "^0.6.0",
|
||||
"node-sass": "^4.12.0",
|
||||
"postcss": "^7.0.16",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"postcss-preset-env": "^6.6.0",
|
||||
"postcss-scss": "^2.0.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"webpack": "^4.31.0",
|
||||
"webpack-cli": "^3.3.2"
|
||||
}
|
||||
}
|
||||
0
sass/src/common/_variables.scss
Normal file
0
sass/src/common/_variables.scss
Normal file
18
sass/src/common/index.scss
Normal file
18
sass/src/common/index.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
$customColors: (
|
||||
'caution': $error-color,
|
||||
'info': $info-color,
|
||||
'contrast': $off-black,
|
||||
);
|
||||
|
||||
@each $name, $color in $customColors {
|
||||
.#{$name}-color {
|
||||
background-color: $color;
|
||||
}
|
||||
.#{$name}-color-text {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
18
sass/src/dark/_variables.scss
Normal file
18
sass/src/dark/_variables.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
$bg-color: color('grey', 'darken-4') !default;
|
||||
$info-color: color('yellow', 'darken-4');
|
||||
|
||||
$off-black: color('shades', 'white');
|
||||
|
||||
$primary-color: color('materialize-red', 'darken-2');
|
||||
$secondary-color: color('teal', 'darken-2');
|
||||
$link-color: color('light-blue', 'darken-1');
|
||||
$collection-link-color: color('teal', 'darken-4');
|
||||
$success-color: color('green', 'darken-2');
|
||||
$error-color: color('red', 'darken-2');
|
||||
$input-border-color: $off-black;
|
||||
$radio-empty-color: $off-black !default;
|
||||
|
||||
$table-striped-color: color('grey', 'darken-3');
|
||||
$button-flat-color: $off-black;
|
||||
$card-bg-color: color('grey', 'darken-2');
|
||||
$card-link-color: $link-color;
|
||||
8
sass/src/dark/index.scss
Normal file
8
sass/src/dark/index.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
@import '../../node_modules/materialize-css/sass/components/color-variables';
|
||||
@import 'variables.scss';
|
||||
@import '../../node_modules/materialize-css/sass/materialize.scss';
|
||||
@import '../common/index.scss';
|
||||
|
||||
html {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
5
sass/src/light/_variables.scss
Normal file
5
sass/src/light/_variables.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
$bg-color: #fff;
|
||||
$info-color: color('yellow', 'lighten-4');
|
||||
$link-color: color('light-blue', 'darken-1');
|
||||
$card-link-color: $link-color;
|
||||
$card-bg-color: color('blue-grey', 'lighten-5');
|
||||
4
sass/src/light/index.scss
Normal file
4
sass/src/light/index.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@import '../../node_modules/materialize-css/sass/components/color-variables';
|
||||
@import 'variables.scss';
|
||||
@import '../../node_modules/materialize-css/sass/materialize.scss';
|
||||
@import '../common/index.scss';
|
||||
47
sass/webpack.config.js
Normal file
47
sass/webpack.config.js
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const path = require('path');
|
||||
console.log(path.resolve('../public/static/css/'));
|
||||
|
||||
module.exports = {
|
||||
mode: 'production',
|
||||
entry: {
|
||||
light: './src/light/index.scss',
|
||||
dark: './src/dark/index.scss',
|
||||
},
|
||||
output: {
|
||||
path: path.resolve('../public/static/css/'),
|
||||
},
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].min.css',
|
||||
chunkFilename: '[id].css',
|
||||
}),
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.s?css$/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
ident: 'postcss',
|
||||
plugins: loader => [
|
||||
require('postcss-preset-env')(),
|
||||
require('cssnano')(),
|
||||
],
|
||||
},
|
||||
},
|
||||
'sass-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
<button class="btn waves-effect waves-light" type="submit" name="action" value="generate">
|
||||
Generieren
|
||||
</button>
|
||||
<button class="btn waves-effect waves-light red" type="submit" name="action" value="delete">
|
||||
<button class="btn waves-effect waves-light caution-color" type="submit" name="action" value="delete">
|
||||
Löschen
|
||||
</button>
|
||||
%= end
|
||||
|
|
@ -213,7 +213,7 @@
|
|||
</div>
|
||||
<div class="input-field col s12 m12 l4 center-align">
|
||||
%= csrf_field
|
||||
<button class="btn waves-effect waves-light red" type="submit" name="action" value="delete">
|
||||
<button class="btn waves-effect waves-light caution-color" type="submit" name="action" value="delete">
|
||||
Account löschen
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
% if (not get_oldest_journey_ts()) {
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card yellow lighten-4">
|
||||
<div class="card info-color">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Hinweis</span>
|
||||
<p>travelynx ist darauf ausgelegt, über die Hauptseite in
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
% if ($error) {
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card red darken-4">
|
||||
<div class="card caution-color">
|
||||
<div class="card-content white-text">
|
||||
<span class="card-title">Ungültige Eingabe</span>
|
||||
<p><%= $error %></p>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
% if (stash('error')) {
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card red darken-4">
|
||||
<div class="card caution-color">
|
||||
<div class="card-content white-text">
|
||||
<span class="card-title">Backend-Fehler</span>
|
||||
<p><%= stash('error') %></p>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
%= include '_checked_in', journey => $status;
|
||||
% }
|
||||
% elsif ($status->{cancelled}) {
|
||||
<div class="card yellow lighten-4">
|
||||
<div class="card info-color">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Zugausfall dokumentieren</span>
|
||||
<p>Prinzipiell wärest du nun eingecheckt in
|
||||
|
|
@ -47,20 +47,20 @@
|
|||
</div>
|
||||
% }
|
||||
% else {
|
||||
<div class="card grey darken-4">
|
||||
<div class="card-content white-text">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Hallo, <%= current_user()->{name} %>!</span>
|
||||
<p>Du bist gerade nicht eingecheckt.</p>
|
||||
<div class="geolocation">
|
||||
<button class="btn waves-effect waves-light btn-flat white">Stationen in der Umgebung abfragen</button>
|
||||
<button class="btn waves-effect waves-light btn-flat">Stationen in der Umgebung abfragen</button>
|
||||
</div>
|
||||
%= form_for 'list_departures' => begin
|
||||
<div class="input-field">
|
||||
%= text_field 'station', id => 'station', class => 'autocomplete white-text', required => undef
|
||||
%= text_field 'station', id => 'station', class => 'autocomplete contrast-color-text', required => undef
|
||||
<label for="station">Manuelle Eingabe (Name oder DS100)</label>
|
||||
</div>
|
||||
<div class="center-align">
|
||||
<button class="btn waves-effect waves-light btn-flat white" type="submit" name="action" value="departures">
|
||||
<button class="btn waves-effect waves-light btn-flat" type="submit" name="action" value="departures">
|
||||
<i class="material-icons left">send</i>
|
||||
Abfahrten
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,23 @@
|
|||
<link rel="apple-touch-icon" sizes="152x152" href="/static/<%= $av %>/icons/icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="167x167" href="/static/<%= $av %>/icons/icon-167x167.png">
|
||||
<link rel="manifest" href="/static/<%= $av %>/manifest.json">
|
||||
%= stylesheet "/static/${av}/css/materialize.min.css"
|
||||
<script>
|
||||
function addStyleSheet(path) {
|
||||
var st = document.createElement('link');
|
||||
st.href = path;
|
||||
st.rel = 'stylesheet';
|
||||
document.head.appendChild(st);
|
||||
}
|
||||
|
||||
if (window.matchMedia('(prefers-color-scheme: dark').matches) {
|
||||
addStyleSheet("/static/<%= $av %>/css/dark.min.css");
|
||||
} else {
|
||||
addStyleSheet("/static/<%= $av %>/css/light.min.css");
|
||||
}
|
||||
</script>
|
||||
<noscript>
|
||||
%= stylesheet "/static/${av}/css/light.min.css"
|
||||
</noscript>
|
||||
%= stylesheet "/static/${av}/css/material-icons.css"
|
||||
%= stylesheet "/static/${av}/css/local.css"
|
||||
%= javascript "/static/${av}/js/jquery-3.4.1.min.js"
|
||||
|
|
@ -66,7 +82,7 @@
|
|||
% if (app->mode eq 'development') {
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col s12 red darken-4 white-text">
|
||||
<div class="col s12 caution-color white-text">
|
||||
Development Mode – Datenbank: <%= app->config->{db}->{database} %>
|
||||
@ <%= app->config->{db}->{host} %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="input-field col s12">
|
||||
<label>
|
||||
%= check_box public_status => 1
|
||||
<span class="black-text">Aktueller Status</span>
|
||||
<span>Aktueller Status</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue