Skip to content

Commit a3fbcee

Browse files
btouchardbtouchard
committed
feat(footer): update footer visibility
1 parent 925d363 commit a3fbcee

File tree

5 files changed

+99
-104
lines changed

5 files changed

+99
-104
lines changed

‎webapp/src/components/AppLogo.vue‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
2+
<script setup lang="ts">
3+
import { computed } from 'vue'
4+
5+
interface Props {
6+
size?: 'sm' | 'md' | 'lg'
7+
showText?: boolean
8+
textClass?: string
9+
}
10+
11+
const props = withDefaults(defineProps<Props>(), {
12+
size: 'md',
13+
showText: true,
14+
textClass: ''
15+
})
16+
17+
const sizeClasses = computed(() => {
18+
switch (props.size) {
19+
case 'sm':
20+
return {
21+
icon: 'h-5 w-5',
22+
text: 'text-base'
23+
}
24+
case 'lg':
25+
return {
26+
icon: 'h-10 w-10',
27+
text: 'text-2xl'
28+
}
29+
case 'md':
30+
default:
31+
return {
32+
icon: 'h-8 w-8',
33+
text: 'text-xl'
34+
}
35+
}
36+
})
37+
</script>
38+
39+
<template>
40+
<div class="flex items-center space-x-2">
41+
<svg
42+
:class="[sizeClasses.icon, 'text-primary']"
43+
viewBox="0 0 24 24"
44+
fill="none"
45+
xmlns="http://www.w3.org/2000/svg"
46+
>
47+
<path
48+
d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
49+
stroke="currentColor"
50+
stroke-width="2"
51+
stroke-linecap="round"
52+
stroke-linejoin="round"
53+
/>
54+
</svg>
55+
<span
56+
v-if="showText"
57+
:class="[sizeClasses.text, textClass || 'font-bold text-foreground']"
58+
>
59+
Ackify
60+
</span>
61+
</div>
62+
</template>

‎webapp/src/components/layout/AppFooter.vue‎

Lines changed: 27 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,45 @@
11
<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
22
<script setup lang="ts">
33
import { useI18n } from 'vue-i18n'
4-
import { Github, Mail } from 'lucide-vue-next'
4+
import { Github } from 'lucide-vue-next'
5+
import AppLogo from '@/components/AppLogo.vue'
56
67
const { t } = useI18n()
78
</script>
89

910
<template>
10-
<footer class="mt-auto border-t border-border/40 clay-card backdrop-blur supports-[backdrop-filter]:bg-background/60">
11-
<div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
12-
<div class="grid grid-cols-1 gap-8 md:grid-cols-4">
13-
<!-- Brand -->
14-
<div class="space-y-4">
15-
<div class="flex items-center space-x-2">
16-
<svg class="h-8 w-8 text-primary" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
17-
<path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
18-
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
19-
</svg>
20-
<span class="text-xl font-bold text-foreground">Ackify</span>
11+
<footer class="mt-auto border-t border-border clay-card relative z-10">
12+
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
13+
<div class="flex flex-col items-center justify-between gap-4 sm:flex-row sm:gap-6">
14+
<!-- Brand & Description -->
15+
<div class="flex items-center gap-3 text-center sm:text-left">
16+
<AppLogo size="sm" :show-text="false" />
17+
<div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-3">
18+
<span class="font-semibold text-base text-foreground leading-none">Ackify</span>
19+
<span class="text-sm text-muted-foreground leading-tight max-w-md">{{ t('footer.description') }}</span>
2120
</div>
22-
<p class="text-sm text-muted-foreground">
23-
{{ t('footer.description') }}
24-
</p>
2521
</div>
2622

27-
<!-- Navigation -->
28-
<div>
29-
<h3 class="mb-4 text-sm font-semibold text-foreground">{{ t('footer.navigation.title') }}</h3>
30-
<ul class="space-y-3">
31-
<li>
32-
<router-link to="/" class="text-sm text-muted-foreground hover:text-primary transition-colors">
33-
{{ t('nav.home') }}
34-
</router-link>
35-
</li>
36-
<li>
37-
<router-link to="/signatures" class="text-sm text-muted-foreground hover:text-primary transition-colors">
38-
{{ t('nav.myConfirmations') }}
39-
</router-link>
40-
</li>
41-
</ul>
42-
</div>
43-
44-
<!-- Resources -->
45-
<div>
46-
<h3 class="mb-4 text-sm font-semibold text-foreground">{{ t('footer.resources.title') }}</h3>
47-
<ul class="space-y-3">
48-
<li>
49-
<a href="https://github.com/btouchard/ackify-ce" target="_blank" rel="noopener noreferrer" class="text-sm text-muted-foreground hover:text-primary transition-colors">
50-
{{ t('footer.resources.documentation') }}
51-
</a>
52-
</li>
53-
<li>
54-
<a href="https://github.com/btouchard/ackify-ce" target="_blank" rel="noopener noreferrer" class="text-sm text-muted-foreground hover:text-primary transition-colors">
55-
{{ t('footer.resources.apiReference') }}
56-
</a>
57-
</li>
58-
<li>
59-
<a href="https://github.com/btouchard/ackify-ce/issues" target="_blank" rel="noopener noreferrer" class="text-sm text-muted-foreground hover:text-primary transition-colors">
60-
{{ t('footer.resources.support') }}
61-
</a>
62-
</li>
63-
</ul>
64-
</div>
23+
<!-- Links & Copyright -->
24+
<div class="flex flex-wrap items-center justify-center gap-4 text-sm sm:flex-nowrap">
25+
<a
26+
href="https://github.com/btouchard/ackify-ce"
27+
target="_blank"
28+
rel="noopener noreferrer"
29+
class="inline-flex items-center gap-1.5 text-muted-foreground hover:text-primary transition-colors"
30+
:aria-label="t('footer.resources.documentation')"
31+
>
32+
<Github :size="16" />
33+
<span>GitHub</span>
34+
</a>
6535

