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

[TASK] refactor code and add base css components

Browse Source
This commit is contained in:
Marie Birner
2023-04-07 09:44:08 +02:00
parent 0ee9967d3a
commit 1490b191af
14 changed files with 165 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
frontend/scss/app.scss
View File

@@ -2,86 +2,8 @@
@tailwind components;
@tailwind utilities;
/* purgecss start ignore */
.sidebar {
position: fixed;
overflow-y: scroll;
top: 0;
background: white;
z-index: 2000;
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;
top: 0;
width: 375px;
z-index: 40000;
}
&.slide-in {
transition-duration: 75ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
&.from-right {
right: -24rem;
&.open {
right: 0;
}
}
&.from-left {
left: -24rem;
&.open {
left: 0;
}
}
&-overlay {
display: none;
&.show {
background-color: rgba(0, 0, 0, 0.2);
content: '';
display: block;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1025;
}
}
&-close {
border-radius: 100%;
width: 27.5px;
&:focus {
background: white !important;
}
}
&-footer {
position: fixed;
margin: 0 -8px -4px;
width: 374px;
bottom: 0;
}
&-header {
position: fixed;
width: 375px;
top: 0;
z-index: 1;
}
}
/* purgecss end ignore */
@import 'components/headlines';
@import 'components/sidebar';
@import 'components/btns';
@import 'components/links';
@import 'components/input';

23
frontend/scss/components/_btns.scss Normal file
View File

