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}`" :id="`availableActor-${availableActor?.id}`"
/> />
<label <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}`" :for="`availableActor-${availableActor?.id}`"
> >
<figure class="h-12 w-12" v-if="availableActor?.avatar"> <figure class="h-12 w-12" v-if="availableActor?.avatar">
@ -44,9 +44,11 @@
/> />
</figure> </figure>
<AccountCircle v-else :size="48" /> <AccountCircle v-else :size="48" />
<div class="flex-1"> <div class="flex-1 w-px">
<h3>{{ availableActor?.name }}</h3> <h3 class="line-clamp-2">{{ availableActor?.name }}</h3>
<small>{{ `@${availableActor?.preferredUsername}` }}</small> <small class="flex truncate">{{
`@${availableActor?.preferredUsername}`
}}</small>
</div> </div>
</label> </label>
</li> </li>

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

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

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

@ -28,7 +28,7 @@
></path> ></path>
</svg> </svg>
<span <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 >{{ element.text }}</span
> >
</div> </div>
@ -47,7 +47,7 @@
</svg> </svg>
<router-link <router-link
:to="element" :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 >{{ element.text }}</router-link
> >
</div> </div>

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

@ -28,7 +28,7 @@
:id="`availableActor-${identity?.id}`" :id="`availableActor-${identity?.id}`"
/> />
<label <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}`" :for="`availableActor-${identity?.id}`"
> >
<figure class="h-12 w-12" v-if="identity?.avatar"> <figure class="h-12 w-12" v-if="identity?.avatar">
@ -41,9 +41,11 @@
/> />
</figure> </figure>
<AccountCircle v-else :size="48" /> <AccountCircle v-else :size="48" />
<div class="flex-1"> <div class="flex-1 w-px">
<h3>{{ identity?.name }}</h3> <h3 class="line-clamp-2">{{ identity?.name }}</h3>
<small>{{ `@${identity?.preferredUsername}` }}</small> <small class="flex truncate">{{
`@${identity?.preferredUsername}`
}}</small>
</div> </div>
</label> </label>
</li> </li>

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

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