mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/imputnet/cobalt.git synced 2025-06-28 01:18:27 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

web/DonateOptionsCard: fix fantom button focus on tab nav, refactor
Some checks are pending
CodeQL / Analyze (${{ matrix.language }}) (none, javascript-typescript) (push) Waiting to run
Details
Run tests / check lockfile correctness (push) Waiting to run
Details
Run tests / web sanity check (push) Waiting to run
Details
Run tests / api sanity check (push) Waiting to run
Details

Browse Source
This commit is contained in:
wukko 2025-04-27 21:32:40 +06:00
parent 44dc9ca9dd
commit 2fce88af2f
No known key found for this signature in database
GPG Key ID: 3E30B3F26C7B4AA2
1 changed files with 54 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
web/src/components/donate/DonateOptionsCard.svelte
View File

@ -136,12 +136,7 @@
</button> </button>
</div> </div>
<div <div id="donation-options-container">
id="donation-options-container"
class:mask-both={!device.is.mobile && showLeftScroll && showRightScroll}
class:mask-left={!device.is.mobile && showLeftScroll && !showRightScroll}
class:mask-right={!device.is.mobile && showRightScroll && !showLeftScroll}
>
{#if !device.is.mobile} {#if !device.is.mobile}
<div id="donation-options-scroll" aria-hidden="true"> <div id="donation-options-scroll" aria-hidden="true">
<button <button
@ -168,6 +163,9 @@
<div <div
id="donation-options" id="donation-options"
bind:this={donateList} bind:this={donateList}
class:mask-both={!device.is.mobile && showLeftScroll && showRightScroll}
class:mask-left={!device.is.mobile && showLeftScroll && !showRightScroll}
class:mask-right={!device.is.mobile && showRightScroll && !showLeftScroll}
on:wheel={() => { on:wheel={() => {
const currentPos = donateList.scrollLeft; const currentPos = donateList.scrollLeft;
const maxPos = donateList.scrollWidth - donateList.getBoundingClientRect().width - 5; const maxPos = donateList.scrollWidth - donateList.getBoundingClientRect().width - 5;
@ -359,6 +357,53 @@
flex-direction: column; flex-direction: column;
gap: calc(var(--donate-card-main-padding) / 2); gap: calc(var(--donate-card-main-padding) / 2);
position: relative; position: relative;
&:hover {
& > #donation-options-scroll {
opacity: 1;
}
& > #donation-options {
&.mask-both {
mask-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 20%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 1) 80%,
rgba(0, 0, 0, 0) 100%
);
}
&.mask-left {
mask-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 20%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 1) 97%,
rgba(0, 0, 0, 0) 100%
);
}
&.mask-right {
mask-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 3%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 1) 80%,
rgba(0, 0, 0, 0) 100%
);
}
}
}
&:not(:hover) {
& > .scroll-button {
visibility: hidden;
}
}
} }
#donation-options-scroll { #donation-options-scroll {
@ -382,49 +427,10 @@
padding: 0 16px; padding: 0 16px;
background-color: transparent; background-color: transparent;
height: 100%; height: 100%;
transition: opacity 0.2s;
}
#donation-options-container:hover #donation-options-scroll { &.hidden {
opacity: 1; visibility: hidden;
} }
.scroll-button.hidden {
opacity: 0;
visibility: hidden;
}
#donation-options-container.mask-both:hover #donation-options {
mask-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 20%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 1) 80%,
rgba(0, 0, 0, 0) 100%
);
}
#donation-options-container.mask-left:hover #donation-options {
mask-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 20%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 1) 97%,
rgba(0, 0, 0, 0) 100%
);
}
#donation-options-container.mask-right:hover #donation-options {
mask-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 3%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 1) 80%,
rgba(0, 0, 0, 0) 100%
);
} }
@media screen and (max-width: 550px) { @media screen and (max-width: 550px) {