resize etf page

This commit is contained in:
MuslemRahimi 2024-07-12 21:38:20 +02:00
parent e014b94b1b
commit e50dcc7deb
4 changed files with 30 additions and 25 deletions

View File

@ -53,10 +53,14 @@
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
overflow: -moz-scrollbars-none; /* Legacy support for older Firefox versions */
}
.no-scrollbar::-webkit-scrollbar {
display: none; /* Chrome, Safari, and other WebKit-based browsers */
}
.shake-ticker:hover img {

View File

@ -74,8 +74,8 @@
},
animation: $screenWidth < 640 ? false: true,
grid: {
left: '2%',
right: '4%',
left: '1%',
right: $screenWidth < 640 ? '2%' : '0%',
bottom: '0%',
top: '10%',
containLabel: true

View File

@ -586,19 +586,20 @@ $: {
<!--End Mobile Navbar-->
<div class="w-full xl:w-fit max-w-3xl sm:max-w-6xl m-auto px-3 sm:px-6">
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
<!-- Main content -->
<div class="pb-12 md:pb-20 w-full max-w-3xl lg:max-w-2xl">
<div class="md:pr-6 lg:pr-10">
<div class="w-full xl:w-fit max-w-3xl sm:max-w-6xl m-auto px-3">
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
<!-- Main content -->
<div class="pb-12 md:pb-20 w-full max-w-5xl lg:max-w-3xl">
<div class="md:pr-6 lg:pr-10">
<!-----Start-Header-CandleChart-Indicators------>
<div class="m-auto pl-0 sm:pl-4 max-w-3xl overflow-hidden mb-5 md:mt-10">
<div class="hidden sm:flex flex-row w-full justify-between items-center pb-10">
<Markethour />
<!--Start Watchlist-->
@ -713,7 +714,7 @@ $: {
<!--<div class="w-full max-w-3xl sm:max-w-2xl m-auto pt-2 pb-5 sm:pl-3 sticky z-20 bg-[#0F0F0F]" style="top: {$screenWidth < 520 && $isScrollingUp ? '4rem' : '0rem'};">-->
<div class="sm:ml-4 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar no-scrollbar' : ''} mb-2" >
<ul class="pr-4 sm:pr-0 w-screen font-medium flex flex-row items-center bg-[#0F0F0F] overflow-x-scroll space-x-3 rtl:space-x-reverse py-2">
<ul class="pr-4 sm:pr-0 w-screen font-medium flex flex-row items-center bg-[#0F0F0F] space-x-3 rtl:space-x-reverse py-2">
<li class="cursor-pointer flex flex-col items-center">
<a href={`/etf/${$etfTicker}`} id="item1" on:click={() => (changeSection('overview','item1'))} class="px-2 text-sm sm:text-[0.9rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'overview' ? 'text-white ' : 'bg-[#0F0F0F]'}" >
Overview
@ -750,7 +751,7 @@ $: {
</a>
<div class="{displaySection === 'congress-trading' ? 'bg-[#75D377]' : 'bg-[#0F0F0F]'} mt-1 h-[3px] rounded-full w-[3rem]" />
</li>
<li class="cursor-pointer flex flex-col items-center">
<li class="cursor-pointer flex flex-col items-center pr-6">
<a href={`/etf/${$etfTicker}/news`} id="item7" on:click={() => (changeSection('news','item7'))} class="px-2 text-sm sm:text-[0.9rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'news' ? 'text-white ' : 'bg-[#0F0F0F]'}" >
News
</a>

View File

@ -756,7 +756,6 @@ async function initializePrice() {
<!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) Stock Price, Quote & News · stocknear`}/>
<meta property="og:description" content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
<meta property="og:type" content="website"/>
<!-- Add more Open Graph meta tags as needed -->
@ -764,19 +763,20 @@ async function initializePrice() {
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) Stock Price, Quote & News · stocknear`}/>
<meta name="twitter:description" content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section class="bg-[#0F0F0F] min-h-screen pb-40">
<div class="w-full xl:w-fit max-w-4xl m-auto ">
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
<!-- Main content -->
<div class="md:grow pb-12 md:pb-20 w-full max-w-2xl sm:pr-6">
<div class="xl:pr-10">
<section class="bg-[#0F0F0F] min-h-screen pb-40">
<div class="w-full max-w-4xl m-auto ">
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
<!-- Main content -->
<div class="pb-12 md:pb-20 w-full max-w-3xl sm:pr-6 xl:pr-0">
<div class="xl:pr-10">
<!-- svelte-ignore a11y-click-events-have-key-events -->
@ -914,7 +914,7 @@ async function initializePrice() {
<!-- Start Graph -->
{#if output !== null}
<div class ="w-full max-w-[540px] md:max-w-[620px] lg:max-w-[570px] xl:max-w-[540px] ml-auto mb-4">
<div class ="w-full sm:pl-7 ml-auto max-w-3xl mb-10">
{#if displayData === '1D' && oneDayPrice?.length === 0}
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
No data available