nemunaire/travel-steps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: add shadcn vue, replace custom css with tailwind

Browse source 
Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>
This commit is contained in:
Nicolas Froger 2024-07-22 02:24:43 +02:00
commit 227332e5d4
No known key found for this signature in database
19 changed files with 1480 additions and 289 deletions
Download patch file Download diff file Expand all files Collapse all files

79
summer2024-frontend/src/views/PostsView.vue
View file

@ -15,30 +15,37 @@ const fullpageOptions = ref({
scrollOverflow: false,
onLeave: onLeave,
afterLoad: afterLoad,
credits: {enabled: false}
credits: { enabled: false }
})
const menu = ref(null)
function onLeave(origin, destination, direction, trigger) {
if (destination.anchor === 'welcome-section') {
menu.value.style.opacity = '0'
menu.value.classList.add('opacity-0')
} else {
menu.value.style.opacity = '1'
}
menu.value.classList.remove('opacity-0')
}
}
function afterLoad(origin, destination, direction, trigger) {
if (destination.anchor === 'welcome-section') {
menu.value.style.opacity = '0'
menu.value.classList.add('opacity-0')
}
}
</script>
<template>
<div id="menu-grid">
<ul id="menu" class="scrollable-element" ref="menu">
<li :data-menuanchor="'post-' + post.id" v-for="post in postsStore.posts" :key="post.id">
<a :href="'#post-' + post.id">{{ post.formatedDate }}</a>
<div
id="menu-grid"
class="fixed z-50 h-full w-full grid grid-cols-5 grid-rows-3 place-items-stretch pointer-events-none"
>
<ul
id="menu"
class="scrollable-element col-start-1 col-span-full row-start-1 row-span-1 mt-16 lg:m-0 lg:col-start-5 lg:col-span-1 lg:row-start-3 lg:row-span-1 pointer-events-auto overflow-y-scroll transition-opacity duration-1000 opacity-0"
ref="menu"
>
<li :data-menuanchor="'post-' + post.id" v-for="post in postsStore.posts" :key="post.id" class="m-2 backdrop-blur-sm rounded-lg bg-black/10 hover:bg-gray-500/10 transition-colors duration-200">
<a :href="'#post-' + post.id" class="block text-right px-4 py-3 transition-all duration-300">{{ post.formatedDate }}</a>
</li>
</ul>
</div>
@ -55,66 +62,12 @@ function afterLoad(origin, destination, direction, trigger) {
</template>
<style scoped>
#menu-grid {
position: fixed;
height: 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
z-index: 70;
pointer-events: none;
}
#menu {
grid-area: 3 / 5 / 4 / 6;
pointer-events: auto;
list-style-type: none;
max-height: 220px;
overflow-y: scroll;
margin-right: 20px;
transition: opacity 1s;
opacity: 0;
}
@media screen and (max-width: 1024px) {
#menu {
grid-area: 4 / 4 / 6 / 6;
}
}
@media screen and (max-width: 500px) {
#menu {
grid-area: 1 / 1 / 2 / 6;
margin-top: 50px;
}
}
#menu li {
margin: 10px;
border-radius: 10px;
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.1);
}
#menu li:hover {
background-color: rgba(100, 100, 100, 0.1);
}
#menu li.active,
#menu li.active:hover {
background-color: rgba(255, 255, 255, 0.1);
}
#menu li a {
text-decoration: none;
color: #fff;
padding: 9px 18px;
display: block;
text-align: right;
}
#menu li.active a,
#menu li.active:hover a:hover {
font-weight: bold;