fix layout

This commit is contained in:
MuslemRahimi 2025-03-04 10:39:00 +01:00
parent 137b449369
commit 7507190f26
2 changed files with 28 additions and 14 deletions

View File

@ -20,10 +20,8 @@
if (state !== "overview" && subSectionMap[state]) { if (state !== "overview" && subSectionMap[state]) {
displaySubSection = state; displaySubSection = state;
//goto(`/etf/${$etfTicker}${subSectionMap[state]}`);
} else { } else {
displaySubSection = state; displaySubSection = state;
//goto(`/etf/${$etfTicker}/statistics`);
} }
} }
@ -58,13 +56,17 @@
<div <div
class="relative flex justify-center items-start overflow-hidden w-full" class="relative flex justify-center items-start overflow-hidden w-full"
> >
<main class="w-full lg:w-3/4 lg:pr-10"> <main
class="w-full {displaySubSection === 'overview'
? ''
: 'lg:w-3/4 lg:pr-10'}"
>
<nav <nav
class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap" class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
> >
<ul class="flex flex-row items-center w-full text-white"> <ul class="flex flex-row items-center w-full text-white">
<a <a
href={`/etf/${$etfTicker}/options`} href={`/stocks/${$etfTicker}/options`}
on:click={() => changeSubSection("overview")} on:click={() => changeSubSection("overview")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'overview' class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
? 'text-white bg-primary/90' ? 'text-white bg-primary/90'
@ -73,7 +75,7 @@
Overview Overview
</a> </a>
<a <a
href={`/etf/${$etfTicker}/options/unusual-activity`} href={`/stocks/${$etfTicker}/options/unusual-activity`}
on:click={() => changeSubSection("unusual-activity")} on:click={() => changeSubSection("unusual-activity")}
class="p-2 px-5 cursor-pointer {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection ===
'unusual-activity' 'unusual-activity'
@ -83,7 +85,7 @@
Unusual Activity Unusual Activity
</a> </a>
<a <a
href={`/etf/${$etfTicker}/options/hottest-contracts`} href={`/stocks/${$etfTicker}/options/hottest-contracts`}
on:click={() => changeSubSection("hottest-contracts")} on:click={() => changeSubSection("hottest-contracts")}
class="p-2 px-5 cursor-pointer {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection ===
'hottest-contracts' 'hottest-contracts'
@ -93,7 +95,7 @@
Hottest Contracts Hottest Contracts
</a> </a>
<a <a
href={`/etf/${$etfTicker}/options/volatility`} href={`/stocks/${$etfTicker}/options/volatility`}
on:click={() => changeSubSection("volatility")} on:click={() => changeSubSection("volatility")}
class="p-2 px-5 cursor-pointer {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection ===
'volatility' 'volatility'
@ -103,7 +105,7 @@
Volatility Volatility
</a> </a>
<a <a
href={`/etf/${$etfTicker}/options/oi`} href={`/stocks/${$etfTicker}/options/oi`}
on:click={() => changeSubSection("oi")} on:click={() => changeSubSection("oi")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'oi' class="p-2 px-5 cursor-pointer {displaySubSection === 'oi'
? 'text-white bg-primary/90' ? 'text-white bg-primary/90'
@ -113,7 +115,7 @@
</a> </a>
<a <a
href={`/etf/${$etfTicker}/options/gex`} href={`/stocks/${$etfTicker}/options/gex`}
on:click={() => changeSubSection("gex")} on:click={() => changeSubSection("gex")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'gex' class="p-2 px-5 cursor-pointer {displaySubSection === 'gex'
? 'text-white bg-primary/90' ? 'text-white bg-primary/90'
@ -122,7 +124,7 @@
GEX GEX
</a> </a>
<a <a
href={`/etf/${$etfTicker}/options/dex`} href={`/stocks/${$etfTicker}/options/dex`}
on:click={() => changeSubSection("dex")} on:click={() => changeSubSection("dex")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'dex' class="p-2 px-5 cursor-pointer {displaySubSection === 'dex'
? 'text-white bg-primary/90' ? 'text-white bg-primary/90'
@ -137,7 +139,11 @@
</div> </div>
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside
class="{displaySubSection === 'overview'
? 'hidden'
: 'hidden lg:block'} relative fixed w-1/4 ml-4"
>
<div <div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100" class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
> >
@ -171,7 +177,7 @@
<ArrowLogo class="w-8 h-8 mr-3 shrink-0" /> <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
</div> </div>
<span class="text-white p-3 ml-3 mr-3"> <span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable etf. Build your Stock Screener to find profitable stocks.
</span> </span>
</a> </a>
</div> </div>

View File

@ -58,7 +58,11 @@
<div <div
class="relative flex justify-center items-start overflow-hidden w-full" class="relative flex justify-center items-start overflow-hidden w-full"
> >
<main class="w-full lg:w-3/4 lg:pr-10"> <main
class="w-full {displaySubSection === 'overview'
? ''
: 'lg:w-3/4 lg:pr-10'}"
>
<nav <nav
class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap" class="sm:ml-4 overflow-x-auto pt-1 text-sm sm:text-[1rem] whitespace-nowrap"
> >
@ -137,7 +141,11 @@
</div> </div>
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside
class="{displaySubSection === 'overview'
? 'hidden'
: 'hidden lg:block'} relative fixed w-1/4 ml-4"
>
<div <div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100" class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
> >