improve ux
This commit is contained in:
MuslemRahimi
parent
0bc2ec9bb7
commit
d6855b2be2
@ -1,171 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { tagList, stockTicker } from "$lib/store";
|
||||
import TagSearchbar from "$lib/components/TagSearchbar.svelte";
|
||||
//import { afterNavigate } from '$app/navigation';
|
||||
//import { base } from '$app/paths'
|
||||
//import { onMount } from 'svelte';
|
||||
|
||||
export let id;
|
||||
export let errors;
|
||||
export let placeholder = "";
|
||||
|
||||
/*
|
||||
let previousPage : string = base ;
|
||||
|
||||
|
||||
|
||||
afterNavigate(({from}) => {
|
||||
previousPage = from?.url.pathname || previousPage
|
||||
|
||||
if (!previousPage.startsWith('/stocks/'))
|
||||
{
|
||||
$stockTicker = ''; //reset stock ticker
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
|
||||
$stockTicker = "";
|
||||
let selectedTags = [];
|
||||
|
||||
function toggleTag(tag) {
|
||||
if (selectedTags.includes(tag)) {
|
||||
selectedTags = selectedTags.filter((t) => t !== tag);
|
||||
} else if (selectedTags.length < 3) {
|
||||
selectedTags = [...selectedTags, tag];
|
||||
}
|
||||
|
||||
if (!selectedTags.includes($stockTicker)) {
|
||||
$stockTicker = "";
|
||||
selectedTags = [...selectedTags];
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($stockTicker) {
|
||||
toggleTag($stockTicker);
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
if (selectedTags) {
|
||||
errors = "";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if selectedTags?.length === 0}
|
||||
<span class="w-full max-w-2xl pt-3 text-sm text-gray-400">{placeholder}</span>
|
||||
{:else}
|
||||
<span class="w-full max-w-2xl pt-3 text-sm text-gray-400"
|
||||
>Tags selected: {selectedTags}</span
|
||||
>
|
||||
{/if}
|
||||
<div
|
||||
class="form-control flex flex-col flex flex-wrap rounded-md pt-3 items-center bg-[#242527] w-full max-w-2xl"
|
||||
>
|
||||
<div class="flex flex-wrap m-auto p-3">
|
||||
<!--Start Add stock tag-->
|
||||
<div class="-mr-1.5">
|
||||
{#if $stockTicker?.length === 0}
|
||||
{#if selectedTags.length === 3 && !selectedTags.includes($stockTicker)}
|
||||
<label
|
||||
class="mr-2 border border-slate-500 flex flex-wrap pl-4 pr-4 py-2 m-1 justify-between items-center text-sm font-medium rounded-xl cursor-not-allowed opacity-50 text-gray-200 hover:text-gray-100"
|
||||
>
|
||||
<span class="sr-only">Search</span>
|
||||
<svg
|
||||
class="w-4 h-4 mr-2"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
class="fill-current text-white"
|
||||
d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z"
|
||||
/>
|
||||
<path
|
||||
class="fill-current text-white"
|
||||
d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-gray-300">Search a ticker...</span>
|
||||
</label>
|
||||
{:else}
|
||||
<TagSearchbar />
|
||||
{/if}
|
||||
{:else}
|
||||
<label
|
||||
on:click={() => toggleTag($stockTicker)}
|
||||
class="cursor-pointer mr-2 border border-slate-500 flex flex-wrap pl-4 pr-4 py-2 m-1 mb-2 justify-between items-center text-sm font-medium rounded-xl text-gray-200 hover:text-gray-100"
|
||||
>
|
||||
{$stockTicker}
|
||||
{#if selectedTags?.includes($stockTicker)}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="inline-block h-5 w-5 ml-1 hover:text-gray-300"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
</label>
|
||||
{/if}
|
||||
</div>
|
||||
<!--End add stock tag-->
|
||||
{#each $tagList as tag}
|
||||
<label
|
||||
on:click={() => toggleTag(tag.name)}
|
||||
class="flex flex-wrap pl-4 pr-4 py-2 m-1 mb-2 justify-between items-center text-sm font-medium rounded-xl {selectedTags.length ===
|
||||
3 && !selectedTags.includes(tag.name)
|
||||
? 'cursor-not-allowed opacity-50'
|
||||
: 'cursor-pointer'} text-gray-200 hover:text-gray-100"
|
||||
style={`background-color: ${tag.color};`}
|
||||
>
|
||||
{tag.name}
|
||||
{#if selectedTags?.includes(tag.name)}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="inline-block h-5 w-5 ml-1 hover:text-gray-300"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
</label>
|
||||
{/each}
|
||||
|
||||
<input
|
||||
class="hidden"
|
||||
value={JSON.stringify([selectedTags.filter((t) => t !== $stockTicker)])}
|
||||
id="tagTopic"
|
||||
name="tagTopic"
|
||||
/>
|
||||
<input class="hidden" value={$stockTicker} id="tagline" name="tagline" />
|
||||
<input
|
||||
class="hidden"
|
||||
value={selectedTags + $stockTicker}
|
||||
id="atLeastOneTag"
|
||||
name="atLeastOneTag"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-2xl">
|
||||
{#if errors?.length}
|
||||
<label for={id} class="label py-0 pt-1">
|
||||
<span class="label-text-alt text-error">
|
||||
{errors}
|
||||
</span>
|
||||
</label>
|
||||
{/if}
|
||||
</div>
|
||||
@ -11,6 +11,7 @@
|
||||
import Footer from "$lib/components/Footer.svelte";
|
||||
import Searchbar from "$lib/components/Searchbar.svelte";
|
||||
import NotificationBell from "$lib/components/NotificationBell.svelte";
|
||||
|
||||
//import PullToRefresh from '$lib/components/PullToRefresh.svelte';
|
||||
|
||||
//import DiscountBanner from '$lib/components/DiscountBanner.svelte';
|
||||
@ -30,6 +31,7 @@
|
||||
isAfterMarketClose,
|
||||
isBeforeMarketOpen,
|
||||
isWeekend,
|
||||
previousPage,
|
||||
} from "$lib/store";
|
||||
|
||||
import { Button } from "$lib/components/shadcn/button/index.ts";
|
||||
@ -202,7 +204,8 @@
|
||||
NProgress.start();
|
||||
});
|
||||
|
||||
afterNavigate(async () => {
|
||||
afterNavigate(async ({ from }) => {
|
||||
$previousPage = from?.url.pathname || $previousPage;
|
||||
NProgress.done();
|
||||
});
|
||||
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
isOpen,
|
||||
shouldUpdatePriceChart,
|
||||
priceChartData,
|
||||
previousPage,
|
||||
} from "$lib/store";
|
||||
|
||||
import { onMount, onDestroy, afterUpdate } from "svelte";
|
||||
@ -310,7 +311,7 @@
|
||||
<div
|
||||
class="flex-1 flex-shrink-0 flex flex-row items-center justify-between -mt-2"
|
||||
>
|
||||
<a href="/" class="ml-2 cursor-pointer">
|
||||
<a href={$previousPage || "/"} class="ml-2 cursor-pointer">
|
||||
<svg
|
||||
class="w-5 h-5 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
export let form;
|
||||
|
||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||
let mode = false;
|
||||
let mode = true;
|
||||
//let mode = false;
|
||||
const emailAddress = "support@stocknear.com";
|
||||
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
isOpen,
|
||||
shouldUpdatePriceChart,
|
||||
priceChartData,
|
||||
previousPage,
|
||||
} from "$lib/store";
|
||||
|
||||
import { onMount, onDestroy, afterUpdate } from "svelte";
|
||||
@ -391,7 +392,7 @@
|
||||
<div
|
||||
class="flex-1 flex-shrink-0 flex flex-row items-center justify-between -mt-2"
|
||||
>
|
||||
<a href="/" class="ml-2 cursor-pointer">
|
||||
<a href={$previousPage || "/"} class="ml-2 cursor-pointer">
|
||||
<svg
|
||||
class="w-5 h-5 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user