[TASK] support dark mode first draft

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

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 %}

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">

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>

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") }}

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 %}

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>

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>

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 %}