From 5f494dc9e9eff6b22f6c8e94aa4235373b287d60 Mon Sep 17 00:00:00 2001 From: Marie Birner <mb@studiomitte.com> Date: Sat, 4 Nov 2023 00:19:46 +0100 Subject: [PATCH] [TASK] support dark mode first draft --- frontend/scss/components/_btns.scss | 4 ++-- frontend/scss/components/_headlines.scss | 4 ++-- frontend/scss/components/_input.scss | 22 ++++++++++------------ frontend/scss/components/_sidebar.scss | 2 -- templates/base.html.tera | 2 +- templates/dynamics/sidebar.html.tera | 2 +- templates/includes/footer.html.tera | 2 +- templates/includes/forms/log.html.tera | 12 ++++++------ templates/includes/macros.html.tera | 4 ++-- templates/index.html.tera | 10 +++++----- templates/kiosk.html.tera | 6 +++--- templates/log.html.tera | 6 +++--- 12 files changed, 36 insertions(+), 40 deletions(-) diff --git a/frontend/scss/components/_btns.scss b/frontend/scss/components/_btns.scss index 6856169..b7ffb37 100644 --- a/frontend/scss/components/_btns.scss +++ b/frontend/scss/components/_btns.scss @@ -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 { diff --git a/frontend/scss/components/_headlines.scss b/frontend/scss/components/_headlines.scss index 723d436..cd4fa44 100644 --- a/frontend/scss/components/_headlines.scss +++ b/frontend/scss/components/_headlines.scss @@ -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; } \ No newline at end of file diff --git a/frontend/scss/components/_input.scss b/frontend/scss/components/_input.scss index 33489c2..e62dc4a 100644 --- a/frontend/scss/components/_input.scss +++ b/frontend/scss/components/_input.scss @@ -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; diff --git a/frontend/scss/components/_sidebar.scss b/frontend/scss/components/_sidebar.scss index a9c12f3..619753f 100644 --- a/frontend/scss/components/_sidebar.scss +++ b/frontend/scss/components/_sidebar.scss @@ -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; diff --git a/templates/base.html.tera b/templates/base.html.tera index e7ae735..1dff697 100644 --- a/templates/base.html.tera +++ b/templates/base.html.tera @@ -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 %} diff --git a/templates/dynamics/sidebar.html.tera b/templates/dynamics/sidebar.html.tera index 59c7041..2f9e7f3 100644 --- a/templates/dynamics/sidebar.html.tera +++ b/templates/dynamics/sidebar.html.tera @@ -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"> diff --git a/templates/includes/footer.html.tera b/templates/includes/footer.html.tera index bac774b..a1a8522 100644 --- a/templates/includes/footer.html.tera +++ b/templates/includes/footer.html.tera @@ -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]">♥</span> diff --git a/templates/includes/forms/log.html.tera b/templates/includes/forms/log.html.tera index b4a1b72..d31c984 100644 --- a/templates/includes/forms/log.html.tera +++ b/templates/includes/forms/log.html.tera @@ -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") }} diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera index 7d53179..c38f59b 100644 --- a/templates/includes/macros.html.tera +++ b/templates/includes/macros.html.tera @@ -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 %} diff --git a/templates/index.html.tera b/templates/index.html.tera index 852030c..eae123f 100644 --- a/templates/index.html.tera +++ b/templates/index.html.tera @@ -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> diff --git a/templates/kiosk.html.tera b/templates/kiosk.html.tera index 35b8018..321e7ca 100644 --- a/templates/kiosk.html.tera +++ b/templates/kiosk.html.tera @@ -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> diff --git a/templates/log.html.tera b/templates/log.html.tera index 6126e50..dab1c77 100644 --- a/templates/log.html.tera +++ b/templates/log.html.tera @@ -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 %}