BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Update store page header styling and add search functionality

Browse Source
This commit is contained in:
sethburkart123
2024-09-15 08:55:26 +10:00
parent 0b9240a390
commit 92fd20c380
2 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/svelte-interface/components/store/Header.svelte
+1 -1
View File
@@ -12,7 +12,7 @@
}; };
</script> </script>
<header class="fixed top-0 z-50 w-full h-[4.25rem] bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-800/90 backdrop-blur-xl dark:text-white"> <header class="fixed top-0 z-50 w-full h-[4.25rem] bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-950/90 backdrop-blur-xl dark:text-white">
<div class="flex items-center justify-between px-4 py-1"> <div class="flex items-center justify-between px-4 py-1">
<div class="flex gap-4 cursor-pointer place-items-center" onkeydown={(e) => { if (e.key === 'Enter') clearSearch() }} onclick={clearSearch} role="button" tabindex="0"> <div class="flex gap-4 cursor-pointer place-items-center" onkeydown={(e) => { if (e.key === 'Enter') clearSearch() }} onclick={clearSearch} role="button" tabindex="0">
<img src={browser.runtime.getURL(logo)} class="h-14 {darkMode ? 'hidden' : ''}" alt="Logo" /> <img src={browser.runtime.getURL(logo)} class="h-14 {darkMode ? 'hidden' : ''}" alt="Logo" />
src/svelte-interface/pages/store.svelte
+25 -25
View File
@@ -63,35 +63,35 @@
)); ));
</script> </script>
<div class="w-screen h-screen bg-white {darkMode ? 'dark' : ''}"> <div class="w-screen h-screen bg-white pt-[4.25rem] {darkMode ? 'dark' : ''}">
<Header searchTerm={searchTerm} setSearchTerm={setSearchTerm} darkMode={darkMode} /> <div class="h-full overflow-y-scroll bg-zinc-200/50 dark:bg-zinc-900 dark:text-white">
<Header searchTerm={searchTerm} setSearchTerm={setSearchTerm} darkMode={darkMode} />
<div class="bg-zinc-200/50 dark:bg-zinc-900 dark:text-white pt-[4.25rem] h-full px-12 overflow-y-scroll"> <div class="px-12 pt-12">
<!-- Loading State -->
{#if loading}
<div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
<SkeletonLoader width="100%" height="200px" />
</div>
{:else}
{#if searchTerm === ''}
<CoverSwiper coverThemes={coverThemes} setDisplayTheme={setDisplayTheme} />
{/if}
<!-- Loading State --> <!-- ThemeGrid to display filtered themes -->
{#if loading} <ThemeGrid themes={filteredThemes} searchTerm={searchTerm} setDisplayTheme={setDisplayTheme} />
<div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
<SkeletonLoader width="100%" height="200px" /> {#if displayTheme}
</div> <ThemeModal theme={displayTheme} onClose={() => displayTheme = null} onInstall={() => {
{:else} StoreDownloadTheme({themeContent: displayTheme as Theme}).then(() => {
setTheme((displayTheme as Theme).id);
displayTheme = null;
});
}} onRemove={() => {}} />
{/if}
{#if searchTerm === ''}
<CoverSwiper coverThemes={coverThemes} setDisplayTheme={setDisplayTheme} />
{/if} {/if}
</div>
<!-- ThemeGrid to display filtered themes -->
<ThemeGrid themes={filteredThemes} searchTerm={searchTerm} setDisplayTheme={setDisplayTheme} />
{#if displayTheme}
<ThemeModal theme={displayTheme} onClose={() => displayTheme = null} onInstall={() => {
StoreDownloadTheme({themeContent: displayTheme as Theme}).then(() => {
setTheme((displayTheme as Theme).id);
displayTheme = null;
});
}} onRemove={() => {}} />
{/if}
{/if}
</div> </div>
</div> </div>