dnrops
/
open-webui
mirror of https://github.com/open-webui/open-webui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refac: styling 

Co-Authored-By: Jun Siang Cheah <me@jscheah.me>
This commit is contained in:
Timothy J. Baek 2024-05-26 12:32:57 -07:00
parent 242d4f0c8d
commit fd98add6aa
3 changed files with 28 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/lib/components/chat/Chat.svelte
View File

@ -1008,25 +1008,27 @@
/> />
{#if $banners.length > 0} {#if $banners.length > 0}
<div class="flex flex-col gap-1"> <div class="absolute top-16 w-full {$showSidebar ? 'md:max-w-[calc(100%-260px)]' : ''}">
{#each $banners as banner} <div class=" flex flex-col gap-1 w-full">
<Banner {#each $banners.filter( (b) => (b.dismissible ? !JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]').includes(b.id) : true) ) as banner}
{banner} <Banner
on:dismiss={(e) => { {banner}
const bannerId = e.detail; on:dismiss={(e) => {
const bannerId = e.detail;
localStorage.setItem( localStorage.setItem(
'dismissedBannerIds', 'dismissedBannerIds',
JSON.stringify( JSON.stringify(
[ [
bannerId, bannerId,
...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]') ...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]')
].filter((id) => $banners.find((b) => b.id === id)) ].filter((id) => $banners.find((b) => b.id === id))
) )
); );
}} }}
/> />
{/each} {/each}
</div>
</div> </div>
{/if} {/if}

15
src/lib/components/common/Banner.svelte
View File

@ -36,17 +36,17 @@
}); });
</script> </script>
{#if mounted} {#if !dismissed}
{#if !dismissed} {#if mounted}
<div <div
class=" top-0 left-0 right-0 p-2 mx-4 px-3 flex justify-center items-center relative rounded-xl border dark:border-gray-800 text-gray-800 dark:text-gary-100 bg-white dark:bg-gray-900 backdrop-blur-xl" class=" top-0 left-0 right-0 p-2 mx-4 px-3 flex justify-center items-center relative rounded-xl border border-gray-100 dark:border-gray-850 text-gray-800 dark:text-gary-100 bg-white dark:bg-gray-900 backdrop-blur-xl z-40"
transition:fade={{ delay: 0, duration: 300 }} transition:fade={{ delay: 100, duration: 300 }}
> >
<div class=" flex flex-col md:flex-row md:items-center flex-1 text-sm w-fit gap-1.5"> <div class=" flex flex-col md:flex-row md:items-center flex-1 text-sm w-fit gap-1.5">
<div class="flex justify-between self-start"> <div class="flex justify-between self-start">
<div <div
class=" text-xs font-black {classNames[banner.type] ?? class=" text-xs font-black {classNames[banner.type] ??
classNames['info']} w-fit px-2 rounded uppercase" classNames['info']} w-fit px-2 rounded uppercase line-clamp-1 mr-0.5"
> >
{banner.type} {banner.type}
</div> </div>
@ -110,14 +110,13 @@
</div> </div>
</div> </div>
{/if} {/if}
<div class="flex h-full justify-start"> <div class="flex self-start">
{#if banner.dismissible} {#if banner.dismissible}
<button <button
on:click={() => { on:click={() => {
dismiss(banner.id); dismiss(banner.id);
}} }}
class="mt-[-2.5px] ml-1.5 mr-1 text-gray-400 dark:hover:text-white h-2 mb-auto" class=" -mt-[3px] ml-1.5 mr-1 text-gray-400 dark:hover:text-white h-1">&times;</button
>&times;</button
> >
{/if} {/if}
</div> </div>

7
src/routes/(app)/+layout.svelte
View File

@ -85,12 +85,7 @@
documents.set(await getDocs(localStorage.token)); documents.set(await getDocs(localStorage.token));
})(), })(),
(async () => { (async () => {
let _banners = await getBanners(localStorage.token); banners.set(await getBanners(localStorage.token));
const dismissedBannerIds = JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]');
_banners = _banners.filter((banner) =>
banner.dismissible ? !dismissedBannerIds.includes(banner.id) : true
);
banners.set(_banners);
})(), })(),
(async () => { (async () => {
tags.set(await getAllChatTags(localStorage.token)); tags.set(await getAllChatTags(localStorage.token));