YunoHost/yunohost-portal
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-portal.git synced 2024-09-03 20:06:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

layout: move logo in place of account icon + improve responsive

Browse source
This commit is contained in:
axolotle 2023-11-21 13:57:35 +01:00
parent 85620ac979
commit 2c8f681f77
1 changed files with 40 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
layouts/default.vue
View file

@ -50,12 +50,15 @@ async function logout() {
</div>
<slot name="header">
<div class="flex flex-row flex-wrap items-center min-w-full">
<NuxtLink to="/">
<div class="flex flex-row items-center">
<NuxtLink to="/" class="me-5">
<span class="sr-only">{{ t('back_to_apps') }}</span>
<YIcon name="account-circle" size="5em" class="me-3" />
<CustomLogo class="logo" />
</NuxtLink>
<div
class="flex min-[500px]:w-full max-[500px]:flex-col max-[500px]:ms-auto"
>
<div>
<h2 class="text-2xl font-extrabold leading-none tracking-tight">
{{ user?.username || t('visitor') }}
@ -64,7 +67,7 @@ async function logout() {
<h4 v-if="user" class="opacity-50">{{ user.mail }}</h4>
</div>
<div class="ms-auto">
<div class="min-[500px]:ms-auto max-[500px]:mt-2">
<YButton
v-if="isLoggedIn"
icon="logout"
@ -74,6 +77,7 @@ async function logout() {
<YButton v-else icon="login" :text="t('login')" to="/login" />
</div>
</div>
</div>
</slot>
</header>
@ -83,9 +87,8 @@ async function logout() {
<footer class="mt-auto">
<slot name="footer">
<div class="sm:flex flex-row flex-wrap items-end justify-center">
<nav
class="border-t border-gray-500 space-x-5 flex-wrap sm:me-5 text-center sm:text-left"
class="flex pt-2 flex-col border-t border-gray-500 flex-wrap text-center sm:space-x-5 sm:flex-row sm:inline-flex"
>
<NuxtLink
v-for="link in footerLinks"
@ -97,10 +100,13 @@ async function logout() {
{{ link.text }}
</NuxtLink>
</nav>
<CustomLogo class="mt-8 sm:mt-0 mx-auto sm:ms-auto sm:me-0" />
</div>
</slot>
</footer>
</div>
</template>
<style scoped>
header .logo {
width: 100px;
}
</style>