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-01 12:09:35 +00:00
parent 769fd1296c
commit 157e667227
13 changed files with 56 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/media/arrow-r.svg
View File

@@ -1,3 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.268 4.21a.75.75 0 0 0-1.04 1.08l8.275 7.96H3.75a.75.75 0 1 0 0 1.5h18.752l-8.273 7.96a.75.75 0 0 0 1.04 1.08l9.428-9.07a1 1 0 0 0 0-1.44l-9.428-9.07h-.001z" fill="#000"/> <path d="M15.268 4.21a.75.75 0 0 0-1.04 1.08l8.275 7.96H3.75a.75.75 0 1 0 0 1.5h18.752l-8.273 7.96a.75.75 0 0 0 1.04 1.08l9.428-9.07a1 1 0 0 0 0-1.44l-9.428-9.07h-.001z" />
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 291 B

After

Width:  |  Height:  |  Size: 280 B

2
frontend/media/arrow-right.svg
View File

@@ -1,3 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.634 2.105a.375.375 0 0 0-.52.54l4.138 3.98H1.874a.375.375 0 0 0 0 .75h9.376l-4.136 3.98a.375.375 0 0 0 .52.54l4.713-4.535a.5.5 0 0 0 0-.72L7.634 2.105z" fill="#fff"/> <path d="M7.634 2.105a.375.375 0 0 0-.52.54l4.138 3.98H1.874a.375.375 0 0 0 0 .75h9.376l-4.136 3.98a.375.375 0 0 0 .52.54l4.713-4.535a.5.5 0 0 0 0-.72L7.634 2.105z" />
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 286 B

After

Width:  |  Height:  |  Size: 275 B

3
frontend/src/App.svelte
View File

