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

fixes

Browse Source
This commit is contained in:
Robin Grenzdörfer 2023-07-17 07:24:08 +00:00
parent 383c1be382
commit 0e1de15d7c
17 changed files with 164 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
api/collections/fieldLists/column.yml
View File

@ -148,12 +148,36 @@
meta:
label: Zeilen Nr (0 Basiert)
- name: extendableRowNr
type: number
meta:
label: Ausfahrbare boxreihe (0 Basiert)
- name: image
type: file
meta:
label: Bild
dependsOn:
eval: $parent.contentType == 'image'
- name: icons
type: object[]
meta:
label: Icons
helperText: "Für Personpreview xing und linkedin icons gedacht."
dependsOn:
eval: $parent.contentType == 'image'
subFields:
- name: icon
type: file
meta:
label: Icon
- name: link
type: string
meta:
label: Link
- name: iconCycleSquare
type: object
meta:

6
frontend/src/App.svelte
View File

@ -33,7 +33,6 @@
pagesRes[e.path] = e
})
$pages = pagesRes
console.log(pagesRes)
}
async function getNavigation() {
@ -90,7 +89,10 @@
.HP {
h2 {
font-size: 3.2rem !important;
font-size: 2.1rem !important;
@media @tablet {
font-size: 3.2rem !important;
}
}
}
.swiper-button-prev,

25
frontend/src/lib/assets/css/base.less
View File

@ -141,9 +141,12 @@ swiper-slide {
left: 0px;
bottom: 0px;
background: #000000;
height: 10px;
height: 5px;
width: 0;
animation: underlineEffect 4s linear forwards;
@media @tablet {
height: 10px;
}
}
&:not(.active) .underline {
@ -151,3 +154,23 @@ swiper-slide {
}
}
}
*::-webkit-scrollbar {
width: 10px; /* width of the entire scrollbar */
height: 10px;
}
*::-webkit-scrollbar-track {
background: rgb(0, 0, 0); /* color of the tracking area */
}
*::-webkit-scrollbar-thumb {
background-color: rgb(255, 255, 255); /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
//border: 3px solid black; /* creates padding around scroll thumb */
}
* {
scrollbar-width: thin; /* "auto" or "thin" */
scrollbar-color: rgb(255, 255, 255) rgb(0, 0, 0); /* scroll thumb and track */
}

31
frontend/src/lib/components/Footer.svelte
View File

