generated from cms/tibi-docs
icon cycle circle
This commit is contained in:
parent
c6d43a95fa
commit
bfa53f6b95
frontend
media
src
5
frontend/media/ToTop.svg
Normal file
5
frontend/media/ToTop.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1" y="1" width="66" height="66" rx="33" fill="#000"/>
|
||||
<path d="M44.91 39.965 34 29.066 23.09 39.965l-1.055-1.055L34 26.934 45.965 38.91l-1.055 1.055z" fill="#fff"/>
|
||||
<rect x="1" y="1" width="66" height="66" rx="33" stroke="#fff" stroke-width="2"/>
|
||||
</svg>
|
After (image error) Size: 371 B |
3
frontend/media/chev-d.svg
Normal file
3
frontend/media/chev-d.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m22.723 5.473 1.054 1.054L12 18.305.223 6.527l1.054-1.054L12 16.195 22.723 5.473z" fill="#333"/>
|
||||
</svg>
|
After (image error) Size: 213 B |
@ -5,9 +5,12 @@
|
||||
import NotFound from "./lib/components/NotFound.svelte"
|
||||
import Rows from "./lib/components/Pagebuilder/Rows.svelte"
|
||||
import { location, navigation, pages, serviceNavigation, rerender } from "./lib/store"
|
||||
import { onMount, onDestroy } from "svelte"
|
||||
import { Route, Router } from "svelte-routing"
|
||||
import { loadPages } from "./lib/functions/getPages"
|
||||
import { loadNavigation } from "./lib/functions/loadNavigation"
|
||||
import ScrollTop from "./lib/components/widgets/scrollTop.svelte"
|
||||
import ScrollDown from "./lib/components/widgets/scrollDown.svelte"
|
||||
export let url = ""
|
||||
|
||||
if (url) {
|
||||
@ -35,7 +38,6 @@
|
||||
|
||||
async function getNavigation() {
|
||||
let nav: Navigation[] = await loadNavigation()
|
||||
console.log(nav)
|
||||
$navigation = nav[0]
|
||||
$serviceNavigation = nav[1]
|
||||
}
|
||||
@ -74,6 +76,9 @@
|
||||
<Footer />
|
||||
</main>
|
||||
|
||||
<ScrollTop />
|
||||
<ScrollDown />
|
||||
|
||||
<Menu bind:active="{activeMenu}" />
|
||||
|
||||
<style lang="less" global>
|
||||
|
@ -60,3 +60,94 @@ select {
|
||||
color: #333;
|
||||
width: 100%;
|
||||
}
|
||||
.underline {
|
||||
display: inline;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.underline:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
right: 0;
|
||||
width: 0;
|
||||
bottom: -2px;
|
||||
background: #ffffff;
|
||||
height: 4px;
|
||||
transition: width 0.5s ease-out;
|
||||
}
|
||||
.underline:hover:after,
|
||||
.underline:focus:after,
|
||||
.underline:active:after {
|
||||
left: 0;
|
||||
right: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fill {
|
||||
display: inline;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fill:hover {
|
||||
color: white !important;
|
||||
div {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
.fill:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
width: 0px;
|
||||
background: #000000;
|
||||
transition: width 0.5s ease-out;
|
||||
}
|
||||
.fill:hover:after,
|
||||
.fill:focus:after,
|
||||
.fill:active:after {
|
||||
right: auto;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@keyframes underlineEffect {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
swiper-slide {
|
||||
&:hover {
|
||||
h1.active .underline {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.titles {
|
||||
h1 {
|
||||
.underline {
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
background: #000000;
|
||||
height: 10px;
|
||||
width: 0;
|
||||
animation: underlineEffect 4s linear forwards;
|
||||
}
|
||||
|
||||
&:not(.active) .underline {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,10 +1,45 @@
|
||||
<script lang="ts">
|
||||
import { navigate } from "svelte-routing/src/history"
|
||||
import { navigation, pages, rerender } from "../store"
|
||||
let nextpage = $navigation?.pages[0]
|
||||
function getNextPage(pages) {
|
||||
if (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]
|
||||
console.log(nextpage, pages, nextIndex)
|
||||
}
|
||||
setInterval(() => {
|
||||
getNextPage($navigation.pages)
|
||||
}, 1000)
|
||||
$: {
|
||||
if ($rerender) {
|
||||
if (location.pathname != "/") {
|
||||
getNextPage($navigation.pages)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="footer">
|
||||
<button class="upper-part">
|
||||
<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">Ihre Bedürfnisse</div>
|
||||
<div class="lower">{nextpage?.name}</div>
|
||||
</button>
|
||||
<div class="lower-part">
|
||||
<div class="links">
|
||||
@ -25,9 +60,9 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
background-color: @bg-color-secondary;
|
||||
color: @font-color-secondary;
|
||||
.upper-part {
|
||||
background-color: @bg-color-secondary;
|
||||
padding: 10px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -52,6 +87,8 @@
|
||||
|
||||
.lower-part {
|
||||
padding: 40px 40px;
|
||||
|
||||
background-color: @bg-color-secondary;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { navigate } from "svelte-routing/src/history"
|
||||
import { navigation, pages } from "../../store"
|
||||
import { navigation, pages, rerender } from "../../store"
|
||||
import Header from "./Header.svelte"
|
||||
$: console.log($navigation, "nav")
|
||||
export let active = false
|
||||
@ -16,9 +16,10 @@
|
||||
<div class="pages">
|
||||
{#each $navigation.pages as page}
|
||||
<button
|
||||
class="page"
|
||||
class="page underline"
|
||||
on:click="{() => {
|
||||
active = false
|
||||
$rerender = $rerender + 1
|
||||
navigate(Object.values($pages)?.find((o) => o.id == page.page)?.path || '/')
|
||||
}}"
|
||||
>
|
||||
@ -28,11 +29,11 @@
|
||||
</div>
|
||||
<div class="footer-infos">
|
||||
<div class="upper">
|
||||
<button>Datenschutz</button>
|
||||
<button>Impressum</button>
|
||||
<button class="underline">Datenschutz</button>
|
||||
<button class="underline">Impressum</button>
|
||||
</div>
|
||||
<div class="lower">
|
||||
<button>0711 644 700-0</button>
|
||||
<button>0711 644 700-0</button>
|
||||
<button>info@fontis.de</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -74,29 +75,60 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
width: 80%;
|
||||
margin: 10vw 0px;
|
||||
@media @tablet {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.inner-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
@media @tablet {
|
||||
justify-content: initial;
|
||||
height: initial;
|
||||
}
|
||||
|
||||
.footer-infos {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
@media @tablet {
|
||||
flex-wrap: initial;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
justify-content: space-between;
|
||||
text-align: start;
|
||||
|
||||
.upper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
margin-top: 15px;
|
||||
@media @tablet {
|
||||
margin-top: 0px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
@media @desktop {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
.lower {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
align-items: flex-start;
|
||||
|
||||
@media @tablet {
|
||||
align-items: flex-start;
|
||||
}
|
||||
@media @desktop {
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
@ -104,7 +136,6 @@
|
||||
gap: 20px;
|
||||
}
|
||||
button {
|
||||
font-size: 1.6rem;
|
||||
color: @font-color-secondary;
|
||||
}
|
||||
@media @desktop {
|
||||
@ -118,6 +149,7 @@
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Caslon Text", serif;
|
||||
gap: 20px;
|
||||
.page {
|
||||
font-size: 1.6rem;
|
||||
|
@ -9,6 +9,12 @@
|
||||
register(false)
|
||||
let swiper
|
||||
|
||||
function handleMouseOver() {
|
||||
console.log("test")
|
||||
}
|
||||
|
||||
function handleMouseOut() {}
|
||||
|
||||
onMount(async () => {
|
||||
if (swiper !== undefined) {
|
||||
const response = await fetch("/dist/index.css")
|
||||
@ -20,9 +26,27 @@
|
||||
|
||||
Object.assign(swiper, params)
|
||||
swiper.initialize()
|
||||
|
||||
// Add the 'active' class to the h1 of the first slide
|
||||
const firstSlideH1 = document.querySelector(".swiper-slide-active .titles h1")
|
||||
if (firstSlideH1) {
|
||||
firstSlideH1.classList.add("active")
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function handleSlideChange() {
|
||||
document.querySelectorAll(".titles h1").forEach((h1) => {
|
||||
h1.classList.remove("active")
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
const activeSlideUnderline = document.querySelector(".swiper-slide-active .titles h1")
|
||||
if (activeSlideUnderline) {
|
||||
activeSlideUnderline.classList.add("active")
|
||||
}
|
||||
}, 600)
|
||||
}
|
||||
let teaser = teasers[0]
|
||||
</script>
|
||||
|
||||
@ -36,7 +60,16 @@
|
||||
effect="slide"
|
||||
navigation="{true}"
|
||||
init="{false}"
|
||||
autoplay="{{
|
||||
delay: 4000, // 5000ms = 5s
|
||||
pauseOnMouseEnter: true,
|
||||
}}"
|
||||
speed="600"
|
||||
on:focus
|
||||
on:blur
|
||||
on:slidechange="{() => handleSlideChange()}"
|
||||
on:mouseenter="{() => handleMouseOver()}"
|
||||
on:mouseleave="{() => handleMouseOut()}"
|
||||
class="relative"
|
||||
>
|
||||
{#each teasers as teaser}
|
||||
@ -45,7 +78,10 @@
|
||||
<div class="inner-container">
|
||||
<div class="titles">
|
||||
<h2>{teaser?.teaser?.subTitle}</h2>
|
||||
<h1>{teaser?.teaser?.teaserTitle}</h1>
|
||||
<h1>
|
||||
{teaser?.teaser?.teaserTitle}
|
||||
<div class="underline"></div>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="description">
|
||||
<div class="placeholder"></div>
|
||||
@ -82,10 +118,13 @@
|
||||
font-size: 2rem;
|
||||
padding: 10px 0px;
|
||||
margin: 10px 0px 20px 0px;
|
||||
text-decoration: underline;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
.description {
|
||||
@ -107,7 +146,6 @@
|
||||
font-size: 4rem;
|
||||
padding: 20px 0px;
|
||||
margin: 20px 0px 40px 0px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.6rem;
|
||||
@ -134,7 +172,6 @@
|
||||
font-size: 5rem;
|
||||
padding: 20px 0px;
|
||||
margin: 20px 0px 40px 0px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.6rem;
|
||||
|
@ -14,6 +14,7 @@
|
||||
import TextLink from "../widgets/textLink.svelte"
|
||||
import TopDown from "../widgets/topDown.svelte"
|
||||
import { rerender } from "../../store"
|
||||
import IconCycleCircle from "../widgets/iconCycleCircle.svelte"
|
||||
|
||||
export let row: Row
|
||||
export let pageId: string
|
||||
@ -53,7 +54,7 @@
|
||||
<h1>{row.pageTitle}</h1>
|
||||
{/if}
|
||||
{#if row.title}
|
||||
<h2>{row.title}</h2>
|
||||
<h2 class="">{row.title}</h2>
|
||||
{/if}
|
||||
{#if row.subTitle}
|
||||
<h3>{row.subTitle}</h3>
|
||||
@ -87,6 +88,8 @@
|
||||
<ExtendableBox col="{col}" />
|
||||
{:else if col.contentType == "personPreview"}
|
||||
<Persons col="{col}" pageId="{pageId}" />
|
||||
{:else if col.contentType == "iconCycleCircle"}
|
||||
<IconCycleCircle col="{col}" pageId="{pageId}" />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
@ -104,7 +107,6 @@
|
||||
gap: 10px;
|
||||
img {
|
||||
width: 40px;
|
||||
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
@ -117,7 +119,6 @@
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
line-height: 1;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
|
@ -53,7 +53,7 @@
|
||||
</div>
|
||||
{/each}
|
||||
{#if displayedItems < col.networkEvents.length}
|
||||
<button on:click="{showMore}">Weitere Events</button>
|
||||
<button on:click="{showMore}" class="fill"><div>Weitere Events</div></button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
66
frontend/src/lib/components/widgets/iconCycleCircle.svelte
Normal file
66
frontend/src/lib/components/widgets/iconCycleCircle.svelte
Normal file
@ -0,0 +1,66 @@
|
||||
<script lang="ts">
|
||||
import { apiBaseURL } from "../../../config"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
export let col: Column
|
||||
export let pageId: string
|
||||
|
||||
let count = col.iconCycleCircle.boxes.length // The number of surrounding circles.
|
||||
let angleStep = 360 / count
|
||||
let radius = 100 // Distance from center
|
||||
|
||||
let circles = []
|
||||
|
||||
onMount(() => {
|
||||
for (let i = 0; i < count; i++) {
|
||||
let angle = angleStep * i * (Math.PI / 180) // Convert to radians
|
||||
|
||||
circles.push({
|
||||
x: radius * Math.cos(angle),
|
||||
y: radius * Math.sin(angle),
|
||||
rotation: angleStep * i - 90, // subtract 90 to point towards the circle
|
||||
})
|
||||
}
|
||||
circles = circles
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="main-circle">
|
||||
{#each circles as { x, y, rotation }}
|
||||
<div class="circle" style="transform: translate(calc(100px + {x}px - 25px), calc(100px + {y}px - 25px))"></div>
|
||||
<div
|
||||
class="arrow"
|
||||
style="transform: translate(calc(100px + {x / 2}px - 1px), calc(100px + {y /
|
||||
2}px - 25px)) rotate({rotation}deg)"
|
||||
></div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="less">
|
||||
.main-circle {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: auto;
|
||||
background: red;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: blue;
|
||||
z-index: 100;
|
||||
border-radius: 50%;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 50px;
|
||||
background: black;
|
||||
transform-origin: center;
|
||||
}
|
||||
</style>
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { navigate } from "svelte-routing/src/history"
|
||||
import { pages } from "../../store"
|
||||
import { pages, rerender } from "../../store"
|
||||
export let col: Column
|
||||
</script>
|
||||
|
||||
@ -9,16 +9,25 @@
|
||||
{#if isNaN(link.rowNr)}
|
||||
<button
|
||||
class="page-ref"
|
||||
on:click="{() => navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')}"
|
||||
on:click="{() => {
|
||||
$rerender = $rerender + 1
|
||||
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 || '/')}"
|
||||
class="row-ref fill"
|
||||
on:click="{() => {
|
||||
$rerender = $rerender + 1
|
||||
navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')
|
||||
}}"
|
||||
>
|
||||
{link.name} <img src="/media/arrow-r.svg" alt="arrow" />
|
||||
<div>
|
||||
{link.name}
|
||||
</div>
|
||||
<img src="/media/arrow-r.svg" alt="arrow" />
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
|
@ -31,7 +31,7 @@
|
||||
{/each}
|
||||
</div>
|
||||
{#if displayedItems < col.publications.length}
|
||||
<button on:click="{showMore}">Weitere Publikationen</button>
|
||||
<button on:click="{showMore}" class="fill"><div>Weitere Publikationen</div></button>
|
||||
{/if}
|
||||
|
||||
<style lang="less">
|
||||
|
62
frontend/src/lib/components/widgets/scrollDown.svelte
Normal file
62
frontend/src/lib/components/widgets/scrollDown.svelte
Normal file
@ -0,0 +1,62 @@
|
||||
<script>
|
||||
import { onMount, onDestroy } from "svelte"
|
||||
import { rerender } from "../../store"
|
||||
|
||||
let showButton = true
|
||||
|
||||
const checkScroll = () => {
|
||||
// Change the visibility of the button based on the scroll position
|
||||
showButton = window.pageYOffset < 100
|
||||
}
|
||||
|
||||
const jumpDown = () => {
|
||||
// Jump down by 100vh
|
||||
window.scrollTo({ top: window.innerHeight, behavior: "smooth" })
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
// Attach scroll event listener when component is mounted
|
||||
window.addEventListener("scroll", checkScroll)
|
||||
})
|
||||
|
||||
onDestroy(() => {
|
||||
// Remove scroll event listener when component is destroyed
|
||||
window.removeEventListener("scroll", checkScroll)
|
||||
})
|
||||
let force = true
|
||||
setInterval(() => {
|
||||
if (location.pathname != "/") {
|
||||
force = false
|
||||
} else force = true
|
||||
}, 1000)
|
||||
$: {
|
||||
if ($rerender) {
|
||||
if (location.pathname != "/") {
|
||||
force = false
|
||||
} else force = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if showButton && force}
|
||||
<button on:click="{jumpDown}" class="jump-down"
|
||||
><span> SCROLL </span>
|
||||
<img src="/media/chev-d.svg" alt="arrow" />
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.jump-down {
|
||||
/* Place your styles here */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
color: #4f4f4f;
|
||||
z-index: 100;
|
||||
gap: 5px;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
46
frontend/src/lib/components/widgets/scrollTop.svelte
Normal file
46
frontend/src/lib/components/widgets/scrollTop.svelte
Normal file
@ -0,0 +1,46 @@
|
||||
<script>
|
||||
import { onMount, onDestroy } from "svelte"
|
||||
|
||||
let showButton = false
|
||||
|
||||
const checkScroll = () => {
|
||||
// Change the visibility of the button based on the scroll position
|
||||
showButton = window.pageYOffset > 200
|
||||
}
|
||||
|
||||
const scrollToTop = () => {
|
||||
// Scroll smoothly to the top
|
||||
window.scrollTo({ top: 0, behavior: "smooth" })
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
// Attach scroll event listener when component is mounted
|
||||
window.addEventListener("scroll", checkScroll)
|
||||
})
|
||||
|
||||
onDestroy(() => {
|
||||
// Remove scroll event listener when component is destroyed
|
||||
window.removeEventListener("scroll", checkScroll)
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if showButton}
|
||||
<button on:click="{scrollToTop}" class="scroll-to-top"><img src="/media/ToTop.svg" alt="toTop" /> </button>
|
||||
{/if}
|
||||
|
||||
<style lang="less">
|
||||
@import "../../assets/css/main.less";
|
||||
.scroll-to-top {
|
||||
/* Place your styles here */
|
||||
position: fixed;
|
||||
bottom: 5px;
|
||||
z-index: 100;
|
||||
transform: scale(0.5);
|
||||
right: 5px;
|
||||
@media @tablet {
|
||||
bottom: 60px;
|
||||
right: 60px;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
@ -13,4 +13,4 @@ export const location = writable(initLoc)
|
||||
export let navigation = writable<Navigation>()
|
||||
export let pages = writable<Pages>({})
|
||||
export let serviceNavigation = writable<Navigation>()
|
||||
export let rerender = writable(0)
|
||||
export let rerender = writable(0)
|
Loading…
x
Reference in New Issue
Block a user