Ruderverein-Donau-Linz/rowt
1
1
Fork 0
Code Issues 30 Pull Requests Actions Packages Projects Wiki Activity

[TASK] support dark mode first draft

Browse Source
This commit is contained in:
Marie Birner 2023-11-04 00:19:46 +01:00
parent 5ac3ae348c
commit 5f494dc9e9
12 changed files with 36 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/scss/components/_btns.scss
View File

@ -6,11 +6,11 @@
}
&-dark {
@apply bg-primary-900 hover:bg-primary-950 focus-visible:outline-primary-950;
@apply bg-primary-900 hover:bg-primary-950 dark:bg-primary-950 focus-visible:outline-primary-950;
}
&-gray {
@apply bg-gray-400 hover:bg-gray-500 focus-visible:outline-primary-500;
@apply bg-gray-400 hover:bg-gray-500 dark:bg-primary-600 focus-visible:outline-primary-500;
}
&-attention {

4
frontend/scss/components/_headlines.scss
View File

@ -1,7 +1,7 @@
.h1 {
@apply text-center text-3xl uppercase tracking-wide font-bold text-primary-900;
@apply text-center text-3xl uppercase tracking-wide font-bold text-primary-900 dark:text-white;
}
.h2 {
@apply font-bold uppercase tracking-wide text-center rounded-t-md text-primary-950 bg-gray-200 bg-opacity-80 text-lg px-3 py-3;
@apply font-bold uppercase tracking-wide text-center rounded-t-md text-primary-950 dark:text-white bg-gray-200 dark:bg-primary-950 bg-opacity-80 text-lg px-3 py-3;
}

22
frontend/scss/components/_input.scss
View File

@ -1,5 +1,5 @@
.input {
@apply relative block w-full border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
@apply relative block w-full bg-white dark:bg-black border-0 py-1.5 px-2 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-black placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
}
select {
@ -7,7 +7,7 @@ select {
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 16px 12px;
background-color: white;
@apply bg-white dark:bg-black;
-webkit-appearance: none;
appearance: none;
}
@ -32,7 +32,7 @@ select {
}
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
background-color: #eaeaea;
@apply bg-white dark:bg-black;
cursor: not-allowed;
-webkit-user-select: none;
user-select: none;
@ -52,8 +52,7 @@ select {
display: block;
width: 100%;
padding: 10px;
@apply border-0 ring-1 ring-inset ring-gray-300;
background-color: #fff;
@apply bg-white dark:bg-black border-0 ring-1 ring-inset ring-gray-300 dark:ring-primary-600;
margin: 0;
}
.choices[data-type*=select-one] .choices__button {
@ -93,7 +92,7 @@ select {
pointer-events: none;
}
.choices[data-type*=select-one].is-open::after {
@apply border-0 ring-1 ring-inset ring-gray-300;
@apply border-0 ring-1 ring-inset ring-gray-300 dark:ring-primary-600;
margin-top: -7.5px;
}
.choices[data-type*=select-one][dir=rtl]::after {
@ -135,10 +134,10 @@ select {
}
.choices__inner {
@apply input rounded-md bg-white;
@apply input rounded-md bg-white dark:bg-black;
}
.is-focused .choices__inner, .is-open .choices__inner {
@apply border-0 ring-1 ring-inset ring-gray-300;
@apply border-0 ring-1 ring-inset ring-gray-300 dark:ring-primary-600;
}
.is-open .choices__inner {
border-radius: 0;
@ -190,7 +189,7 @@ select {
@apply bg-primary-900;
}
.is-disabled .choices__list--multiple .choices__item {
@apply bg-gray-600;
@apply bg-gray-600 dark:bg-primary-900;
}
.choices__list--dropdown, .choices__list[aria-expanded] {
@ -198,8 +197,7 @@ select {
z-index: 1;
position: absolute;
width: 100%;
background-color: #fff;
@apply border;
@apply border bg-white dark:bg-black dark:text-white;
top: 100%;
margin-top: -1px;
border-bottom-left-radius: 2.5px;
@ -212,7 +210,7 @@ select {
visibility: visible;
}
.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
@apply border-0 ring-1 ring-inset ring-gray-300;
@apply border-0 ring-1 ring-inset ring-gray-300 dark:ring-primary-600;
}
.is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
top: auto;

2
frontend/scss/components/_sidebar.scss
View File

@ -3,14 +3,12 @@
position: fixed;
overflow-y: scroll;
top: 0;
background: white;
z-index: 2000;
width: 0;
max-width: 0;
box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
&.open {
background-color: rgba(255, 255, 255, 100%);
display: block;
height: 100vh;
right: 0;

2
templates/base.html.tera
View File

@ -9,7 +9,7 @@
<link rel="icon" type="image/x-icon" href="/public/images/favicon.ico">
<title>Ruderassistent - ASKÖ Ruderverein Donau Linz</title>
</head>
<body class="bg-gray-100">
<body class="bg-gray-100 dark:bg-black">
{% if loggedin_user %}
{{ macros::header(loggedin_user=loggedin_user) }}
{% endif %}

2
templates/dynamics/sidebar.html.tera
View File

@ -1,4 +1,4 @@
<div class="sidebar slide-in from-right" id="sidebar" aria-modal="false">
<div class="sidebar slide-in from-right bg-white dark:bg-primary-950 dark:text-white" id="sidebar" aria-modal="false">
<div class="bg-primary-900 text-white px-2 py-3 flex justify-between sidebar-header">
<div>
<span class="ps-1 header-js">

2
templates/includes/footer.html.tera
View File

@ -1,4 +1,4 @@
<footer class="bg-primary-950 text-white w-full flex justify-center p-3">
<footer class="bg-primary-950 dark:bg-primary-900 text-white w-full flex justify-center p-3">
<div class="max-w-screen-xl w-full flex justify-between">
<div>
<span class="text-[#ff0000]">&hearts;</span>

12
templates/includes/forms/log.html.tera
View File

@ -32,7 +32,7 @@
{{ log::boat_select(only_ones=only_ones) }}
{% if not only_ones %}
<div class="col-span-4 md:col-span-1">
<div class="text-sm text-gray-600">Bootssteuerung</div>
<div class="text-sm text-gray-600 dark:text-gray-100">Bootssteuerung</div>
<div class="h-10 flex items-center">
{{ macros::checkbox(label='handgesteuert', name='shipmaster_only_steering', disabled=true) }}
</div>
@ -46,7 +46,7 @@
{{ macros::input(label='Abfahrtszeit', name='departure', type='datetime-local', required=true, wrapper_class='col-span-2') }}
{{ macros::input(label='Ankunftszeit', name='arrival', type='datetime-local', wrapper_class='col-span-2') }}
<div class="relative col-span-2">
<label for="destination" class="text-sm text-gray-600">Ziel</label>
<label for="destination" class="text-sm text-gray-600 dark:text-gray-100">Ziel</label>
<input class="input rounded-md set-distance-js" type="search" list="destinations" placeholder="Destination" id="destination" name="destination" value="" data-relation="distance_in_km"/>
<datalist id="destinations">
{% for distance in distances %}<option value="{{ distance.0 }}" distance="{{ distance.1 }}" />
@ -55,7 +55,7 @@
</div>
<div class="relative col-span-2">
{{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km" , type="number", min=0, value='', class="rounded-md") }}
<span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white border-0 text-gray-600 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
<span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white dark:bg-primary-950 border-0 text-gray-600 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-primary-950 rounded-br-md rounded-tr-md">km</span>
</div>
{{ macros::input(label="Kommentar", name="comments", type="text", wrapper_class="col-span-4") }}
{{ macros::select(label="Typ", data=logtypes, name='logtype', default="Normal", wrapper_class="col-span-4") }}
@ -76,7 +76,7 @@
{% macro rower_select(id, selected, amount_seats='', class='', init='false', cox_on_boat='', steering_person_id='') %}
{#{% if not amount_seats or amount_seats > 1 %}#}
<div class="{{ class }}">
<label for="{{id}}" class="text-sm text-gray-600 ">Ruderer (inkl. Schiffsführer und Steuerperson)</label>
<label for="{{id}}" class="text-sm text-gray-600 dark:text-gray-100">Ruderer (inkl. Schiffsführer und Steuerperson)</label>
<select style="width: 100%;" multiple name="rowers[]" id="{{id}}" class="w-full" data-seats="{{amount_seats}}" data-init={{init}}>
{% for user in users %}
{% set_global sel = false %}
@ -216,14 +216,14 @@
{{ macros::input(label='Ankunftszeit', name='arrival', type='datetime-local', required=true, class="change-id-js rounded-md current-date-time") }}
<div>
<label for="destination" class="text-sm text-gray-600">Ziel</label>
<label for="destination" class="text-sm text-gray-600 dark:text-gray-100">Ziel</label>
<input class="input rounded-md set-distance-js change-id-js" type="search" list="destinations" placeholder="Destination" required="required" id="destination{{ log.id }}" name="destination" value="{{log.destination}}" data-relation="distance_in_km{{log.id}}"/>
</div>
<div class="relative">
{{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km" ~ log.id , type="number", min=0, value=log.distance_in_km, required=true, class="rounded-md change-id-js") }}
<span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white border-0 text-gray-600 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
<span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white dark:bg-primary-950 border-0 text-gray-600 dark:text-gray-100 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
</div>
{{ macros::input(label="Kommentar", name="comments", id="comments" ~ log.id, type="text", value=log.comments, class="rounded-md change-id-js") }}

4
templates/includes/macros.html.tera
View File

@ -128,7 +128,7 @@
{% macro input(label, name, type, required=false, class='rounded-md', value='', min='', hide_label=false, id='', autofocus=false, wrapper_class='') %}
<div class="{{wrapper_class}}">
<label for="{{ name }}" class="{% if hide_label %} sr-only {% else %} text-sm text-gray-600 {% endif %}">{{ label }}</label>
<label for="{{ name }}" class="{% if hide_label %} sr-only {% else %} text-sm text-gray-600 dark:text-gray-100 {% endif %}">{{ label }}</label>
<input {% if id %} id="{{ id }}" {% else %} id="{{ name }}" {% endif %} name="{{ name }}" type="{{ type }}" {% if required %} required {% endif %} value="{{ value }}" class="input {{ class }}" placeholder="{% if hide_label %}{{ label }}{% endif %}" {% if min is defined %} min="{{ min }}" {% endif %} {% if autofocus %} autofocus {% endif %}>
</div>
{% endmacro input %}
@ -142,7 +142,7 @@
{% macro select(label, data, name='trip_type', default='', id='', selected_id='', display='', extras='', class='', wrapper_class='', required=false, show_seats=false) %}
<div class="{{wrapper_class}}">
<label for="{{ name }}" class="text-sm text-gray-600">{{ label }}</label>
<label for="{{ name }}" class="text-sm text-gray-600 dark:text-gray-100">{{ label }}</label>
{% if display == '' %}
{% set display = ["name"] %}
{% endif %}

10
templates/index.html.tera
View File

@ -23,10 +23,10 @@
{% endfor %}
{% endif %}
<div class="bg-white rounded-md flex justify-between flex-col shadow reset-js" style="min-height: 10rem;" data-trips="{{ amount_trips }}" data-month="{{ day.day| date(format='%m') }}" data-coxneeded="{{ day_cox_needed }}">
<div class="bg-white dark:bg-primary-900 rounded-md flex justify-between flex-col shadow reset-js" style="min-height: 10rem;" data-trips="{{ amount_trips }}" data-month="{{ day.day| date(format='%m') }}" data-coxneeded="{{ day_cox_needed }}">
<div>
<h2 class="font-bold uppercase tracking-wide text-center rounded-t-md {% if day.is_pinned %} text-white bg-primary-950 {% else %} text-primary-950 bg-gray-200 bg-opacity-80 {% endif %} text-lg px-3 py-3 ">{{ day.day| date(format="%d.%m.%Y") }}
<small class="inline-block ml-1 text-xs {% if day.is_pinned %} text-gray-200 {% else %} text-gray-500 {% endif %}">{{ day.day | date(format="%A", locale="de_AT") }}</small>
<h2 class="font-bold uppercase tracking-wide text-center rounded-t-md {% if day.is_pinned %} text-white bg-primary-950 {% else %} text-primary-950 dark:text-white bg-gray-200 dark:bg-primary-950 bg-opacity-80 {% endif %} text-lg px-3 py-3 ">{{ day.day| date(format="%d.%m.%Y") }}
<small class="inline-block ml-1 text-xs {% if day.is_pinned %} text-gray-200 {% else %} text-gray-500 dark:text-gray-100 {% endif %}">{{ day.day | date(format="%A", locale="de_AT") }}</small>
</h2>
{% if day.planned_events | length > 0 or day.trips | length > 0 %}
@ -269,7 +269,7 @@
{% if loggedin_user.is_admin or loggedin_user.is_cox %}
<div class="grid {% if loggedin_user.is_admin %} grid-cols-2 {% endif %} text-center">
{% if loggedin_user.is_admin %}
<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>Event</strong> am {{ day.day| date(format='%d.%m.%Y') }} erstellen" data-day="{{ day.day }}" data-body="#addEventForm" class="relative inline-block w-full bg-primary-900 hover:bg-primary-950 focus:bg-primary-950 text-white py-2 rounded-bl-md text-sm font-semibold">
<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>Event</strong> am {{ day.day| date(format='%d.%m.%Y') }} erstellen" data-day="{{ day.day }}" data-body="#addEventForm" class="relative inline-block w-full bg-primary-900 hover:bg-primary-950 focus:bg-primary-950 dark:bg-primary-950 text-white py-2 rounded-bl-md text-sm font-semibold">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
{% include "includes/plus-icon" %}
</span>
@ -278,7 +278,7 @@
{% endif %}
{% if loggedin_user.is_cox%}
<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>Ausfahrt</strong> am {{ day.day| date(format='%d.%m.%Y') }} erstellen" data-day="{{ day.day }}" data-body="#sidebarForm" class="relative inline-block w-full py-2 text-primary-900 hover:text-primary-950 focus:text-primary-950 text-sm font-semibold bg-gray-100 hover:bg-gray-200 focus:bg-gray-200 {% if loggedin_user.is_admin %} rounded-br-md {% else %} rounded-b-md {% endif %}">
<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>Ausfahrt</strong> am {{ day.day| date(format='%d.%m.%Y') }} erstellen" data-day="{{ day.day }}" data-body="#sidebarForm" class="relative inline-block w-full py-2 text-primary-900 hover:text-primary-950 dark:bg-primary-600 dark:text-white dark:hover:bg-primary-500 dark:hover:text-white focus:text-primary-950 text-sm font-semibold bg-gray-100 hover:bg-gray-200 focus:bg-gray-200 {% if loggedin_user.is_admin %} rounded-br-md {% else %} rounded-b-md {% endif %}">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
{% include "includes/plus-icon" %}
</span>

6
templates/kiosk.html.tera
View File

@ -15,20 +15,20 @@
{% endif %}
<div class="w-full grid md:grid-cols-5 gap-3 mt-5">
<div class="bg-white rounded-md hidden md:block shadow">
<div class="bg-white dark:bg-primary-900 rounded-md hidden md:block shadow">
<h2 class="h2">Boote</h2>
<div>
{{ log::show_boats(only_ones=false) }}
</div>
</div>
<div class="md:col-span-3 bg-white rounded-md shadow">
<div class="md:col-span-3 bg-white dark:bg-primary-900 rounded-md shadow">
<h2 class="h2">Neue Ausfahrt</h2>
<div class="p-3">
{{ log::new(only_ones=false, shipmaster=-1) }}
</div>
</div>
<div class="bg-white rounded-md shadow">
<div class="bg-white dark:bg-primary-900 rounded-md shadow">
<h2 class="h2">Am Wasser</h2>
<div>

6
templates/log.html.tera
View File

@ -14,20 +14,20 @@
{% endif %}
<div class="w-full grid md:grid-cols-5 gap-3 mt-5">
<div class="bg-white rounded-md hidden md:block shadow">
<div class="bg-white dark:bg-primary-900 rounded-md hidden md:block shadow">
<h2 class="h2">Boote</h2>
<div>
{{ log::show_boats(only_ones=false) }}
</div>
</div>
<div class="md:col-span-3 bg-white rounded-md shadow">
<div class="md:col-span-3 bg-white dark:bg-primary-900 rounded-md shadow">
<h2 class="h2">Neue Ausfahrt</h2>
<div class="p-3">
{{ log::new(only_ones=loggedin_user.is_cox==false, shipmaster=loggedin_user.id) }}
</div>
</div>
<div class="bg-white rounded-md shadow">
<div class="bg-white dark:bg-primary-900 rounded-md shadow">
<h2 class="h2">Am Wasser</h2>
{% if on_water | length > 0 %}