diff --git a/sass/_utils.scss b/sass/_utils.scss index 197169824266641a9edc5aae50e29a2abedb2b57..1c27b4156b9e71ec982836282c9909218661a0c7 100644 --- a/sass/_utils.scss +++ b/sass/_utils.scss @@ -13,3 +13,7 @@ figure.image > figcaption { .content .gallery figure { margin: 0; } + +.is-fullheight { + height: 100% +} diff --git a/templates/shortcodes/teckids_event.html b/templates/shortcodes/teckids_event.html index e647961b3f1b1a7f1c4a58b7f8a8916e82ac5d86..62571240fa1c09dd9fbfab400e30e7b254f51fb3 100644 --- a/templates/shortcodes/teckids_event.html +++ b/templates/shortcodes/teckids_event.html @@ -3,50 +3,60 @@ <h2>{{ title | default(value="Informationen und Anmeldung") }}</h2> <section class="section event-section"> <div class="card event-card"> - <div class="card-content"> - <div class="columns"> - <div class="column is-two-thirds event-info"> - <h3 class="title is-5">{{ event.display_name }}</h3> - <p class="subtitle is-6">{{ event.description }}</p> - <div class="columns"> - <div class="column is-one-third"> - <address> - {{ event.location }} - </address> - </div> - <div class="column is-one-third"> - <time datetime="{{ event.date }}"> - {{ event.date | date }} - </time> - </div> - <div class="column is-one-third"> - {{ event.cost }} € + <div class="card-content"> + <div class="columns is-vcentered"> + <div class="column is-two-thirds event-info"> + <h3 class="title is-5">{{ event.display_name }}</h3> + <p class="subtitle is-6">{{ event.description }}</p> + <div class="notification is-primary is-light"> + <div class="columns"> + <div class="column is-one-third"> + <h4 class="title ">Wo?</h4> + <i class="fa-regular fa-location-dot mr-3"></i> + <address class="is-inline-block"> + {{ event.location }} + </address> + </div> + <div class="column is-one-third"> + <h4 class="title">Wann?</h4> + <i class="fa-regular fa-calendar-days mr-3"></i> + <time datetime="{{ event.date }}"> + {{ event.date | date }} + </time> + </div> + <div class="column is-one-third"> + <h4 class="title">Preis?</h4> + <i class="fa-regular fa-money-bill mr-3"></i> + {{ event.cost }} € + </div> + </div> </div> + {%if body %} + <div class="content"> + {{ body|markdown|safe }} + </div> + {% endif %} </div> - </div> - <div class="column is-one-third"> - <div class="buttons are-large are-responsive"> - <a class="button is-primary is-fullwidth" href="https://ticdesk.teckids.org/app/paweljong/event/{{ slug }}"> - <div class="icon-text"> - <span class="icon"><i class="fa-solid fa-envelope-open-text"></i></span> - <span>Zur Anmeldung</span> + <div class="column is-one-third"> + <div class="buttons are-responsive are-medium"> + <a class="button is-primary is-fullwidth is-justify-content-start" + href="https://ticdesk.teckids.org/app/paweljong/event/{{ slug }}"> + <span class="icon"><i class="fa-regular fa-paper-plane"></i></span> + <span>Zur Anmeldung</span> + </a> + <a class="button is-link is-fullwidth is-justify-content-start" href="mailto:{{ mail|default(value=" + verein@teckids.org") }}"> + <span class="icon"><i class="fa-regular fa-envelope-open-text"></i></span> + <span>E-Mail schreiben</span> + </a> + <a class="button is-link is-fullwidth is-justify-content-start mb-0" href="tel:{{ phone|default(value=" + +4922892934160") }}"> + <span class="icon"><i class="fa-regular fa-phone"></i></span> + <span>Anrufen</span> + </a> </div> - </a> - <a class="button is-link is-fullwidth" href="mailto:{{ mail|default(value="verein@teckids.org") }}"> - <div class="icon-text"> - <span class="icon"><i class="fa-solid fa-envelope-open-text"></i></span> - <span>E-Mail schreiben</span> - </div> - </a> - <a class="button is-link is-fullwidth" href="tel:{{ phone|default(value="+4922892934160") }}"> - <div class="icon-text"> - <span class="icon"><i class="fa-solid fa-phone"></i></span> - <span>Anrufen</span> - </div> - </a> + </div> </div> </div> </div> - </div> - </div> </section>