@@ -167,6 +167,9 @@
html, html,
body { body {
font-family: "Libre Franklin", sans-serif; font-family: "Libre Franklin", sans-serif;
button {
font-family: "Libre Franklin", sans-serif;
}
@media @mobile { @media @mobile {
font-size: @bodyfontsize; font-size: @bodyfontsize;
line-height: 1.4; line-height: 1.4;

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

@@ -174,6 +174,7 @@
.page { .page {
font-size: 1.6rem; font-size: 1.6rem;
color: @font-color-secondary; color: @font-color-secondary;
font-family: "Libre Caslon Text", serif;
} }
} }
@media @tablet { @media @tablet {

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

@@ -120,7 +120,7 @@
.titles { .titles {
padding: 0 5%; padding: 0 5%;
font-weight: normal; font-weight: 500;
h1 { h1 {
font-size: 2rem; font-size: 2rem;
padding: 20px 0px; padding: 20px 0px;
@@ -132,6 +132,7 @@
h2 { h2 {
font-size: 1.2rem !important; font-size: 1.2rem !important;
line-height: 1; line-height: 1;
font-family: "Libre Franklin", sans-serif;
} }
} }
.description { .description {
@@ -146,10 +147,10 @@
min-width: 0px; min-width: 0px;
} }
} }
@media @tablet { @media @tablet {
.titles { .titles {
font-weight: normal; font-weight: 500;
h1 { h1 {
font-size: 3.4rem; font-size: 3.4rem;
padding: 20px 20px; padding: 20px 20px;
@@ -175,7 +176,7 @@
@media @desktop { @media @desktop {
.titles { .titles {
font-weight: normal; font-weight: 500;
h1 { h1 {
font-size: 5rem; font-size: 5rem;
padding: 20px 0px; padding: 20px 0px;

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

@@ -38,7 +38,7 @@
{#if Object.keys(row).length} {#if Object.keys(row).length}
{#if row.topTitle} {#if row.topTitle}
<h3 class:red="{row.topTitleRed}">{row.topTitle}</h3> <h3 style="text-transform: uppercase; font-size: 14px;" class:red="{row.topTitleRed}">{row.topTitle}</h3>
{/if} {/if}
{#if nestedPath} {#if nestedPath}
<h3 <h3
@@ -116,7 +116,7 @@
color: #fa00ff !important; color: #fa00ff !important;
} }
h3 { h3 {
font-weight: normal; font-weight: 500;
} }
@media @tablet { @media @tablet {
h3 { h3 {
@@ -134,9 +134,11 @@
} }
h2 { h2 {
font-size: 2.3rem; font-size: 2.3rem;
font-weight: 500;
} }
h1 { h1 {
font-size: 4rem; font-size: 4rem;
font-weight: 500;
} }
} }
@@ -145,6 +147,7 @@
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px;
&.dominant { &.dominant {
@media (max-width: 1024px) { @media (max-width: 1024px) {
flex-direction: row-reverse; flex-direction: row-reverse;
@@ -169,7 +172,7 @@
@media @desktop { @media @desktop {
min-width: 30% !important; min-width: 30% !important;
} }
padding: 10px;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }

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

@@ -81,7 +81,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.inner-container { .inner-container {
max-width: 170px; max-width: 200px;
&:hover { &:hover {
max-width: fit-content; max-width: fit-content;
} }
@@ -93,8 +93,10 @@
.title { .title {
font-size: min(0.9vw, 14px); font-size: min(0.9vw, 14px);
padding: 2px 5px; padding: 2px 5px;
text-transform: uppercase;
@media @tablet { @media @tablet {
padding: 5px 10px; padding: 5px 10px;
font-size: min(1vw, 18px);
} }
font-weight: bold; font-weight: bold;
color: @font-color-secondary; color: @font-color-secondary;

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

@@ -94,7 +94,7 @@
border: none; border: none;
height: 36px; height: 36px;
padding: 2px 15px; padding: 2px 15px;
font-size: 14px; font-size: 20px;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
} }

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

@@ -27,7 +27,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 157px; width: 150px;
gap: 20px; gap: 20px;
max-width: 45%; max-width: 45%;
flex-grow: 1; flex-grow: 1;
@@ -40,7 +40,7 @@
gap: 10px; gap: 10px;
} }
@media @desktop { @media @desktop {
width: 240px; width: 230px;
gap: 40px; gap: 40px;
} }
img { img {
@@ -55,9 +55,11 @@
text-align: center; text-align: center;
font-size: 2.2rem; font-size: 2.2rem;
font-family: "Libre Caslon Text", serif; font-family: "Libre Caslon Text", serif;
font-style: normal;
} }
p { p {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
} }

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

@@ -15,8 +15,10 @@
<div class="box" id="box{i}" class:active="{i == active}"> <div class="box" id="box{i}" class:active="{i == active}">
<div class="content"> <div class="content">
<div class="icon"> <div class="icon">
<svg stroke="{i == active ? 'black' : 'white'}" data-src="{apiBaseURL}page/{pageId}/{box.icon?.src}" <svg
></svg> stroke="{i == active ? 'black' : 'white'}"
fill="{i == active ? 'black' : 'white'}"
data-src="{apiBaseURL}page/{pageId}/{box.icon?.src}"></svg>
</div> </div>
<div class="text"> <div class="text">
{box.text} {box.text}
@@ -31,8 +33,11 @@
.iconCycleSquares { .iconCycleSquares {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center;
gap: 10px; gap: 10px;
font-size: 0.8rem; font-size: 0.8rem;
transition: all 600ms;
@media @tablet { @media @tablet {
gap: 20px; gap: 20px;
font-size: 1rem; font-size: 1rem;
@@ -44,6 +49,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: @font-color-secondary; color: @font-color-secondary;
&.active { &.active {
background-color: @bg-color; background-color: @bg-color;
color: @font-color; color: @font-color;
@@ -54,16 +60,19 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.text { .text {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
font-family: "Libre Caslon Text", serif;
} }
} }
@media @tablet { @media @tablet {
width: 260px; width: 270px;
height: 260px; height: 270px;
gap: 30px;
} }
} }
} }

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

@@ -13,12 +13,12 @@
onMount(() => { onMount(() => {
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
let angle = angleStep * i * (Math.PI / 180) // Convert to radians let angle = (angleStep * i - 90) * (Math.PI / 180) // Convert to radians
circles.push({ circles.push({
x: radius * Math.cos(angle), x: radius * Math.cos(angle),
y: radius * Math.sin(angle), y: radius * Math.sin(angle),
rotation: angleStep * i - 90, // subtract 90 to point towards the circle rotation: angleStep * i + 180, // subtract 90 to point towards the circle
}) })
} }
circles = circles circles = circles
@@ -51,9 +51,10 @@
<svg <svg
id="mySvgObject{i}" id="mySvgObject{i}"
stroke="{i == focused ? 'white' : 'black'}" stroke="{i == focused ? 'white' : 'black'}"
fill="{i == focused ? 'white' : 'black'}"
data-src="{apiBaseURL}page/{pageId}/{col.iconCycleCircle?.boxes[i]?.icon?.src}"></svg> data-src="{apiBaseURL}page/{pageId}/{col.iconCycleCircle?.boxes[i]?.icon?.src}"></svg>
</div> </div>
<div class="text"> <div class="text" style="text-align: center;">
{col.iconCycleCircle?.boxes[i]?.text} {col.iconCycleCircle?.boxes[i]?.text}
</div> </div>
</div> </div>

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

@@ -15,7 +15,7 @@
border: none; border: none;
height: 36px; height: 36px;
padding: 2px 15px; padding: 2px 15px;
font-size: 14px; font-size: 20px;
font-weight: bold; font-weight: bold;
} }
.bright { .bright {

15
frontend/src/lib/components/widgets/pageLinkBlocks.svelte
View File

@@ -2,10 +2,11 @@
import { navigate } from "svelte-routing/src/history" import { navigate } from "svelte-routing/src/history"
import { openExtendableNr, pages, rerender, scrollToRowNr } from "../../store" import { openExtendableNr, pages, rerender, scrollToRowNr } from "../../store"
export let col: Column export let col: Column
let focused = -1
</script> </script>
<div class="link-container"> <div class="link-container">
{#each col.pageLinkBlocks as link} {#each col.pageLinkBlocks as link, i}
{#if isNaN(link.extendableRowNr)} {#if isNaN(link.extendableRowNr)}
<button <button
class="page-ref" class="page-ref"
@@ -19,6 +20,12 @@
</button> </button>
{:else} {:else}
<button <button
on:mouseenter="{() => {
focused = i
}}"
on:mouseleave="{() => {
focused = -1
}}"
class="row-ref fill" class="row-ref fill"
on:click="{() => { on:click="{() => {
$rerender = $rerender + 1 $rerender = $rerender + 1
@@ -30,7 +37,11 @@
<div> <div>
{link.name} {link.name}
</div> </div>
<img src="/media/arrow-r.svg" alt="arrow" /> <svg
data-src="/media/arrow-r.svg"
stroke="{i == focused ? '#fff' : 'black'}"
fill="{i == focused ? '#fff' : 'black'}"
style="z-index: 9999; position: relative;"></svg>
</button> </button>
{/if} {/if}
{/each} {/each}