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
All checks were successful
deploy to production / deploy (push) Successful in 36s
Details

Browse Source
This commit is contained in:
Robin Grenzdörfer 2023-09-08 13:42:48 +00:00
parent 6b735fed07
commit 61af2e2c8e
7 changed files with 96 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -132,7 +132,7 @@
display: flex;
justify-content: center;
.container {
max-width: 1800px;
max-width: 1400px;
width: 100%;
display: flex;
padding: 0px 2.5vw;

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

@ -105,7 +105,7 @@
align-items: center;
justify-content: center;
swiper-container {
max-width: 1800px;
max-width: 1400px;
}
.inner-container {
display: flex;

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

@ -83,10 +83,11 @@
gap: 10px;
& > .row {
padding: 10px;
padding: 30px 10px;
margin: 15px 0px;
padding: 15px 10px;
@media @tablet {
padding: 80px 10px;
margin: 40px 0px;
padding: 30px 10px;
}
width: 100%;
position: relative;
@ -110,7 +111,7 @@
& > .content {
width: 100%;
max-width: 1800px;
max-width: 1400px;
padding: 0px 2.5vw;
position: relative;
&.bright {

59
frontend/src/lib/components/widgets/Worldcard/card.svelte
View File

@ -19,6 +19,7 @@
return results
}
let hovered = "-1"
</script>
<div class="card">
@ -41,10 +42,23 @@
<div class="properties" style="top: {card.verticalShift || 0}%; left: {card.horizontalShift || 0}%;">
{#each props as propertyRow, i (i)}
<div class="property-row">
<div
class="property-row"
style="grid-template-columns: repeat({propertyRow.length}, min(25px, 1.8vw));"
>
{#each propertyRow as property, j (j)}
<div class="collapsible-wrapper">
<div class="property collapsible" class:selected="{selected[property]}">
<div
class="property collapsible"
class:hovered="{hovered == j + ' ' + i}"
class:selected="{selected[property]}"
on:mouseenter="{() => {
hovered = j + ' ' + i
}}"
on:mouseleave="{() => {
hovered = '-1'
}}"
>
<div class="short">
{properties[property][0]}
</div>
@ -65,6 +79,7 @@
.card {
position: relative;
height: fit-content;
img {
display: block;
width: 100%;
@ -74,9 +89,6 @@
}
.content {
position: absolute;
&:hover {
z-index: 10000;
}
padding: 10px;
top: 0px;
left: 0px;
@ -87,6 +99,7 @@
height: 100%;
display: flex;
flex-direction: column;
.inner-container {
max-width: 200px;
&:hover {
@ -122,21 +135,29 @@
@media @desktop {
display: flex;
}
z-index: 200;
flex-direction: column;
gap: 5px;
.property-row {
display: flex;
gap: 5px;
display: grid;
grid-gap: 5px;
@media (max-width: 1000px) {
grid-gap: 2px;
}
.property {
z-index: 99;
&:hover {
z-index: 9999;
}
position: relative;
left: 0px;
cursor: pointer;
overflow: hidden;
width: 2vw;
max-width: 30px;
font-size: min(0.7vw, 14px);
height: 2vw;
max-height: 30px;
width: 1.8vw;
max-width: 25px;
font-size: min(0.5vw, 11px);
height: 1.8vw;
max-height: 25px;
border-radius: 15px;
border: 2px solid #4f4f4f;
color: #4f4f4f;
@ -146,6 +167,8 @@
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;
display: flex;
&.selected {
background-color: @bg-color !important;
color: @font-color !important;
@ -155,11 +178,13 @@
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;
transition: 0.5s width ease-in, 0.5s background-color ease-in, 0.5s color ease-in,
0.5s padding ease-in;
white-space: nowrap;
}
&:hover {
&.hovered {
width: fit-content;
z-index: 9999;
max-width: 1000px;
padding: 5px;
background-color: white;
@ -167,7 +192,7 @@
padding-left: 8px;
}
.long {
padding-left: 15px;
padding: 0px 10px;
max-width: fit-content;
background-color: @bg-color;
color: @font-color;

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

@ -35,32 +35,39 @@
}
</script>
<div class="worldcard">
<div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
<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="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) => {
selected[availableProperties.indexOf(property)] = e.detail
}}"
/>
{/each}
</div>
{/each}
<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) => {
selected[availableProperties.indexOf(property)] = e.detail
}}"
/>
{/each}
</div>
{/each}
</div>
</div>
</div>
@ -69,11 +76,11 @@
.worldcard {
line-height: 1 !important;
font-size: 0.7rem;
font-size: 0.8rem;
display: flex;
align-items: flex-start;
align-items: center;
flex-direction: column;
width: 100%;
width: 1170px;
max-width: 95vw;
& > .worldcard {

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

@ -28,7 +28,7 @@
flex-direction: column;
align-items: center;
width: 150px;
gap: 15px;
gap: 10px;
max-width: 45%;
flex-grow: 1;
font-size: 0.9rem;
@ -39,7 +39,7 @@
width: 160px;
}
@media @desktop {
width: 220px;
width: 213px;
}
img {
width: 75%;
@ -48,7 +48,7 @@
.text {
display: flex;
flex-direction: column;
gap: 10px;
em {
text-align: center;
font-size: 2.2rem;
@ -58,6 +58,7 @@
p {
text-align: center;
font-weight: bold;
font-size: 1.1rem;
}
}
}

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

@ -48,13 +48,19 @@
align-items: center;
justify-content: center;
color: @font-color-secondary;
padding: 10px;
&.active {
background-color: @bg-color;
color: @font-color;
}
width: 140px;
height: 150px;
aspect-ratio: 1/1;
width: calc((100% / 2) - 10px);
@media (min-width: 950px) and (max-width: 1450px) {
width: calc((100% / 4) - 10px);
}
@media (min-width: 1450px) {
width: calc((100% / 5) - 10px);
}
.content {
display: flex;
flex-direction: column;
@ -70,11 +76,6 @@
font-family: "Libre Caslon Text", serif;
}
}
@media @tablet {
width: 270px;
height: 270px;
gap: 30px;
}
}
}
</style>