Skip to content

Commit e6746c6

Browse files
LamparterLamparter
authored
Added ability to display minimal UI with ?minimal (#737)
1 parent 2939a73 commit e6746c6

File tree

4 files changed

+361
-301
lines changed

4 files changed

+361
-301
lines changed

‎src/layout/Footer/Footer.svelte‎

Lines changed: 95 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { Button, IconButton } from "fluent-svelte";
44
import { links } from "$data/links";
55
import { _ } from "svelte-i18n";
6+
import { onMount } from "svelte";
67
import Github from "./icons/github.svg?raw";
78
import Discord from "./icons/discord.svg?raw";
89
@@ -24,98 +25,107 @@
2425
link: "https://michaelwe.st/",
2526
},
2627
];
28+
29+
let minimal = false;
30+
31+
onMount(() => {
32+
const params = new URLSearchParams(window.location.search);
33+
minimal = params.has("minimal");
34+
});
2735
</script>
2836

29-
<PageSection type="footer" id="page-footer">
30-
<div class="column">
31-
<a class="logo" href="/">
32-
<picture>
33-
<source
34-
media="(prefers-color-scheme: dark)"
35-
srcset="/branding/logo-dark.svg"
36-
/>
37-
<source
38-
media="(prefers-color-scheme: light)"
39-
srcset="/branding/logo-light.svg"
40-
/>
41-
<img
42-
alt="Files logo"
43-
height="32"
44-
src="/branding/logo-light.svg"
45-
width="32"
46-
/>
47-
</picture>
48-
Files
49-
</a>
50-
<div class="social-links">
51-
<IconButton
52-
href="https://github.com/{links.github.owner}/{links.github.repo}/"
53-
title="GitHub repository"
54-
aria-label="GitHub repository"
37+
{#if !minimal}
38+
<PageSection type="footer" id="page-footer">
39+
<div class="column">
40+
<a class="logo" href="/">
41+
<picture>
42+
<source
43+
media="(prefers-color-scheme: dark)"
44+
srcset="/branding/logo-dark.svg"
45+
/>
46+
<source
47+
media="(prefers-color-scheme: light)"
48+
srcset="/branding/logo-light.svg"
49+
/>
50+
<img
51+
alt="Files logo"
52+
height="32"
53+
src="/branding/logo-light.svg"
54+
width="32"
55+
/>
56+
</picture>
57+
Files
58+
</a>
59+
<div class="social-links">
60+
<IconButton
61+
href="https://github.com/{links.github.owner}/{links.github.repo}/"
62+
title="GitHub repository"
63+
aria-label="GitHub repository"
64+
{...externalLink}
65+
>
66+
{@html Github}
67+
</IconButton>
68+
<IconButton
69+
href="https://discord.gg/{links.discord}"
70+
title="Discord server"
71+
aria-label="Discord server"
72+
{...externalLink}
73+
>
74+
{@html Discord}
75+
</IconButton>
76+
</div>
77+
<p>
78+
{$_("Copyright (c) {year} Files Community", {
79+
values: { year: new Date().getFullYear() },
80+
})}
81+
</p>
82+
</div>
83+
<div class="column">
84+
<p>Pages</p>
85+
<Button variant="hyperlink" href="/">
86+
{$_("footer.home", defaultI18nValues)}
87+
</Button>
88+
<Button variant="hyperlink" href="/docs">
89+
{$_("footer.docs", defaultI18nValues)}
90+
</Button>
91+
<Button variant="hyperlink" href="/blog">
92+
{$_("footer.news", defaultI18nValues)}
93+
</Button>
94+
<Button variant="hyperlink" href="/download">
95+
{$_("footer.download", defaultI18nValues)}
96+
</Button>
97+
</div>
98+
<div class="column">
99+
<p>{$_("footer.contribute", defaultI18nValues)}</p>
100+
<Button
101+
variant="hyperlink"
55102
{...externalLink}
103+
href="https://github.com/{links.github.owner}/{links.github
104+
.repo}/issues/new/choose"
56105
>
57-
{@html Github}
58-
</IconButton>
59-
<IconButton
60-
href="https://discord.gg/{links.discord}"
61-
title="Discord server"
62-
aria-label="Discord server"
106+
{$_("footer.feedback", defaultI18nValues)}
107+
</Button>
108+
109+
<Button variant="hyperlink" href="/docs/contributing/code-style">
110+
{$_("footer.style_guide", defaultI18nValues)}
111+
</Button>
112+
113+
<Button
63114
{...externalLink}
115+
href="https://crowdin.com/project/files-app"
116+
variant="hyperlink"
64117
>
65-
{@html Discord}
66-
</IconButton>
118+
{$_("footer.translations", defaultI18nValues)}
119+
</Button>
67120
</div>
68-
<p>
69-
{$_("Copyright (c) {year} Files Community", {
70-
values: { year: new Date().getFullYear() },
71-
})}
72-
</p>
73-
</div>
74-
<div class="column">
75-
<p>Pages</p>
76-
<Button variant="hyperlink" href="/">
77-
{$_("footer.home", defaultI18nValues)}
78-
</Button>
79-
<Button variant="hyperlink" href="/docs">
80-
{$_("footer.docs", defaultI18nValues)}
81-
</Button>
82-
<Button variant="hyperlink" href="/blog">
83-
{$_("footer.news", defaultI18nValues)}
84-
</Button>
85-
<Button variant="hyperlink" href="/download">
86-
{$_("footer.download", defaultI18nValues)}
87-
</Button>
88-
</div>
89-
<div class="column">
90-
<p>{$_("footer.contribute", defaultI18nValues)}</p>
91-
<Button
92-
variant="hyperlink"
93-
{...externalLink}
94-
href="https://github.com/{links.github.owner}/{links.github
95-
.repo}/issues/new/choose"
96-
>
97-
{$_("footer.feedback", defaultI18nValues)}
98-
</Button>
99-
100-
<Button variant="hyperlink" href="/docs/contributing/code-style">
101-
{$_("footer.style_guide", defaultI18nValues)}
102-
</Button>
103-
104-
<Button
105-
{...externalLink}
106-
href="https://crowdin.com/project/files-app"
107-
variant="hyperlink"
108-
>
109-
{$_("footer.translations", defaultI18nValues)}
110-
</Button>
111-
</div>
112-
<div class="column">
113-
<p>{$_("footer.support", defaultI18nValues)}</p>
114-
<Button variant="hyperlink" href="/privacy">
115-
{$_("footer.privacy", defaultI18nValues)}
116-
</Button>
117-
</div>
118-
</PageSection>
121+
<div class="column">
122+
<p>{$_("footer.support", defaultI18nValues)}</p>
123+
<Button variant="hyperlink" href="/privacy">
124+
{$_("footer.privacy", defaultI18nValues)}
125+
</Button>
126+
</div>
127+
</PageSection>
128+
{/if}
119129

120130
<style lang="scss">
121131
@use "./Footer";

0 commit comments

Comments
 (0)