157 lines
4 KiB
Vue
157 lines
4 KiB
Vue
<template>
|
|
|
|
<main>
|
|
<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">
|
|
<path d="M 2 8.7 L 12 1 L 22 8.7 L 22 20.8 C 22 22.016 21.006 23 19.778 23 L 4.222 23 C 2.995 23 2 22.016 2 20.8 L 2 8.7 Z"/>
|
|
<polyline points="8.667 23 8.667 12 15.333 12 15.333 23"/>
|
|
</svg>
|
|
</button>
|
|
</section>
|
|
</main>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
// --------------------------------------------------
|
|
// DATA
|
|
// --------------------------------------------------
|
|
|
|
defineProps({
|
|
errorMessage: String
|
|
});
|
|
|
|
const isVisible = ref(false);
|
|
|
|
// --------------------------------------------------
|
|
// PROGRAM
|
|
// --------------------------------------------------
|
|
|
|
onMounted(() => {
|
|
isVisible.value = true;
|
|
})
|
|
|
|
// --------------------------------------------------
|
|
// FORWARDING
|
|
// --------------------------------------------------
|
|
|
|
defineEmits([
|
|
'handleError'
|
|
]);
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
// --------------------------------------------------
|
|
// STYLE
|
|
// --------------------------------------------------
|
|
|
|
main {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.error {
|
|
@include large-section;
|
|
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 {
|
|
grid-area: title;
|
|
margin: 0 2rem;
|
|
}
|
|
|
|
&__separator {
|
|
grid-area: separator;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: var(--accent-color);
|
|
}
|
|
|
|
&__emoticon {
|
|
grid-area: emoticon;
|
|
margin: 0 2rem;
|
|
font-family: var(--title-font-family);
|
|
font-size: var(--h1-font-size);
|
|
font-weight: var(--medium-font-weight);
|
|
}
|
|
|
|
&__button {
|
|
@include button-with-icon;
|
|
grid-area: button;
|
|
margin: 0 2rem;
|
|
}
|
|
}
|
|
|
|
// 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>
|