generated from cms/tibi-docs
184 lines
6.9 KiB
Svelte
184 lines
6.9 KiB
Svelte
<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], card.properties.length > 8 ? 5 : 4)
|
|
}
|
|
|
|
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])}"
|
|
style="top: {card.verticalShift || 0}%; left: {card.horizontalShift || 0}%;"
|
|
>
|
|
{card.title}
|
|
</div>
|
|
|
|
<div class="properties" style="top: {card.verticalShift || 0}%; left: {card.horizontalShift || 0}%;">
|
|
{#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;
|
|
width: 100%;
|
|
}
|
|
.short {
|
|
font-weight: 700;
|
|
}
|
|
.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: 200px;
|
|
&:hover {
|
|
max-width: fit-content;
|
|
}
|
|
display: flex;
|
|
width: fit-content;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
align-items: center;
|
|
.title {
|
|
font-size: min(1.6vw, 14px);
|
|
position: relative;
|
|
z-index: 200;
|
|
padding: 2px 5px;
|
|
text-transform: uppercase;
|
|
@media @tablet {
|
|
padding: 5px 10px;
|
|
font-size: min(1vw, 18px);
|
|
}
|
|
font-weight: bold;
|
|
color: @font-color-secondary;
|
|
background-color: @bg-color-secondary;
|
|
&.active {
|
|
background-color: @bg-color;
|
|
color: @font-color;
|
|
}
|
|
}
|
|
|
|
.properties {
|
|
display: none;
|
|
position: relative;
|
|
@media @desktop {
|
|
display: flex;
|
|
}
|
|
z-index: 200;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
.property-row {
|
|
display: flex;
|
|
gap: 5px;
|
|
|
|
.property {
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
width: 2vw;
|
|
max-width: 30px;
|
|
font-size: min(0.7vw, 14px);
|
|
height: 2vw;
|
|
max-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 max-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 {
|
|
max-width: 0px;
|
|
overflow: hidden;
|
|
background-color: @bg-color-secondary;
|
|
color: @font-color-secondary;
|
|
transition: 0.5s width ease-in, 0.5s background-color ease-in, 0.5s color ease-in;
|
|
white-space: nowrap;
|
|
}
|
|
&:hover {
|
|
width: fit-content;
|
|
max-width: 1000px;
|
|
padding: 5px;
|
|
background-color: white;
|
|
.short {
|
|
padding-left: 8px;
|
|
}
|
|
.long {
|
|
padding-left: 15px;
|
|
max-width: fit-content;
|
|
background-color: @bg-color;
|
|
color: @font-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|