generated from cms/tibi-docs
robin - final version
This commit is contained in:
parent
8128f4f641
commit
383c1be382
@ -9,6 +9,32 @@
|
||||
meta:
|
||||
label: Dieser Titel wird in der Karte angezeigt (Name des Landes).
|
||||
|
||||
- name: verticalAlignment
|
||||
type: string
|
||||
meta:
|
||||
label: Vertikale Ausrichtung
|
||||
widget: select
|
||||
choices:
|
||||
- name: Oben
|
||||
id: flex-start
|
||||
- name: Mitte
|
||||
id: center
|
||||
- name: Unten
|
||||
id: flex-end
|
||||
|
||||
- name: horizontalAlignment
|
||||
type: string
|
||||
meta:
|
||||
label: Horizontale Ausrichtung
|
||||
widget: select
|
||||
choices:
|
||||
- name: Links
|
||||
id: flex-start
|
||||
- name: Mitte
|
||||
id: center
|
||||
- name: Rechts
|
||||
id: flex-end
|
||||
|
||||
- name: properties
|
||||
type: number[]
|
||||
meta:
|
||||
|
||||
@ -211,11 +211,19 @@
|
||||
dependsOn:
|
||||
eval: $parent.contentType == 'worldCard'
|
||||
subFields:
|
||||
- name: cards
|
||||
- name: row
|
||||
type: object[]
|
||||
meta:
|
||||
label: Karten
|
||||
subFields: !include cards.yml
|
||||
label: Zeilen
|
||||
subFields:
|
||||
- name: cards
|
||||
type: object[]
|
||||
meta:
|
||||
label: Karten
|
||||
metaElements:
|
||||
- verticalAlignment
|
||||
- horizontalAlignment
|
||||
subFields: !include cards.yml
|
||||
|
||||
- name: nestedCard
|
||||
type: object[]
|
||||
|
||||
@ -107,7 +107,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
swiper-container {
|
||||
max-width: 1600px;
|
||||
max-width: 1800px;
|
||||
}
|
||||
.inner-container {
|
||||
display: flex;
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
import Text from "../widgets/text.svelte"
|
||||
import TextLink from "../widgets/textLink.svelte"
|
||||
import TopDown from "../widgets/topDown.svelte"
|
||||
import WorldCard from "../widgets/Worldcard/worldcard.svelte"
|
||||
import { rerender } from "../../store"
|
||||
import IconCycleCircle from "../widgets/iconCycleCircle.svelte"
|
||||
import IconCycleBox from "../widgets/iconCycleBox.svelte"
|
||||
@ -91,8 +92,10 @@
|
||||
<Persons col="{col}" pageId="{pageId}" />
|
||||
{:else if col.contentType == "iconCycleCircle"}
|
||||
<IconCycleCircle col="{col}" pageId="{pageId}" />
|
||||
{:else}
|
||||
{:else if col.contentType == "iconCycleSquare"}
|
||||
<IconCycleBox col="{col}" pageId="{pageId}" />
|
||||
{:else if col.contentType == "worldCard"}
|
||||
<WorldCard col="{col}" pageId="{pageId}" />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
@ -46,10 +46,10 @@
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
|
||||
overflow-x: hidden;
|
||||
gap: 10px;
|
||||
|
||||
|
||||
& > .row {
|
||||
padding: 10px;
|
||||
padding-top: 80px;
|
||||
@ -75,7 +75,7 @@
|
||||
|
||||
& > .content {
|
||||
width: 100%;
|
||||
max-width: 1600px;
|
||||
max-width: 1800px;
|
||||
padding: 0px 2.5vw;
|
||||
position: relative;
|
||||
&.bright {
|
||||
|
||||
154
frontend/src/lib/components/widgets/Worldcard/card.svelte
Normal file
154
frontend/src/lib/components/widgets/Worldcard/card.svelte
Normal file
@ -0,0 +1,154 @@
|
||||
<script lang="ts">
|
||||
import { apiBaseURL } from "../../../../config"
|
||||
|
||||
export let card: Card
|
||||
export let properties: string[][]
|
||||
export let pageId: string
|
||||
export let selected: boolean[]
|
||||
let props
|
||||
$: {
|
||||
props = chunkArray([...card.properties], 5)
|
||||
}
|
||||
|
||||
function chunkArray(myArray, chunk_size): number[][] {
|
||||
var results = []
|
||||
|
||||
while (myArray.length) {
|
||||
results.push(myArray.splice(0, chunk_size))
|
||||
}
|
||||
|
||||
return results
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="card">
|
||||
<img src="{apiBaseURL}page/{pageId}/{card.image.src}" alt="card" />
|
||||
|
||||
<div class="content">
|
||||
<div
|
||||
class="container"
|
||||
style="align-items: {card.horizontalAlignment || 'center'}; justify-content: {card.verticalAlignment ||
|
||||
'center'};"
|
||||
>
|
||||
<div class="inner-container">
|
||||
<div class="title" class:active="{card.properties.some((v, i) => selected[v])}">
|
||||
{card.title}
|
||||
</div>
|
||||
|
||||
<div class="properties">
|
||||
{#each props as propertyRow, i (i)}
|
||||
<div class="property-row">
|
||||
{#each propertyRow as property, j (j)}
|
||||
<div class="collapsible-wrapper">
|
||||
<div class="property collapsible" class:selected="{selected[property]}">
|
||||
<div class="short">
|
||||
{properties[property][0]}
|
||||
</div>
|
||||
<div class="long">{properties[property][1]}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../../assets/css/main.less";
|
||||
.card {
|
||||
position: relative;
|
||||
height: fit-content;
|
||||
img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
.content {
|
||||
position: absolute;
|
||||
&:hover {
|
||||
z-index: 10000;
|
||||
}
|
||||
padding: 10px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.inner-container {
|
||||
max-width: 170px;
|
||||
&:hover {
|
||||
max-width: fit-content;
|
||||
}
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
.title {
|
||||
padding: 5px 10px;
|
||||
font-weight: bold;
|
||||
color: @font-color-secondary;
|
||||
background-color: @bg-color-secondary;
|
||||
&.active {
|
||||
background-color: @bg-color;
|
||||
color: @font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.properties {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
.property-row {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
|
||||
.property {
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
width: 30px;
|
||||
max-width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 15px;
|
||||
border: 2px solid #4f4f4f;
|
||||
color: #4f4f4f;
|
||||
background-color: @bg-color-secondary;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: 0.5s width ease-in, 0.5s background-color ease-in, 0.5s color ease-in;
|
||||
&.selected {
|
||||
background-color: @bg-color !important;
|
||||
color: @font-color !important;
|
||||
}
|
||||
.long {
|
||||
display: none;
|
||||
white-space: nowrap;
|
||||
padding-left: 15px;
|
||||
}
|
||||
&:hover {
|
||||
width: 500px;
|
||||
max-width: fit-content;
|
||||
padding: 5px;
|
||||
background-color: white;
|
||||
|
||||
.long {
|
||||
display: initial;
|
||||
background-color: @bg-color;
|
||||
color: @font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,47 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte"
|
||||
export let abbriviation
|
||||
export let name
|
||||
export let focused = false
|
||||
let dispatcher = createEventDispatcher()
|
||||
$: {
|
||||
dispatcher("click", focused)
|
||||
}
|
||||
</script>
|
||||
|
||||
<button class="selectbox" on:click="{() => (focused = !focused)}" class:focused="{focused}">
|
||||
<div class="abbriviation">{abbriviation}</div>
|
||||
<div class="name">{name}</div>
|
||||
</button>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../../assets/css/main.less";
|
||||
.selectbox {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: @font-color-secondary;
|
||||
padding: 5px;
|
||||
height: 30px;
|
||||
border-radius: 15px;
|
||||
font-size: 0.7rem;
|
||||
transition: width 0.5s ease-in-out;
|
||||
background-color: transparent;
|
||||
border: 2px solid @bg-color;
|
||||
.abbriviation {
|
||||
padding-right: 10px;
|
||||
}
|
||||
.name {
|
||||
padding-right: 10px;
|
||||
}
|
||||
&.focused {
|
||||
width: fit-content;
|
||||
background-color: @bg-color;
|
||||
color: @font-color;
|
||||
.abbriviation {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
111
frontend/src/lib/components/widgets/Worldcard/worldcard.svelte
Normal file
111
frontend/src/lib/components/widgets/Worldcard/worldcard.svelte
Normal file
@ -0,0 +1,111 @@
|
||||
<script lang="ts">
|
||||
import Card from "./card.svelte"
|
||||
import Selectbox from "./selectbox.svelte"
|
||||
|
||||
export let col: Column
|
||||
export let pageId: number
|
||||
|
||||
let availableProperties = [
|
||||
["A", "Aktien"],
|
||||
["PE", "Private Equity"],
|
||||
["IN", "Infrastruktur"],
|
||||
["W", "Waldwirtschaft"],
|
||||
["IE", "Immobilien-Entwicklung"],
|
||||
|
||||
["R", "Renten"],
|
||||
["VC", "Venture Capital"],
|
||||
["PD", "Private Debt"],
|
||||
["LW", "Landwirtschaft"],
|
||||
["IB", "Immobilien-Bestand"],
|
||||
]
|
||||
let selected = []
|
||||
availableProperties.forEach((e) => selected.push(false))
|
||||
let props
|
||||
$: {
|
||||
props = chunkArray([...availableProperties], 5)
|
||||
console.log(props, "===props")
|
||||
}
|
||||
|
||||
function chunkArray(myArray, chunk_size): string[][] {
|
||||
var results = []
|
||||
|
||||
while (myArray.length) {
|
||||
results.push(myArray.splice(0, chunk_size))
|
||||
}
|
||||
|
||||
return results
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="worldcard" style="overflow-x: scroll;">
|
||||
<div class="worldcard">
|
||||
{#each col.worldCard.row as row}
|
||||
<div class="wc-row">
|
||||
{#each row.cards as card}
|
||||
<Card card="{card}" properties="{availableProperties}" pageId="{pageId}" selected="{selected}" />
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="selectboxes">
|
||||
<h3>WÄHLEN SIE IHRE ANLAGEKLASSEN</h3>
|
||||
{#each props as propertyRow, i}
|
||||
<div class="prop-row">
|
||||
{#each propertyRow as property, j}
|
||||
<Selectbox
|
||||
abbriviation="{property[0]}"
|
||||
name="{property[1]}"
|
||||
on:click="{(e) => {
|
||||
console.log(!selected[availableProperties.indexOf(property)], '===index')
|
||||
selected[availableProperties.indexOf(property)] = e.detail
|
||||
}}"
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../../assets/css/main.less";
|
||||
|
||||
.worldcard {
|
||||
line-height: 1 !important;
|
||||
font-size: 0.7rem;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
max-width: 1800px;
|
||||
|
||||
& > .worldcard {
|
||||
gap: 0px !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.wc-row {
|
||||
display: flex;
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
.selectboxes {
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
@media @tablet {
|
||||
align-items: center;
|
||||
}
|
||||
margin-bottom: 20px;
|
||||
gap: 10px;
|
||||
|
||||
.prop-row {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -11,7 +11,7 @@
|
||||
</script>
|
||||
|
||||
<div class="iconCycleSquares">
|
||||
{#each col.iconCycleSquare.boxes as box, i}
|
||||
{#each col?.iconCycleSquare?.boxes as box, i}
|
||||
<div class="box" id="box{i}" class:active="{i == active}">
|
||||
<div class="content">
|
||||
<div class="icon">
|
||||
|
||||
5
types/global.d.ts
vendored
5
types/global.d.ts
vendored
@ -119,10 +119,15 @@ interface InfoBoard {
|
||||
}
|
||||
|
||||
interface WorldCard {
|
||||
rows: WorldCardRow[]
|
||||
}
|
||||
interface worldCardRow {
|
||||
cards: Card[]
|
||||
}
|
||||
|
||||
interface Card {
|
||||
verticalAlignment: string
|
||||
horizontalAlignment: string
|
||||
image: FileField
|
||||
title: string
|
||||
properties: number[]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user