potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

fix(front): Small UI fixes on identity pickers

Browse source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2023-05-03 09:25:48 +02:00
parent c7b90cd60a
commit 6faafd6393
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
5 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
js/src/components/Event/OrganizerPicker.vue
View file

@ -31,7 +31,7 @@
:id="`availableActor-${availableActor?.id}`"
/>
<label
class="flex flex-wrap gap-2 p-3 bg-white hover:bg-gray-50 dark:bg-violet-3 dark:hover:bg-violet-3/60 border border-gray-300 rounded-lg cursor-pointer peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
class="flex items-center gap-2 p-3 bg-white hover:bg-gray-50 dark:bg-violet-3 dark:hover:bg-violet-3/60 border border-gray-300 rounded-lg cursor-pointer peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
:for="`availableActor-${availableActor?.id}`"
>
<figure class="h-12 w-12" v-if="availableActor?.avatar">
@ -44,9 +44,11 @@
/>
</figure>
<AccountCircle v-else :size="48" />
<div class="flex-1">
<h3>{{ availableActor?.name }}</h3>
<small>{{ `@${availableActor?.preferredUsername}` }}</small>
<div class="flex-1 w-px">
<h3 class="line-clamp-2">{{ availableActor?.name }}</h3>
<small class="flex truncate">{{
`@${availableActor?.preferredUsername}`
}}</small>
</div>
</label>
</li>

2
js/src/components/Settings/SettingMenuItem.vue
View file

@ -8,7 +8,7 @@
}"
>
<router-link v-if="to" :to="to">
<span>{{ title }}</span>
<span class="truncate">{{ title }}</span>
</router-link>
<span v-else>{{ title }}</span>
</li>

4
js/src/components/Utils/NavBreadcrumbs.vue
View file

@ -28,7 +28,7 @@
></path>
</svg>
<span
class="ltr:ml-1 rtl:mr-1 font-medium text-gray-600 dark:text-gray-300 md:ltr:ml-2 md:rtl:mr-2"
class="ltr:ml-1 rtl:mr-1 font-medium text-gray-600 dark:text-gray-300 md:ltr:ml-2 md:rtl:mr-2 line-clamp-1"
>{{ element.text }}</span
>
</div>
@ -47,7 +47,7 @@
</svg>
<router-link
:to="element"
class="ltr:ml-1 rtl:mr-1 font-medium text-gray-800 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100 md:ltr:ml-2 md:rtl:mr-2"
class="ltr:ml-1 rtl:mr-1 font-medium text-gray-800 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100 md:ltr:ml-2 md:rtl:mr-2 line-clamp-1"
>{{ element.text }}</router-link
>
</div>

10
js/src/views/Account/IdentityPicker.vue
View file

@ -28,7 +28,7 @@
:id="`availableActor-${identity?.id}`"
/>
<label
class="flex flex-wrap gap-2 p-3 bg-white hover:bg-gray-50 dark:bg-violet-3 dark:hover:bg-violet-3/60 border border-gray-300 rounded-lg cursor-pointer peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
class="flex items-center gap-2 p-3 bg-white hover:bg-gray-50 dark:bg-violet-3 dark:hover:bg-violet-3/60 border border-gray-300 rounded-lg cursor-pointer peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
:for="`availableActor-${identity?.id}`"
>
<figure class="h-12 w-12" v-if="identity?.avatar">
@ -41,9 +41,11 @@
/>
</figure>
<AccountCircle v-else :size="48" />
<div class="flex-1">
<h3>{{ identity?.name }}</h3>
<small>{{ `@${identity?.preferredUsername}` }}</small>
<div class="flex-1 w-px">
<h3 class="line-clamp-2">{{ identity?.name }}</h3>
<small class="flex truncate">{{
`@${identity?.preferredUsername}`
}}</small>
</div>
</label>
</li>

8
js/src/views/Account/children/EditIdentity.vue
View file

@ -1,9 +1,11 @@
<template>
<div>
<breadcrumbs-nav :links="breadcrumbsLinks" />
<div class="root" v-if="identity">
<h1 class="title">
<span v-if="isUpdate">{{ displayName(identity) }}</span>
<div v-if="identity">
<h1>
<span v-if="isUpdate" class="line-clamp-2">{{
displayName(identity)
}}</span>
<span v-else>{{ $t("I create an identity") }}</span>
</h1>