wm-fontis/wm-fontis-tibi-2023
3
0
Fork 0
generated from cms/tibi-docs
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

next session

Browse Source
This commit is contained in:
Robin Grenzdörfer
2023-07-15 16:15:17 +00:00
parent d4e21505ad
commit c6d43a95fa
28 changed files with 988 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/lib/components/widgets/boxlist.svelte Normal file
View File

@@ -0,0 +1,27 @@
<script lang="ts">
export let col: Column
</script>
<div class="boxList">
{#each col.boxList.boxes as name}
<div class="box">
{name.name}
</div>
{/each}
</div>
<style lang="less">
@import "../../assets/css/main.less";
.boxList {
display: flex;
flex-wrap: wrap;
gap: 20px;
.box {
padding: 5px 10px;
background-color: @bg-color-secondary;
color: @font-color-secondary;
font-weight: bold;
}
}
</style>

143
frontend/src/lib/components/widgets/events.svelte Normal file
View File

@@ -0,0 +1,143 @@
<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
}
console.log("col:", col)
</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}" 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}">Weitere Events</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: 14px;
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>

81
frontend/src/lib/components/widgets/extendableBox.svelte Normal file
View File

@@ -0,0 +1,81 @@
<script lang="ts">
export let col: Column
export let opened = -1
</script>
<div class="boxes">
{#each col.extendableBoxes as box, i}
<div class="box" class:opened="{i == opened}">
<div
class="upper"
on:keydown
on:click="{() => {
if (opened == i) opened = -1
else opened = i
}}"
>
<h4>
{box.title}
</h4>
<div>
{#if i !== opened}<img src="/media/down.svg" alt="arrow" />{:else}<img
src="/media/up.svg"
alt="arrow"
/>{/if}
</div>
</div>
<div class="content" class:closed="{i !== opened}">
{@html box.text}
{#if box.emailButton}
<a href="mailto:info@fontis.de?subject={box.emailSubject || 'Bewerbung'}" class="button">
<button> bewerben </button>
</a>
{/if}
</div>
</div>
{/each}
</div>
<style lang="less">
@import "../../assets/css/main.less";
button {
margin-top: 20px;
background-color: @bg-color-secondary;
color: @font-color-secondary;
border: 2px solid @bg-color-secondary;
padding: 2px 15px;
font-weight: bold;
}
.boxes {
display: flex;
flex-direction: column;
.box {
border-bottom: 2px dotted @bg-color-secondary;
display: flex;
transition: padding-bottom 1s;
padding-bottom: 0px;
flex-direction: column;
padding-top: 20px;
gap: 20px;
&.opened {
padding-bottom: 20px;
}
.upper {
font-size: 1.6rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
}
.content {
max-height: 1000px;
overflow: hidden;
transition: max-height 1s ease-in-out;
&.closed {
max-height: 0px;
}
}
}
}
</style>

52
frontend/src/lib/components/widgets/iconBlock.svelte Normal file
View File

@@ -0,0 +1,52 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
export let pageId: string
export let col: Column
</script>
<div class="iconBlock">
{#each col.iconBlocks as icon}
<div class="icon">
<img src="{`${apiBaseURL}page/${pageId}/${icon.icon?.src}`}" alt="img" />
<div class="text">
<em>{icon.bigText}</em>
<p>{icon.smallText}</p>
</div>
</div>
{/each}
</div>
<style lang="less">
.iconBlock {
display: flex;
justify-content: start;
flex-wrap: wrap;
.icon {
margin: 30px;
display: flex;
flex-direction: column;
align-items: center;
width: 140px;
gap: 20px;
img {
width: 100%;
height: auto;
}
.text {
display: flex;
flex-direction: column;
gap: 10px;
em {
text-align: center;
font-size: 2.2rem;
font-family: "Libre Caslon Text", serif;
}
p {
text-align: center;
font-weight: bold;
}
}
}
}
</style>

57
frontend/src/lib/components/widgets/infoBoard.svelte Normal file
View File

@@ -0,0 +1,57 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
export let col: Column
export let pageId: string
</script>
<div class="infoBoard">
<div class="header">
<div class="icon">
<img src="{`${apiBaseURL}page/${pageId}/${col.infoBoard.icon?.src}`}" alt="img" />
</div>
<div class="title">
{col.infoBoard.title}
<div></div>
</div>
</div>
<div class="content">
{@html col.infoBoard.text}
</div>
</div>
<style lang="less">
@import "../../assets/css/main.less";
.infoBoard {
display: flex;
flex-direction: column;
padding: 15px;
gap: 40px;
.header {
display: flex;
align-items: center;
gap: 20px;
.icon {
width: 64px;
height: 64px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.title {
font-size: 1.5rem;
display: flex;
flex-direction: column;
div {
border-bottom: 1px solid @bg-color-secondary;
width: 50px;
}
}
}
.content {
text-align: left;
}
}
</style>

7
frontend/src/lib/components/widgets/moreBtn.svelte
View File

@@ -2,9 +2,10 @@
import { navigate } from "svelte-routing"
export let path: string
export let bright
</script>
<button class="more" on:click="{() => navigate(path)}"> mehr </button>
<button class="more" class:bright="{bright}" on:click="{() => navigate(path)}">mehr</button>
<style lang="less">
@import "../../assets/css/main.less";
@@ -16,6 +17,8 @@
padding: 2px 15px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.bright {
border: 2px solid @bg-color;
}
</style>

67
frontend/src/lib/components/widgets/nestedCard.svelte Normal file
View File

@@ -0,0 +1,67 @@
<script lang="ts">
export let col: Column
</script>
<div class="cards">
{#each col.nestedCard as card}
<div class="card">
<div class="title">{card.title}</div>
<div class="description">{@html card.description}</div>
</div>
{/each}
</div>
<style lang="less">
@import "../../assets/css/main.less";
.cards {
display: flex;
flex-direction: column;
width: 100%;
flex-wrap: wrap;
gap: 40px;
@media @desktop {
gap: 50px;
flex-direction: row;
.card {
min-width: 35%;
max-width: 50%;
margin-bottom: 50px !important;
padding: 64px 0px 0px 80px !important;
.title {
padding: 13px 20px !important;
}
.description {
padding: 10px 20px !important;
}
}
}
.card {
overflow: hidden;
flex: 1;
margin-bottom: 40px;
position: relative;
padding: 54px 0px 0px 70px;
.title {
position: absolute;
left: 0px;
padding: 7px 10px;
color: @font-color-secondary;
font-family: "LibreCaslonText";
font-size: 1.2rem;
top: 0px;
height: 100px;
width: 320px;
z-index: 9;
background-color: @bg-color-secondary;
}
.description {
position: relative;
z-index: 10;
padding: 5px 10px;
background-color: @bg-color;
}
}
}
</style>

60
frontend/src/lib/components/widgets/pageLinkBlocks.svelte Normal file
View File

@@ -0,0 +1,60 @@
<script lang="ts">
import { navigate } from "svelte-routing/src/history"
import { pages } from "../../store"
export let col: Column
</script>
<div class="link-container">
{#each col.pageLinkBlocks as link}
{#if isNaN(link.rowNr)}
<button
class="page-ref"
on:click="{() => navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')}"
>
{link.name}
</button>
{:else}
<button
class="row-ref"
on:click="{() => navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')}"
>
{link.name} <img src="/media/arrow-r.svg" alt="arrow" />
</button>
{/if}
{/each}
</div>
<style lang="less">
@import "../../assets/css/main.less";
.link-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
button {
background-color: @bg-color;
color: @font-color;
padding: 2px 15px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.row-ref {
display: flex;
align-items: center;
gap: 10px;
border: 2px solid @bg-color-secondary;
img {
width: 20px;
height: auto;
}
}
.page-ref {
background-color: @bg-color-secondary;
color: @font-color-secondary;
border: 2px solid @bg-color-secondary;
}
}
</style>

64
frontend/src/lib/components/widgets/persons.svelte Normal file
View File

@@ -0,0 +1,64 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
import { pages, rerender } from "../../store"
import { navigate } from "svelte-routing/src/history"
export let pageId: string
export let col: Column
let hover = -1
</script>
<div class="persons">
{#each col.personPreview as pp, i}
<button
class="person"
on:click="{() => {
$rerender = $rerender + 1
navigate(Object.values($pages)?.find((o) => o.id == pp.link)?.path || '/')
}}"
>
<div class="image" on:mouseover="{() => (hover = i)}" on:focus on:blur on:mouseout="{() => (hover = -1)}">
{#if hover == i}
<img src="{`${apiBaseURL}page/${pageId}/${pp.hoverImage?.src}`}" alt="img" />
{:else}
<img src="{`${apiBaseURL}page/${pageId}/${pp.initialImage?.src}`}" alt="img" />
{/if}
</div>
<div class="text">
{pp.name}
</div>
</button>
{/each}
</div>
<style lang="less">
@import "../../assets/css/main.less";
.persons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 80px;
.person {
cursor: pointer;
margin: 40px 0px;
display: flex;
flex-direction: column;
.image {
width: 290px;
height: 368px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.text {
width: 100%;
background-color: @bg-color-secondary;
color: @font-color-secondary;
border: 2px solid @bg-color-secondary;
padding: 2px 15px;
font-weight: bold;
}
}
}
</style>

77
frontend/src/lib/components/widgets/publications.svelte Normal file
View File

@@ -0,0 +1,77 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
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}page/{pageId}/{publication.file.src}"
download="{apiBaseURL}page/{pageId}/{publication.file.src}"
>
<button class="download-button">zur Publikation</button>
</a>
</div>
</div>
</div>
{/each}
</div>
{#if displayedItems < col.publications.length}
<button on:click="{showMore}">Weitere Publikationen</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>

3
frontend/src/lib/components/widgets/textLink.svelte
View File

@@ -3,11 +3,12 @@
import Text from "../widgets/text.svelte"
export let description = ""
export let path = ""
export let bright = false
</script>
<div class="textLink">
<Text text="{description}" />
<MoreBtn path="{path}" />
<MoreBtn path="{path}" bright="{bright}" />
</div>
<style lang="less">

66
frontend/src/lib/components/widgets/topDown.svelte Normal file
View File

@@ -0,0 +1,66 @@
<script lang="ts">
export let col: Column
</script>
<div class="topDown">
{#each col.topDown.rows as row}
<div class="row">
<div class="capital">{row.inital}</div>
<div class="details">
<div class="upper">{row.rest}</div>
<div class="lower">{row.description}</div>
</div>
</div>
{/each}
</div>
<style lang="less">
@import "../../assets/css/main.less";
.topDown {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 20px;
.row {
display: flex;
gap: 10px;
.capital {
display: flex;
justify-content: center;
align-items: center;
min-width: 60px;
min-height: 100px;
padding: 10px;
background-color: @bg-color-secondary;
color: @font-color-secondary;
font-family: "LibreCaslonText";
font-size: 1.7rem;
@media @desktop {
font-size: 2.3rem;
min-width: 80px;
height: 120px;
}
}
.details {
min-height: 100px;
padding-top: 35px;
display: flex;
flex-direction: column;
.upper {
line-height: 1;
font-family: "LibreCaslonText";
font-size: 1.7rem;
}
.lower {
}
@media @desktop {
height: 120px;
padding-top: 40px;
.upper {
font-size: 2.3rem;
}
}
}
}
}
</style>