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

74
layouts/default.vue
View file

@ -50,28 +50,32 @@ async function logout() {
</div> </div>
<slot name="header"> <slot name="header">
<div class="flex flex-row flex-wrap items-center min-w-full"> <div class="flex flex-row items-center">
<NuxtLink to="/"> <NuxtLink to="/" class="me-5">
<span class="sr-only">{{ t('back_to_apps') }}</span> <span class="sr-only">{{ t('back_to_apps') }}</span>
<YIcon name="account-circle" size="5em" class="me-3" /> <CustomLogo class="logo" />
</NuxtLink> </NuxtLink>
<div> <div
<h2 class="text-2xl font-extrabold leading-none tracking-tight"> class="flex min-[500px]:w-full max-[500px]:flex-col max-[500px]:ms-auto"
{{ user?.username || t('visitor') }} >
</h2> <div>
<h3 v-if="user">{{ user.fullname }}</h3> <h2 class="text-2xl font-extrabold leading-none tracking-tight">
<h4 v-if="user" class="opacity-50">{{ user.mail }}</h4> {{ user?.username || t('visitor') }}
</div> </h2>
<h3 v-if="user">{{ user.fullname }}</h3>
<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 <YButton
v-if="isLoggedIn" v-if="isLoggedIn"
icon="logout" icon="logout"
:text="t('logout')" :text="t('logout')"
@click.prevent="logout" @click.prevent="logout"
/> />
<YButton v-else icon="login" :text="t('login')" to="/login" /> <YButton v-else icon="login" :text="t('login')" to="/login" />
</div>
</div> </div>
</div> </div>
</slot> </slot>
@ -83,24 +87,26 @@ async function logout() {
<footer class="mt-auto"> <footer class="mt-auto">
<slot name="footer"> <slot name="footer">
<div class="sm:flex flex-row flex-wrap items-end justify-center"> <nav
<nav 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"
class="border-t border-gray-500 space-x-5 flex-wrap sm:me-5 text-center sm:text-left" >
<NuxtLink
v-for="link in footerLinks"
:key="link.to"
:to="link.to"
:target="link.newWindow ? '_blank' : undefined"
class="link link-hover text-base-content inline-block"
> >
<NuxtLink {{ link.text }}
v-for="link in footerLinks" </NuxtLink>
:key="link.to" </nav>
:to="link.to"
:target="link.newWindow ? '_blank' : undefined"
class="link link-hover text-base-content inline-block"
>
{{ link.text }}
</NuxtLink>
</nav>
<CustomLogo class="mt-8 sm:mt-0 mx-auto sm:ms-auto sm:me-0" />
</div>
</slot> </slot>
</footer> </footer>
</div> </div>
</template> </template>
<style scoped>
header .logo {
width: 100px;
}
</style>