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: add edit icon on profile hover + sr-only link

Browse source
This commit is contained in:
axolotle 2023-11-23 17:07:54 +01:00
parent 6b624e5ed2
commit f27a90f6e6
4 changed files with 23 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
assets/icons/pencil.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83l3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 260 B

25
layouts/default.vue
View file

@ -61,12 +61,21 @@ async function logout() {
<div <div
class="flex min-[500px]:w-full max-[500px]:flex-col max-[500px]:ms-auto" class="flex min-[500px]:w-full max-[500px]:flex-col max-[500px]:ms-auto"
> >
<div> <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events vuejs-accessibility/no-static-element-interactions -->
<h2 class="text-2xl font-extrabold leading-none tracking-tight"> <div class="profile cursor-pointer" @click="navigateTo('/edit')">
{{ user?.username || t('visitor') }} <div>
</h2> <span
<h3 v-if="user">{{ user.fullname }}</h3> class="text-2xl font-extrabold tracking-tight leading-none"
<h4 v-if="user" class="opacity-50">{{ user.mail }}</h4> >
{{ user?.username || t('visitor') }}
</span>
<YIcon v-if="user" name="pencil" size="1.25em" class="ms-2" />
</div>
<div v-if="user" class="leading-none">{{ user.fullname }}</div>
<div v-if="user" class="opacity-50">{{ user.mail }}</div>
<NuxtLink to="/edit" class="link sr-only focus:not-sr-only">
{{ t('footerlink_edit') }}
</NuxtLink>
</div> </div>
<div class="min-[500px]:ms-auto max-[500px]:mt-2"> <div class="min-[500px]:ms-auto max-[500px]:mt-2">
@ -117,6 +126,10 @@ header .logo {
width: 100px; width: 100px;
} }
header .profile:not(:hover) .nuxt-icon {
display: none;
}
.focus-target:not(:focus-visible) { .focus-target:not(:focus-visible) {
outline: none; outline: none;
} }

1
locales/en.json
View file

@ -45,6 +45,7 @@
}, },
"theme": "Theme", "theme": "Theme",
"username": "Username", "username": "Username",
"visitor": "Visitor",
"v": { "v": {
"email": "Invalid email: must be alphanumeric and '_.' characters only (e.g. someone{'@'}example.com, s0me-1{'@'}example.com)", "email": "Invalid email: must be alphanumeric and '_.' characters only (e.g. someone{'@'}example.com, s0me-1{'@'}example.com)",
"field_invalid": "Field value is invalid", "field_invalid": "Field value is invalid",

2
pages/index.vue
View file

@ -4,6 +4,8 @@ definePageMeta({
}) })
const { t } = useI18n() const { t } = useI18n()
const isLoggedIn = await useIsLoggedIn()
const settings = await useSettings()
const appsData = await useApps() const appsData = await useApps()
useHead({ useHead({