diff --git a/src/routes/download/+page.svelte b/src/routes/download/+page.svelte index 2158a9909..08256153c 100644 --- a/src/routes/download/+page.svelte +++ b/src/routes/download/+page.svelte @@ -1,20 +1,21 @@ <script lang="ts"> import { links } from "$data/links"; import { defaultI18nValues, externalLink, Metadata } from "$lib"; - import { Button, InfoBadge, InfoBar, TextBlock } from "fluent-svelte"; + import { Button, InfoBar, TextBlock } from "fluent-svelte"; import { onMount } from "svelte"; import DownloadSourceCard from "./DownloadSourceCard.svelte"; import type { DownloadSource } from "./types"; import { _ } from "svelte-i18n"; let isWindows = false; + let innerWidth = 649; const downloadSources = [ { name: $_("download.microsoft_store.title", defaultI18nValues), description: $_( "download.microsoft_store.description", - defaultI18nValues + defaultI18nValues, ), href: `ms-windows-store://pdp/?ProductId=9nghp3dx8hdx&cid=FilesWebsite`, icon: "/branding/logo-light.svg", @@ -32,6 +33,10 @@ onMount(() => { isWindows = navigator.userAgent.includes("Windows"); + innerWidth = window.innerWidth; + window.addEventListener("resize", () => { + innerWidth = window.innerWidth; + }); }); </script> @@ -43,35 +48,42 @@ <TextBlock variant="titleLarge" style="text-align: center;" >{$_("download.title", defaultI18nValues)}</TextBlock > - <InfoBar class="donation-infobar" severity="success" closable={false}> - <div - style="display: flex; gap: 0.5rem; margin-block-end: 7px; margin-block-start: 7px;" + {#if innerWidth > 510} + <InfoBar + style="min-height: 75px; overflow: hidden;" + class="donation-infobar" + severity="success" + closable={false} > - {$_("download.donation_description", defaultI18nValues)} - - <Button - slot="action" - variant="accent" - href="https://github.com/sponsors/yaira2" - {...externalLink} + <div + style="display: flex; gap: 0.5rem; margin-block-end: 7px; margin-block-start: 7px;" > - {$_("download.donation_button", defaultI18nValues)} - </Button> - </div> + {$_("download.donation_description", defaultI18nValues)} + <Button + slot="action" + href="https://github.com/sponsors/yaira2" + {...externalLink} + > + {$_("download.donation_button", defaultI18nValues)} + </Button> + </div> - <svelte:fragment slot="icon"> </svelte:fragment> - </InfoBar> + <svelte:fragment slot="icon"> </svelte:fragment> + </InfoBar> + {/if} <section class="download-sources"> {#each downloadSources as source} <DownloadSourceCard {source} /> {/each} - <p> - {$_("download.self_signed.description", defaultI18nValues)}<a - href="/appinstallers/Files.stable.appinstaller" - >{$_("download.self_signed.link_text", defaultI18nValues)}</a - >. - </p> + {#if innerWidth > 648} + <p> + {$_("download.self_signed.description", defaultI18nValues)}<a + href="/appinstallers/Files.stable.appinstaller" + >{$_("download.self_signed.link_text", defaultI18nValues)}</a + >. + </p> + {/if} </section> </main>