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

ui fix searchbar

Browse Source
This commit is contained in:
MuslemRahimi 2024-07-18 16:39:07 +02:00
parent 9b5697a98a
commit 952b25578b
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -453,7 +453,7 @@ $: {
{#if !showSuggestions } {#if !showSuggestions }
{#each popularList as item} {#each popularList as item}
<li class="border-b border-gray-800"> <li class="border-b border-gray-800">
<a href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`} on:click={() => popularTicker(item?.symbol, item?.assetType) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'shake-ticker cursor-pointer bg-[#09090B] rounded-lg flex justify-start items-center p-2 text-white group'} w-full"> <a href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`} on:click={() => popularTicker(item?.symbol, item?.assetType) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'shake-ticker cursor-pointer bg-[#09090B] sm:hover:bg-[#17171A] rounded-lg 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="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center"> <div class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center">
<img style="clip-path: circle(50%);" class="w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy" /> <img style="clip-path: circle(50%);" class="w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy" />
@ -486,7 +486,7 @@ $: {
<li class="border-b border-gray-800"> <li class="border-b border-gray-800">
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label data-sveltekit-preload-data="false" on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#09090B] rounded-lg flex justify-start items-center p-2 text-white group'}"> <label data-sveltekit-preload-data="false" on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#09090B] sm:hover:bg-[#17171A] rounded-lg flex justify-start items-center p-2 text-white group'}">
<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">

12
src/lib/components/TagSearchbar.svelte
View File

@ -334,15 +334,15 @@ $: {
<p class="text-xs font-semibold text-[#FB6A67] px-2 mb-4">Oh snapp, ticker does not exist in our database</p> <p class="text-xs font-semibold text-[#FB6A67] px-2 mb-4">Oh snapp, ticker does not exist in our database</p>
{/if} {/if}
{#if !showSuggestions} {#if !showSuggestions}
<div class="text-start text-sm font-semibold text-slate-400 mb-2"> <div class="text-start text-sm font-semibold text-white mb-2">
Popular Popular
</div> </div>
{/if} {/if}
<ul class="text-sm" > <ul class="text-sm" >
{#if !showSuggestions } {#if !showSuggestions }
{#each popularList as item} {#each popularList as item}
<li> <li class="border-b border-gray-800">
<a data-sveltekit-preload-data="false" on:click={() => popularTicker(item?.symbol) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'shake-ticker cursor-pointer bg-[#09090B] rounded-lg flex justify-start items-center p-2 text-white group'} w-full"> <a data-sveltekit-preload-data="false" on:click={() => popularTicker(item?.symbol) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'shake-ticker cursor-pointer bg-[#09090B] sm:hover:bg-[#17171A] rounded-lg 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="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center"> <div class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center">
<img style="clip-path: circle(50%);" class="w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy" /> <img style="clip-path: circle(50%);" class="w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy" />
@ -368,14 +368,14 @@ $: {
{:else if showSuggestions && searchResults?.length > 0} {:else if showSuggestions && searchResults?.length > 0}
<div class="text-start text-sm font-semibold text-slate-400 mb-2"> <div class="text-start text-sm font-semibold text-white mb-2">
Suggestions Suggestions
</div> </div>
{#each searchResults as item} {#each searchResults as item}
<li> <li class="border-b border-gray-800">
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label data-sveltekit-preload-data="false" on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#09090B] rounded-lg flex justify-start items-center p-2 text-white group'}"> <label data-sveltekit-preload-data="false" on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#09090B] sm:hover:bg-[#17171A] rounded-lg flex justify-start items-center p-2 text-white group'}">
<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">