ilia/gsap-carousel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Правки линтера, правки документации

Browse Source
This commit is contained in:
Ilia Mashkov
2025-11-23 16:18:23 +03:00
parent 174547791b
commit dad6253877
3 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss
View File

@@ -33,7 +33,7 @@
} }
:global(.swiper) { :global(.swiper) {
@container timeframe-slider (width <=768px) { @container timeframe-slider (width <= 768px) {
padding: 0 40px; padding: 0 40px;
} }
} }
@@ -41,7 +41,7 @@
:global(.swiper-slide-visible) { :global(.swiper-slide-visible) {
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
@container timeframe-slider (width <768px) { @container timeframe-slider (width < 768px) {
opacity: 0.4; opacity: 0.4;
} }
} }

38
src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss
View File

@@ -30,11 +30,11 @@
overflow: hidden; overflow: hidden;
@container timeframe-slider (width <=1024px) { @container timeframe-slider (width <= 1024px) {
padding-top: 100px; padding-top: 100px;
} }
@container timeframe-slider (width <=576px) { @container timeframe-slider (width <= 576px) {
padding: 60px 20px 20px; padding: 60px 20px 20px;
background-image: unset; background-image: unset;
@@ -58,18 +58,19 @@
border-image: var(--gradient-primary) 1; border-image: var(--gradient-primary) 1;
@container timeframe-slider (width <=1024px) { @container timeframe-slider (width <= 1024px) {
top: 80px; top: 80px;
font-size: 40px; font-size: 40px;
} }
@container timeframe-slider (width <=768px) { @container timeframe-slider (width <= 768px) {
padding-left: 20px; padding-left: 20px;
font-size: 34px; font-size: 34px;
} }
@container timeframe-slider (width <=576px) { @container timeframe-slider (width <= 576px) {
position: relative; position: relative;
inset: unset; inset: unset;
@@ -96,7 +97,7 @@
background-position: center; background-position: center;
background-size: 100% 1px; background-size: 100% 1px;
@container timeframe-slider (width <=576px) { @container timeframe-slider (width <= 576px) {
position: unset; position: unset;
display: flex; display: flex;
@@ -122,17 +123,18 @@
transform-origin: left; transform-origin: left;
@container timeframe-slider (width <=1024px) { @container timeframe-slider (width <= 1024px) {
left: 100px; left: 100px;
bottom: 40px; bottom: 40px;
} }
@container timeframe-slider (width <=768px) { @container timeframe-slider (width <= 768px) {
left: 40px; left: 40px;
gap: 10px; gap: 10px;
} }
@container timeframe-slider (width <=576px) { @container timeframe-slider (width <= 576px) {
left: 20px; left: 20px;
bottom: 13px; bottom: 13px;
@@ -152,7 +154,7 @@
display: flex; display: flex;
gap: 20px; gap: 20px;
@container timeframe-slider (width <=768px) { @container timeframe-slider (width <= 768px) {
gap: 8px; gap: 8px;
} }
} }
@@ -161,7 +163,7 @@
width: 9px; width: 9px;
height: 14px; height: 14px;
@container timeframe-slider (width <=576px) { @container timeframe-slider (width <= 576px) {
width: 6px; width: 6px;
height: 11.5px; height: 11.5px;
} }
@@ -170,7 +172,7 @@
.dots { .dots {
display: none; display: none;
@container timeframe-slider (width <=576px) { @container timeframe-slider (width <= 576px) {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 32px; bottom: 32px;
@@ -228,19 +230,19 @@
pointer-events: none; pointer-events: none;
@container timeframe-slider (width <=1024px) { @container timeframe-slider (width <= 1024px) {
gap: 40px; gap: 40px;
font-size: 140px; font-size: 140px;
line-height: 120px; line-height: 120px;
} }
@container timeframe-slider (width <=768px) { @container timeframe-slider (width <= 768px) {
font-size: 100px; font-size: 100px;
line-height: 80px; line-height: 80px;
} }
@container timeframe-slider (width <=576px) { @container timeframe-slider (width <= 576px) {
position: static; position: static;
gap: 20px; gap: 20px;
@@ -265,7 +267,7 @@
.periodLabel { .periodLabel {
display: none; display: none;
@container timeframe-slider (width <=576px) { @container timeframe-slider (width <= 576px) {
order: 1; order: 1;
display: block; display: block;
@@ -285,7 +287,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
@container timeframe-slider (width <=576px) { @container timeframe-slider (width <= 576px) {
display: none; display: none;
} }
} }
@@ -293,7 +295,7 @@
.carouselContainer { .carouselContainer {
padding: 55px 80px 105px; padding: 55px 80px 105px;
@container timeframe-slider (width <=768px) { @container timeframe-slider (width <= 768px) {
width: calc(100% + 40px); width: calc(100% + 40px);
margin: 0 -20px; margin: 0 -20px;
padding: 0; padding: 0;

1
src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.tsx
View File

@@ -101,6 +101,7 @@ export const TimeFrameSlider = memo(() => {
prevYearFromRef.current = currentPeriod.yearFrom prevYearFromRef.current = currentPeriod.yearFrom
prevYearToRef.current = currentPeriod.yearTo prevYearToRef.current = currentPeriod.yearTo
// Анимация появления лейбла периода
if (periodLabelRef.current) { if (periodLabelRef.current) {
gsap.fromTo( gsap.fromTo(
periodLabelRef.current, periodLabelRef.current,