generated from cms/tibi-docs
142 lines
4.2 KiB
Svelte
142 lines
4.2 KiB
Svelte
<script lang="ts">
|
|
import { apiBaseURL } from "../../../config"
|
|
|
|
export let col: Column
|
|
export let pageId: string
|
|
|
|
let months = [
|
|
"Januar",
|
|
"Februar",
|
|
"März",
|
|
"April",
|
|
"Mai",
|
|
"Juni",
|
|
"Juli",
|
|
"August",
|
|
"September",
|
|
"Oktober",
|
|
"November",
|
|
"Dezember",
|
|
]
|
|
|
|
let displayedItems = 4
|
|
const itemsPerPage = 4
|
|
|
|
function showMore() {
|
|
displayedItems += itemsPerPage
|
|
}
|
|
</script>
|
|
|
|
<div class="events">
|
|
{#each col.networkEvents.slice(0, displayedItems) as nE}
|
|
<div class="event">
|
|
<div class="calendar">
|
|
<div class="calendar-icon"><img src="/media/calendar.svg" alt="calendar" /></div>
|
|
<div class="date">
|
|
<div class="month">{months[new Date(nE.beginDate).getMonth()]}</div>
|
|
<div class="day">
|
|
{new Date(nE.beginDate).getDate()}
|
|
{#if nE.endDate}
|
|
- {new Date(nE.endDate).getDate()}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="details">
|
|
<em>{nE.title}</em>
|
|
<a href="{apiBaseURL}page/{pageId}/{nE.file.src}" style="text-decoration: none;" download="{apiBaseURL}page/{pageId}/{nE.file.src}">
|
|
<button class="more">mehr</button></a
|
|
>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
{#if displayedItems < col.networkEvents.length}
|
|
<button on:click="{showMore}" class="fill"><div>Weitere Events</div></button>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="less">
|
|
@import "../../assets/css/main.less";
|
|
|
|
.events {
|
|
display: flex;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
button {
|
|
padding: 2px 15px;
|
|
border: 2px solid @bg-color-secondary;
|
|
margin-top: 40px;
|
|
font-weight: bold;
|
|
}
|
|
.event {
|
|
width: 100%;
|
|
display: flex;
|
|
.details {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding: 24px 20px;
|
|
gap: 10px;
|
|
@media @tablet {
|
|
padding: 0px 0px 0px 20px;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
em {
|
|
font-weight: bold;
|
|
}
|
|
.more {
|
|
background-color: @bg-color-secondary;
|
|
color: @font-color-secondary;
|
|
border: none;
|
|
height: 36px;
|
|
padding: 2px 15px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.calendar {
|
|
width: 110px;
|
|
min-width: 110px;
|
|
display: flex;
|
|
border-right: @bg-color-secondary 2px solid;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
@media @tablet {
|
|
flex: 1;
|
|
gap: 10px;
|
|
padding: 32px 35px 0px 0px;
|
|
max-width: 210px;
|
|
flex-direction: row;
|
|
}
|
|
.calendar-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
.date {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: fit-content;
|
|
.month {
|
|
font-size: 0.7rem;
|
|
}
|
|
.day {
|
|
font-size: 1.2rem;
|
|
font-family: "Libre Caslon Text", serif;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|