blah/Weblah
1
0
Fork 0
mirror of https://github.com/Blah-IM/Weblah.git synced 2025-05-01 00:31:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: adjust chat header design on desktop

Browse source
This commit is contained in:
Shibo Lyu 2024-08-31 11:51:44 +08:00
parent 7438628584
commit 85ccb8fce2
1 changed files with 37 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/routes/(app)/chats/[chatId]/ChatHeader.svelte
View file

@ -9,7 +9,7 @@
</script>
<div
class="box-border flex min-h-[calc(3rem+1px)] w-full gap-2 border-b border-ss-secondary bg-sb-primary p-2 shadow-sm"
class="relative box-border flex min-h-[calc(3rem+1px)] w-full items-center gap-2 border-b border-ss-secondary bg-sb-primary p-2 shadow-sm"
>
<Button href="/" class="rounded-full sm:hidden">
<svg
@ -27,8 +27,42 @@
{/if}
<span class="sr-only">Back</span>
</Button>
<div class="flex flex-1 flex-col justify-center text-center">
<div class="flex flex-1 flex-col justify-center text-center sm:order-2 sm:text-start">
<h3 class="truncate text-sm font-semibold">{chat.name}</h3>
</div>
<AvatarBeam size={30} name={chat.name} />
<div class="sm:order-1">
<AvatarBeam size={30} name={chat.name} />
</div>
<a class="absolute inset-y-0 start-0 hidden w-2 cursor-default sm:block" href="/">
<span class="sr-only">Back</span>
</a>
<Button class="order-3 hidden size-8 p-0 sm:inline-flex">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
<path
fill-rule="evenodd"
d="M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z"
clip-rule="evenodd"
/>
</svg>
<span class="sr-only">Search</span>
</Button>
<Button class="order-3 hidden size-8 p-0 sm:inline-flex">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
/>
</svg>
<span class="sr-only">Options</span>
</Button>
</div>