Naaturel/letsmeet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add TextBlock component

Browse Source
This commit is contained in:
Laurent
2025-03-01 14:49:11 +01:00
parent d5b8736fc9
commit 6500581885
7 changed files with 106 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/main.css
View File

@@ -17,6 +17,11 @@ body
background: var(--background-color);
}
.colored-text
{
color: var(--secondary-color);
}
footer
{
position:absolute;

37
src/components/TextBlock.vue Normal file
View File

@@ -0,0 +1,37 @@
<script setup lang="ts">
</script>
<template>
<div class="text-block">
<slot></slot>
</div>
</template>
<style scoped>
.text-block {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 1vw 0 1vw;
}
.text-block {
flex-direction: column;
padding: 30px;
min-width: 250px;
}
.text-block {
justify-content: start;
word-break: break-word;
height: fit-content;
border-radius: var(--radius);
border-left: solid 4px;
background: rgb(239, 239, 239);
}
</style>

6
src/layouts/LayoutDefault.vue
View File

@@ -8,7 +8,7 @@ import NavLink from "@/components/NavLink.vue";
<nav class="nav">
<p>Let's<br>Meet</p>
<div class="nav-actions">
<div class="nav-actions-group">
<NavLink path="/" description="Home"></NavLink>
<NavLink path="/login" description="Log in"></NavLink>
<NavLink path="/about" description="About"></NavLink>
@@ -38,7 +38,7 @@ nav {
align-items: center;
justify-content: space-between;
min-height: 10vh;
border: 1px solid;
border-bottom: 1px solid;
border-radius: var(--radius);
background-color: var(--header-color);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
@@ -51,7 +51,7 @@ nav p {
margin: 4px 0 4px 0;
}
.nav-actions {
.nav-actions-group {
display: flex;
flex-direction: row;
gap: 1vw;

4
src/views/AboutView.vue
View File

@@ -1,8 +1,11 @@
<script setup lang="ts">
import TextBlock from "@/components/TextBlock.vue";
</script>
<template>
<TextBlock>
<h1>About</h1>
<p>
Inspired by <a href="https://when2meet.com">when2meet</a>, Let's meet is a free and open-source
@@ -16,6 +19,7 @@
<a href="https://github.com/">Github</a><br>
<a href="https://bsky.app/profile/naaturel.be">Blue Sky</a>
</p>
</TextBlock>
</template>

5
src/views/CreateView.vue
View File

@@ -1,9 +1,14 @@
<script setup lang="ts">
import Calendar from "@/components/Calendar.vue";
import TextBlock from "@/components/TextBlock.vue";
</script>
<template>
<TextBlock>
<h1>Create an event</h1>
</TextBlock>
<Calendar />
</template>
<style scoped>

59
src/views/HomeView.vue
View File

@@ -1,12 +1,13 @@
<script setup lang="ts">
import NavLink from "@/components/NavLink.vue";
import TextBlock from "@/components/TextBlock.vue";
</script>
<template>
<div class="container">
<div class="introduction">
<TextBlock class="introduction">
<h1>Welcome !</h1>
<p>
This website is currently under <span class="colored-text">development</span> and might look ugly as fuck
@@ -16,12 +17,12 @@ import NavLink from "@/components/NavLink.vue";
Yes I know i could have use
a Lorem Ipsum but it seems more natural with words everyone can understand
</p>
</div>
</TextBlock>
<div class="actions">
<div class="actions-group">
<h1>Meet up <span class="colored-text">now</span> !</h1>
<NavLink path="/create" description="Join"></NavLink>
<NavLink path="/join" description="Create"></NavLink>
<NavLink path="/create" description="Create"></NavLink>
<NavLink path="/join" description="Join"></NavLink>
</div>
</div>
@@ -30,7 +31,7 @@ import NavLink from "@/components/NavLink.vue";
<style scoped>
.container, .introduction, .actions {
.container, .actions-group {
display: flex;
justify-content: center;
align-items: center;
@@ -43,35 +44,20 @@ import NavLink from "@/components/NavLink.vue";
gap: 10vw;
}
.introduction, .actions {
flex-direction: column;
padding: 30px;
min-width: 250px;
}
.introduction {
justify-content: start;
word-break: break-word;
height: fit-content;
border-radius: var(--radius);
border-left: solid 4px;
background: rgb(239, 239, 239);
}
.introduction p
{
width: 80%;
text-align: justify;
}
.colored-text
{
color: var(--secondary-color);
.actions-group {
flex-direction: column;
padding: 30px;
min-width: 250px;
}
.actions {
justify-content: start;
.actions-group {
justify-content: center;
gap: 4vh;
height: fit-content;
border-radius: var(--radius);
@@ -79,8 +65,13 @@ import NavLink from "@/components/NavLink.vue";
margin-bottom: 5vh;
}
.actions::before,
.actions::after {
.actions-group h1
{
margin-top: 0;
}
.actions-group::before,
.actions-group::after {
content: "";
position: absolute;
width: 5%;
@@ -88,7 +79,7 @@ import NavLink from "@/components/NavLink.vue";
border: 4px solid black;
}
.actions::before {
.actions-group::before {
top: 0;
left: 0;
border-radius: var(--radius);
@@ -96,7 +87,7 @@ import NavLink from "@/components/NavLink.vue";
border-bottom: none;
}
.actions::after {
.actions-group::after {
bottom: 0;
right: 0;
border-radius: var(--radius);
@@ -115,7 +106,7 @@ import NavLink from "@/components/NavLink.vue";
min-height: 40vh;
}
.actions {
.actions-group {
width: 25%;
min-height: 35vh;
}
@@ -131,7 +122,7 @@ import NavLink from "@/components/NavLink.vue";
flex-direction: column;
}
.introduction, .actions {
.introduction, .actions-group {
width: 95%;
}
@@ -139,7 +130,7 @@ import NavLink from "@/components/NavLink.vue";
min-height: 25vh;
}
.actions {
.actions-group {
min-height: 40vh;
}

13
src/views/JoinView.vue
View File

@@ -1,9 +1,22 @@
<script setup lang="ts">
import TextBlock from "@/components/TextBlock.vue";
</script>
<template>
<TextBlock>
<h1>Join an event</h1>
<p>
This website is currently under <span class="colored-text">development</span> and might look ugly as fuck
bla bla bla I'm just writing things nobody will read to fill the space and see how it looks.
</p>
<p>
Yes I know i could have use
a Lorem Ipsum but it seems more natural with words everyone can understand
</p>
</TextBlock>
</template>
<style scoped>