Skip to content

Commit 91f73a0

Browse files
tmibletmible
committed
обновлена анимация карточек в мобиле на лендинге портала
1 parent 00fd21b commit 91f73a0

File tree

7 files changed

+67
-42
lines changed

7 files changed

+67
-42
lines changed

‎portal/CHANGELOG.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
# Changelog
22

3+
## 1.5.5 Цифровой отражатель данных (2025-07-29)
4+
<img width="128" height="128" src="release-images/1.5.5.png"/>
5+
6+
https://github.com/tmible/wishlist/compare/00fd21b..master
7+
8+
39
## 1.5.4 Необычный рассвет (2025-07-28)
410
<img width="128" height="128" src="release-images/1.5.4.png"/>
511

6-
https://github.com/tmible/wishlist/compare/14dbd86..master
12+
https://github.com/tmible/wishlist/compare/14dbd86..00fd21b
713

814

915
## 1.5.3 Морской туман (2025-07-27)

‎portal/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@tmible/wishlist-portal",
3-
"version": "1.5.4",
3+
"version": "1.5.5",
44
"private": true,
55
"description": "Портал со списками желаний",
66
"repository": {

‎portal/release-images/1.5.5.png‎

2.09 MB
Loading

‎portal/src/app.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,14 @@
4444

4545
@theme {
4646
--color-placeholder: color-mix(in oklch, var(--color-base-content) 40%, #0000);
47+
/* .shadow-md, но вверх, а не вниз */
48+
--shadow-md-upside:
49+
0 -4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
50+
0 -2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
51+
}
52+
53+
@variant dark {
54+
--tw-shadow-color: rgb(200 200 200 / 0.1);
4755
}
4856

4957
@layer base {

‎portal/src/routes/__tests__/cards-swiper.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ describe('cards', () => {
240240

241241
it('should select cards', () => {
242242
render(CardsSwiper);
243-
expect(vi.mocked(document.querySelectorAll)).toHaveBeenCalledWith('.cards-swiper > *');
243+
expect(vi.mocked(document.querySelectorAll)).toHaveBeenCalledWith('.cards-swiper > .card');
244244
});
245245

246246
it('should mark first card', () => {

‎portal/src/routes/cards-swiper.svelte‎

Lines changed: 49 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@
2020
* Карточки
2121
* @type {HTMLElement[]}
2222
*/
23-
let cards;
23+
let cards = $state([]);
2424
2525
/**
2626
* Количество видимых карточек
2727
* @type {number}
2828
*/
29-
let shownCardsNumber;
29+
let shownCardsNumber = $state(1);
3030
3131
/**
3232
* Начальная координата свайпа
@@ -161,7 +161,7 @@
161161
cardsSwiper.classList.remove('welcome-animation');
162162
isSwipeIgnored = false;
163163
}, 2000);
164-
cards = document.querySelectorAll('.cards-swiper > *');
164+
cards = document.querySelectorAll('.cards-swiper > .card');
165165
cards[0].classList.add('shown');
166166
shownCardsNumber = 1;
167167
});
@@ -177,11 +177,14 @@
177177
</script>
178178

179179
<div
180-
class="md:hidden relative w-full h-[310px] cards-swiper perspective-[200px]"
180+
class="md:hidden relative w-full h-[310px] cards-swiper"
181181
ontouchstart={onTouchStart}
182182
ontouchend={onTouchEnd}
183183
>
184184
{@render children?.()}
185+
<span class="absolute top-full left-1/2 -translate-x-1/2 text-sm counter">
186+
{shownCardsNumber}/{cards.length}
187+
</span>
185188
</div>
186189

187190
<style>
@@ -194,80 +197,88 @@
194197
195198
@keyframes cardAnimation {
196199
0% {
197-
transform: translateY(var(--initial-translate, 0)) scale(1) rotateX(0deg);
200+
transform: translateY(var(--initial-translate, 0)) scale(var(--initial-scale, 1));
198201
}
199202
50% {
200-
transform:
201-
translateY(var(--intermediate-translate, 0))
202-
scale(var(--intermediate-scale, 1))
203-
rotateX(var(--intermediate-rotation, 0deg));
203+
transform: translateY(var(--intermediate-translate, 0)) scale(var(--intermediate-scale, 1));
204204
}
205205
100% {
206-
transform: translateY(var(--initial-translate, 0)) scale(1) rotateX(0deg);
206+
transform: translateY(var(--initial-translate, 0)) scale(var(--initial-scale, 1));
207207
}
208208
}
209209
210-
.cards-swiper:global(.welcome-animation > *) {
211-
--intermediate-scale: 0.9;
212-
--intermediate-rotation: -7deg;
210+
.cards-swiper:global(.welcome-animation > .counter) {
211+
@apply hidden;
212+
}
213+
214+
.cards-swiper:global(.welcome-animation > .card) {
213215
animation: 2s cardAnimation;
214216
}
215217
216-
.cards-swiper:global(.welcome-animation > *:nth-child(n+2)) {
217-
/* .shadow-sm, но вверх, а не вниз */
218-
box-shadow: 0 -1px 2px 0 rgb(0 0 0 / 0.05);
219-
--initial-translate: 10%;
220-
--intermediate-translate: calc(-30% + var(--index) * 20px);
218+
.cards-swiper:global(.welcome-animation > .card:nth-child(1)) {
219+
--initial-translate: -100%;
220+
--intermediate-translate: -100%;
221+
--intermediate-scale: 0.9;
221222
}
222223
223-
:global(html[data-theme="dark"] .cards-swiper.welcome-animation > *:nth-child(n+2)) {
224-
box-shadow: 0 -1px 2px 0 rgb(200 200 200 / 0.05);
224+
.cards-swiper:global(.welcome-animation > .card:nth-child(n+2)) {
225+
--intermediate-translate: calc(-30% + var(--index) * 20px);
226+
--initial-scale: 1.1;
225227
}
226228
227-
.cards-swiper:global(.welcome-animation > *:nth-child(2)) {
229+
.cards-swiper:global(.welcome-animation > .card:nth-child(2)) {
228230
--index: 0;
229231
}
230232
231-
.cards-swiper:global(.welcome-animation > *:nth-child(3)) {
233+
.cards-swiper:global(.welcome-animation > .card:nth-child(3)) {
232234
--index: 1;
233235
}
234236
235-
.cards-swiper > :global(*) {
237+
.cards-swiper > :global(.card) {
236238
@apply absolute;
237239
@apply top-full;
238240
@apply h-full;
239241
@apply transition-all;
240-
transform: translateY(0) scaleX(0) rotateX(-52.2245deg);
242+
transform: translateY(0) scale(1.1);
241243
transition-property: transform, top;
242244
transition-duration: 375ms;
243245
/* timig function из tailwind .transition-all */
244246
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
245247
}
246248
247-
.cards-swiper > :global(.shown) {
248-
--initial-translate: -100%;
249-
--intermediate-translate: -100%;
250-
transform: translateY(-100%) scale(1) rotateX(0deg);
249+
.cards-swiper > :global(.card.shown) {
250+
transform: translateY(-100%) scale(0.9);
251251
}
252252
253-
.cards-swiper:global(.swiped-up > *:nth-last-child(n + 2 of .shown)) {
254-
--intermediate-scale: 0.9;
255-
--intermediate-rotation: -7deg;
256-
animation: 375ms cardAnimation;
253+
.cards-swiper > :global(.card:nth-last-child(1 of .shown)) {
254+
transform: translateY(-100%) scale(1);
257255
}
258256
259-
.cards-swiper:global(.swiped-down > .shown) {
260-
--intermediate-scale: 0.9;
261-
--intermediate-rotation: -7deg;
262-
animation: 375ms cardAnimation;
257+
.cards-swiper > :global(.card:not(.shown)) {
258+
top: calc(100% + 32px);
259+
}
260+
261+
.cards-swiper > :global(.card:nth-child(1 of .card:not(.shown))) {
262+
@apply top-full;
263+
@apply shadow-md-upside;
264+
}
265+
266+
.cards-swiper > :global(.card:nth-child(2 of .card:not(.shown))),
267+
.cards-swiper > :global(
268+
.card:nth-child(1 of .card:not(.shown)):nth-last-child(1 of .card:not(.shown))
269+
) {
270+
@apply shadow-md-upside;
271+
top: calc(100% + 10px);
263272
}
264273
265-
.cards-swiper:global(.overswiped-up > .shown) {
274+
.cards-swiper:global(.overswiped-up > .card.shown) {
275+
--initial-translate: -100%;
266276
--intermediate-translate: calc(-100% - 20px);
267277
animation: 375ms cardAnimation;
268278
}
269279
270-
.cards-swiper:global(.overswiped-down > .shown) {
280+
.cards-swiper:global(.overswiped-down > .card.shown) {
281+
--initial-translate: -100%;
271282
--intermediate-translate: calc(-100% + 20px);
272283
animation: 375ms cardAnimation;
273284
}

‎portal/src/routes/cards.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
bind:this={telegramLoginWidgetContainer}
4444
class="card-body items-center prose telegram-login-widget-container"
4545
>
46-
<p>
46+
<p class="text-justify">
4747
Wishni&nbsp;— это инструмент для работы со&nbsp;списками желаний. Его
4848
основная задача&nbsp;— сократить путь от&nbsp;списка до&nbsp;общения между
4949
дарителями с&nbsp;максимальным удобством для всех участников процесса. Работайте

0 commit comments

Comments
 (0)