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

last changes

Browse Source
This commit is contained in:
Robin Grenzdörfer
2023-08-15 12:48:43 +00:00
parent c29765dd09
commit c9135d03cf
17 changed files with 138 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -63,7 +63,7 @@
height: fit-content;
img {
display: block;
height: 100%;
width: 100%;
}
.content {
position: absolute;
@@ -91,7 +91,11 @@
gap: 20px;
align-items: center;
.title {
padding: 5px 10px;
font-size: min(0.9vw, 14px);
padding: 2px 5px;
@media @tablet {
padding: 5px 10px;
}
font-weight: bold;
color: @font-color-secondary;
background-color: @bg-color-secondary;
@@ -102,7 +106,10 @@
}
.properties {
display: flex;
display: none;
@media @desktop {
display: flex;
}
flex-direction: column;
gap: 5px;
.property-row {
@@ -112,9 +119,11 @@
.property {
cursor: pointer;
overflow: hidden;
width: 30px;
width: 2vw;
max-width: 30px;
height: 30px;
font-size: min(0.7vw, 14px);
height: 2vw;
max-height: 30px;
border-radius: 15px;
border: 2px solid #4f4f4f;
color: #4f4f4f;
@@ -122,7 +131,8 @@
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;
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;
@@ -136,8 +146,8 @@
white-space: nowrap;
}
&:hover {
width: 500px;
max-width: fit-content;
width: fit-content;
max-width: 1000px;
padding: 5px;
background-color: white;

7
frontend/src/lib/components/widgets/Worldcard/selectbox.svelte
View File

@@ -23,9 +23,12 @@
align-items: center;
color: @font-color-secondary;
padding: 5px;
height: 30px;
height: 20px;
@media @tablet {
height: 30px;
}
border-radius: 15px;
font-size: 0.7rem;
font-size: min(2.2vw, 11px);
transition: width 0.5s ease-in;
background-color: transparent;
border: 2px solid @bg-color;

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

@@ -36,7 +36,7 @@
}
</script>
<div class="worldcard" style="overflow-x: scroll;">
<div class="worldcard">
<div class="worldcard">
{#each col.worldCard.row as row}
<div class="wc-row">
@@ -74,8 +74,8 @@
display: flex;
align-items: flex-start;
flex-direction: column;
width: 100vw;
max-width: 1800px;
width: 100%;
max-width: 95vw;
& > .worldcard {
gap: 0px !important;
@@ -83,13 +83,14 @@
flex-direction: column;
.wc-row {
display: flex;
max-width: 100%;
height: fit-content;
}
}
.selectboxes {
width: 100%;
max-width: 100vw;
max-width: 95vw;
display: flex;
flex-direction: column;
align-items: flex-start;
@@ -102,6 +103,7 @@
.prop-row {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 10px;
}
}

2
frontend/src/lib/components/widgets/boxlist.svelte
View File

@@ -14,6 +14,7 @@
@import "../../assets/css/main.less";
.boxList {
display: flex;
flex-wrap: wrap;
gap: 20px;
@@ -23,5 +24,6 @@
color: @font-color-secondary;
font-weight: bold;
}
}
</style>

4
frontend/src/lib/components/widgets/extendableBox.svelte
View File

@@ -60,6 +60,7 @@
.boxes {
display: flex;
flex-direction: column;
font-family: "Libre Franklin", "sans-serif";
.box {
border-bottom: 2px dotted @bg-color-secondary;
display: flex;
@@ -72,7 +73,8 @@
padding-bottom: 20px;
}
.upper {
font-size: 1.2rem;
cursor: pointer;
font-size: 1.4rem;
@media @tablet {
font-size: 1.6rem;
}

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

@@ -28,11 +28,15 @@
display: flex;
flex-direction: column;
align-items: center;
width: 80px;
gap: 8px;
max-width: 45%;
flex-grow: 1;
@media @tablet {
width: 140px;
max-width: initial;
flex-grow: initial;
width: 107px;
gap: 20px;
}
img {

34
frontend/src/lib/components/widgets/persons.svelte
View File

@@ -17,11 +17,20 @@
}}"
>
<div class="image" on:mouseover="{() => (hover = i)}" on:focus on:blur on:mouseout="{() => (hover = -1)}">
{#if hover == i}
<img src="{`${apiBaseURL}page/${pageId}/${pp.hoverImage?.src}`}" alt="img" />
{:else}
<img src="{`${apiBaseURL}page/${pageId}/${pp.initialImage?.src}`}" alt="img" />
{/if}
<!-- Initial Image -->
<img
class="initial"
src="{`${apiBaseURL}page/${pageId}/${pp.initialImage?.src}`}"
alt="img"
style="opacity: {hover == i ? 0 : 1}"
/>
<!-- Hover Image -->
<img
class="hover"
src="{`${apiBaseURL}page/${pageId}/${pp.hoverImage?.src}`}"
alt="img"
style="opacity: {hover == i ? 1 : 0}"
/>
</div>
<div class="text">
{pp.name}
@@ -36,19 +45,30 @@
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 80px;
gap: 30px;
@media @tablet {
gap: 80px;
}
.person {
cursor: pointer;
margin: 40px 0px;
@media @tablet {
margin: 40px 0px;
}
display: flex;
flex-direction: column;
.image {
width: 290px;
height: 368px;
position: relative;
img {
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
top: 0;
left: 0;
transition: opacity 0.3s;
}
}
.text {

1
frontend/src/lib/components/widgets/text.svelte
View File

@@ -9,5 +9,6 @@
<style>
.text {
text-align: left;
font-family: "Libre Franklin", sans-serif;
}
</style>

1
frontend/src/lib/components/widgets/textLink.svelte
View File

@@ -18,5 +18,6 @@
flex-direction: column;
align-items: start;
gap: 20px;
}
</style>