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
Download Patch File Download Diff File Expand all files Collapse all files

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;