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-07-15 00:00:49 +02:00
parent 1a7403876f
commit ab58cb1718
7 changed files with 140 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/shadcn/accordion/accordion-trigger.svelte
View File

@ -21,6 +21,6 @@
on:click
>
<slot />
<ChevronDown class="h-4 w-4 absolute right-16 transition-transform duration-200 " />
<ChevronDown class="h-4 w-4 absolute right-40 sm:right-16 transition-transform duration-200 " />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>

2
src/lib/components/shadcn/dropdown-menu/dropdown-menu-content.svelte
View File

@ -17,7 +17,7 @@
{transitionConfig}
{sideOffset}
class={cn(
"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
"z-50 min-w-[8rem] rounded-md border border-gray-800 bg-[#09090B] p-1 text-white shadow-md focus:outline-none",
className
)}
{...$$restProps}

2
src/lib/components/shadcn/dropdown-menu/dropdown-menu-separator.svelte
View File

@ -9,6 +9,6 @@
</script>
<DropdownMenuPrimitive.Separator
class={cn("-mx-1 my-1 h-px bg-muted", className)}
class={cn("-mx-1 my-1 h-px bg-gray-800", className)}
{...$$restProps}
/>

2
src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte
View File

@ -18,7 +18,7 @@
{transition}
{transitionConfig}
class={cn(
"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
"z-50 min-w-[8rem] rounded-md border bg-[#09090B] p-1 text-white shadow-lg focus:outline-none",
className
)}
{...$$restProps}

18
src/lib/components/shadcn/sheet/index.ts
View File

