Enhance Vereinsmeisterschaften and Vorstand pages with image support for players and board members. Implement lightbox functionality for player images in Vereinsmeisterschaften. Update CSV handling to include image filenames for better data management. Refactor components to utilize PersonCard for board members, improving code readability and maintainability.
This commit is contained in:
Torsten Schulz (local)
@@ -13,112 +13,106 @@
|
||||
|
||||
<div v-if="config" class="grid md:grid-cols-2 gap-8 not-prose">
|
||||
<!-- Vorsitzender -->
|
||||
<div v-if="config.vorstand.vorsitzender.vorname" class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
|
||||
<h3 class="text-xl font-display font-bold text-gray-900 mb-2">Vorsitzender</h3>
|
||||
<h4 class="text-lg font-semibold text-primary-600 mb-3">
|
||||
{{ config.vorstand.vorsitzender.vorname }} {{ config.vorstand.vorsitzender.nachname }}
|
||||
</h4>
|
||||
<div class="space-y-1 text-gray-600">
|
||||
<p v-if="config.vorstand.vorsitzender.strasse">{{ config.vorstand.vorsitzender.strasse }}</p>
|
||||
<p v-if="config.vorstand.vorsitzender.plz">{{ config.vorstand.vorsitzender.plz }} {{ config.vorstand.vorsitzender.ort }}</p>
|
||||
<p v-if="config.vorstand.vorsitzender.telefon">Tel. {{ config.vorstand.vorsitzender.telefon }}</p>
|
||||
<p v-if="config.vorstand.vorsitzender.email">
|
||||
<a :href="`mailto:${config.vorstand.vorsitzender.email}`" class="text-primary-600 hover:underline">
|
||||
{{ config.vorstand.vorsitzender.email }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<PersonCard
|
||||
v-if="config.vorstand.vorsitzender.vorname"
|
||||
title="Vorsitzender"
|
||||
:name="`${config.vorstand.vorsitzender.vorname} ${config.vorstand.vorsitzender.nachname}`"
|
||||
:image-filename="config.vorstand.vorsitzender.imageFilename"
|
||||
>
|
||||
<p v-if="config.vorstand.vorsitzender.strasse">{{ config.vorstand.vorsitzender.strasse }}</p>
|
||||
<p v-if="config.vorstand.vorsitzender.plz">{{ config.vorstand.vorsitzender.plz }} {{ config.vorstand.vorsitzender.ort }}</p>
|
||||
<p v-if="config.vorstand.vorsitzender.telefon">Tel. {{ config.vorstand.vorsitzender.telefon }}</p>
|
||||
<p v-if="config.vorstand.vorsitzender.email">
|
||||
<a :href="`mailto:${config.vorstand.vorsitzender.email}`" class="text-primary-600 hover:underline">
|
||||
{{ config.vorstand.vorsitzender.email }}
|
||||
</a>
|
||||
</p>
|
||||
</PersonCard>
|
||||
|
||||
<!-- Stellvertreter -->
|
||||
<div v-if="config.vorstand.stellvertreter.vorname" class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
|
||||
<h3 class="text-xl font-display font-bold text-gray-900 mb-2">Stellvertreter</h3>
|
||||
<h4 class="text-lg font-semibold text-primary-600 mb-3">
|
||||
{{ config.vorstand.stellvertreter.vorname }} {{ config.vorstand.stellvertreter.nachname }}
|
||||
</h4>
|
||||
<div class="space-y-1 text-gray-600">
|
||||
<p v-if="config.vorstand.stellvertreter.strasse">{{ config.vorstand.stellvertreter.strasse }}</p>
|
||||
<p v-if="config.vorstand.stellvertreter.plz">{{ config.vorstand.stellvertreter.plz }} {{ config.vorstand.stellvertreter.ort }}</p>
|
||||
<p v-if="config.vorstand.stellvertreter.telefon">Tel. {{ config.vorstand.stellvertreter.telefon }}</p>
|
||||
<p v-if="config.vorstand.stellvertreter.email">
|
||||
<a :href="`mailto:${config.vorstand.stellvertreter.email}`" class="text-primary-600 hover:underline">
|
||||
{{ config.vorstand.stellvertreter.email }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<PersonCard
|
||||
v-if="config.vorstand.stellvertreter.vorname"
|
||||
title="Stellvertreter"
|
||||
:name="`${config.vorstand.stellvertreter.vorname} ${config.vorstand.stellvertreter.nachname}`"
|
||||
:image-filename="config.vorstand.stellvertreter.imageFilename"
|
||||
>
|
||||
<p v-if="config.vorstand.stellvertreter.strasse">{{ config.vorstand.stellvertreter.strasse }}</p>
|
||||
<p v-if="config.vorstand.stellvertreter.plz">{{ config.vorstand.stellvertreter.plz }} {{ config.vorstand.stellvertreter.ort }}</p>
|
||||
<p v-if="config.vorstand.stellvertreter.telefon">Tel. {{ config.vorstand.stellvertreter.telefon }}</p>
|
||||
<p v-if="config.vorstand.stellvertreter.email">
|
||||
<a :href="`mailto:${config.vorstand.stellvertreter.email}`" class="text-primary-600 hover:underline">
|
||||
{{ config.vorstand.stellvertreter.email }}
|
||||
</a>
|
||||
</p>
|
||||
</PersonCard>
|
||||
|
||||
<!-- Kassenwart -->
|
||||
<div v-if="config.vorstand.kassenwart.vorname" class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
|
||||
<h3 class="text-xl font-display font-bold text-gray-900 mb-2">Kassenwart</h3>
|
||||
<h4 class="text-lg font-semibold text-primary-600 mb-3">
|
||||
{{ config.vorstand.kassenwart.vorname }} {{ config.vorstand.kassenwart.nachname }}
|
||||
</h4>
|
||||
<div class="space-y-1 text-gray-600">
|
||||
<p v-if="config.vorstand.kassenwart.strasse">{{ config.vorstand.kassenwart.strasse }}</p>
|
||||
<p v-if="config.vorstand.kassenwart.plz">{{ config.vorstand.kassenwart.plz }} {{ config.vorstand.kassenwart.ort }}</p>
|
||||
<p v-if="config.vorstand.kassenwart.telefon">Tel. {{ config.vorstand.kassenwart.telefon }}</p>
|
||||
<p v-if="config.vorstand.kassenwart.email">
|
||||
<a :href="`mailto:${config.vorstand.kassenwart.email}`" class="text-primary-600 hover:underline">
|
||||
{{ config.vorstand.kassenwart.email }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<PersonCard
|
||||
v-if="config.vorstand.kassenwart.vorname"
|
||||
title="Kassenwart"
|
||||
:name="`${config.vorstand.kassenwart.vorname} ${config.vorstand.kassenwart.nachname}`"
|
||||
:image-filename="config.vorstand.kassenwart.imageFilename"
|
||||
>
|
||||
<p v-if="config.vorstand.kassenwart.strasse">{{ config.vorstand.kassenwart.strasse }}</p>
|
||||
<p v-if="config.vorstand.kassenwart.plz">{{ config.vorstand.kassenwart.plz }} {{ config.vorstand.kassenwart.ort }}</p>
|
||||
<p v-if="config.vorstand.kassenwart.telefon">Tel. {{ config.vorstand.kassenwart.telefon }}</p>
|
||||
<p v-if="config.vorstand.kassenwart.email">
|
||||
<a :href="`mailto:${config.vorstand.kassenwart.email}`" class="text-primary-600 hover:underline">
|
||||
{{ config.vorstand.kassenwart.email }}
|
||||
</a>
|
||||
</p>
|
||||
</PersonCard>
|
||||
|
||||
<!-- Schriftführer -->
|
||||
<div v-if="config.vorstand.schriftfuehrer.vorname" class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
|
||||
<h3 class="text-xl font-display font-bold text-gray-900 mb-2">Schriftführer</h3>
|
||||
<h4 class="text-lg font-semibold text-primary-600 mb-3">
|
||||
{{ config.vorstand.schriftfuehrer.vorname }} {{ config.vorstand.schriftfuehrer.nachname }}
|
||||
</h4>
|
||||
<div class="space-y-1 text-gray-600">
|
||||
<p v-if="config.vorstand.schriftfuehrer.strasse">{{ config.vorstand.schriftfuehrer.strasse }}</p>
|
||||
<p v-if="config.vorstand.schriftfuehrer.plz">{{ config.vorstand.schriftfuehrer.plz }} {{ config.vorstand.schriftfuehrer.ort }}</p>
|
||||
<p v-if="config.vorstand.schriftfuehrer.telefon">Tel. {{ config.vorstand.schriftfuehrer.telefon }}</p>
|
||||
<p v-if="config.vorstand.schriftfuehrer.email">
|
||||
<a :href="`mailto:${config.vorstand.schriftfuehrer.email}`" class="text-primary-600 hover:underline">
|
||||
{{ config.vorstand.schriftfuehrer.email }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<PersonCard
|
||||
v-if="config.vorstand.schriftfuehrer.vorname"
|
||||
title="Schriftführer"
|
||||
:name="`${config.vorstand.schriftfuehrer.vorname} ${config.vorstand.schriftfuehrer.nachname}`"
|
||||
:image-filename="config.vorstand.schriftfuehrer.imageFilename"
|
||||
>
|
||||
<p v-if="config.vorstand.schriftfuehrer.strasse">{{ config.vorstand.schriftfuehrer.strasse }}</p>
|
||||
<p v-if="config.vorstand.schriftfuehrer.plz">{{ config.vorstand.schriftfuehrer.plz }} {{ config.vorstand.schriftfuehrer.ort }}</p>
|
||||
<p v-if="config.vorstand.schriftfuehrer.telefon">Tel. {{ config.vorstand.schriftfuehrer.telefon }}</p>
|
||||
<p v-if="config.vorstand.schriftfuehrer.email">
|
||||
<a :href="`mailto:${config.vorstand.schriftfuehrer.email}`" class="text-primary-600 hover:underline">
|
||||
{{ config.vorstand.schriftfuehrer.email }}
|
||||
</a>
|
||||
</p>
|
||||
</PersonCard>
|
||||
|
||||
<!-- Sportwart -->
|
||||
<div v-if="config.vorstand.sportwart.vorname" class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
|
||||
<h3 class="text-xl font-display font-bold text-gray-900 mb-2">Sportwart</h3>
|
||||
<h4 class="text-lg font-semibold text-primary-600 mb-3">
|
||||
{{ config.vorstand.sportwart.vorname }} {{ config.vorstand.sportwart.nachname }}
|
||||
</h4>
|
||||
<div class="space-y-1 text-gray-600">
|
||||
<p v-if="config.vorstand.sportwart.strasse">{{ config.vorstand.sportwart.strasse }}</p>
|
||||
<p v-if="config.vorstand.sportwart.plz">{{ config.vorstand.sportwart.plz }} {{ config.vorstand.sportwart.ort }}</p>
|
||||
<p v-if="config.vorstand.sportwart.telefon">Tel. {{ config.vorstand.sportwart.telefon }}</p>
|
||||
<p v-if="config.vorstand.sportwart.email">
|
||||
<a :href="`mailto:${config.vorstand.sportwart.email}`" class="text-primary-600 hover:underline">
|
||||
{{ config.vorstand.sportwart.email }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<PersonCard
|
||||
v-if="config.vorstand.sportwart.vorname"
|
||||
title="Sportwart"
|
||||
:name="`${config.vorstand.sportwart.vorname} ${config.vorstand.sportwart.nachname}`"
|
||||
:image-filename="config.vorstand.sportwart.imageFilename"
|
||||
>
|
||||
<p v-if="config.vorstand.sportwart.strasse">{{ config.vorstand.sportwart.strasse }}</p>
|
||||
<p v-if="config.vorstand.sportwart.plz">{{ config.vorstand.sportwart.plz }} {{ config.vorstand.sportwart.ort }}</p>
|
||||
<p v-if="config.vorstand.sportwart.telefon">Tel. {{ config.vorstand.sportwart.telefon }}</p>
|
||||
<p v-if="config.vorstand.sportwart.email">
|
||||
<a :href="`mailto:${config.vorstand.sportwart.email}`" class="text-primary-600 hover:underline">
|
||||
{{ config.vorstand.sportwart.email }}
|
||||
</a>
|
||||
</p>
|
||||
</PersonCard>
|
||||
|
||||
<!-- Jugendwart -->
|
||||
<div v-if="config.vorstand.jugendwart.vorname" class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
|
||||
<h3 class="text-xl font-display font-bold text-gray-900 mb-2">Jugendwart</h3>
|
||||
<h4 class="text-lg font-semibold text-primary-600 mb-3">
|
||||
{{ config.vorstand.jugendwart.vorname }} {{ config.vorstand.jugendwart.nachname }}
|
||||
</h4>
|
||||
<div class="space-y-1 text-gray-600">
|
||||
<p v-if="config.vorstand.jugendwart.strasse">{{ config.vorstand.jugendwart.strasse }}</p>
|
||||
<p v-if="config.vorstand.jugendwart.plz">{{ config.vorstand.jugendwart.plz }} {{ config.vorstand.jugendwart.ort }}</p>
|
||||
<p v-if="config.vorstand.jugendwart.telefon">Tel. {{ config.vorstand.jugendwart.telefon }}</p>
|
||||
<p v-if="config.vorstand.jugendwart.email">
|
||||
<a :href="`mailto:${config.vorstand.jugendwart.email}`" class="text-primary-600 hover:underline">
|
||||
{{ config.vorstand.jugendwart.email }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<PersonCard
|
||||
v-if="config.vorstand.jugendwart.vorname"
|
||||
title="Jugendwart"
|
||||
:name="`${config.vorstand.jugendwart.vorname} ${config.vorstand.jugendwart.nachname}`"
|
||||
:image-filename="config.vorstand.jugendwart.imageFilename"
|
||||
>
|
||||
<p v-if="config.vorstand.jugendwart.strasse">{{ config.vorstand.jugendwart.strasse }}</p>
|
||||
<p v-if="config.vorstand.jugendwart.plz">{{ config.vorstand.jugendwart.plz }} {{ config.vorstand.jugendwart.ort }}</p>
|
||||
<p v-if="config.vorstand.jugendwart.telefon">Tel. {{ config.vorstand.jugendwart.telefon }}</p>
|
||||
<p v-if="config.vorstand.jugendwart.email">
|
||||
<a :href="`mailto:${config.vorstand.jugendwart.email}`" class="text-primary-600 hover:underline">
|
||||
{{ config.vorstand.jugendwart.email }}
|
||||
</a>
|
||||
</p>
|
||||
</PersonCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user