julien/failwell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ (julien) add the footer

Browse Source
This commit is contained in:
Julien Calixte
2023-07-08 10:19:56 +02:00
parent 5001f2708e
commit 0a963e9503
3 changed files with 47 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/App.vue
View File

@@ -3,18 +3,25 @@ import { RouterLink, RouterView } from 'vue-router'
</script> </script>
<template> <template>
<header> <div class="app">
<nav> <header>
<router-link class="title is-3" to="/"> <nav>
<img class="logo" src="/loop.png" alt="Loopycode" /> <router-link class="title is-3" to="/">
</router-link> <img class="logo" src="/loop.png" alt="Loopycode" />
</nav> </router-link>
</header> </nav>
</header>
<RouterView /> <RouterView />
</div>
</template> </template>
<style scoped> <style scoped>
.app {
display: flex;
flex-direction: column;
height: 100vh;
}
nav { nav {
margin: 1rem 0; margin: 1rem 0;
display: flex; display: flex;

4
src/assets/icons/love.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#eb2f06" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 378 B

39
src/views/HomeView.vue
View File

@@ -8,7 +8,7 @@ const taskStore = useTaskStore()
const hasTask = computed(() => taskStore.tasks.length > 0) const hasTask = computed(() => taskStore.tasks.length > 0)
const resetTasks = () => { const resetTasks = () => {
if (window.confirm('are you sure to reset all your tasks?')) { if (window.confirm('Are you sure you want to clear all your tasks?')) {
taskStore.reset() taskStore.reset()
} }
} }
@@ -16,15 +16,28 @@ const resetTasks = () => {
<template> <template>
<main> <main>
<div class="new-task-container"> <div class="columns is-centered">
<router-link :to="{ name: 'new-task' }" class="button is-primary" <div class="new-task-container column buttons">
>Create a new task</router-link <router-link :to="{ name: 'new-task' }" class="button is-primary"
> >Create a new task</router-link
</div> >
<task-list /> <button v-if="hasTask" class="button is-danger" @click="resetTasks">
<div v-if="hasTask"> clear the list
<button class="button is-danger" @click="resetTasks">reset list</button> </button>
</div>
<task-list class="column" />
</div> </div>
<footer>
<p>
Made with <img src="@/assets/icons/love.svg" alt="love" /> by
<a
href="http://github.com/jcalixte"
target="_blank"
rel="noopener noreferrer"
>Julien</a
>
</p>
</footer>
</main> </main>
</template> </template>
@@ -33,12 +46,16 @@ main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
height: 60vh; height: 100%;
} }
.new-task-container { .new-task-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; }
footer img {
vertical-align: middle;
} }
</style> </style>