ctmesh/map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add empty state ui

Browse Source
This commit is contained in:
liamcottle
2024-07-06 00:46:45 +12:00
parent 70dc492fb2
commit 2cab63bfc8
1 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/public/text-messages-embed.html
View File

@ -29,8 +29,21 @@
<div id="app" v-cloak>
<div class="h-full flex flex-col overflow-hidden">
<!-- empty state -->
<div v-if="messages.length === 0" class="flex h-full">
<div class="flex flex-col mx-auto my-auto p-4 text-gray-500 text-center">
<div class="mb-2 mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-10">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
</svg>
</div>
<div class="font-semibold">No Messages</div>
<div>There's no messages yet...</div>
</div>
</div>
<!-- note: must use flex-col-reverse to prevent ui scrolling when adding older messages to ui -->
<div id="messages" class="h-full flex flex-col-reverse p-3 overflow-y-auto">
<div v-show="messages.length > 0" id="messages" class="h-full flex flex-col-reverse p-3 overflow-y-auto">
<!-- messages -->
<div :key="message.id" v-for="message of reversedMessages" class="flex flex-col max-w-xl items-start my-1.5">