mirror of
https://github.com/btouchard/ackify.git
synced 2026-02-10 15:58:57 -06:00
feat(footer): update footer visibility
This commit is contained in:
Benjamin
62
webapp/src/components/AppLogo.vue
Normal file
62
webapp/src/components/AppLogo.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
showText?: boolean
|
||||
textClass?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
size: 'md',
|
||||
showText: true,
|
||||
textClass: ''
|
||||
})
|
||||
|
||||
const sizeClasses = computed(() => {
|
||||
switch (props.size) {
|
||||
case 'sm':
|
||||
return {
|
||||
icon: 'h-5 w-5',
|
||||
text: 'text-base'
|
||||
}
|
||||
case 'lg':
|
||||
return {
|
||||
icon: 'h-10 w-10',
|
||||
text: 'text-2xl'
|
||||
}
|
||||
case 'md':
|
||||
default:
|
||||
return {
|
||||
icon: 'h-8 w-8',
|
||||
text: 'text-xl'
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center space-x-2">
|
||||
<svg
|
||||
:class="[sizeClasses.icon, 'text-primary']"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<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"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
v-if="showText"
|
||||
:class="[sizeClasses.text, textClass || 'font-bold text-foreground']"
|
||||
>
|
||||
Ackify
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,108 +1,44 @@
|
||||
<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Github, Mail } from 'lucide-vue-next'
|
||||
import { Github } from 'lucide-vue-next'
|
||||
import AppLogo from '@/components/AppLogo.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="mt-auto border-t border-border/40 clay-card backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 gap-8 md:grid-cols-4">
|
||||
<!-- Brand -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<svg class="h-8 w-8 text-primary" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="text-xl font-bold text-foreground">Ackify</span>
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ t('footer.description') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div>
|
||||
<h3 class="mb-4 text-sm font-semibold text-foreground">{{ t('footer.navigation.title') }}</h3>
|
||||
<ul class="space-y-3">
|
||||
<li>
|
||||
<router-link to="/" class="text-sm text-muted-foreground hover:text-primary transition-colors">
|
||||
{{ t('nav.home') }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/signatures" class="text-sm text-muted-foreground hover:text-primary transition-colors">
|
||||
{{ t('nav.myConfirmations') }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Resources -->
|
||||
<div>
|
||||
<h3 class="mb-4 text-sm font-semibold text-foreground">{{ t('footer.resources.title') }}</h3>
|
||||
<ul class="space-y-3">
|
||||
<li>
|
||||
<a href="https://github.com/btouchard/ackify-ce" target="_blank" rel="noopener noreferrer" class="text-sm text-muted-foreground hover:text-primary transition-colors">
|
||||
{{ t('footer.resources.documentation') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/btouchard/ackify-ce" target="_blank" rel="noopener noreferrer" class="text-sm text-muted-foreground hover:text-primary transition-colors">
|
||||
{{ t('footer.resources.apiReference') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<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">
|
||||
{{ t('footer.resources.support') }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Legal & Contact -->
|
||||
<div>
|
||||
<h3 class="mb-4 text-sm font-semibold text-foreground">{{ t('footer.legal.title') }}</h3>
|
||||
<ul class="space-y-3">
|
||||
<li>
|
||||
<a href="#" class="text-sm text-muted-foreground hover:text-primary transition-colors">
|
||||
{{ t('footer.legal.terms') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm text-muted-foreground hover:text-primary transition-colors">
|
||||
{{ t('footer.legal.privacy') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm text-muted-foreground hover:text-primary transition-colors">
|
||||
{{ t('footer.legal.contact') }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Social Icons -->
|
||||
<div class="mt-6 flex space-x-4">
|
||||
<a href="https://github.com/btouchard/ackify-ce" target="_blank" rel="noopener noreferrer"
|
||||
class="text-muted-foreground hover:text-primary transition-colors"
|
||||
aria-label="GitHub">
|
||||
<Github :size="20" />
|
||||
</a>
|
||||
<a href="mailto:support@ackify.eu" class="text-muted-foreground hover:text-primary transition-colors" aria-label="Email">
|
||||
<Mail :size="20" />
|
||||
</a>
|
||||
<footer class="mt-auto border-t border-border clay-card relative z-10">
|
||||
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col items-center justify-between gap-4 sm:flex-row sm:gap-6">
|
||||
<!-- Brand & Description -->
|
||||
<div class="flex items-center gap-3 text-center sm:text-left">
|
||||
<AppLogo size="sm" :show-text="false" />
|
||||
<div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-3">
|
||||
<span class="font-semibold text-base text-foreground leading-none">Ackify</span>
|
||||
<span class="text-sm text-muted-foreground leading-tight max-w-md">{{ t('footer.description') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 border-t border-border/40 pt-8">
|
||||
<p class="text-center text-sm text-muted-foreground">
|
||||
© {{ new Date().getFullYear() }} Ackify. {{ t('footer.copyright') }}
|
||||
<span class="text-xs">{{ t('footer.license') }}</span>
|
||||
</p>
|
||||
<!-- Links & Copyright -->
|
||||
<div class="flex flex-wrap items-center justify-center gap-4 text-sm sm:flex-nowrap">
|
||||
<a
|
||||
href="https://github.com/btouchard/ackify-ce"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center gap-1.5 text-muted-foreground hover:text-primary transition-colors"
|
||||
:aria-label="t('footer.resources.documentation')"
|
||||
>
|
||||
<Github :size="16" />
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
|
||||
<span class="text-muted-foreground/50">•</span>
|
||||
|
||||
<span class="text-muted-foreground whitespace-nowrap">
|
||||
© {{ new Date().getFullYear() }} {{ t('footer.license') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -7,6 +7,7 @@ import { Menu, X, ChevronDown, User, LogOut, Shield, FileSignature } from 'lucid
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import ThemeToggle from './ThemeToggle.vue'
|
||||
import LanguageSelect from './LanguageSelect.vue'
|
||||
import AppLogo from '@/components/AppLogo.vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
@@ -59,12 +60,8 @@ const closeUserMenu = () => {
|
||||
<div class="flex h-16 items-center justify-between">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center">
|
||||
<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">
|
||||
<svg class="h-8 w-8 text-primary" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="text-xl font-bold text-foreground">Ackify</span>
|
||||
<router-link to="/" class="focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-md">
|
||||
<AppLogo size="md" />
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -6,14 +6,14 @@ import SkipToContent from '../accessibility/SkipToContent.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex min-h-screen flex-col bg-background">
|
||||
<div class="flex min-h-screen flex-col bg-background relative">
|
||||
<SkipToContent />
|
||||
<AppHeader />
|
||||
<AppHeader class="flex-shrink-0" />
|
||||
|
||||
<main id="main-content" class="flex-1 min-h-[60vh]">
|
||||
<main id="main-content" class="flex-grow w-full">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<AppFooter />
|
||||
<AppFooter class="flex-shrink-0" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -227,7 +227,7 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative min-h-[calc(100vh-4rem)]">
|
||||
<div class="relative">
|
||||
<!-- Background decoration -->
|
||||
<div class="absolute inset-0 -z-10 overflow-hidden">
|
||||
<div class="absolute left-1/4 top-0 h-[400px] w-[400px] rounded-full bg-primary/5 blur-3xl"></div>
|
||||
@@ -235,7 +235,7 @@ onMounted(async () => {
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
|
||||
<!-- Page Header -->
|
||||
<div class="mb-8 text-center">
|
||||
<h1 class="mb-2 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
|
||||
@@ -525,6 +525,6 @@ onMounted(async () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user