web/DonateOptionsCard: add scroll buttons to the options container

cuz users without touchpads couldn't scroll it without tabbing

web/src/components/donate/DonateOptionsCard.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+ import settings from "$lib/state/settings";
+
  import { donate } from "$lib/env";
+ import { device } from "$lib/device";
  import { t } from "$lib/i18n/translations";
 
  import DonateCardContainer from "$components/donate/DonateCardContainer.svelte";
@@ -11,7 +14,6 @@
  import IconPizza from "@tabler/icons-svelte/IconPizza.svelte";
  import IconToolsKitchen2 from "@tabler/icons-svelte/IconToolsKitchen2.svelte";
  import IconPaperBag from "@tabler/icons-svelte/IconPaperBag.svelte";
- import IconArrowRight from "@tabler/icons-svelte/IconArrowRight.svelte";
  import IconSoup from "@tabler/icons-svelte/IconSoup.svelte";
  import IconFridge from "@tabler/icons-svelte/IconFridge.svelte";
  import IconArmchair from "@tabler/icons-svelte/IconArmchair.svelte";
@@ -20,7 +22,11 @@
  import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
  import IconWorldWww from "@tabler/icons-svelte/IconWorldWww.svelte";
  import IconBath from "@tabler/icons-svelte/IconBath.svelte";
- import OuterLink from "$components/misc/OuterLink.svelte";
+
+ import IconArrowLeft from "@tabler/icons-svelte/IconArrowLeft.svelte";
+ import IconArrowRight from "@tabler/icons-svelte/IconArrowRight.svelte";
+
+ let donateList: HTMLElement;
 
  let customInput: HTMLInputElement;
  let customInputValue: number | null;
@@ -39,7 +45,7 @@
  4900: IconApple,
  7398: IconDeviceLaptop,
  8629: IconPhoto,
- 9433: IconBath
+ 9433: IconBath,
  };
 
  type Processor = "stripe" | "liberapay";
@@ -66,7 +72,30 @@
  }
 
  const amount = Math.floor(Number(customInputValue) * 100);
- return window.open(donationMethods[processor](amount), '_blank');
+ return window.open(donationMethods[processor](amount), "_blank");
+ };
+
+ const scrollBehavior = $settings.appearance.reduceMotion
+ ? "instant"
+ : "smooth";
+
+ $: showLeftScroll = false;
+ $: showRightScroll = true;
+
+ const scroll = (direction: "left" | "right") => {
+ const currentPos = donateList.scrollLeft;
+ const newPos = direction === "left" ? currentPos - 150 : currentPos + 150;
+ const maxPos = donateList.scrollWidth - donateList.getBoundingClientRect().width;
+
+ donateList.scroll({
+ left: newPos,
+ behavior: scrollBehavior,
+ });
+
+ setTimeout(() => {
+ showLeftScroll = newPos > 0;
+ showRightScroll = newPos < maxPos && newPos !== maxPos;
+ }, 150)
  };
 </script>
 
@@ -84,10 +113,11 @@
  <div class="donation-type-text">
  <div class="donate-card-title">{$t("donate.card.once")}</div>
  <div class="donate-card-subtitle">
- {$t("donate.card.processor", { value: 'stripe' })}
+ {$t("donate.card.processor", { value: "stripe" })}
  </div>
  </div>
  </button>
+
  <button
  id="donation-type-monthly"
  class="donation-type"
@@ -100,27 +130,65 @@
  <div class="donation-type-text">
  <div class="donate-card-title">{$t("donate.card.monthly")}</div>
  <div class="donate-card-subtitle">
- {$t("donate.card.processor", { value: 'liberapay' })}
+ {$t("donate.card.processor", { value: "liberapay" })}
  </div>
  </div>
  </button>
  </div>
- <div id="donation-options">
- {#each Object.entries(PRESET_DONATION_AMOUNTS) as [ amount, component ]}
- <DonationOption
- price={+amount}
- desc={$t(`donate.card.option.${amount}`)}
- href={donationMethods[processor](+amount * 100)}
- >
- <svelte:component this={component} />
- </DonationOption>
- {/each}
+
+ <div
+ id="donation-options-container"
+ aria-hidden="true"
+ 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}
+ <div id="donation-options-scroll">
+ <button
+ class="scroll-button left"
+ class:hidden={!showLeftScroll}
+ on:click={() => {
+ scroll("left");
+ }}
+ >
+ <IconArrowLeft />
+ </button>
+ <button
+ class="scroll-button right"
+ class:hidden={!showRightScroll}
+ on:click={() => {
+ scroll("right");
+ }}
+ >
+ <IconArrowRight />
+ </button>
+ </div>
+ {/if}
+
+ <div
+ id="donation-options"
+ bind:this={donateList}
+ on:scroll={(e) => {}}
+ >
+ {#each Object.entries(PRESET_DONATION_AMOUNTS) as [amount, component]}
+ <DonationOption
+ price={+amount}
+ desc={$t(`donate.card.option.${amount}`)}
+ href={donationMethods[processor](+amount * 100)}
+ >
+ <svelte:component this={component} />
+ </DonationOption>
+ {/each}
+ </div>
  </div>
+
  <div id="donation-custom">
  <div id="input-container" class:focused={customFocused}>
  {#if customInputValue || customInput?.validity.badInput}
  <span id="input-dollar-sign">$</span>
  {/if}
+
  <input
  id="donation-custom-input"
  type="number"
@@ -137,6 +205,7 @@
  on:keydown={(e) => e.key === "Enter" && sendCustom()}
  />
  </div>
+
  <button
  id="donation-custom-submit"
  on:click={sendCustom}
@@ -146,6 +215,7 @@
  <IconArrowRight />
  </button>
  </div>
+
  <div class="donate-card-subtitle processor-mobile">
  {$t("donate.card.processor", { value: processor })}
  </div>
@@ -288,6 +358,79 @@
  text-align: center;
  }
 
+ #donation-options-container {
+ display: flex;
+ flex-direction: column;
+ gap: calc(var(--donate-card-main-padding) / 2);
+ position: relative;
+ }
+
+ #donation-options-scroll {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ position: absolute;
+ pointer-events: none;
+ width: 100%;
+ height: 100%;
+ z-index: 3;
+ overflow: hidden;
+ opacity: 0;
+ transition: opacity 0.2s;
+ }
+
+ .scroll-button {
+ pointer-events: all;
+ color: white;
+ padding: 0 16px;
+ background-color: transparent;
+ height: 100%;
+ transition: opacity 0.2s;
+ }
+
+ #donation-options-container:hover #donation-options-scroll {
+ opacity: 1;
+ }
+
+ .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) 96%,
+ 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) 4%,
+ rgba(0, 0, 0, 1) 50%,
+ rgba(0, 0, 0, 1) 80%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ }
+
  @media screen and (max-width: 550px) {
  :global(#donation-box) {
  min-width: unset;