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

[TASK] change card layout

Browse Source
This commit is contained in:
Marie Birner 2023-04-08 07:29:39 +02:00
parent dd87ef968a
commit 41ee9f05d6
4 changed files with 42 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,4 +6,8 @@
&-dark {
@apply text-primary-900 hover:text-primary-950 underline;
}
&-white {
@apply text-white hover:text-primary-100 underline;
}
}

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

@ -1,5 +1,5 @@
{% macro header(loggedin_user) %}
<header class="bg-primary-900 text-white flex justify-center p-3 fixed w-full">
<header class="bg-primary-900 text-white flex justify-center p-3 fixed w-full z-10">
<div class="max-w-screen-xl w-full flex justify-between">
<div>
<a href="/">

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

@ -0,0 +1,3 @@
<svg class="inline h-5 w-5" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 236 B

26
templates/index.html.tera
View File

@ -11,7 +11,7 @@
<h1 class="h1 sm:col-span-2 lg:col-span-3">Ausfahrten</h1>
{% if loggedin_user.is_cox %}
<div class="sm:col-span-2 lg:col-span-3 bg-primary-100 rounded-md p-3 grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
<div class="sm:col-span-2 lg:col-span-3 grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
<button type="button" title="Toggle View" class="group btn btn-primary" id="filterdays-js" aria-pressed="false">
{% include "includes/funnel-icon" %}
Tage mit Ausfahrten
@ -29,9 +29,11 @@
{% for day in days %}
{% set amount_trips = day.planned_events | length + day.trips | length %}
<div class="bg-white p-3 rounded-md flex justify-between flex-col" data-trips="{{ amount_trips }}" data-month="{{ day.day| date(format='%m') }}">
<div class="bg-white p-3 rounded-md flex justify-between flex-col shadow" style="min-height: 10rem;" data-trips="{{ amount_trips }}" data-month="{{ day.day| date(format='%m') }}">
<div>
<h2 class="text-lg text-primary-950 font-bold uppercase tracking-wide">{{ day.day| date(format="%d.%m.%Y") }} <small class="inline-block ml-1">{{ day.day | date(format="%A", locale="de_AT") }}</small></h2>
<h2 class="font-bold uppercase tracking-wide text-center text-primary-950 text-lg">{{ day.day| date(format="%d.%m.%Y") }}
<small class="inline-block ml-1 text-xs text-gray-400">{{ day.day | date(format="%A", locale="de_AT") }}</small>
</h2>
{% if day.planned_events | length > 0 %}
<div class="grid grid-cols-1 gap-3 divide-y mb-3">
@ -213,13 +215,19 @@
{% endif %}
</div>
<div>
{% if loggedin_user.is_admin or loggedin_user.is_cox %}
<div class="-mb-3 -mx-3 grid {% if loggedin_user.is_admin %} grid-cols-2 {% endif %} text-center">
{% if loggedin_user.is_admin %}
<a href="#" data-sidebar="true" data-trigger="addTrip"
data-header="<strong>Event</strong> am {{ day.day| date(format='%d.%m.%Y') }} erstellen"
data-day="{{ day.day }}"
data-form="#addEventForm"
class="inline-block link-dark mr-3">Event hinzufügen</a>
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">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
{% include "includes/plus-icon" %}
</span>
Event
</a>
{% endif %}
{% if loggedin_user.is_cox%}
@ -227,9 +235,15 @@
data-header="<strong>Ausfahrt</strong> am {{ day.day| date(format='%d.%m.%Y') }} erstellen"
data-day="{{ day.day }}"
data-form="#addTripForm"
class="inline-block link-primary">Ausfahrt hinzufügen</a>
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-md {% endif %}">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
{% include "includes/plus-icon" %}
</span>
Ausfahrt
</a>
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
</div>