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: 🐛 Layout fixes, make CW composing work

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-05-12 17:19:53 -10:00
parent a41aa3b91d
commit f90a43909b
No known key found for this signature in database
6 changed files with 17 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/avatars/Centered.vue
View file

@ -1,7 +1,7 @@
<template>
<div v-bind="$props" class="bg-dark-700 overflow-hidden flex items-center justify-center">
<Skeleton :enabled="!url" class="!h-full !w-full">
<img class="cursor-pointer bg-dark-700 ring-1 w-full h-full object-cover" :src="url" :alt="alt"
<Skeleton :enabled="!src" class="!h-full !w-full">
<img class="cursor-pointer bg-dark-700 ring-1 w-full h-full object-cover" :src="src" :alt="alt"
:title="alt" />
</Skeleton>
</div>
@ -11,7 +11,7 @@
import type { HTMLAttributes } from "vue";
interface Props extends /* @vue-ignore */ HTMLAttributes {
url?: string;
src?: string;
alt?: string;
}

5
components/composer/composer.vue
View file

@ -25,7 +25,7 @@
</div>
<!-- Content warning textbox -->
<div v-if="cw !== null" class="mb-4">
<input type="text" placeholder="Add a content warning"
<input type="text" v-model="cwContent" placeholder="Add a content warning"
class="w-full p-2 mt-1 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none" />
</div>
<div class="flex flex-row gap-1 border-white/20">
@ -69,6 +69,7 @@ const respondingTo = ref<Status | null>(null);
const respondingType = ref<"reply" | "quote" | null>(null);
const me = useMe();
const cw = ref(null as string | null);
const cwContent = ref("");
const markdown = ref(true);
const splashes = useConfig().COMPOSER_SPLASHES;
@ -129,6 +130,8 @@ const send = async () => {
respondingType.value === "quote"
? respondingTo.value?.id
: null,
spoiler_text: cw ? cwContent.value.trim() : undefined,
sensitive: !!cw,
}),
})
.then(async (res) => {

2
components/headers/greeting.vue
View file

@ -3,7 +3,7 @@
<div v-if="me" class="bg-dark-800 p-6 my-5 rounded ring-1 ring-white/5">
<div class="sm:flex sm:items-center sm:justify-between">
<div class="sm:flex sm:space-x-5">
<AvatarsCentered :url="me.avatar"
<AvatarsCentered :src="me.avatar"
class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10" />
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
<p class="text-sm font-medium text-gray-300">Welcome back,</p>

4
components/social-elements/notes/header.vue
View file

@ -1,7 +1,7 @@
<template>
<div v-if="small" class="flex flex-row">
<NuxtLink :href="accountUrl" class="shrink-0">
<AvatarsCentered :url="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
<AvatarsCentered :src="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
class="size-6 rounded ring-1 ring-white/5" />
</NuxtLink>
<div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
@ -22,7 +22,7 @@
</div>
<div v-else class="flex flex-row">
<NuxtLink :href="accountUrl" class="shrink-0">
<AvatarsCentered :url="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
<AvatarsCentered :src="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
class="h-12 w-12 rounded ring-1 ring-white/5" />
</NuxtLink>
<div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">

11
components/social-elements/notes/reply-header.vue
View file

@ -1,14 +1,11 @@
<template>
<NuxtLink :href="`/@${account?.acct}`"
class="mb-4 flex flex-row gap-2 items-center text-gray-300 opacity-70 line-clamp-1">
<NuxtLink :href="`/@${account?.acct}`" class="mb-4 flex flex-row gap-2 items-center text-gray-300 opacity-70">
<Skeleton :enabled="!account" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
<iconify-icon icon="tabler:arrow-back-up" width="1.5rem" height="1.5rem" aria-hidden="true" />
<span class="flex flex-row items-center gap-2 overflow-hidden flex-wrap break-all">
Replying to
<AvatarsCentered v-if="account?.avatar" :url="account?.avatar" :alt="`${account?.acct}'s avatar'`"
class="size-5 rounded inline-flex shrink-0 ring-1 ring-white/10" />
<span class="shrink-0">Replying to</span>
<AvatarsCentered v-if="account?.avatar" :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
class="size-5 shrink-0 rounded ring-1 ring-white/10" />
<strong class="line-clamp-1">{{ account?.display_name || account?.acct }}</strong>
</span>
</Skeleton>
</NuxtLink>
</template>

4
components/social-elements/users/Account.vue
View file

@ -1,11 +1,11 @@
<template>
<ClientOnly>
<div class="w-full ring-1 ring-inset ring-white/5 pb-10">
<AvatarsCentered :url="account?.header" :alt="`${account?.acct}'s header image'`"
<AvatarsCentered :src="account?.header" :alt="`${account?.acct}'s header image'`"
class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700" />
<div class="flex items-start justify-between px-4 py-3">
<AvatarsCentered :url="account?.avatar" :alt="`${account?.acct}'s avatar'`"
<AvatarsCentered :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
<ClientOnly>