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

12
api/collections/fields/row.yml
View File

@ -15,12 +15,6 @@ subFields:
label: Oberer Titel
helperText: "Dieser Titel wird in der Zeile oben angezeigt."
- name: topTitleRed
type: boolean
meta:
label: Oberer Titel rot
helperText: "Dieser Titel wird in der Zeile oben rot angezeigt."
- name: title
type: string
meta:
@ -45,6 +39,12 @@ subFields:
label: Hintergrundbild
helperText: "Dieses Bild wird als Hintergrundbild der Zeile angezeigt."
- name: flexWrapNormal
type: boolean
meta:
label: Zeile normal umbrechen
helperText: "Ist dies aktiviert, so wird die Zeile normal und nicht reverse umgebrochen."
- name: columns
type: object[]
meta:

1
docker-compose-local.yml
View File

@ -28,6 +28,7 @@ services:
- ./:/data
- ./tmp:/tmp
- ./tmp/nonexistent:/nonexistent
- ./tmp/.npm:/.npm
working_dir: /data
command: sh -c "yarn install && API_BASE=http://tibiserver:8080/api/v1/_/${TIBI_NAMESPACE} yarn start"
expose:

2
frontend/src/lib/assets/css/base.less
View File

@ -139,7 +139,7 @@ swiper-slide {
position: absolute;
z-index: 10000;
left: 0px;
bottom: 0px;
bottom: -10px;
background: #000000;
height: 5px;
width: 0;

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

@ -56,6 +56,7 @@
<div class="lower">{nextpage?.name}</div>
</button>{/if}
<div class="lower-part">
<div class="container">
<div class="links">
<button>Datenschutz</button>
<button>Impressum</button>
@ -67,6 +68,7 @@
</div>
</div>
</div>
</div>
<style lang="less">
@import "../assets/css/main.less";
@ -103,10 +105,16 @@
}
.lower-part {
padding: 40px 40px;
padding: 40px 20px;
background-color: @bg-color-secondary;
width: 100%;
display: flex;
justify-content: center;
.container {
max-width: 1800px;
width: 100%;
display: flex;
padding: 0px 2.5vw;
flex-direction: column;
.links,
.contact {
@ -122,7 +130,7 @@
}
}
@media @tablet {
padding: 80px 40px;
padding: 80px 2.5vw;
flex-direction: row;
justify-content: space-between;
.links,
@ -135,4 +143,5 @@
}
}
}
}
</style>

9
frontend/src/lib/components/Menu/Header.svelte
View File

@ -29,14 +29,13 @@
.header {
background-color: @bg-color;
width: 100%;
padding: 10.4px 5px;
@media @tablet {
padding: 25.4px 60px;
}
padding: 25.4px calc(2.5vw + 10px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
gap: 35px;
.logo {
cursor: pointer;

1
frontend/src/lib/components/Menu/Menu.svelte
View File

@ -102,6 +102,7 @@
@media @tablet {
flex-wrap: initial;
flex-direction: column;
align-items: flex-end;
height: 100%;
}
justify-content: space-between;

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

@ -109,18 +109,21 @@
}
.inner-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
@media @tablet {
align-items: center;
}
width: 100%;
height: fit-content;
.titles {
padding: 0 5%;
font-weight: normal;
h1 {
font-size: 2rem;
padding: 10px 0px;
padding: 20px 0px;
margin: 10px 0px 20px 0px;
line-height: 1;
position: relative;
@ -143,16 +146,17 @@
min-width: 0px;
}
}
@media @tablet {
.titles {
font-weight: normal;
h1 {
font-size: 4rem;
padding: 20px 0px;
font-size: 3.4rem;
padding: 20px 20px;
margin: 20px 0px 40px 0px;
}
h2 {
font-size: 1.6rem;
font-size: 1.5rem;
}
}
.description {

11
frontend/src/lib/components/Pagebuilder/Pagebuilder.svelte
View File

@ -61,7 +61,11 @@
{#if row.subTitle}
<h3>{row.subTitle}</h3>
{/if}
<div class="row" class:dominant="{row.columns.some((col) => col.contentType == 'iconCycleCircle')}">
<div
class="row"
class:normalWrap="{row.flexWrapNormal}"
class:dominant="{row.columns.some((col) => col.contentType == 'iconCycleCircle')}"
>
{#each row?.columns as col}
<div class="col" class:dominant="{col.contentType == 'iconCycleCircle'}">
{#if col?.contentType == "text"}
@ -130,7 +134,7 @@
font-size: 2.3rem;
}
h1 {
font-size: 5rem;
font-size: 4rem;
}
}
@ -146,6 +150,9 @@
}
@media (max-width: 640px) {
flex-direction: column-reverse;
&.normalWrap {
flex-direction: column;
}
}
& > .col {
&.dominant {

22
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 {
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: 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;

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

@ -23,9 +23,12 @@
align-items: center;
color: @font-color-secondary;
padding: 5px;
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 {

30
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: 30px;
@media @tablet {
gap: 80px;
}
.person {
cursor: pointer;
@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>