@ -43,7 +43,7 @@ export const sheetVariants = tv({
side: {
top: "inset-x-0 top-0 border-b",
bottom: "inset-x-0 bottom-0 border-t",
left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
left: "inset-y-0 left-0 h-full w-3/4 sm:max-w-sm",
right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
},
},
@ -56,48 +56,48 @@ export const sheetTransitions = {
top: {
in: {
y: "-100%",
duration: 500,
duration: 100,
opacity: 1,
},
out: {
y: "-100%",
duration: 300,
duration: 100,
opacity: 1,
},
},
bottom: {
in: {
y: "100%",
duration: 500,
duration: 100,
opacity: 1,
},
out: {
y: "100%",
duration: 300,
duration: 100,
opacity: 1,
},
},
left: {
in: {
x: "-100%",
duration: 500,
duration: 100,
opacity: 1,
},
out: {
x: "-100%",
duration: 300,
duration: 100,
opacity: 1,
},
},
right: {
in: {
x: "100%",
duration: 500,
duration: 100,
opacity: 1,
},
out: {
x: "100%",
duration: 300,
duration: 100,
opacity: 1,
},
},

3
src/lib/components/shadcn/sheet/sheet-content.svelte
View File

@ -37,8 +37,7 @@
{...$$restProps}
>
<slot />
<SheetPrimitive.Close
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
<SheetPrimitive.Close id="close-sheet" class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
>
<X class="h-4 w-4" />
<span class="sr-only">Close</span>

170
src/routes/+layout.svelte
View File

@ -53,6 +53,7 @@
import Box from "lucide-svelte/icons/box";
import Boxes from "lucide-svelte/icons/boxes";
import Newspaper from "lucide-svelte/icons/newspaper";
import MessageCircle from "lucide-svelte/icons/message-circle";
export let data;
@ -398,13 +399,13 @@ $: {
<nav class="flex flex-col items-center mr-auto gap-y-4 sm:py-5 w-full">
<a
href="/"
class="mr-14 mb-5 group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
class="mr-12 mb-5 group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
>
<img class="avatar w-9 sm:w-10 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"} />
<span class="text-white text-xl">Stocknear</span>
</a>
<a href="/" class="flex flex-row items-center ml-4 mr-auto">
<a href="/" class="flex flex-row items-center ml-5 mr-auto">
<div class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8">
<Home class="h-5.5 w-5.5" />
</div>
@ -412,7 +413,7 @@ $: {
</a>
<div class="flex flex-row items-center ml-4 mr-auto mt-2 w-3/4">
<div class="flex flex-row items-center ml-5 mr-auto mt-3 w-3/4">
<Accordion.Root class="w-fit">
@ -437,7 +438,7 @@ $: {
</div>
<div class="flex flex-row items-center ml-4 mr-auto mt-2 w-3/4">
<div class="flex flex-row items-center ml-5 mr-auto mt-3 w-3/4">
<Accordion.Root class="w-fit">
@ -462,7 +463,7 @@ $: {
</div>
<div class="flex flex-row items-center ml-4 mr-auto mt-2 w-3/4">
<div class="flex flex-row items-center ml-5 mr-auto mt-3 w-3/4">
<Accordion.Root class="w-fit">
@ -487,7 +488,7 @@ $: {
</div>
<div class="flex flex-row items-center ml-4 mr-auto mt-2 w-3/4">
<div class="flex flex-row items-center ml-5 mr-auto mt-3 w-3/4">
<Accordion.Root class="w-fit">
@ -511,7 +512,7 @@ $: {
</div>
<div class="flex flex-row items-center ml-4 mr-auto mt-2 w-3/4">
<div class="flex flex-row items-center ml-5 mr-auto mt-3 w-3/4">
<Accordion.Root class="w-fit">
@ -536,7 +537,7 @@ $: {
</div>
<a href="/dark-pool-flow" class="flex flex-row items-center ml-4 mt-2 mr-auto">
<a href="/dark-pool-flow" class="flex flex-row items-center ml-5 mt-3 mr-auto">
<div
class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
>
@ -546,7 +547,7 @@ $: {
<span class="ml-3 text-white">Dark Pool</span>
</a>
<a href="/hedge-funds" class="flex flex-row items-center ml-4 mt-2 mr-auto">
<a href="/hedge-funds" class="flex flex-row items-center ml-5 mt-3 mr-auto">
<div
class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
>
@ -556,7 +557,7 @@ $: {
<span class="ml-3 text-white">Hedge Funds</span>
</a>
<a href="/market-news" class="flex flex-row items-center ml-4 mt-2 mr-auto">
<a href="/market-news" class="flex flex-row items-center ml-5 mt-3 mr-auto">
<div
class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
>
@ -565,14 +566,22 @@ $: {
</div>
<span class="ml-3 text-white">Newspaper</span>
</a>
<a href="/community" class="flex flex-row items-center ml-5 mt-3 mr-auto">
<div
class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8"
>
<MessageCircle class="h-5.5 w-5.5" />
</div>
<span class="ml-3 text-white">Community</span>
</a>
</nav>
</aside>
<div class="flex flex-col sm:pl-14">
<header
class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} sticky top-0 z-40 bg-[#141417] flex h-14 items-center gap-4 sm:border-b sm:border-gray-800 px-4 sm:h-auto sm:px-6"
>
<header class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} sticky top-0 z-40 bg-[#141417] flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6">
<Sheet.Root>
<Sheet.Trigger asChild let:builder>
<Button builders={[builder]} size="icon" class="sm:hidden bg-[#141417] border-none">
@ -583,37 +592,92 @@ $: {
<Sheet.Content side="left" class="sm:max-w-xs bg-[#141417]">
<nav class="grid gap-6 text-lg font-medium bg-[#141417]">
<a
href="##"
class="flex items-center gap-4 px-2.5 text-white"
href="/"
class="flex items-center gap-4 px-0.5 text-white"
>
<img class="avatar w-9 sm:w-10 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"} />
Stocknear
</a>
<a
href="##"
class="flex items-center gap-4 px-2.5 text-white"
>
<Home class="h-5.5 w-5.5" />
Dashboard
</a>
<a
href="##"
class="flex items-center gap-4 px-2.5 text-white"
>
<ShoppingCart class="h-5.5 w-5.5" />
Orders
</a>
<a href="##" class="flex items-center gap-4 px-2.5 text-white">
<Package class="h-5.5 w-5.5" />
Products
</a>
<a
href="##"
class="flex items-center gap-4 px-2.5 text-white"
>
<UsersRound class="h-5.5 w-5.5" />
Customers
</a>
<Sheet.Close asChild let:builder>
<Button builders={[builder]} type="submit" class="bg-[#141417] -ml-4 mr-auto">
<a href="/" class="flex flex-row items-center mr-auto mt-5">
<div class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8">
<Home class="h-5.5 w-5.5" />
</div>
<span class="ml-1.5 text-white text-[1rem]">Home</span>
</a>
</Button>
</Sheet.Close>
<div class="flex flex-row items-center mr-auto">
<Accordion.Root class="w-fit">
<Accordion.Item value="item-1">
<Accordion.Trigger class="w-fit">
<Stock class="h-5.5 w-5.5 mr-3 text-white ml-1"/>
<span class="text-white mr-auto">Stocks</span>
</Accordion.Trigger>
<Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
<Sheet.Close asChild let:builder>
<div class="flex flex-col items-start">
<Button builders={[builder]} type="submit" class="bg-[#141417]">
<a href="/etf/new-launches" class="text-[1rem] text-white ml-4 mt-2">Top Analyst</a>
</Button>
<Button builders={[builder]} type="submit" class="bg-[#141417]">
<a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">Top Analyst Stocks</a>
</Button>
<Button builders={[builder]} type="submit" class="bg-[#141417]">
<a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">Shorted Stocks</a>
</Button>
<Button builders={[builder]} type="submit" class="bg-[#141417]">
<a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">Retail Trader Tracker</a>
</Button>
</div>
</Sheet.Close>
</Accordion.Content
>
</Accordion.Item>
</Accordion.Root>
</div>
<div class="flex flex-row items-center mr-auto w-3/4">
<Accordion.Root class="w-fit">
<Accordion.Item value="item-1">
<Accordion.Trigger class="">
<Layers class="h-5.5 w-5.5 mr-3 text-white ml-1"/>
<span class="text-white mr-auto">ETFs</span>
</Accordion.Trigger>
<Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
<Sheet.Close asChild let:builder>
<div class="flex flex-col items-start">
<Button builders={[builder]} type="submit" class="bg-[#141417]">
<a href="/etf/new-launches" class="text-[1rem] text-white ml-4 mt-2">New Launches</a>
</Button>
<Button builders={[builder]} type="submit" class="bg-[#141417]">
<a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">ETF Providers</a>
</Button>
</div>
</Sheet.Close>
</Accordion.Content
>
</Accordion.Item>
</Accordion.Root>
</div>
</nav>
@ -647,12 +711,30 @@ $: {
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Label>My Account</DropdownMenu.Label>
<DropdownMenu.Item>
<a href="/community/profile">
My Account
</a>
</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item>Settings</DropdownMenu.Item>
<DropdownMenu.Item>Support</DropdownMenu.Item>
<DropdownMenu.Item>
<a href="/watchlist">
Watchlist
</a>
</DropdownMenu.Item>
<DropdownMenu.Item>
<a href="/price-alert">
Price Alert
</a>
</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item>Logout</DropdownMenu.Item>
<DropdownMenu.Item>
<form class="cursor-pointer" action="/logout" method="POST">
<button type="submit" class="w-full text-start">
<span class="text-start">Logout</span>
</button>
</form>
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</header>