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; display: flex;
justify-content: center; justify-content: center;
.container { .container {
max-width: 1800px; max-width: 1400px;
width: 100%; width: 100%;
display: flex; display: flex;
padding: 0px 2.5vw; padding: 0px 2.5vw;

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

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

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

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

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

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

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

@ -35,12 +35,18 @@
} }
</script> </script>
<div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
<div class="worldcard"> <div class="worldcard">
<div class="worldcard"> <div class="worldcard">
{#each col.worldCard.row as row} {#each col.worldCard.row as row}
<div class="wc-row"> <div class="wc-row">
{#each row.cards as card} {#each row.cards as card}
<Card card="{card}" properties="{availableProperties}" pageId="{pageId}" selected="{selected}" /> <Card
card="{card}"
properties="{availableProperties}"
pageId="{pageId}"
selected="{selected}"
/>
{/each} {/each}
</div> </div>
{/each} {/each}
@ -63,17 +69,18 @@
{/each} {/each}
</div> </div>
</div> </div>
</div>
<style lang="less"> <style lang="less">
@import "../../../assets/css/main.less"; @import "../../../assets/css/main.less";
.worldcard { .worldcard {
line-height: 1 !important; line-height: 1 !important;
font-size: 0.7rem; font-size: 0.8rem;
display: flex; display: flex;
align-items: flex-start; align-items: center;
flex-direction: column; flex-direction: column;
width: 100%; width: 1170px;
max-width: 95vw; max-width: 95vw;
& > .worldcard { & > .worldcard {

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

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

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

@ -48,13 +48,19 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: @font-color-secondary; color: @font-color-secondary;
padding: 10px;
&.active { &.active {
background-color: @bg-color; background-color: @bg-color;
color: @font-color; color: @font-color;
} }
width: 140px; aspect-ratio: 1/1;
height: 150px; 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 { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -70,11 +76,6 @@
font-family: "Libre Caslon Text", serif; font-family: "Libre Caslon Text", serif;
} }
} }
@media @tablet {
width: 270px;
height: 270px;
gap: 30px;
}
} }
} }
</style> </style>