Новые правки компоентов
This commit is contained in:
parent
9122756a58
commit
1838fd302d
14 changed files with 88 additions and 79 deletions
|
|
@ -28,7 +28,7 @@ const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDe
|
|||
data-delay={delay}
|
||||
>
|
||||
<div class="lock-icon-container">
|
||||
<svg class="w-8 h-8 md:w-10 md:h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -64,8 +64,8 @@ const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDe
|
|||
}
|
||||
|
||||
.lock-icon-container {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 64, 175, 0.3) 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
|
|
@ -78,8 +78,20 @@ const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDe
|
|||
|
||||
@media (min-width: 768px) {
|
||||
.lock-icon-container {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.lock-icon-container svg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.lock-icon-container svg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -207,5 +207,4 @@ const iconPaths: Record<string, string> = {
|
|||
};
|
||||
|
||||
setupAnimations();
|
||||
document.addEventListener('astro:page-load', setupAnimations);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -145,7 +145,6 @@ const { categories, activeCategory = 'Все', currentPage = 1 } = Astro.props;
|
|||
<script>
|
||||
// Клиентская логика фильтрации
|
||||
document.addEventListener('DOMContentLoaded', initFilter);
|
||||
document.addEventListener('astro:page-load', initFilter);
|
||||
|
||||
function initFilter() {
|
||||
const links = document.querySelectorAll('.category-btn');
|
||||
|
|
|
|||
|
|
@ -281,9 +281,4 @@ const colors = ['bg-gradient-1', 'bg-gradient-2', 'bg-gradient-3', 'bg-gradient-
|
|||
|
||||
setupSlider();
|
||||
setupAnimations();
|
||||
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
setupSlider();
|
||||
setupAnimations();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -105,8 +105,8 @@ export default function ReviewFormContainer() {
|
|||
<Show when={isAuthenticated()} fallback={
|
||||
<div class="mx-auto w-full max-w-[700px]">
|
||||
<div class="bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl border border-slate-200 p-6 md:p-12 text-center">
|
||||
<div class="w-16 md:w-20 mx-auto mb-4 md:mb-6 rounded-full flex items-center justify-center bg-gradient-to-br from-blue-500/20 to-blue-900/30">
|
||||
<svg class="w-8 md:w-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="w-10 h-10 md:w-16 md:h-16 mx-auto mb-4 md:mb-6 rounded-full flex items-center justify-center" style="background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 64, 175, 0.3) 100%);">
|
||||
<svg class="w-5 md:w-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
import "@styles/global.css";
|
||||
import { SITE_TITLE_SUFFIX } from "@constants";
|
||||
import { ClientRouter } from 'astro:transitions';
|
||||
|
||||
import Header from "@components/layout/header/Header.astro";
|
||||
import Footer from "@components/layout/footer/Footer.astro";
|
||||
|
|
@ -35,7 +34,6 @@ const { title, description, canonicalLink, breadcrumbs } = Astro.props;
|
|||
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||
<!-- Yandex верификация -->
|
||||
<meta name="yandex-verification" content="be3edfd138348e43" />
|
||||
<ClientRouter />
|
||||
</head>
|
||||
<body>
|
||||
<Toast />
|
||||
|
|
@ -66,26 +64,6 @@ const { title, description, canonicalLink, breadcrumbs } = Astro.props;
|
|||
</style>
|
||||
|
||||
<script>
|
||||
// Сохраняем позицию скролла перед переходом
|
||||
document.addEventListener('astro:before-preparation', (e) => {
|
||||
sessionStorage.setItem('scrollPosition', String(window.scrollY));
|
||||
});
|
||||
|
||||
// Восстанавливаем позицию скролла после перехода с плавной анимацией
|
||||
document.addEventListener('astro:after-swap', () => {
|
||||
const savedPosition = sessionStorage.getItem('scrollPosition');
|
||||
if (savedPosition) {
|
||||
const targetScroll = parseInt(savedPosition);
|
||||
setTimeout(() => {
|
||||
window.scrollTo({
|
||||
top: targetScroll,
|
||||
behavior: 'auto'
|
||||
});
|
||||
}, 50);
|
||||
sessionStorage.removeItem('scrollPosition');
|
||||
}
|
||||
});
|
||||
|
||||
// Клиентский скрипт для открытия модального окна
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const btn = document.getElementById("consultation-btn");
|
||||
|
|
@ -98,17 +76,4 @@ const { title, description, canonicalLink, breadcrumbs } = Astro.props;
|
|||
);
|
||||
});
|
||||
});
|
||||
|
||||
// Для Astro View Transitions
|
||||
document.addEventListener("astro:page-load", () => {
|
||||
const btn = document.getElementById("consultation-btn");
|
||||
|
||||
btn?.addEventListener("click", () => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("open-modal", {
|
||||
detail: "consultation-modal",
|
||||
}),
|
||||
);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -167,5 +167,37 @@ const formatDate = (date: string) => {
|
|||
};
|
||||
|
||||
setupAnimations();
|
||||
document.addEventListener('astro:page-load', setupAnimations);
|
||||
setupFilter();
|
||||
|
||||
function setupFilter() {
|
||||
const buttons = document.querySelectorAll('.category-btn');
|
||||
const cards = document.querySelectorAll('.blog-card-wrapper');
|
||||
|
||||
buttons.forEach((btn) => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const category = btn.getAttribute('data-category');
|
||||
|
||||
buttons.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
cards.forEach((card) => {
|
||||
const cardCategory = card.getAttribute('data-category');
|
||||
const el = card as HTMLElement;
|
||||
if (category === 'Все' || cardCategory === category) {
|
||||
el.style.display = '';
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(20px)';
|
||||
requestAnimationFrame(() => {
|
||||
el.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
|
||||
el.style.opacity = '1';
|
||||
el.style.transform = 'translateY(0)';
|
||||
});
|
||||
} else {
|
||||
el.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -168,5 +168,4 @@ const formatDate = (date: string) => {
|
|||
};
|
||||
|
||||
setupAnimations();
|
||||
document.addEventListener('astro:page-load', setupAnimations);
|
||||
</script>
|
||||
|
|
@ -183,8 +183,4 @@ const formatDate = (date: string) => {
|
|||
|
||||
setupAnimations();
|
||||
setupFilter();
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
setupAnimations();
|
||||
setupFilter();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -148,6 +148,38 @@ const formatDate = (date: string) => {
|
|||
});
|
||||
};
|
||||
|
||||
const setupFilter = () => {
|
||||
const buttons = document.querySelectorAll('.category-btn');
|
||||
const cards = document.querySelectorAll('.blog-card-wrapper');
|
||||
|
||||
buttons.forEach((btn) => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const category = btn.getAttribute('data-category');
|
||||
|
||||
buttons.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
cards.forEach((card) => {
|
||||
const cardCategory = card.getAttribute('data-category');
|
||||
const el = card as HTMLElement;
|
||||
if (category === 'Все' || cardCategory === category) {
|
||||
el.style.display = '';
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(20px)';
|
||||
requestAnimationFrame(() => {
|
||||
el.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
|
||||
el.style.opacity = '1';
|
||||
el.style.transform = 'translateY(0)';
|
||||
});
|
||||
} else {
|
||||
el.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
setupAnimations();
|
||||
document.addEventListener('astro:page-load', setupAnimations);
|
||||
setupFilter();
|
||||
</script>
|
||||
|
|
@ -344,10 +344,4 @@ const isAuthorized = false; // Измените на true, чтобы увиде
|
|||
// Инициализация
|
||||
setupAnimations();
|
||||
setupForm();
|
||||
|
||||
// Для поддержки Astro transitions
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
setupAnimations();
|
||||
setupForm();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -181,8 +181,4 @@ const categories = getCategories();
|
|||
};
|
||||
|
||||
setupFilter();
|
||||
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
setupFilter();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -195,9 +195,4 @@ import ReviewsList from '@components/reviews/ReviewsList.astro';
|
|||
|
||||
// Запуск
|
||||
setupAnimations();
|
||||
|
||||
// Для поддержки View Transitions в Astro
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
setupAnimations();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue