host/paulnicoue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit global style and component structure

Browse source
This commit is contained in:
Paul Nicoué 2023-02-02 17:02:53 +01:00
parent 88bac001d8
commit 53e513a55b
15 changed files with 816 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

124
components/AppError.vue
View file

@ -1,10 +1,16 @@
<template>
<main>
<div class="error">
<h1 class="error__title">{{ errorMessage }}</h1>
<div class="error__separator" aria-hidden="true"></div>
<div class="error__emoticon" aria-hidden="true">¯\(°_o)/¯</div>
<section class="error">
<Transition name="fade-in-from-bottom">
<h1 class="error__title" v-show="isVisible">{{ errorMessage }}</h1>
</Transition>
<Transition name="expand-width">
<div class="error__separator" aria-hidden="true" v-show="isVisible"></div>
</Transition>
<Transition name="fade-in-from-top">
<div class="error__emoticon" aria-hidden="true" v-show="isVisible">¯\(°_o)/¯</div>
</Transition>
<button class="error__button" @click="$emit('handleError')">
<span class="error__button-text">Retourner à la page d'accueil</span>
<svg class="error__button-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
@ -12,7 +18,7 @@
<polyline points="8.667 23 8.667 12 15.333 12 15.333 23"/>
</svg>
</button>
</div>
</section>
</main>
</template>
@ -23,10 +29,25 @@
// DATA
// --------------------------------------------------
const props = defineProps({
defineProps({
errorMessage: String
});
const emit = defineEmits([
const isVisible = ref(false);
// --------------------------------------------------
// PROGRAM
// --------------------------------------------------
onMounted(() => {
isVisible.value = true;
})
// --------------------------------------------------
// FORWARDING
// --------------------------------------------------
defineEmits([
'handleError'
]);
@ -39,58 +60,107 @@
// --------------------------------------------------
main {
padding: 2rem;
width: 100%;
padding: 0 2rem;
}
.error {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 30vw;
width: 100%;
display: grid;
grid:
'title' minmax(var(--h1-font-height), auto)
'separator' 1px
'emoticon' minmax(var(--h1-font-height), auto)
'.' 5rem
'button' auto
/ minmax(30%, auto);
place-content: center;
place-items: center;
gap: 0.5rem;
text-align: center;
&__title {
opacity: 0;
grid-area: title;
margin: 0 2rem;
animation: fade-in-from-bottom 400ms ease-in-out 600ms forwards;
}
&__separator {
width: 0;
grid-area: separator;
width: 100%;
height: 1px;
margin: 0.5rem 0;
background-color: var(--accent-color);
animation: expand-width 400ms ease-in-out 200ms forwards;
}
&__emoticon {
opacity: 0;
grid-area: emoticon;
margin: 0 2rem;
font-family: var(--title-font-family);
font-size: var(--h1-font-size);
font-weight: var(--medium-font-weight);
animation: fade-in-from-top 400ms ease-in-out 600ms forwards;
}
&__button {
margin: 6rem 2rem 0 2rem;
grid-area: button;
margin: 0 2rem;
&-icon {
display: none;
}
}
}
@media screen and (min-width: $tablet-media-query) {
.error {
@media screen and (min-width: $tablet-media-query) {
&__button {
@include button-with-icon;
}
}
}
// Transition components
.fade-in-from-bottom {
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateY(0.25rem);
}
&-enter-active,
&-leave-active {
transition:
opacity 400ms ease-in-out 600ms,
transform 400ms ease-in-out 600ms;
}
}
.fade-in-from-top {
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateY(-0.25rem);
}
&-enter-active,
&-leave-active {
transition:
opacity 400ms ease-in-out 600ms,
transform 400ms ease-in-out 600ms;
}
}
.expand-width {
&-enter-from,
&-leave-to {
width: 0;
}
&-enter-active,
&-leave-active {
transition: width 400ms ease-in-out 200ms;
}
}
</style>