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

robin - final version

Browse Source
This commit is contained in:
Robin Grenzdörfer
2023-07-16 21:31:08 +00:00
parent 8128f4f641
commit 383c1be382
10 changed files with 363 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
frontend/src/lib/components/widgets/Worldcard/card.svelte Normal file
View 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>