all avatars stay round regardless of img; EventCard online span colored; EditView footer bar colored
This commit is contained in:
parent
206383fdb7
commit
14c85f760c
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
|
@ -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"
|
||||||
>
|
>
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
|
@ -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" />
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
|
@ -6,12 +6,10 @@
|
||||||
>
|
>
|
||||||
<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" />
|
||||||
{{ displayNameAndUsername(member.actor) }}
|
{{ displayNameAndUsername(member.actor) }}
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
|
@ -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"
|
||||||
>
|
>
|
||||||
|
|
|
@ -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" />
|
||||||
|
|
Loading…
Reference in a new issue