Alexandr SaVBaD Waltz
c889c20b61
Added a global error page to improve user experience during navigation issues, with localized messages and redirect options. Enhanced error handling for brand, product, and category slug composables by introducing explicit 404 responses. - Introduced `/error.vue` template for custom error displays using `NuxtError`. - Updated `useBrandBySlug`, `useProductBySlug`, `useCategoryBySlug` to throw 404 errors when data is not found. - Expanded i18n files (`en-gb.json` and `ru-ru.json`) with additional error-related translations. - Replaced plain text input with a `.search`-scoped class for cleaner styling. Enhances robustness and user feedback during navigation errors. No breaking changes introduced.
70 lines
No EOL
1.2 KiB
Vue
70 lines
No EOL
1.2 KiB
Vue
<template>
|
|
<div class="title">
|
|
<div class="container">
|
|
<div class="title__wrapper">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.title {
|
|
padding-block: 50px;
|
|
background-color: $title_bg;
|
|
|
|
&__wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
}
|
|
|
|
:deep(.title__wrapper h1) {
|
|
color: $primary_dark;
|
|
font-family: "Playfair Display", sans-serif;
|
|
font-weight: 700;
|
|
font-size: 36px;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
:deep(.title__wrapper p) {
|
|
max-width: 600px;
|
|
text-align: center;
|
|
color: $text;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
:deep(.title__wrapper .search) {
|
|
position: relative;
|
|
|
|
& span {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 24px;
|
|
transform: translateY(-50%);
|
|
color: $disabled_secondary;
|
|
}
|
|
|
|
& input {
|
|
background-color: $main;
|
|
border: 1px solid $border;
|
|
border-radius: 50px;
|
|
padding: 18px 70px 18px 50px;
|
|
|
|
color: $text;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.5px;
|
|
|
|
&::placeholder {
|
|
color: $text;
|
|
}
|
|
}
|
|
}
|
|
</style> |