AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2024-12-24 18:03:09 +01:00
parent d9dc0a0284
commit a21eab3cfb
2 changed files with 350 additions and 319 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
src/lib/components/Searchbar.svelte
View File

@ -19,7 +19,6 @@
$: inputValue = ""; $: inputValue = "";
let searchOpen = false; let searchOpen = false;
let searchBarModalChecked = false; // Initialize it to false let searchBarModalChecked = false; // Initialize it to false
let inputElement; let inputElement;
@ -54,9 +53,9 @@
async function handleSearch(symbol, assetType) { async function handleSearch(symbol, assetType) {
searchBarTicker(symbol); searchBarTicker(symbol);
goto(`/${assetType === "ETF" ? "etf" : assetType === "Crypto" ? "crypto" : "stocks"}/${symbol}`) goto(
`/${assetType === "ETF" ? "etf" : assetType === "Crypto" ? "crypto" : "stocks"}/${symbol}`,
);
} }
async function popularTicker(state) { async function popularTicker(state) {
@ -145,7 +144,6 @@
searchBarData = await response?.json(); searchBarData = await response?.json();
}, 50); // delay }, 50); // delay
isLoading = false; isLoading = false;
} }
const onKeyPress = (e) => { const onKeyPress = (e) => {
@ -198,12 +196,11 @@
assetType = selectedItem?.type; assetType = selectedItem?.type;
focusedSuggestion = selectedItem?.symbol; focusedSuggestion = selectedItem?.symbol;
} }
} }
const handleControlK = async (event) => { const handleControlK = async (event) => {
if (event.ctrlKey && event.key === "k") { if (event.ctrlKey && event.key === "k") {
//const keyboardSearch = document.getElementById("searchBarModal"); const keyboardSearch = document.getElementById("combobox-input");
//keyboardSearch?.dispatchEvent(new MouseEvent("click")); keyboardSearch?.dispatchEvent(new MouseEvent("click"));
event.preventDefault(); event.preventDefault();
} }
}; };
@ -243,7 +240,6 @@
}; };
}); });
$: { $: {
if (searchBarModalChecked === true && typeof window !== "undefined") { if (searchBarModalChecked === true && typeof window !== "undefined") {
if ($screenWidth > 640) { if ($screenWidth > 640) {
@ -284,24 +280,28 @@
} }
} }
} }
</script> </script>
<div class="hidden sm:block w-full sm:max-w-[600px] grow"> <div class="hidden sm:block w-full sm:max-w-[600px]">
<div > <div>
<div class="relative flex items-center"> <div class="relative flex items-center">
<div class="absolute inset-y-0 left-0 flex items-center pl-2.5"> <div class="absolute inset-y-0 left-0 flex items-center pl-2.5">
<svg class="h-4 w-4 text-icon xs:h-5 xs:w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" style="max-width: 40px" aria-hidden="true"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div> <svg
<Combobox.Root class="h-4 w-4 text-icon xs:h-5 xs:w-5"
items={searchBarData} fill="none"
bind:inputValue stroke-linecap="round"
bind:touchedInput stroke-linejoin="round"
stroke-width="3"
stroke="currentColor"
viewBox="0 0 24 24"
style="max-width: 40px"
aria-hidden="true"
><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg
> >
</div>
<Combobox.Root items={searchBarData} bind:inputValue bind:touchedInput>
<div class="relative w-full"> <div class="relative w-full">
<div <div class="absolute inset-y-0 left-0 flex items-center pl-2.5">
class="absolute inset-y-0 left-0 flex items-center pl-2.5"
>
<svg <svg
class="text-icon h-5 w-5" class="text-icon h-5 w-5"
fill="none" fill="none"
@ -313,23 +313,25 @@
style="max-width: 40px" style="max-width: 40px"
aria-hidden="true" aria-hidden="true"
> >
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
></path>
</svg> </svg>
</div> </div>
<Combobox.Input <Combobox.Input
id="combobox-input"
on:input={search} on:input={search}
class="grow rounded-sm border border-gray-600 py-2 pl-9 text-[1rem] placeholder-gray-400 focus:border-default focus:shadow-lg focus:outline-none focus:ring-0 tiny:pl-8 xs:pl-10 text-white md:py-2 w-full bg-secondary sm:hover:bg-[#09090B] focus:bg-[#09090B] dark:bg-dark-700 dark:hover:bg-dark-700 dark:focus:bg-dark-700" class="grow rounded-sm border border-gray-600 py-2 pl-9 text-[1rem] placeholder-gray-400 focus:border-default focus:shadow-lg focus:outline-none focus:ring-0 tiny:pl-8 xs:pl-10 text-white md:py-2 w-full bg-secondary sm:hover:bg-[#09090B] focus:bg-[#09090B] dark:bg-dark-700 dark:hover:bg-dark-700 dark:focus:bg-dark-700"
placeholder="Company or stock symbol..." placeholder="Company or stock symbol..."
aria-label="Company or stock symbol..." aria-label="Company or stock symbol..."
/> />
<div class="absolute inset-y-0 right-0 flex items-center gap-x-2 px-3 text-gray-350 font-semibold"> <div
class="absolute inset-y-0 right-0 flex items-center gap-x-2 px-3 text-gray-350 font-semibold"
>
{#if isLoading} {#if isLoading}
<span class="loading loading-spinner loading-sm"></span> <span class="loading loading-spinner loading-sm"></span>
{:else if inputValue?.length > 0} {:else if inputValue?.length > 0}
<label class="cursor-pointer" on:click={() => inputValue = ""}> <label class="cursor-pointer" on:click={() => (inputValue = "")}>
<svg <svg
class="w-6 h-6 " class="w-6 h-6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
@ -339,50 +341,60 @@
> >
</label> </label>
{:else} {:else}
<div class="pointer-events-none rounded-md border border-gray-500 px-2 py-0.5"> <div
/ class="pointer-events-none absolute end-6 top-2.5 gap-1 opacity-80 rtl:flex-row-reverse hidden lg:flex"
>
<kbd class="kbd kbd-sm">ctrl</kbd>
<kbd class="kbd kbd-sm">K</kbd>
</div> </div>
{/if} {/if}
</div> </div>
</div> </div>
{#if inputValue?.length > 0}
<Combobox.Content <Combobox.Content
class="w-auto z-40 -mt-0.5 rounded-md border border-gray-700 bg-[#09090B] px-1 py-3 shadow-popover outline-none" class="w-auto z-40 -mt-0.5 rounded-md border border-gray-700 bg-[#09090B] px-1 py-3 shadow-popover outline-none"
sideOffset={8} sideOffset={8}
on:keydown={handleKeyDown}
> >
{#if inputValue?.length > 0 && searchBarData?.length > 0}
{#each searchBarData as item} {#each searchBarData as item}
<Combobox.Item <Combobox.Item
class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none transition-all duration-75 data-[highlighted]:bg-primary" class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm capitalize outline-none transition-all duration-75 data-[highlighted]:bg-primary"
value={item?.symbol} value={item?.symbol}
label={item?.name} label={item?.name}
on:click={() => handleSearch(item?.symbol, item?.type)} on:click={() => handleSearch(item?.symbol, item?.type)}
> >
<div <div class="flex flex-row items-center justify-between w-full">
class="flex flex-row items-center justify-between w-full"> <span class="text-sm text-blue-400">{item?.symbol}</span>
<span class="text-sm text-blue-400" <span class="ml-3 text-sm text-white">{item?.name}</span>
>{item?.symbol}</span <span class="ml-auto text-sm text-white">{item?.type}</span>
>
<span class="ml-3 text-sm text-white"
>{item?.name}</span
>
<span class="ml-auto text-sm text-white"
>{item?.type}</span
>
</div> </div>
</Combobox.Item> </Combobox.Item>
{/each}
{:else if inputValue?.length === 0}
{#each searchHistory as item}
<Combobox.Item
class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm capitalize outline-none transition-all duration-75 data-[highlighted]:bg-primary"
value={item?.symbol}
label={item?.name}
on:click={() => handleSearch(item?.symbol, item?.type)}
>
<div class="flex flex-row items-center justify-between w-full">
<span class="text-sm text-blue-400">{item?.symbol}</span>
<span class="ml-3 text-sm text-white">{item?.name}</span>
<span class="ml-auto text-sm text-white">{item?.type}</span>
</div>
</Combobox.Item>
{/each}
{:else} {:else}
<span class="block px-5 py-2 text-sm text-white"> <span class="block px-5 py-2 text-sm text-white">
No results found No results found
</span> </span>
{/each}
</Combobox.Content>
{/if} {/if}
</Combobox.Content>
</Combobox.Root> </Combobox.Root>
</div> </div>
</div> </div>
</div> </div>
<label <label
for="searchBarModal" for="searchBarModal"
@ -391,17 +403,16 @@
<Search class="h-[20px] w-[20px]" /> <Search class="h-[20px] w-[20px]" />
</label> </label>
<input <input
type="checkbox" type="checkbox"
id="searchBarModal" id="searchBarModal"
class="modal-toggle" class="modal-toggle"
bind:checked={searchBarModalChecked} bind:checked={searchBarModalChecked}
/> />
<dialog id="searchBarModal" class="modal p-3 sm:p-0"> <dialog id="searchBarModal" class="modal p-3 sm:p-0">
<label for="searchBarModal" class="cursor-pointer modal-backdrop"></label> <label for="searchBarModal" class="cursor-pointer modal-backdrop"></label>
<div <div
class="z-[999] modal-box overflow-hidden rounded-md bg-secondary border border-gray-600 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-3/4 lg:w-1/2 2xl:w-1/3" class="z-[999] modal-box overflow-hidden rounded-md bg-secondary border border-gray-600 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-3/4 lg:w-1/2 2xl:w-1/3"
> >
@ -423,20 +434,41 @@
<!-- Search layout --> <!-- Search layout -->
<div class="mt-8"> <div class="mt-8">
<div class="relative"> <div class="relative">
<div
class="inline-block cursor-pointer absolute right-5 top-1.5 text-[1.3rem] sm:text-[1.5rem] text-white"
>
{#if isLoading}
<span class="loading loading-spinner loading-sm"></span>
{:else if inputValue?.length > 0}
<label class="cursor-pointer" on:click={() => (inputValue = "")}>
<svg
class="w-6 h-6 mt-2 ml-1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
/></svg
>
</label>
{:else}
/
{/if}
</div>
<label for="modal-search" class="sr-only">Search</label> <label for="modal-search" class="sr-only">Search</label>
<input <input
id="modal-search" id="modal-search"
class="rounded-md w-full text-white bg-secondary border border-gray-600 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4" class="rounded-md w-full text-white bg-secondary border border-gray-600 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
type="search" type="search"
placeholder="Search Anything…" placeholder="Company or stock symbol..."
bind:value={inputValue} bind:value={inputValue}
bind:this={inputElement} bind:this={inputElement}
on:input={search} on:input={search}
on:keydown={handleKeyDown}
on:keypress={onKeyPress}
autocomplete="off" autocomplete="off"
/> />
<button <button
on:click={() => searchBarTicker(inputValue)} on:click={() => searchBarTicker(inputValue)}
class="absolute inset-0 right-auto group" class="absolute inset-0 right-auto group"
@ -479,7 +511,6 @@
: 'shake-ticker cursor-pointer bg-secondary sm:hover:bg-primary rounded-md flex justify-start items-center p-2 text-white group'} w-full" : 'shake-ticker cursor-pointer bg-secondary sm:hover:bg-primary rounded-md flex justify-start items-center p-2 text-white group'} w-full"
> >
<div class="flex flex-row items-center w-full"> <div class="flex flex-row items-center w-full">
<div class="flex flex-col"> <div class="flex flex-col">
<span class="text-blue-400">{item?.symbol}</span> <span class="text-blue-400">{item?.symbol}</span>
<span class="text-white" <span class="text-white"
@ -551,11 +582,8 @@
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</dialog> </dialog>
<!--End Drawer Sidewise for mobile--> <!--End Drawer Sidewise for mobile-->
<!--End Drawer Sidewise for mobile--> <!--End Drawer Sidewise for mobile-->

41
src/routes/+layout.svelte
View File

@ -795,8 +795,6 @@
</Sheet.Close> </Sheet.Close>
{/if} {/if}
</nav> </nav>
</Sheet.Content> </Sheet.Content>
</Sheet.Root> </Sheet.Root>
@ -809,15 +807,15 @@
<span class="text-white font-semibold ml-2 text-lg">Stocknear</span> <span class="text-white font-semibold ml-2 text-lg">Stocknear</span>
</a> </a>
<div
class="relative w-full flex flex-row justify-end sm:justify-between items-center"
<div class="relative w-full flex flex-row justify-end sm:justify-between items-center"> >
<div class="sm:w-full lg:ml-16"> <div class="sm:w-full xl:ml-16">
<Searchbar /> <Searchbar />
</div> </div>
<NotificationBell {data} {hasUnreadElement} /> <NotificationBell {data} {hasUnreadElement} />
<div class="ml-3"> <div class="ml-4">
{#if data?.user} {#if data?.user}
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
@ -838,28 +836,39 @@
</Button> </Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content align="end"> <DropdownMenu.Content align="end">
<a href="/profile" class="cursor-pointer "> <a href="/profile" class="cursor-pointer">
<DropdownMenu.Item class="sm:hover:bg-primary cursor-pointer"> <DropdownMenu.Item
class="sm:hover:bg-primary cursor-pointer"
>
My Account My Account
</DropdownMenu.Item> </DropdownMenu.Item>
</a> </a>
<DropdownMenu.Separator /> <DropdownMenu.Separator />
<a href="/watchlist/stocks" class="cursor-pointer"> <a href="/watchlist/stocks" class="cursor-pointer">
<DropdownMenu.Item class="sm:hover:bg-primary cursor-pointer"> <DropdownMenu.Item
class="sm:hover:bg-primary cursor-pointer"
>
Watchlist Watchlist
</DropdownMenu.Item> </DropdownMenu.Item>
</a> </a>
<a href="/price-alert" class="cursor-pointer"> <a href="/price-alert" class="cursor-pointer">
<DropdownMenu.Item class="sm:hover:bg-primary cursor-pointer"> <DropdownMenu.Item
class="sm:hover:bg-primary cursor-pointer"
>
Price Alert Price Alert
</DropdownMenu.Item> </DropdownMenu.Item>
</a> </a>
<DropdownMenu.Separator /> <DropdownMenu.Separator />
<form class="cursor-pointer" action="/logout" method="POST"> <form class="cursor-pointer" action="/logout" method="POST">
<button type="submit" class="w-full text-start cursor-pointer"> <button
<DropdownMenu.Item class="sm:hover:bg-primary cursor-pointer"> type="submit"
class="w-full text-start cursor-pointer"
>
<DropdownMenu.Item
class="sm:hover:bg-primary cursor-pointer"
>
<span class="text-start">Logout</span> <span class="text-start">Logout</span>
</DropdownMenu.Item> </DropdownMenu.Item>
</button> </button>
@ -875,12 +884,7 @@
</a> </a>
{/if} {/if}
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<div class="flex w-full"> <div class="flex w-full">
@ -1172,7 +1176,6 @@
</a> </a>
{/if} {/if}
</nav> </nav>
</aside> </aside>
</div> </div>
<div class="w-full xl:w-5/6"> <div class="w-full xl:w-5/6">