@ -5,7 +5,7 @@
$: 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
)
@ -18,31 +18,37 @@
nextIndex = currIndex + 1
}
nextpage = pages[nextIndex]
console.log(nextpage, pages, nextIndex)
}
setInterval(() => {
getNextPage($navigation.pages)
}, 1000)
let showNext = true
$: {
if ($rerender) {
if (location.pathname != "/") {
getNextPage($navigation.pages)
}
if (location.pathname.split("/").length >= 2) {
showNext = false
} else {
showNext = true
}
}
}
</script>
<div class="footer">
<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 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="links">
<button>Datenschutz</button>
@ -90,7 +96,6 @@
.lower-part {
padding: 40px 40px;
background-color: @bg-color-secondary;
width: 100%;
display: flex;

1
frontend/src/lib/components/Menu/Menu.svelte
View File

@ -2,7 +2,6 @@
import { navigate } from "svelte-routing/src/history"
import { navigation, pages, rerender } from "../../store"
import Header from "./Header.svelte"
$: console.log($navigation, "nav")
export let active = false
</script>

4
frontend/src/lib/components/Pagebuilder/Homepage.svelte
View File

@ -9,9 +9,7 @@
register(false)
let swiper
function handleMouseOver() {
console.log("test")
}
function handleMouseOver() {}
function handleMouseOut() {}

12
frontend/src/lib/components/Pagebuilder/Pagebuilder.svelte
View File

@ -31,7 +31,8 @@
}
return ""
}
}
let nestedPath = checkNestedPath()
</script>
@ -42,7 +43,7 @@
{/if}
{#if nestedPath}
<h3
style="cursor: pointer;"
style="cursor: pointer; display: flex; align-items: center; gap: 10px; line-height: 1.4;"
on:keydown
on:click="{() => {
$rerender = $rerender + 1
@ -61,7 +62,7 @@
{#if row.subTitle}
<h3>{row.subTitle}</h3>
{/if}
<div class="row" class:dominant="{row.columns.some((col) => col.contentType == 'iconCycleCircle')}">
<div class="row" class:dominant="{row.columns.some((col) => col.contentType == 'iconCycleCircle')}" >
{#each row?.columns as col}
<div class="col" class:dominant="{col.contentType == 'iconCycleCircle'}">
{#if col?.contentType == "text"}
@ -69,7 +70,7 @@
{:else if col?.contentType == "textLink"}
<TextLink description="{col?.textLink?.text}" path="{col?.textLink?.link}" bright="{bright}" />
{:else if col.contentType == "image"}
<Image image="{col?.image}" pageId="{pageId}" />
<Image image="{col?.image}" col="{col}" pageId="{pageId}" />
{:else if col.contentType == "iconBlocks"}
<IconBlock pageId="{pageId}" col="{col}" />
{:else if col.contentType == "pageLinkBlocks"}
@ -107,6 +108,9 @@
.red {
color: #fa00ff !important;
}
h3 {
font-weight: normal;
}
@media @tablet {
h3 {
font-size: 1.2rem;

33
frontend/src/lib/components/Pagebuilder/Rows.svelte
View File

@ -1,8 +1,9 @@
<script lang="ts">
import { pages } from "../../store"
import { pages, scrollToRowNr } from "../../store"
import Homepage from "./Homepage.svelte"
import Pagebuilder from "./Pagebuilder.svelte"
import { apiBaseURL } from "../../../config"
import { onMount } from "svelte"
export let path
export let homepage = false
@ -12,6 +13,27 @@
page = $pages[path]
}
onMount(() => {
if ($scrollToRowNr !== -1) {
console.log("test321-", $scrollToRowNr)
if (!$scrollToRowNr) {
$scrollToRowNr = -1
return
}
let element = document.getElementById("row-" + $scrollToRowNr)
console.log(element)
if (!element) {
$scrollToRowNr = -1
return
}
element?.scrollIntoView({
behavior: "smooth",
})
$scrollToRowNr = -1
}
})
$: {
if (Object.keys($pages).length) {
initPage()
@ -22,8 +44,8 @@
<div class="rows" class:HP="{path == '/'}">
{#if page}
{#if path == "/"}<Homepage />{/if}
{#each page.rows as row}
<div class="row">
{#each page.rows as row, i}
<div class="row" id="row-{i}">
{#if row.row.backgroundImage}
<div class="background-image">
<img src="{`${apiBaseURL}page/${page.id}/${row.row.backgroundImage?.src}`}" alt="img" />
@ -52,7 +74,10 @@
& > .row {
padding: 10px;
padding-top: 80px;
padding-top: 30px;
@media @tablet {
padding-top: 80px;
}
width: 100%;
position: relative;
display: flex;

4
frontend/src/lib/components/widgets/Worldcard/worldcard.svelte
View File

@ -3,7 +3,7 @@
import Selectbox from "./selectbox.svelte"
export let col: Column
export let pageId: number
export let pageId: string
let availableProperties = [
["A", "Aktien"],
@ -23,7 +23,6 @@
let props
$: {
props = chunkArray([...availableProperties], 5)
console.log(props, "===props")
}
function chunkArray(myArray, chunk_size): string[][] {
@ -57,7 +56,6 @@
abbriviation="{property[0]}"
name="{property[1]}"
on:click="{(e) => {
console.log(!selected[availableProperties.indexOf(property)], '===index')
selected[availableProperties.indexOf(property)] = e.detail
}}"
/>

2
frontend/src/lib/components/widgets/events.svelte
View File

@ -25,8 +25,6 @@
function showMore() {
displayedItems += itemsPerPage
}
console.log("col:", col)
</script>
<div class="events">

15
frontend/src/lib/components/widgets/extendableBox.svelte
View File

@ -1,6 +1,16 @@
<script lang="ts">
import { onMount } from "svelte"
import { openExtendableNr } from "../../store"
export let col: Column
export let opened = -1
onMount(() => {
if (!isNaN($openExtendableNr) && $openExtendableNr !== -1) {
opened = $openExtendableNr
$openExtendableNr = -1
}
})
</script>
<div class="boxes">
@ -62,7 +72,10 @@
padding-bottom: 20px;
}
.upper {
font-size: 1.6rem;
font-size: 1.2rem;
@media @tablet {
font-size: 1.6rem;
}
font-weight: 500;
display: flex;
align-items: center;

10
frontend/src/lib/components/widgets/iconBlock.svelte
View File

@ -18,6 +18,7 @@
</div>
<style lang="less">
@import "../../assets/css/main.less";
.iconBlock {
display: flex;
justify-content: start;
@ -27,8 +28,13 @@
display: flex;
flex-direction: column;
align-items: center;
width: 140px;
gap: 20px;
width: 80px;
gap: 8px;
@media @tablet {
width: 140px;
gap: 20px;
}
img {
width: 100%;
height: auto;

2
frontend/src/lib/components/widgets/iconCycleBox.svelte
View File

@ -32,8 +32,10 @@
display: flex;
flex-wrap: wrap;
gap: 10px;
font-size: 0.8rem;
@media @tablet {
gap: 20px;
font-size: 1rem;
}
.box {
border: 4px solid @bg-color-secondary;

19
frontend/src/lib/components/widgets/image.svelte
View File

@ -2,11 +2,23 @@
import { apiBaseURL } from "../../../config"
export let image: FileField
export let pageId: string
export let col: Column
</script>
<div class="image-container">
<img src="{`${apiBaseURL}page/${pageId}/${image?.src}`}" alt="img" />
</div>
{#if col && col.icons}
<div class="icons">
{#each col.icons as icon}
<div class="icon">
<a href="{icon.link}" target="_blank">
<img src="{`${apiBaseURL}page/${pageId}/${icon.icon?.src}`}" alt="img" />
</a>
</div>
{/each}
</div>
{/if}
<style lang="less">
.image-container {
@ -21,4 +33,11 @@
height: 100%;
}
}
.icons {
height: 60px;
display: flex;
justify-content: flex-start;
gap: 20px;
}
</style>

5
frontend/src/lib/components/widgets/pageLinkBlocks.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { navigate } from "svelte-routing/src/history"
import { pages, rerender } from "../../store"
import { openExtendableNr, pages, rerender, scrollToRowNr } from "../../store"
export let col: Column
</script>
@ -11,6 +11,7 @@
class="page-ref"
on:click="{() => {
$rerender = $rerender + 1
navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')
}}"
>
@ -21,6 +22,8 @@
class="row-ref fill"
on:click="{() => {
$rerender = $rerender + 1
$scrollToRowNr = link.rowNr
$openExtendableNr = link.extendableRowNr
navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')
}}"
>

4
frontend/src/lib/store.ts
View File

@ -13,4 +13,6 @@ 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)
export let scrollToRowNr = writable(-1)
export let openExtendableNr = writable(-1)

5
types/global.d.ts vendored
View File

@ -55,6 +55,10 @@ interface Column {
| "networkEvents"
image?: FileField
icons: {
icon: FileField
link: string
}[]
iconCycleSquare?: IconCycleSquare
iconCycleCircle?: IconCycleCircle
text: string
@ -95,6 +99,7 @@ interface pageLinkBlock {
name: string
rowNr: number
page: string
extendableRowNr: number
}
interface IconCycleSquare {