Skip to content

Commit d0a6c96

Browse files
j0u1j0u1
committed
style: improve footer layout flexibility and add localized labels
1 parent 83ae2f3 commit d0a6c96

File tree

1 file changed

+118
-116
lines changed

1 file changed

+118
-116
lines changed

‎app/components/AppFooter.vue‎

Lines changed: 118 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -12,128 +12,130 @@ const closeModal = () => modalRef.value?.close?.()
1212

1313
<template>
1414
<footer class="border-t border-border mt-auto">
15-
<div
16-
class="container sm:py-8 flex flex-col lg:flex-row justify-between sm:gap-4 text-fg-subtle text-sm"
17-
>
18-
<div class="flex flex-col gap-3 motion-safe:animate-fade-in motion-safe:animate-fill-both">
19-
<p class="font-mono text-balance hidden sm:block">
20-
{{ $t('tagline') }}
21-
</p>
15+
<div class="container sm:py-8 flex flex-col sm:gap-4 text-fg-subtle text-sm">
16+
<div class="flex justify-between">
2217
<p class="text-xs text-fg-muted text-center sm:text-start m-0">
2318
<span class="sm:hidden">{{ $t('non_affiliation_disclaimer') }}</span>
2419
<span class="hidden sm:inline">{{ $t('trademark_disclaimer') }}</span>
2520
</p>
26-
<BuildEnvironment v-if="!isHome" footer />
21+
<p class="hidden lg:flex text-fg-muted uppercase h-5 items-center">{{ $t('nav.links') }}</p>
2722
</div>
28-
<!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
29-
<div class="hidden sm:flex flex-col lg:items-end gap-3 min-h-11 text-xs">
30-
<p class="hidden lg:flex text-fg-muted uppercase h-5 items-center">Links</p>
31-
<div class="flex items-center gap-5">
32-
<LinkBase :to="{ name: 'about' }">
33-
{{ $t('footer.about') }}
34-
</LinkBase>
35-
<LinkBase :to="{ name: 'blog' }">
36-
{{ $t('footer.blog') }}
37-
</LinkBase>
38-
<LinkBase :to="{ name: 'privacy' }">
39-
{{ $t('privacy_policy.title') }}
40-
</LinkBase>
41-
<LinkBase :to="{ name: 'accessibility' }">
42-
{{ $t('a11y.footer_title') }}
43-
</LinkBase>
44-
<button
45-
type="button"
46-
class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
47-
@click.prevent="showModal"
48-
aria-haspopup="dialog"
49-
>
50-
{{ $t('footer.keyboard_shortcuts') }}
51-
</button>
52-
53-
<Modal
54-
ref="modalRef"
55-
:modalTitle="$t('footer.keyboard_shortcuts')"
56-
class="w-auto max-w-lg"
57-
>
58-
<p class="mb-2 font-mono text-fg-subtle">
59-
{{ $t('shortcuts.section.global') }}
60-
</p>
61-
<ul class="mb-6 flex flex-col gap-2">
62-
<li class="flex gap-2 items-center">
63-
<kbd class="kbd">/</kbd>
64-
<span>{{ $t('shortcuts.focus_search') }}</span>
65-
</li>
66-
<li class="flex gap-2 items-center">
67-
<kbd class="kbd">?</kbd>
68-
<span>{{ $t('shortcuts.show_kbd_hints') }}</span>
69-
</li>
70-
<li class="flex gap-2 items-center">
71-
<kbd class="kbd">,</kbd>
72-
<span>{{ $t('shortcuts.settings') }}</span>
73-
</li>
74-
<li class="flex gap-2 items-center">
75-
<kbd class="kbd">c</kbd>
76-
<span>{{ $t('shortcuts.compare') }}</span>
77-
</li>
78-
</ul>
79-
<p class="mb-2 font-mono text-fg-subtle">
80-
{{ $t('shortcuts.section.search') }}
81-
</p>
82-
<ul class="mb-6 flex flex-col gap-2">
83-
<li class="flex gap-2 items-center">
84-
<kbd class="kbd">↑</kbd>/<kbd class="kbd">↓</kbd>
85-
<span>{{ $t('shortcuts.navigate_results') }}</span>
86-
</li>
87-
<li class="flex gap-2 items-center">
88-
<kbd class="kbd">Enter</kbd>
89-
<span>{{ $t('shortcuts.go_to_result') }}</span>
90-
</li>
91-
</ul>
92-
<p class="mb-2 font-mono text-fg-subtle">
93-
{{ $t('shortcuts.section.package') }}
94-
</p>
95-
<ul class="mb-8 flex flex-col gap-2">
96-
<li class="flex gap-2 items-center">
97-
<kbd class="kbd">.</kbd>
98-
<span>{{ $t('shortcuts.open_code_view') }}</span>
99-
</li>
100-
<li class="flex gap-2 items-center">
101-
<kbd class="kbd">d</kbd>
102-
<span>{{ $t('shortcuts.open_docs') }}</span>
103-
</li>
104-
<li class="flex gap-2 items-center">
105-
<kbd class="kbd">c</kbd>
106-
<span>{{ $t('shortcuts.compare_from_package') }}</span>
107-
</li>
108-
</ul>
109-
<p class="text-fg-muted leading-relaxed">
110-
<i18n-t keypath="shortcuts.disable_shortcuts" tag="span" scope="global">
111-
<template #settings>
112-
<NuxtLink
113-
:to="{ name: 'settings' }"
114-
class="hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
115-
@click="closeModal"
116-
>
117-
{{ $t('settings.title') }}
118-
</NuxtLink>
119-
</template>
120-
</i18n-t>
121-
</p>
122-
</Modal>
23+
<div class="flex justify-between flex-col lg:flex-row gap-3">
24+
<div class="flex flex-col gap-3 motion-safe:animate-fade-in motion-safe:animate-fill-both">
25+
<p class="font-mono text-balance hidden sm:block">
26+
{{ $t('tagline') }}
27+
</p>
28+
<BuildEnvironment v-if="!isHome" footer />
12329
</div>
124-
<div class="flex items-center gap-5">
125-
<LinkBase :to="NPMX_DOCS_SITE">
126-
{{ $t('footer.docs') }}
127-
</LinkBase>
128-
<LinkBase to="https://repo.npmx.dev">
129-
{{ $t('footer.source') }}
130-
</LinkBase>
131-
<LinkBase to="https://social.npmx.dev">
132-
{{ $t('footer.social') }}
133-
</LinkBase>
134-
<LinkBase :to="discord.url">
135-
{{ discord.label }}
136-
</LinkBase>
30+
<!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
31+
<div class="hidden sm:flex flex-col lg:items-end gap-3 min-h-11 text-xs">
32+
<div class="flex items-center gap-5">
33+
<LinkBase :to="{ name: 'about' }">
34+
{{ $t('footer.about') }}
35+
</LinkBase>
36+
<LinkBase :to="{ name: 'blog' }">
37+
{{ $t('footer.blog') }}
38+
</LinkBase>
39+
<LinkBase :to="{ name: 'privacy' }">
40+
{{ $t('privacy_policy.title') }}
41+
</LinkBase>
42+
<LinkBase :to="{ name: 'accessibility' }">
43+
{{ $t('a11y.footer_title') }}
44+
</LinkBase>
45+
<button
46+
type="button"
47+
class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
48+
@click.prevent="showModal"
49+
aria-haspopup="dialog"
50+
>
51+
{{ $t('footer.keyboard_shortcuts') }}
52+
</button>
53+
54+
<Modal
55+
ref="modalRef"
56+
:modalTitle="$t('footer.keyboard_shortcuts')"
57+
class="w-auto max-w-lg"
58+
>
59+
<p class="mb-2 font-mono text-fg-subtle">
60+
{{ $t('shortcuts.section.global') }}
61+
</p>
62+
<ul class="mb-6 flex flex-col gap-2">
63+
<li class="flex gap-2 items-center">
64+
<kbd class="kbd">/</kbd>
65+
<span>{{ $t('shortcuts.focus_search') }}</span>
66+
</li>
67+
<li class="flex gap-2 items-center">
68+
<kbd class="kbd">?</kbd>
69+
<span>{{ $t('shortcuts.show_kbd_hints') }}</span>
70+
</li>
71+
<li class="flex gap-2 items-center">
72+
<kbd class="kbd">,</kbd>
73+
<span>{{ $t('shortcuts.settings') }}</span>
74+
</li>
75+
<li class="flex gap-2 items-center">
76+
<kbd class="kbd">c</kbd>
77+
<span>{{ $t('shortcuts.compare') }}</span>
78+
</li>
79+
</ul>
80+
<p class="mb-2 font-mono text-fg-subtle">
81+
{{ $t('shortcuts.section.search') }}
82+
</p>
83+
<ul class="mb-6 flex flex-col gap-2">
84+
<li class="flex gap-2 items-center">
85+
<kbd class="kbd">↑</kbd>/<kbd class="kbd">↓</kbd>
86+
<span>{{ $t('shortcuts.navigate_results') }}</span>
87+
</li>
88+
<li class="flex gap-2 items-center">
89+
<kbd class="kbd">Enter</kbd>
90+
<span>{{ $t('shortcuts.go_to_result') }}</span>
91+
</li>
92+
</ul>
93+
<p class="mb-2 font-mono text-fg-subtle">
94+
{{ $t('shortcuts.section.package') }}
95+
</p>
96+
<ul class="mb-8 flex flex-col gap-2">
97+
<li class="flex gap-2 items-center">
98+
<kbd class="kbd">.</kbd>
99+
<span>{{ $t('shortcuts.open_code_view') }}</span>
100+
</li>
101+
<li class="flex gap-2 items-center">
102+
<kbd class="kbd">d</kbd>
103+
<span>{{ $t('shortcuts.open_docs') }}</span>
104+
</li>
105+
<li class="flex gap-2 items-center">
106+
<kbd class="kbd">c</kbd>
107+
<span>{{ $t('shortcuts.compare_from_package') }}</span>
108+
</li>
109+
</ul>
110+
<p class="text-fg-muted leading-relaxed">
111+
<i18n-t keypath="shortcuts.disable_shortcuts" tag="span" scope="global">
112+
<template #settings>
113+
<NuxtLink
114+
:to="{ name: 'settings' }"
115+
class="hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
116+
@click="closeModal"
117+
>
118+
{{ $t('settings.title') }}
119+
</NuxtLink>
120+
</template>
121+
</i18n-t>
122+
</p>
123+
</Modal>
124+
</div>
125+
<div class="flex items-center gap-5">
126+
<LinkBase :to="NPMX_DOCS_SITE">
127+
{{ $t('footer.docs') }}
128+
</LinkBase>
129+
<LinkBase to="https://repo.npmx.dev">
130+
{{ $t('footer.source') }}
131+
</LinkBase>
132+
<LinkBase to="https://social.npmx.dev">
133+
{{ $t('footer.social') }}
134+
</LinkBase>
135+
<LinkBase :to="discord.url">
136+
{{ discord.label }}
137+
</LinkBase>
138+
</div>
137139
</div>
138140
</div>
139141
</div>

0 commit comments

Comments
 (0)