icon cycle circle

This commit is contained in:
Robin Grenzdörfer 2023-07-16 06:21:49 +00:00
parent c6d43a95fa
commit bfa53f6b95
15 changed files with 423 additions and 29 deletions

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

@ -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&nbsp;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&nbsp;644&nbsp;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>

@ -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">

@ -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>

@ -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)