all avatars stay round regardless of img; EventCard online span colored; EditView footer bar colored

This commit is contained in:
xcexec 2024-10-22 12:40:44 +02:00
parent 206383fdb7
commit 14c85f760c
12 changed files with 24 additions and 50 deletions

View file

@ -5,11 +5,9 @@
<div class="flex-none"> <div class="flex-none">
<figure v-if="actor.avatar"> <figure v-if="actor.avatar">
<img <img
class="rounded-xl" class="w-8 h-8 rounded-full object-cover"
:src="actor.avatar.url" :src="actor.avatar.url"
alt="" alt=""
width="36"
height="36"
loading="lazy" loading="lazy"
/> />
</figure> </figure>

View file

@ -1,6 +1,6 @@
<template> <template>
<li <li
class="bg-white dark:bg-slate-800 rounded p-2" class="bg-white dark:bg-zinc-800 rounded p-2"
:class="{ :class="{
reply: comment.inReplyToComment, reply: comment.inReplyToComment,
'bg-mbz-purple-50 dark:bg-mbz-purple-500': comment.isAnnouncement, 'bg-mbz-purple-50 dark:bg-mbz-purple-500': comment.isAnnouncement,
@ -19,11 +19,9 @@
> >
<figure> <figure>
<img <img
class="rounded-xl" class="w-6 h-6 rounded-full object-cover"
:src="actorComment.avatar.url" :src="actorComment.avatar.url"
alt="" alt=""
width="24"
height="24"
/> />
</figure> </figure>
</popover-actor-card> </popover-actor-card>
@ -59,7 +57,7 @@
<div v-else>{{ t("[This comment has been deleted]") }}</div> <div v-else>{{ t("[This comment has been deleted]") }}</div>
<nav class="flex gap-1 mt-1" v-if="!comment.deletedAt"> <nav class="flex gap-1 mt-1" v-if="!comment.deletedAt">
<button <button
class="cursor-pointer flex hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-1" class="cursor-pointer flex hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
v-if=" v-if="
currentActor?.id && currentActor?.id &&
!readOnly && !readOnly &&
@ -74,7 +72,7 @@
<o-dropdown aria-role="list" v-show="!readOnly"> <o-dropdown aria-role="list" v-show="!readOnly">
<template #trigger> <template #trigger>
<button <button
class="cursor-pointer flex hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-1" class="cursor-pointer flex hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
> >
<DotsHorizontal /> <DotsHorizontal />
<span class="sr-only">{{ t("More options") }}</span> <span class="sr-only">{{ t("More options") }}</span>
@ -104,7 +102,7 @@
<button <button
v-if="!showReplies" v-if="!showReplies"
@click="showReplies = true" @click="showReplies = true"
class="flex cursor-pointer hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-1" class="flex cursor-pointer hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
> >
<ChevronDown /> <ChevronDown />
<span>{{ <span>{{
@ -120,7 +118,7 @@
<button <button
v-else-if="comment.totalReplies && showReplies" v-else-if="comment.totalReplies && showReplies"
@click="showReplies = false" @click="showReplies = false"
class="flex cursor-pointer hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-1" class="flex cursor-pointer hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
> >
<ChevronUp /> <ChevronUp />
<span>{{ t("Hide replies") }}</span> <span>{{ t("Hide replies") }}</span>
@ -402,6 +400,6 @@ const dateFnsLocale = inject<Locale>("dateFnsLocale");
</script> </script>
<style> <style>
article.mbz-comment .mention.h-card { article.mbz-comment .mention.h-card {
@apply inline-block border border-slate-600 dark:border-slate-300 rounded py-0.5 px-1; @apply inline-block border border-zinc-600 dark:border-zinc-300 rounded py-0.5 px-1;
} }
</style> </style>

View file

@ -5,11 +5,9 @@
<div class=""> <div class="">
<figure class="" v-if="comment.actor && comment.actor.avatar"> <figure class="" v-if="comment.actor && comment.actor.avatar">
<img <img
class="rounded-xl" class="w-8 h-8 rounded-full object-cover"
:src="comment.actor.avatar.url" :src="comment.actor.avatar.url"
alt="" alt=""
:width="48"
:height="48"
/> />
</figure> </figure>
<AccountCircle :size="48" v-else /> <AccountCircle :size="48" v-else />

View file

@ -15,11 +15,9 @@
" "
> >
<img <img
class="rounded-xl" class="w-8 h-8 rounded-full object-cover"
:src="discussion.lastComment.actor.avatar.url" :src="discussion.lastComment.actor.avatar.url"
alt="" alt=""
width="32"
height="32"
/> />
</figure> </figure>
<account-circle :size="32" v-else /> <account-circle :size="32" v-else />

View file

@ -88,11 +88,9 @@
> >
<figure class="" v-if="actorAvatarURL"> <figure class="" v-if="actorAvatarURL">
<img <img
class="rounded-xl" class="w-5 h-5 rounded-full object-cover"
:src="actorAvatarURL" :src="actorAvatarURL"
alt="" alt=""
width="24"
height="24"
loading="lazy" loading="lazy"
/> />
</figure> </figure>
@ -107,7 +105,7 @@
:physical-address="event.physicalAddress" :physical-address="event.physicalAddress"
/> />
<div <div
class="flex items-center text-sm" class="bg-fomo-card-2 flex items-center text-black text-sm"
dir="auto" dir="auto"
v-else-if="event.options && event.options.isOnline" v-else-if="event.options && event.options.isOnline"
> >

View file

@ -11,11 +11,9 @@
v-if="participation.actor.avatar" v-if="participation.actor.avatar"
> >
<img <img
class="rounded" class="w-6 h-6 rounded-full object-cover"
:src="participation.actor.avatar.url" :src="participation.actor.avatar.url"
alt="" alt=""
height="24"
width="24"
/> />
</figure> </figure>
<AccountCircle class="ltr:pr-1 rtl:pl-1" v-else /> <AccountCircle class="ltr:pr-1 rtl:pl-1" v-else />
@ -103,11 +101,9 @@
<div class="flex gap-1"> <div class="flex gap-1">
<figure class="" v-if="actorAvatarURL"> <figure class="" v-if="actorAvatarURL">
<img <img
class="rounded" class="w-6 h-6 rounded-full object-cover"
:src="actorAvatarURL" :src="actorAvatarURL"
alt="" alt=""
width="24"
height="24"
/> />
</figure> </figure>
<AccountCircle v-else /> <AccountCircle v-else />

View file

@ -44,12 +44,10 @@
@click="isComponentModalActive = true" @click="isComponentModalActive = true"
> >
<img <img
class="rounded" class="w-7 h-7 rounded-full object-cover"
v-if="selectedActor.avatar" v-if="selectedActor.avatar"
:src="selectedActor.avatar.url" :src="selectedActor.avatar.url"
:alt="selectedActor.avatar.alt" :alt="selectedActor.avatar.alt"
width="48"
height="48"
/> />
<AccountCircle v-else :size="48" /> <AccountCircle v-else :size="48" />
</span> </span>
@ -99,11 +97,9 @@
<div class=""> <div class="">
<figure class="" v-if="actor.avatar"> <figure class="" v-if="actor.avatar">
<img <img
class="rounded" class="w-7 h-7 rounded-full object-cover"
:src="actor.avatar.url" :src="actor.avatar.url"
:alt="actor.avatar.alt" :alt="actor.avatar.alt"
width="48"
height="48"
/> />
</figure> </figure>
<AccountCircle v-else :size="48" /> <AccountCircle v-else :size="48" />

View file

@ -92,11 +92,9 @@
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<figure class="" v-if="currentActor?.avatar"> <figure class="" v-if="currentActor?.avatar">
<img <img
class="rounded-xl" class="w-6 h-6 rounded-full object-cover"
:src="currentActor.avatar.url" :src="currentActor.avatar.url"
alt="" alt=""
width="24"
height="24"
/> />
</figure> </figure>
<AccountCircle v-else /> <AccountCircle v-else />

View file

@ -6,11 +6,9 @@
> >
<figure class="" v-if="member.actor.avatar"> <figure class="" v-if="member.actor.avatar">
<img <img
class="rounded-xl" class="w-8 h-8 rounded-full object-cover"
:src="member.actor.avatar.url" :src="member.actor.avatar.url"
alt="" alt=""
width="24"
height="24"
/> />
</figure> </figure>
<AccountCircle v-else :size="24" /> <AccountCircle v-else :size="24" />

View file

@ -123,11 +123,9 @@
> >
<figure v-if="props.row.actor.avatar"> <figure v-if="props.row.actor.avatar">
<img <img
class="rounded" class="w-7 h-7 rounded-full object-cover"
:src="props.row.actor.avatar.url" :src="props.row.actor.avatar.url"
alt="" alt=""
width="48"
height="48"
/> />
</figure> </figure>
<AccountCircle :size="48" v-else /> <AccountCircle :size="48" v-else />

View file

@ -504,7 +504,7 @@
<nav <nav
role="navigation" role="navigation"
aria-label="main navigation" aria-label="main navigation"
class="bg-mbz-yellow-alt-200 p-3 mt-3 rounded" class="bg-fomo-card-1 p-3 mt-3 rounded"
:class="{ 'is-fixed-bottom': showFixedNavbar }" :class="{ 'is-fixed-bottom': showFixedNavbar }"
v-if="hasCurrentActorPermissionsToEdit" v-if="hasCurrentActorPermissionsToEdit"
> >

View file

@ -57,11 +57,9 @@
<article class="flex gap-1"> <article class="flex gap-1">
<figure v-if="props.row.actor.avatar"> <figure v-if="props.row.actor.avatar">
<img <img
class="rounded" class="w-7 h-7 rounded-full object-cover"
:src="props.row.actor.avatar.url" :src="props.row.actor.avatar.url"
alt="" alt=""
width="48"
height="48"
/> />
</figure> </figure>
<AccountCircle v-else :size="48" /> <AccountCircle v-else :size="48" />