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-08-07 13:43:04 +02:00
parent d9f0768657
commit 8049a504d2
10 changed files with 835 additions and 836 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/routes/crypto/[tickerID]/+layout.svelte
View File

@ -543,17 +543,17 @@ $: {
<!--End Mobile Navbar-->
<div class="w-full xl:w-fit max-w-3xl sm:max-w-6xl m-auto px-3">
<div class="w-full xl:w-fit max-w-3xl sm:max-w-7xl 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="pb-12 md:pb-20 w-full max-w-3xl lg:max-w-5xl">
<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="m-auto pl-0 sm:pl-4 overflow-hidden mb-5 md:mt-10">
<div class="hidden sm:flex flex-row w-full justify-between items-center pb-10">
@ -702,7 +702,7 @@ $: {
</div>
</div>
<aside class="hidden lg:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20">
<aside class="hidden xl:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20">
<div class="sm:pl-10">
<CryptoProfileCard

10
src/routes/crypto/[tickerID]/+page.svelte
View File

@ -681,7 +681,6 @@ afterUpdate(async () => {
<!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) Stock Price, Quote & News · stocknear`}/>
<meta property="og:description" content={`Get a real-time ${$displayCompanyName} (${$cryptoTicker}) 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 -->
@ -689,7 +688,6 @@ afterUpdate(async () => {
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) Stock Price, Quote & News · stocknear`}/>
<meta name="twitter:description" content={`Get a real-time ${$displayCompanyName} (${$cryptoTicker}) 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>
@ -697,12 +695,12 @@ afterUpdate(async () => {
<section class="bg-[#09090B] min-h-screen pb-40">
<div class="w-full max-w-4xl m-auto ">
<div class="w-full max-w-5xl 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="pb-12 md:pb-20 w-full sm:pr-6 xl:pr-0">
<div class="xl:pr-10">
@ -798,7 +796,7 @@ afterUpdate(async () => {
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#09090B] sm:hover:bg-[#09090B] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#27272A] sm:hover:bg-[#303030] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
{#if displayChartType === 'line'}
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
{:else}
@ -813,7 +811,7 @@ afterUpdate(async () => {
<!-- Start Graph -->
{#if output !== null}
<div class ="w-full sm:pl-7 ml-auto max-w-3xl mb-10">
<div class ="w-full sm:pl-7 ml-auto max-w-5xl 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

21
src/routes/crypto/[tickerID]/congress-trading/+page.svelte
View File

@ -9,6 +9,7 @@
import { getPartyForPoliticians } from '$lib/utils';
import { goto } from '$app/navigation';
export let data;
let rawData = data?.getSenateTrading;
@ -65,7 +66,7 @@ const district = {
function replaceMultipleStrings(inputString, replacements) {
// Create a regular expression pattern by joining the keys of the replacements object with '|'
const pattern = new RegExp(Object.keys(replacements).join('|'), 'gi');
const pattern = new RegExp(Object?.keys(replacements)?.join('|'), 'gi');
// Replace occurrences of the pattern with the corresponding values in the replacements object
const resultString = inputString.replace(pattern, match => replacements[match]);
@ -79,7 +80,7 @@ async function infiniteHandler({ detail: { loaded, complete } })
complete();
} else {
const nextIndex = senateTradingList?.length;
const newArticles = rawData?.slice(nextIndex, nextIndex + 5);
const newArticles = rawData?.slice(nextIndex, nextIndex + 20);
senateTradingList = [...senateTradingList, ...newArticles];
loaded();
}
@ -141,12 +142,13 @@ const typeCounts = rawData?.reduce((counts, item) => {
}, {});
partyRatio = partyCounts['Democratic'] > 0 && partyCounts['Republican'] === undefined ? 1 : partyCounts['Democratic'] === undefined ? 0 : partyCounts["Democratic"]/partyCounts["Republican"];
buySellRatio = typeCounts['Bought']/typeCounts['Sold'];
buySellRatio = typeCounts['Bought'] > 0 && typeCounts['Sold'] === undefined ? 1 : typeCounts['Bought'] === undefined ? 0 : typeCounts["Bought"]/typeCounts["Sold"];
senateTradingList = rawData?.slice(0,20) ?? [];
isLoaded = true;
});
</script>
@ -164,7 +166,6 @@ isLoaded = true;
<!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) US Congress & Senate Trading · stocknear`}/>
<meta property="og:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$cryptoTicker}) from democrates and republicans.`} />
<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 -->
@ -172,7 +173,6 @@ isLoaded = true;
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) US Congress & Senate Trading · stocknear`}/>
<meta name="twitter:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$cryptoTicker}) from democrates and republicans.`} />
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
@ -181,10 +181,10 @@ isLoaded = true;
<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
<div class="flex justify-center w-fit m-auto h-full overflow-hidden">
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
<div class="h-full overflow-hidden">
<div class="relative flex justify-center items-center overflow-hidden">
<div class="sm:p-7 sm:w-full sm:max-w-3xl m-auto mt-5 sm:mt-0">
<div class="sm:p-7 w-full mt-2 sm:mt-0">
<div class="mb-6">
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
Congress Trading
@ -210,7 +210,7 @@ isLoaded = true;
</h3>
<!--Start Widget-->
<div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
<div class="w-full grid grid-cols-2 gap-y-3 lg:gap-y-3 gap-x-3 ">
<div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
<!--Start Buy/Sell-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
@ -330,8 +330,11 @@ isLoaded = true;
</td>
</tr>
{/each}
</tbody>
</table>
</div>
<InfiniteLoading on:infinite={infiniteHandler} />

15
src/routes/crypto/[tickerID]/news/+page.svelte
View File

@ -53,7 +53,6 @@ function loadMoreData() {
<!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
<meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
<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 -->
@ -61,7 +60,6 @@ function loadMoreData() {
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
<meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
@ -69,7 +67,7 @@ function loadMoreData() {
<section class="w-auto max-w-3xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
<section class="w-auto max-w-4xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
<div class="m-auto h-full overflow-hidden ">
<main class="">
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
@ -79,20 +77,20 @@ function loadMoreData() {
</h1>
</div>
{#if newsList.length !== 0}
{#if newsList?.length !== 0}
<div class="grid grid-cols-1 gap-2 pb-5">
{#each newsList as item}
<div class="flex flex-col bg-[#09090B] rounded-lg m-auto">
<div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">
{#if videoId = checkIfYoutubeVideo(item.url)}
<iframe
class="w-full h-96 rounded-lg"
class="w-full h-96 rounded-lg border border-gray-800"
src={`https://www.youtube.com/embed/${videoId}`}
frameborder="0"
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
{:else}
<a href={item?.url} rel="noopener noreferrer" target="_blank">
<a href={item?.url} rel="noopener noreferrer" target="_blank" class="border border-gray-800 rounded-lg">
<div class="flex-shrink-0 m-auto ">
<img src={item?.image} class=" w-full rounded-lg" alt="news image" loading="lazy">
</div>
@ -105,7 +103,6 @@ function loadMoreData() {
<a href={item?.url} rel="noopener noreferrer" target="_blank" class="text-lg font-bold text-white">
{item?.title}
<p class="text-white text-sm mt-2 font-normal">
{item?.text}
</p>
@ -118,7 +115,7 @@ function loadMoreData() {
</div>
{#if newsList?.length !== rawNews?.length}
<label on:click={loadMoreData} class="shadow-lg rounded-lg cursor-pointer w-11/12 sm:w-full flex justify-center items-center py-3 h-full text-sm sm:text-lg text-center font-medium text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]">
<label on:click={loadMoreData} class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]">
Load More News
</label>
{/if}

2
src/routes/etf/[tickerID]/+page.svelte
View File

@ -873,7 +873,7 @@ async function initializePrice() {
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#18181B] sm:hover:bg-[#09090B] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#27272A] sm:hover:bg-[#303030] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
{#if displayChartType === 'line'}
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
{:else}

14
src/routes/etf/[tickerID]/news/+page.svelte
View File

@ -1,5 +1,5 @@
<script lang='ts'>
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
import { formatDate } from '$lib/utils';
export let data;
@ -46,20 +46,20 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) latest Stock Market News and Breaking Stories · stocknear
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$etfTicker}) latest Stock Market News and Breaking Stories · stocknear
</title>
<meta name="description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`} />
<meta name="description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
<!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
<meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`} />
<meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
<meta property="og:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
<meta property="og:type" content="website"/>
<!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
<meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`} />
<meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
<meta name="twitter:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
<!-- Add more Twitter meta tags as needed -->
</svelte:head>

8
src/routes/etf/[tickerID]/options/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
import {numberOfUnreadNotification, displayCompanyName, screenWidth, etfTicker} from '$lib/store';
import { Chart } from 'svelte-echarts'
import { abbreviateNumber } from '$lib/utils';
import InfoModal from '$lib/components/InfoModal.svelte';
@ -108,8 +108,8 @@ use([BarChart, GridComponent, CanvasRenderer])
},
silent: true,
grid: {
left: '10%',
right: '5%',
left: $screenWidth < 640 ? '5%' : '2%',
right: $screenWidth < 640 ? '5%' : '2%',
bottom: '20%',
containLabel: true
},
@ -392,7 +392,7 @@ use([BarChart, GridComponent, CanvasRenderer])
</div>
<div class="app w-full bg-[#09090B] bg-opacity-1 rounded-xl">
<div class="app w-full bg-[#09090B] rounded-xl">
<Chart {init} options={options} class="chart" />
</div>

2
src/routes/stocks/[tickerID]/+page.svelte
View File

@ -832,7 +832,7 @@ function changeChartType() {
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-purple-600 sm:hover:bg-purple-700 duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#27272A] sm:hover:bg-[#303030] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
{#if displayChartType === 'line'}
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
{:else}

2
src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
View File

@ -210,7 +210,7 @@ isLoaded = true;
</h3>
<!--Start Widget-->
<div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
<div class="w-full grid grid-cols-2 gap-y-3 lg:gap-y-3 gap-x-3 ">
<div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
<!--Start Buy/Sell-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">

11
src/routes/stocks/[tickerID]/options/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
import {numberOfUnreadNotification, displayCompanyName, screenWidth, stockTicker} from '$lib/store';
import { Chart } from 'svelte-echarts'
import { abbreviateNumber } from '$lib/utils';
import InfoModal from '$lib/components/InfoModal.svelte';
@ -12,6 +12,7 @@ import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer])
export let data;
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@ -107,8 +108,8 @@ function plotData(callData, putData) {
},
silent: true,
grid: {
left: '10%',
right: '5%',
left: $screenWidth < 640 ? '5%' : '2%',
right: $screenWidth < 640 ? '5%' : '2%',
bottom: '20%',
containLabel: true
},
@ -310,7 +311,7 @@ $: {
{#if optionsPlotData?.length !== 0}
<div class="stats stats-horizontal bg-[#272727] w-full rounded-lg">
<div class="stats stats-horizontal bg-[#27272A] w-full rounded-lg">
<div class="grid grid-cols-2">
@ -391,7 +392,7 @@ $: {
</div>
<div class="app w-full bg-[#09090B] bg-opacity-1 rounded-xl">
<div class="app w-full bg-[#09090B] rounded-xl">
<Chart {init} options={options} class="chart" />
</div>