frontend: add shadcn vue, replace custom css with tailwind
Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>
This commit is contained in:
Nicolas Froger
parent
08d529c381
commit
227332e5d4
19 changed files with 1480 additions and 289 deletions
|
|
@ -14,36 +14,40 @@ const postActionBtn = ref(null)
|
|||
function postDataToggle() {
|
||||
if (postDataVisible.value) {
|
||||
for (const data of postData.value) {
|
||||
data.classList.remove('post-data-visible')
|
||||
data.classList.remove('backdrop-blur-sm');
|
||||
data.classList.remove('bg-gray-400/10');
|
||||
data.classList.add('bg-gray-400/0');
|
||||
}
|
||||
for (const title of postDataTitle.value) {
|
||||
title.style.display = 'none'
|
||||
title.classList.add("opacity-0");
|
||||
}
|
||||
for (const desc of postDataDescription.value) {
|
||||
desc.style.display = 'none'
|
||||
desc.classList.add("opacity-0");
|
||||
}
|
||||
for (const btn of postActionBtn.value) {
|
||||
btn.style.top = 'auto'
|
||||
btn.style.right = 'auto'
|
||||
btn.style.left = '0'
|
||||
btn.style.bottom = '0'
|
||||
btn.classList.remove("top-0");
|
||||
btn.classList.remove("right-0");
|
||||
btn.classList.add("left-0");
|
||||
btn.classList.add("bottom-0");
|
||||
}
|
||||
postDataVisible.value = false
|
||||
} else {
|
||||
for (const data of postData.value) {
|
||||
data.classList.add('post-data-visible')
|
||||
data.classList.add('backdrop-blur-sm');
|
||||
data.classList.add('bg-gray-400/10');
|
||||
data.classList.remove('bg-gray-400/0');
|
||||
}
|
||||
for (const title of postDataTitle.value) {
|
||||
title.style.display = 'block'
|
||||
title.classList.remove("opacity-0");
|
||||
}
|
||||
for (const desc of postDataDescription.value) {
|
||||
desc.style.display = 'block'
|
||||
desc.classList.remove("opacity-0");
|
||||
}
|
||||
for (const btn of postActionBtn.value) {
|
||||
btn.style.top = '0'
|
||||
btn.style.right = '0'
|
||||
btn.style.left = 'auto'
|
||||
btn.style.bottom = 'auto'
|
||||
btn.classList.add("top-0");
|
||||
btn.classList.add("right-0");
|
||||
btn.classList.remove("left-0");
|
||||
btn.classList.remove("bottom-0");
|
||||
}
|
||||
postDataVisible.value = true
|
||||
}
|
||||
|
|
@ -51,19 +55,24 @@ function postDataToggle() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="section" ref="section" :data-anchor="'post-' + post.id">
|
||||
<div class="slide" v-for="asset in post.assets" :key="asset">
|
||||
<img class="post-bg-media" :src="asset" />
|
||||
<div class="post-container">
|
||||
<div ref="postData" class="post-data post-data-visible">
|
||||
<div class="post-action-btn" ref="postActionBtn" @click="postDataToggle">
|
||||
<div class="section relative overflow-hidden" ref="section" :data-anchor="'post-' + post.id">
|
||||
<div class="slide relative overflow-hidden" v-for="asset in post.assets" :key="asset">
|
||||
<img class="absolute top-0 left-0 w-full h-full object-cover -z-10" :src="asset" />
|
||||
<div class="grid grid-cols-3 grid-rows-5 absolute w-full h-full top-0 left-0 pointer-events-none">
|
||||
<div ref="postData" class="col-start-1 col-span-3 lg:col-span-1 row-start-4 row-span-2 self-end place-self-stretch m-6 p-2 bg-gray-400/10 backdrop-blur-sm rounded-lg pointer-events-auto transition-colors duration-500">
|
||||
<div class="absolute top-0 right-0 m-2 p-2 backdrop-blur-sm rounded-sm bg-black/10 hover:bg-black/20 cursor-pointer transition-colors duration-200 opacity-100" ref="postActionBtn" @click="postDataToggle">
|
||||
<EyeOff v-if="postDataVisible" :size="20" />
|
||||
<Info :size="20" v-else />
|
||||
</div>
|
||||
<h2 ref="postDataTitle">{{ post.location.city }}, {{ post.location.country }}</h2>
|
||||
<h2
|
||||
ref="postDataTitle"
|
||||
class="mx-2 scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-opacity duration-500 mt-1"
|
||||
>
|
||||
{{ post.location.city }}, {{ post.location.country }}
|
||||
</h2>
|
||||
<div
|
||||
ref="postDataDescription"
|
||||
class="post-data-description scrollable-element"
|
||||
class="m-2 scrollable-element max-h-48 overflow-y-scroll transition-opacity duration-500"
|
||||
v-html="post.formatedDescription"
|
||||
></div>
|
||||
</div>
|
||||
|
|
@ -73,84 +82,4 @@ function postDataToggle() {
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
.post-action-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 4px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.post-action-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.section,
|
||||
.slide {
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post-container {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.post-data-visible {
|
||||
backdrop-filter: blur(3px);
|
||||
background-color: rgba(205, 205, 205, 0.1);
|
||||
}
|
||||
|
||||
.post-data {
|
||||
grid-area: 3 / 1 / 4 / 2;
|
||||
padding: 5px 20px;
|
||||
margin: 30px;
|
||||
border-radius: 6px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.post-data {
|
||||
grid-area: 3 / 1 / 4 / 3;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
.post-data {
|
||||
grid-area: 3 / 1 / 4 / 4;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-data-description {
|
||||
max-height: 200px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.post-bg-media {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
object-fit: cover;
|
||||
z-index: -100;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script setup>
|
||||
|
||||
import { usePostsStore } from '@/stores/posts.js'
|
||||
|
||||
const postsStore = usePostsStore()
|
||||
|
|
@ -7,10 +6,12 @@ const postsStore = usePostsStore()
|
|||
|
||||
<template>
|
||||
<div class="section" ref="section" data-anchor="welcome-section">
|
||||
<div id="welcome-container">
|
||||
<h3 class="welcome-content">3 semaines pour traverser 7 pays d'Europe en train</h3>
|
||||
<div class="flex flex-col w-full h-full items-center justify-center text-center">
|
||||
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight my-4">
|
||||
3 semaines pour traverser 7 pays d'Europe en train
|
||||
</h3>
|
||||
<div v-if="postsStore.posts.length > 0">
|
||||
<p class="welcome-content">suivez mon voyage en naviguant vers le bas</p>
|
||||
<p class="">suivez mon voyage en naviguant vers le bas</p>
|
||||
<div class="arrow" />
|
||||
</div>
|
||||
<div v-else>
|
||||
|
|
@ -21,28 +22,13 @@ const postsStore = usePostsStore()
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
#welcome-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcome-content {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-top: 40px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
width: 1.5vw;
|
||||
height: 1.5vw;
|
||||
width: 3vh;
|
||||
height: 3vh;
|
||||
border-bottom: 5px solid white;
|
||||
border-right: 5px solid white;
|
||||
transform: rotate(45deg);
|
||||
|
|
|
|||
23
summer2024-frontend/src/components/ui/button/Button.vue
Normal file
23
summer2024-frontend/src/components/ui/button/Button.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script setup>
|
||||
import { Primitive } from 'radix-vue'
|
||||
import { buttonVariants } from '.'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps({
|
||||
variant: { type: null, required: false },
|
||||
size: { type: null, required: false },
|
||||
class: { type: null, required: false },
|
||||
asChild: { type: Boolean, required: false },
|
||||
as: { type: null, required: false, default: 'button' }
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Primitive
|
||||
:as="as"
|
||||
:as-child="asChild"
|
||||
:class="cn(buttonVariants({ variant, size }), props.class)"
|
||||
>
|
||||
<slot />
|
||||
</Primitive>
|
||||
</template>
|
||||
30
summer2024-frontend/src/components/ui/button/index.js
Normal file
30
summer2024-frontend/src/components/ui/button/index.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import { cva } from 'class-variance-authority'
|
||||
|
||||
export { default as Button } from './Button.vue'
|
||||
|
||||
export const buttonVariants = cva(
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
||||
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
||||
outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
|
||||
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||
link: 'text-primary underline-offset-4 hover:underline'
|
||||
},
|
||||
size: {
|
||||
default: 'h-10 px-4 py-2',
|
||||
xs: 'h-7 rounded px-2',
|
||||
sm: 'h-9 rounded-md px-3',
|
||||
lg: 'h-11 rounded-md px-8',
|
||||
icon: 'h-10 w-10'
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
size: 'default'
|
||||
}
|
||||
}
|
||||
)
|
||||
Loading…
Add table
Add a link
Reference in a new issue