58 lines
3.0 KiB
HTML
58 lines
3.0 KiB
HTML
{# This template shows one member and all the details (that are ment for public) including a list of current jobs #}
|
|
{% load softhyphen_tags %}
|
|
{% load static %}
|
|
|
|
<section class="flex-grow max-w-prose my-8 sm:my-0 text-justify text-gray-800 dark:text-gray-300">
|
|
<!-- Alternativtext auf jede Person anpassen: Name im alt="" dynamisch erzeugen -->
|
|
<img loading="lazy" src="{{ member.image.portrait.url }}" alt="Portraitfoto von {{ member.firstname }} {{ member.surname }}" class="md:float-left w-36 mr-2 mb-2">
|
|
<div x-data="{ expandList: false }">
|
|
<h2 class="mb-2 text-lg text-gray-900 dark:text-gray-100 text-left">{{ member.firstname }} {{ member.surname }}</h2>
|
|
<div class="mb-2">
|
|
Spitzname: {{ member.nickname }} <br>
|
|
Mailaccount: {{ member.mailaccount }} <br>
|
|
</div>
|
|
<div class="mb-2">
|
|
{{ member.description|softhyphen|safe }}
|
|
</div>
|
|
{% if active_jobs or inactive_jobs %}
|
|
<h3 class="group mt-4 mb-2 text-lg text-gray-900">Ehrenamtliche Tätigkeiten:
|
|
{% if inactive_jobs %}
|
|
<button class="inline float-right text-sm px-2 py-1 text-gray-600 md:text-gray-500 group-hover:text-gray-600 border rounded border-gray-500 md:border-gray-400 group-hover:border-gray-500"
|
|
@click="expandList = ! expandList"
|
|
>
|
|
<span x-show="!expandList">Mehr</span><span x-show="expandList">Weniger</span><span class="hidden md:inline"> anzeigen</span>
|
|
<i class="fa-fw fa-solid fa-angle-left transition transform -ml-1"
|
|
:class="expandList ? '-rotate-90' : ''"
|
|
></i>
|
|
</button>
|
|
{% endif %}
|
|
</h3>
|
|
|
|
<ul class="flex flex-col gap-1">
|
|
{% for jobm in active_jobs %}
|
|
<li class="flex flex-row flex-wrap">
|
|
<span>{{ jobm.job.name }}:</span>
|
|
<span class="ml-2 text-gray-600 dark:text-gray-400">{{ jobm.job_start|date }} -</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<ul class="flex flex-col gap-1 mt-1"
|
|
x-show="expandList"
|
|
x-transition:enter="transition duration-100 ease-in"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition duration-100 ease-out"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
>
|
|
{% for jobm in inactive_jobs %}
|
|
<li class="flex flex-row flex-wrap">
|
|
<span>{{ jobm.job.name }}:</span>
|
|
<span class="ml-2 text-gray-600 dark:text-gray-400">{{ jobm.job_start|date }} - {{ jobm.job_end|date }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|