versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 💄 Remove extra bg value on Avatar inner images

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-20 18:53:34 -10:00
parent 21fcdd8f64
commit bba222a2fc
No known key found for this signature in database
3 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/avatars/avatar.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div v-bind="$attrs" class="bg-dark-700 overflow-hidden flex items-center justify-center"> <div v-bind="$attrs" class="bg-dark-700 overflow-hidden flex items-center justify-center">
<Skeleton :enabled="!imageLoaded" class="!h-full !w-full !rounded-none"> <Skeleton :enabled="!imageLoaded" class="!h-full !w-full !rounded-none">
<img class="cursor-pointer bg-dark-700 ring-1 w-full h-full object-cover" :src="src" :alt="alt" /> <img class="cursor-pointer ring-1 w-full h-full object-cover" :src="src" :alt="alt" />
</Skeleton> </Skeleton>
</div> </div>
</template> </template>

32
components/composer/autocomplete-suggestbox.vue
View file

@ -1,18 +1,22 @@
<template> <template>
<div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{ <Transition enter-active-class="transition duration-300 ease-in-out" enter-from-class="opacity-0 scale-95"
left: `${x}px`, enter-to-class="opacity-100 scale-100" leave-active-class="duration-200 ease-in-out"
top: `${y}px`, leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
width: `${width}px`, <div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{
}" v-show="topSuggestions && topSuggestions.length > 0"> left: `${x}px`,
<OverlayScrollbarsComponent class="w-full [&>div]:flex"> top: `${y}px`,
<div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key" width: `${width}px`,
@click="emit('autocomplete', suggestion.key)" }" v-show="topSuggestions && topSuggestions.length > 0">
:ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key" <OverlayScrollbarsComponent class="w-full [&>div]:flex">
:class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']"> <div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key"
<slot :suggestion="suggestion"></slot> @click="emit('autocomplete', suggestion.key)"
</div> :ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key"
</OverlayScrollbarsComponent> :class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
</div> <slot :suggestion="suggestion"></slot>
</div>
</OverlayScrollbarsComponent>
</div>
</Transition>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

3
components/composer/emoji-suggestbox.vue
View file

@ -2,7 +2,8 @@
<AutocompleteSuggestbox :currently-typing="currentlyTypingEmoji" :textarea="textarea" :suggestions="emojis" <AutocompleteSuggestbox :currently-typing="currentlyTypingEmoji" :textarea="textarea" :suggestions="emojis"
:distance-function="distance"> :distance-function="distance">
<template #default="{ suggestion }"> <template #default="{ suggestion }">
<Avatar :src="(suggestion.value as Emoji).url" class="w-full h-full [&>img]:object-contain rounded" <Avatar :src="(suggestion.value as Emoji).url"
class="w-full h-full [&>img]:object-contain !bg-transparent rounded"
:alt="`Emoji with shortcode ${(suggestion.value as Emoji).shortcode}`" /> :alt="`Emoji with shortcode ${(suggestion.value as Emoji).shortcode}`" />
</template> </template>
</AutocompleteSuggestbox> </AutocompleteSuggestbox>