fix layout
This commit is contained in:
parent
137b449369
commit
7507190f26
@ -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>
|
||||||
|
|||||||
@ -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"
|
||||||
>
|
>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user