generated from cms/tibi-docs
169 lines
5.0 KiB
Svelte
169 lines
5.0 KiB
Svelte
<script lang="ts">
|
|
import { navigate } from "svelte-routing/src/history"
|
|
import { navigation, pages, rerender } from "../store"
|
|
let nextpage = $navigation?.pages[0]
|
|
$: nextpage = $navigation?.pages[0]
|
|
function getNextPage(pages) {
|
|
if (location.pathname == "/" || location.pathname == "") return
|
|
|
|
let currPage = pages.find(
|
|
(page) => Object.values($pages)?.find((o) => o.id == page.page)?.path == location.pathname
|
|
)
|
|
|
|
let currIndex = pages.indexOf(currPage)
|
|
let nextIndex
|
|
if (pages.length - 1 == currIndex) {
|
|
nextIndex = 0
|
|
} else {
|
|
nextIndex = currIndex + 1
|
|
}
|
|
nextpage = pages[nextIndex]
|
|
}
|
|
let blackBg = false
|
|
setInterval(() => {
|
|
if (location.pathname == "/") {
|
|
blackBg = true
|
|
} else {
|
|
blackBg = false
|
|
}
|
|
getNextPage($navigation.pages)
|
|
|
|
if (location.pathname.split("/").filter((s) => s).length >= 2) {
|
|
showNext = false
|
|
} else {
|
|
showNext = true
|
|
}
|
|
}, 1000)
|
|
let showNext = true
|
|
$: {
|
|
if ($rerender) {
|
|
if (location.pathname != "/") {
|
|
getNextPage($navigation.pages)
|
|
}
|
|
}
|
|
if (location.pathname.split("/").filter((s) => s).length >= 2) {
|
|
showNext = false
|
|
} else {
|
|
showNext = true
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="footer" class:black-bg="{blackBg}">
|
|
{#if showNext}
|
|
<button
|
|
class="upper-part"
|
|
on:click="{() => {
|
|
$rerender = $rerender + 1
|
|
navigate(Object.values($pages)?.find((o) => o.id == nextpage.page)?.path || '/')
|
|
}}"
|
|
>
|
|
<div class="upper"><img src="/media/arrow-right.svg" alt="arrow" /> nächstes Thema</div>
|
|
<div class="lower">{nextpage?.name}</div>
|
|
</button>{/if}
|
|
<div class="lower-part">
|
|
<div class="container">
|
|
<div class="links">
|
|
<button
|
|
on:click="{() => {
|
|
$rerender = $rerender + 1
|
|
navigate('/datenschutz')
|
|
}}">Datenschutz</button
|
|
>
|
|
<button
|
|
on:click="{() => {
|
|
$rerender = $rerender + 1
|
|
navigate('/impressum')
|
|
}}">Impressum</button
|
|
>
|
|
</div>
|
|
<div class="contact">
|
|
<button>0711 644 700-0</button>
|
|
|
|
<button> <a href="mailto:info@fontis.de" class="button"> info@fontis.de</a></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="less">
|
|
@import "../assets/css/main.less";
|
|
.footer {
|
|
padding-top: 80px;
|
|
display: flex;
|
|
position: relative;
|
|
z-index: 1000;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
color: @font-color-secondary;
|
|
&.black-bg {
|
|
margin-top: -10px;
|
|
background-color: @bg-color-secondary;
|
|
}
|
|
.upper-part {
|
|
background-color: @bg-color-secondary;
|
|
padding: 10px 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: fit-content;
|
|
.upper {
|
|
color: @font-color-secondary;
|
|
font-size: 12px;
|
|
display: flex;
|
|
gap: 10px;
|
|
@media @tablet {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
.lower {
|
|
color: @font-color-secondary;
|
|
font-size: 22px;
|
|
font-family: "Libre Caslon Text", serif;
|
|
@media @tablet {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lower-part {
|
|
padding: 40px 20px;
|
|
background-color: @bg-color-secondary;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
.container {
|
|
max-width: 1400px;
|
|
width: 100%;
|
|
display: flex;
|
|
padding: 0px 2.5vw;
|
|
flex-direction: column;
|
|
.links,
|
|
.contact {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px 0px;
|
|
}
|
|
button {
|
|
color: @font-color-secondary;
|
|
a {
|
|
color: @font-color-secondary;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
@media @tablet {
|
|
padding: 80px 2.5vw;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
.links,
|
|
.contact {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
gap: 40px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|