@@ -0,0 +1,23 @@
.btn {
@apply rounded-md px-3 py-2 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer text-center;
&-primary {
@apply bg-primary-600 hover:bg-primary-500 focus-visible:outline-primary-600;
}
&-dark {
@apply bg-primary-900 hover:bg-primary-950 focus-visible:outline-primary-950;
}
&-attention {
@apply bg-[#f43f5e] hover:bg-[#ff0000] focus-visible:outline-[#ff0000];
}
&-alert {
@apply bg-[#ff0000] hover:bg-[#ff0000] focus-visible:outline-[#ff0000];
}
&-fw {
@apply w-28;
}
}

3
frontend/scss/components/_headlines.scss Normal file
View File

@@ -0,0 +1,3 @@
.h1 {
@apply text-center text-3xl uppercase tracking-wide font-bold text-primary-900;
}

3
frontend/scss/components/_input.scss Normal file
View File

@@ -0,0 +1,3 @@
.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;
}

9
frontend/scss/components/_links.scss Normal file
View File

@@ -0,0 +1,9 @@
.link {
&-primary {
@apply text-primary-600 hover:text-primary-900 underline;
}
&-dark {
@apply text-primary-900 hover:text-primary-950 underline;
}
}

83
frontend/scss/components/_sidebar.scss Normal file
View File

@@ -0,0 +1,83 @@
/* purgecss start ignore */
.sidebar {
position: fixed;
overflow-y: scroll;
top: 0;
background: white;
z-index: 2000;
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;
top: 0;
width: 375px;
z-index: 40000;
}
&.slide-in {
transition-duration: 75ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
&.from-right {
right: -24rem;
&.open {
right: 0;
}
}
&.from-left {
left: -24rem;
&.open {
left: 0;
}
}
&-overlay {
display: none;
&.show {
background-color: rgba(0, 0, 0, 0.2);
content: '';
display: block;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1025;
}
}
&-close {
border-radius: 100%;
width: 27.5px;
&:focus {
background: white !important;
}
}
&-footer {
position: fixed;
margin: 0 -8px -4px;
width: 374px;
bottom: 0;
}
&-header {
position: fixed;
width: 375px;
top: 0;
z-index: 1;
}
}
/* purgecss end ignore */

2
templates/admin/user/index.html.tera
View File

@@ -4,7 +4,7 @@
{% block content %}
<div class="max-w-screen-lg w-full">
<h1 class="text-center text-3xl uppercase tracking-wide font-bold text-primary-900">Users</h1>
<h1 class="h1">Users</h1>
<form action="/admin/user/new" method="post" class="mt-4 bg-primary-900 rounded-md text-white px-3 pb-3 pt-2 sm:flex items-end justify-between">
<div class="w-full">

14
templates/auth/login.html.tera
View File

@@ -4,7 +4,7 @@
<div class="w-full max-w-md space-y-8">
<div>
<img class="mx-auto h-16 w-auto" src="https://rudernlinz.at/wp-content/uploads/2021/02/cropped-logo.png" alt="Your Company">
<h1 class="mt-6 text-center text-3xl uppercase tracking-wide font-bold text-primary-900">Ruderassistent</h1>
<h1 class="mt-6 h1">Ruderassistent</h1>
</div>
{% if flash %}
@@ -23,21 +23,17 @@
<input type="hidden" name="remember" value="true">
<div class="-space-y-px rounded-md shadow-sm">
<div>
<label for="name" class="sr-only">Name</label>
<input id="name" name="name" type="input" required class="relative block w-full rounded-t-md 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" placeholder="Name">
{{ macros::input(label='Name', name='name', type='input', required=true, class='rounded-t-md') }}
</div>
<div>
<label for="password" class="sr-only">Password</label>
<input id="password" name="password" type="password" autocomplete="current-password" class="relative block w-full rounded-b-md 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" placeholder="Passwort">
{{ macros::input(label='Passwort', name='password', type='password', class='rounded-b-md') }}
</div>
</div>
<div>
<button type="submit" class="group relative flex w-full justify-center rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">
<button type="submit" class="group relative flex w-full justify-center btn btn-primary">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
<svg class="h-5 w-5 text-primary-300 group-hover:text-primary-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
</svg>
{% include "includes/lock-icon" %}
</span>
Einloggen
</button>

14
templates/auth/set-pw.html.tera
View File

@@ -2,28 +2,24 @@
{% block content %}
<div class="w-full max-w-md space-y-8">
<h1 class="mt-6 text-center text-3xl uppercase tracking-wide font-bold text-primary-900">Passwort setzen</h1>
<h1 class="mt-6 h1">Passwort setzen</h1>
<form class="mt-8 space-y-6" action="/auth/set-pw" method="post">
<input type="hidden" name="remember" value="true">
<input type="hidden" name="userid" value="{{ userid }}" />
<div class="-space-y-px rounded-md shadow-sm">
<div>
<label for="password" class="sr-only">Passwort</label>
<input id="password" name="password" type="password" autocomplete="current-password" required class="relative block w-full rounded-t-md 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" placeholder="Passwort">
{{ macros::input(label='Passwort', name='password', type='password', required=true, class='rounded-t-md') }}
</div>
<div>
<label for="password_confirm" class="sr-only">Passwort confirm</label>
<input id="password_confirm" name="password_confirm" type="password" autocomplete="current-password" required class="relative block w-full rounded-b-md 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" placeholder="Passwort bestätigen">
{{ macros::input(label='Passwort bestätigen', name='password_confirm', type='password', required=true, class='rounded-b-md') }}
</div>
</div>
<div>
<button type="submit" class="group relative flex w-full justify-center rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">
<button type="submit" class="group relative flex w-full justify-center btn btn-primary">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
<svg class="h-5 w-5 text-primary-300 group-hover:text-primary-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
</svg>
{% include "includes/lock-icon" %}
</span>
Bestätigen
</button>

4
templates/includes/cox-icon.html.tera Normal file
View File

@@ -0,0 +1,4 @@
<svg width="16" height="16" fill="currentColor" class="inline-block mr-1 h-3 w-3" viewBox="0 0 16 16" style="margin-top: -0.2rem;">
<path
d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 344 B

6
templates/includes/delete-icon.html.tera Normal file
View File

@@ -0,0 +1,6 @@
<svg width="16" height="16" fill="currentColor" class="inline h-4 w-4" viewBox="0 0 16 16">
<path
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
<path fill-rule="evenodd"
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 551 B

3
templates/includes/lock-icon.html.tera Normal file
View File

@@ -0,0 +1,3 @@
<svg class="h-5 w-5 text-primary-300 group-hover:text-primary-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 330 B

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

@@ -24,9 +24,9 @@
<div class="h-8"></div>
{% endmacro header %}
{% macro input(label, name, type, required=false) %}
{% macro input(label, name, type, required=false, class='rounded-md') %}
<label for="{{ name }}" class="sr-only">{{ label }}</label>
<input id="{{ name }}" name="{{ name }}" type="{{ type }}" {% if required %} required {% endif %} class="relative block w-full rounded-md 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" placeholder="{{ label }}">
<input id="{{ name }}" name="{{ name }}" type="{{ type }}" {% if required %} required {% endif %} class="input {{ class }}" placeholder="{{ label }}">
{% endmacro input %}
{% macro checkbox(label, name, id='', checked=false) %}

42
templates/index.html.tera
View File

@@ -17,8 +17,7 @@
{% endif %}
{% endif %}
<h1 class="text-center text-3xl uppercase tracking-wide font-bold text-primary-900 sm:col-span-2 lg:col-span-3">
Ausfahrten</h1>
<h1 class="h1 sm:col-span-2 lg:col-span-3">Ausfahrten</h1>
{% for day in days %}
<div class="bg-white p-3 rounded-md flex justify-between flex-col">
@@ -34,7 +33,7 @@
<strong class="text-primary-900">{{ planned_event.planned_starting_time }} Uhr</strong> <small
class="text-gray-600">({{ planned_event.name }})</small><br />
<a href="#" data-sidebar="true" data-trigger="detailEvent{{ planned_event.id }}"
class="inline-block text-primary-600 hover:text-primary-900 underline mr-3">Details</a>
class="inline-block mr-3 link-primary">Details</a>
</div>
<div class="text-right grid gap-2">
{% set_global cur_user_participates = false %}
@@ -44,13 +43,11 @@
{% endif %}
{% endfor %}
{% if cur_user_participates %}
<a href="/remove/{{ planned_event.trip_details_id }}"
class="w-28 rounded-md bg-[#f43f5e] px-3 py-2 text-sm font-semibold text-white hover:bg-[#ff0000] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ff0000] cursor-pointer text-center">Abmelden</a>
<a href="/remove/{{ planned_event.trip_details_id }}" class="btn btn-attention btn-fw">Abmelden</a>
{% endif %}
{% if planned_event.max_people > planned_event.rower | length %}
{% if cur_user_participates == false %}
<a href="/join/{{ planned_event.trip_details_id }}"
class="w-28 rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer text-center">Mitrudern</a>
<a href="/join/{{ planned_event.trip_details_id }}" class="btn btn-primary btn-fw">Mitrudern</a>
{% endif %}
{% endif %}
@@ -63,21 +60,13 @@
{% endif %}
{% endfor %}
{% if cur_user_participates %}
<a href="/cox/remove/{{ planned_event.id }}"
class="w-28 block rounded-md bg-[#f43f5e] px-3 py-2 text-sm font-semibold text-white hover:bg-[#ff0000] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ff0000] cursor-pointer text-center">
<svg width="16" height="16" fill="currentColor" class="inline-block mr-1 h-3 w-3" viewBox="0 0 16 16">
<path
d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />
</svg>
<a href="/cox/remove/{{ planned_event.id }}" class="block btn btn-attention btn-fw">
{% include "includes/cox-icon" %}
Abmelden
</a>
{% else %}
<a href="/cox/join/{{ planned_event.id }}"
class="w-28 block rounded-md bg-primary-900 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-950 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-950 cursor-pointer text-center">
<svg width="16" height="16" fill="currentColor" class="inline-block mr-1 h-3 w-3" viewBox="0 0 16 16">
<path
d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />
</svg>
<a href="/cox/join/{{ planned_event.id }}" class="block btn btn-dark btn-fw">
{% include "includes/cox-icon" %}
Steuern
</a>
{% endif %}
@@ -138,13 +127,8 @@
{% if loggedin_user.is_admin %}
<a href="/admin/planned-event/{{ planned_event.id }}/delete"
class="inline-block rounded-md bg-[#ff0000] px-3 py-2 text-sm font-semibold text-white hover:bg-[#ff0000] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ff0000] cursor-pointer">
<svg width="16" height="16" fill="currentColor" class="inline h-4 w-4" viewBox="0 0 16 16">
<path
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
<path fill-rule="evenodd"
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
</svg>
class="inline-block btn btn-alert">
{% include "includes/delete-icon" %}
Termin löschen
</a>
{% endif %}
@@ -166,7 +150,7 @@
<strong class="text-primary-900">{{ trip.planned_starting_time }} Uhr</strong> <small
class="text-gray-600">({{ trip.cox_name }})</small><br />
<a href="#" data-sidebar="true" data-trigger="detailTrip{{ trip.trip_details_id }}"
class="inline-block text-primary-600 hover:text-primary-900 underline mr-3">Details</a>
class="inline-block link-primary mr-3">Details</a>
</div>
<div>
{% set_global cur_user_participates = false %}
@@ -227,7 +211,7 @@
<div>
{% if loggedin_user.is_admin %}
<a href="#" data-sidebar="true" data-trigger="plannedTrip{{ loop.index }}"
class="inline-block text-primary-900 hover:text-primary-950 underline mr-3">Event hinzufügen</a>
class="inline-block link-dark mr-3">Event hinzufügen</a>
<!-- START Sidebar plannedTrip -->
<div class="sidebar slide-in from-right" id="plannedTrip{{ loop.index }}" aria-modal="false">
@@ -263,7 +247,7 @@
{% if loggedin_user.is_cox%}
<a href="#" data-sidebar="true" data-trigger="trip{{ loop.index }}"
class="inline-block text-primary-600 hover:text-primary-900 underline">Ausfahrt hinzufügen</a>
class="inline-block link-primary">Ausfahrt hinzufügen</a>
<div class="sidebar slide-in from-right" id="trip{{ loop.index }}" aria-modal="false">
<div class="bg-primary-900 text-white px-2 py-3 flex justify-between sidebar-header">