66-
<!-- Legal & Contact -->
67-
<div>
68-
<h3 class="mb-4 text-sm font-semibold text-foreground">{{ t('footer.legal.title') }}</h3>
69-
<ul class="space-y-3">
70-
<li>
71-
<a href="#" class="text-sm text-muted-foreground hover:text-primary transition-colors">
72-
{{ t('footer.legal.terms') }}
73-
</a>
74-
</li>
75-
<li>
76-
<a href="#" class="text-sm text-muted-foreground hover:text-primary transition-colors">
77-
{{ t('footer.legal.privacy') }}
78-
</a>
79-
</li>
80-
<li>
81-
<a href="#" class="text-sm text-muted-foreground hover:text-primary transition-colors">
82-
{{ t('footer.legal.contact') }}
83-
</a>
84-
</li>
85-
</ul>
36+
<span class="text-muted-foreground/50">•</span>
8637

87-
<!-- Social Icons -->
88-
<div class="mt-6 flex space-x-4">
89-
<a href="https://github.com/btouchard/ackify-ce" target="_blank" rel="noopener noreferrer"
90-
class="text-muted-foreground hover:text-primary transition-colors"
91-
aria-label="GitHub">
92-
<Github :size="20" />
93-
</a>
94-
<a href="mailto:support@ackify.eu" class="text-muted-foreground hover:text-primary transition-colors" aria-label="Email">
95-
<Mail :size="20" />
96-
</a>
97-
</div>
38+
<span class="text-muted-foreground whitespace-nowrap">
39+
&copy; {{ new Date().getFullYear() }} {{ t('footer.license') }}
40+
</span>
9841
</div>
9942
</div>
100-
101-
<div class="mt-12 border-t border-border/40 pt-8">
102-
<p class="text-center text-sm text-muted-foreground">
103-
&copy; {{ new Date().getFullYear() }} Ackify. {{ t('footer.copyright') }}
104-
<span class="text-xs">{{ t('footer.license') }}</span>
105-
</p>
106-
</div>
10743
</div>
10844
</footer>
10945
</template>

‎webapp/src/components/layout/AppHeader.vue‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Menu, X, ChevronDown, User, LogOut, Shield, FileSignature } from 'lucid
77
import Button from '@/components/ui/Button.vue'
88
import ThemeToggle from './ThemeToggle.vue'
99
import LanguageSelect from './LanguageSelect.vue'
10+
import AppLogo from '@/components/AppLogo.vue'
1011
import { useI18n } from 'vue-i18n'
1112
1213
const { t } = useI18n()
@@ -59,12 +60,8 @@ const closeUserMenu = () => {
5960
<div class="flex h-16 items-center justify-between">
6061
<!-- Logo -->
6162
<div class="flex items-center">
62-
<router-link to="/" class="flex items-center space-x-2 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-md">
63-
<svg class="h-8 w-8 text-primary" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
64-
<path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
65-
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
66-
</svg>
67-
<span class="text-xl font-bold text-foreground">Ackify</span>
63+
<router-link to="/" class="focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-md">
64+
<AppLogo size="md" />
6865
</router-link>
6966
</div>
7067

‎webapp/src/components/layout/AppShell.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ import SkipToContent from '../accessibility/SkipToContent.vue'
66
</script>
77

88
<template>
9-
<div class="flex min-h-screen flex-col bg-background">
9+
<div class="flex min-h-screen flex-col bg-background relative">
1010
<SkipToContent />
11-
<AppHeader />
11+
<AppHeader class="flex-shrink-0" />
1212

13-
<main id="main-content" class="flex-1 min-h-[60vh]">
13+
<main id="main-content" class="flex-grow w-full">
1414
<slot />
1515
</main>
1616

17-
<AppFooter />
17+
<AppFooter class="flex-shrink-0" />
1818
</div>
1919
</template>

‎webapp/src/pages/SignPage.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -227,15 +227,15 @@ onMounted(async () => {
227227
</script>
228228

229229
<template>
230-
<div class="relative min-h-[calc(100vh-4rem)]">
230+
<div class="relative">
231231
<!-- Background decoration -->
232232
<div class="absolute inset-0 -z-10 overflow-hidden">
233233
<div class="absolute left-1/4 top-0 h-[400px] w-[400px] rounded-full bg-primary/5 blur-3xl"></div>
234234
<div class="absolute right-1/4 bottom-0 h-[400px] w-[400px] rounded-full bg-primary/5 blur-3xl"></div>
235235
</div>
236236

237237
<!-- Main Content -->
238-
<main class="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
238+
<div class="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
239239
<!-- Page Header -->
240240
<div class="mb-8 text-center">
241241
<h1 class="mb-2 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
@@ -525,6 +525,6 @@ onMounted(async () => {
525525
</div>
526526
</div>
527527
</div>
528-
</main>
528+
</div>
529529
</div>
530530
</template>

0 commit comments

Comments
 (0)