[TASK] add header

This commit is contained in:
Marie Birner 2023-04-06 09:30:43 +02:00
parent 37e54c13d5
commit d04dde15da
5 changed files with 137 additions and 130 deletions

View File

@ -1,7 +1,8 @@
{% import "includes/macros" as macros %}
{% extends "base" %}
{% block content %}
<div class="max-w-screen-lg w-full grid gap-4">
<h1 class="text-center text-3xl uppercase tracking-wide font-bold text-primary-900">Users</h1>

View File

@ -1,29 +1,24 @@
{% extends "base" %}
{% block content %}
{% if flash %}
{% if flash.0 == "success" %}
<div class="row">
<div class="one-column p-1 text-white bg-green mb-3 light text-center">
{{ flash.1 }}
</div>
</div>
{% endif %}
{% if flash.0 == "error" %}
<div class="row">
<div class="one-column p-1 text-white bg-red mb-3 bold text-center">
{{ flash.1 }}
</div>
</div>
{% endif %}
{% endif %}
<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>
</div>
{% if flash %}
{% if flash.0 == "success" %}
<div class="bg-[#4ade80] text-white px-3 py-1 rounded-md text-center">
{{ flash.1 }}
</div>
{% endif %}
{% if flash.0 == "error" %}
<div class="bg-[#f43f5e] text-white px-3 py-1 rounded-md text-center">
{{ flash.1 }}
</div>
{% endif %}
{% endif %}
<form class="mt-8 space-y-6" method="post" action="/auth">
<input type="hidden" name="remember" value="true">
<div class="-space-y-px rounded-md shadow-sm">
@ -49,6 +44,4 @@
</div>
</form>
</div>
{% endblock content %}

View File

@ -1,3 +1,5 @@
{% import "includes/macros" as macros %}
<!DOCTYPE html>
<html lang="de">
<head>
@ -5,9 +7,12 @@
<link rel="stylesheet" href="/public/main.css">
</head>
<body class="bg-gray-100">
{%if loggedin_user %}
{{ macros::header(loggedin_user=loggedin_user) }}
{%endif%}
<div class="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
{% block content %}
{% endblock content %}
{% block content %}{% endblock content %}
</div>
</body>
</html>

View File

@ -0,0 +1,23 @@
{% macro header(loggedin_user) %}
<header class="bg-primary-900 text-white flex justify-center p-3 fixed w-full">
<div class="max-w-screen-lg w-full flex justify-between">
<div>
Hallo {{ loggedin_user.name }}
</div>
<div>
{% if loggedin_user.is_admin %}
<a href="/admin/user" class="rounded-md bg-primary-600 mx-1 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">
<svg class="inline h-4" width="16" height="16" fill="currentColor" class="bi bi-person-lines-fill" viewBox="0 0 16 16"> <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"/> </svg>
<span class="sr-only">Userverwaltung</span>
</a>
{% endif %}
<a href="/auth/logout" class="rounded-md bg-primary-600 ml-1 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">
<svg class="inline h-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
<span class="sr-only">Ausloggen</span>
</a>
</div>
</div>
</header>
<div class="h-8"></div>
{% endmacro input %}

View File

@ -1,37 +1,22 @@
{% extends "base" %}
{% block content %}
<div class="max-w-screen-lg w-full grid gap-4">
{% if loggedin_user %}
Hi {{ loggedin_user.name }}. <a href="/auth/logout">LOGOUT</a>
{% if loggedin_user.is_admin %}
<a href="/admin/user">USER</a>
{% endif %}
{% endif %}
{% if flash %}
{% if flash.0 == "success" %}
<div class="row">
<div class="one-column p-1 text-white bg-green mb-3 light text-center">
<div class="bg-[#4ade80] text-white px-3 py-1 rounded-md text-center">
{{ flash.1 }}
</div>
</div>
{% endif %}
{% if flash.0 == "error" %}
<div class="row">
<div class="one-column p-1 text-white bg-red mb-3 bold text-center">
<div class="bg-[#f43f5e] text-white px-3 py-1 rounded-md text-center">
{{ flash.1 }}
</div>
</div>
{% endif %}
{% endif %}
<h1 class="text-center text-3xl uppercase tracking-wide font-bold text-primary-900">Ausfahrten</h1>
{% for day in days %}
<div class="bg-white p-3 rounded-md flex items-end md:items-center justify-between">
<h2>{{ day.day }}</h2>