generated from cms/tibi-docs
79 lines
2.3 KiB
Svelte
79 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { apiBaseURL } from "../../../config"
|
|
import { mediaLibrary } from "../../store"
|
|
|
|
export let col: Column
|
|
export let pageId: string
|
|
|
|
let displayedItems = 3
|
|
const itemsPerPage = 3
|
|
|
|
function showMore() {
|
|
displayedItems += itemsPerPage
|
|
}
|
|
</script>
|
|
|
|
<div class="publications">
|
|
{#each col.publications.slice(0, displayedItems) as publication}
|
|
<div class="publication">
|
|
<div class="left"><img src="/media/file.svg" alt="file" /></div>
|
|
<div class="right">
|
|
<div class="content">{@html publication.content}</div>
|
|
<div class="download">
|
|
<a
|
|
href="{apiBaseURL}medialib/{publication.file}/{$mediaLibrary[publication.file]?.file.src}"
|
|
download="{apiBaseURL}medialib/{publication.file}/{$mediaLibrary[publication.file]?.file.src}"
|
|
>
|
|
<button class="download-button">zur Publikation</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{#if displayedItems < col.publications.length}
|
|
<button on:click="{showMore}" class="fill"><div>Weitere Publikationen</div></button>
|
|
{/if}
|
|
|
|
<style lang="less">
|
|
@import "../../assets/css/main.less";
|
|
|
|
button {
|
|
padding: 2px 15px;
|
|
border: 2px solid @bg-color-secondary;
|
|
margin-top: 40px;
|
|
font-weight: bold;
|
|
}
|
|
.publications {
|
|
gap: 60px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
@media @tablet {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
.publication {
|
|
max-width: 370px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
.left {
|
|
max-width: 75px;
|
|
flex: 1;
|
|
}
|
|
.right {
|
|
padding-left: 20px;
|
|
border-left: 2px solid @bg-color-secondary;
|
|
flex: 1;
|
|
button {
|
|
background-color: @bg-color-secondary;
|
|
color: @font-color-secondary;
|
|
border: 2px solid @bg-color-secondary;
|
|
padding: 2px 15px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|