AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update ui of calendars

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-25 11:40:31 +02:00
parent 8e5bea246d
commit 1fd81b2be3
4 changed files with 37 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/routes/dividends-calendar/+page.svelte
View File

@ -328,35 +328,35 @@ $: {
<div class="w-full overflow-x-scroll">
<!-- Cards -->
<!-- Cards -->
<div class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0">
<!-- Start Columns -->
<label on:click={() => changeWeek('previous')} class="{previousMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#3C40F0] hover:bg-purple-600 border border-blue-600 mb-3">
<svg class="w-6 h-6 m-auto rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
</label>
{#each weekday as day,index}
<div class="w-full {index === selectedWeekday ? '' : 'hidden sm:block'}">
<label on:click={() => toggleDate(index)} class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index === selectedWeekday ? 'bg-purple-600 sm:bg-[#A24D51] sm:gradient-effect' : ''} flex rounded-lg sm:rounded-none bg-[#3C40F0] border border-blue-600 mb-3">
<div class=" flex flex-row justify-center items-center w-full">
<label on:click={() => clickWeekday('previous', index) } class="sm:hidden ml-auto">
<svg class="w-8 h-8 inline-block rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
</label>
<div class="flex flex-col text-white truncate m-auto p-1">
<span class="font-medium text-md">{formattedWeekday[index]}</span>
<span class="text-sm m-auto pt-1 pb-1"> {day.length} Dividends</span>
</div>
<label on:click={() => clickWeekday('next', index) } class="sm:hidden mr-auto">
<svg class="w-8 h-8 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
</label>
<!-- Start Columns -->
<label on:click={() => changeWeek('previous')} class="{previousMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3">
<svg class="w-6 h-6 m-auto rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
</label>
{#each weekday as day,index}
<div class="w-full {index === selectedWeekday ? '' : 'hidden sm:block'}">
<label on:click={() => toggleDate(index)} class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index === selectedWeekday ? 'bg-[#27272A]' : ''} rounded-lg sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3">
<div class=" flex flex-row justify-center items-center w-full ">
<label on:click={() => clickWeekday('previous', index) } class="{previousMax === true && index === 0? 'opacity-20' : ''} sm:hidden ml-auto">
<svg class="w-8 h-8 inline-block rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
</label>
<div class="flex flex-col text-white truncate m-auto p-1">
<span class="font-medium text-md">{formattedWeekday[index]}</span>
<span class="text-sm m-auto pt-1 pb-1"> {day.length} Earnings</span>
</div>
</label>
</div>
{/each}
<label on:click={() => changeWeek('next')} class="{nextMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#3C40F0] hover:bg-purple-600 border border-blue-600 mb-3">
<svg class="w-6 h-6 m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
</label>
</div>
<label on:click={() => clickWeekday('next', index) } class="{nextMax === true && index === 4? 'opacity-20' : ''} sm:hidden mr-auto">
<svg class="w-8 h-8 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
</label>
</div>
</label>
</div>
{/each}
<label on:click={() => changeWeek('next')} class="{nextMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3">
<svg class="w-6 h-6 m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
</label>
</div>
{#each weekday as day,index}
@ -483,21 +483,4 @@ $: {
<style>
.gradient-effect {
background: linear-gradient(100deg, #B46266, #A24D51);
color: #fff;
position: relative;
overflow: hidden;
}
</style>

15
src/routes/earnings-calendar/+page.svelte
View File

@ -376,7 +376,7 @@ $: {
<tbody>
{#each day as item, index}
<!-- row -->
<tr on:click={() => goto("/stocks/"+item?.symbol)} class=" sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer">
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer">
<td class="text-blue-400 border-b-[#09090B] text-start text-sm sm:text-[1rem]">
{item?.symbol}
@ -510,17 +510,4 @@ $: {
</section>
<style>
.gradient-effect {
background: linear-gradient(100deg, #B46266, #A24D51);
color: #fff;
position: relative;
overflow: hidden;
}
</style>

20
src/routes/economic-calendar/+page.svelte
View File

@ -193,13 +193,13 @@
<!-- Cards -->
<div class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0">
<!-- Start Columns -->
<label on:click={() => changeWeek('previous')} class="{previousMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#3C40F0] hover:bg-purple-600 border border-blue-600 mb-3">
<label on:click={() => changeWeek('previous')} class="{previousMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3">
<svg class="w-6 h-6 m-auto rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
</label>
{#each (filterList?.length === 0 ? weekday : weekdayFiltered) as day,index}
<div class="w-full {index === selectedWeekday ? '' : 'hidden sm:block'}">
<label on:click={() => toggleDate(index)} class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index === selectedWeekday ? 'bg-purple-600 sm:bg-[#A24D51] sm:gradient-effect' : ''} rounded-lg sm:rounded-none flex bg-[#3C40F0] border border-blue-600 mb-3">
<label on:click={() => toggleDate(index)} class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index === selectedWeekday ? 'bg-[#27272A]' : ''} rounded-lg sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3">
<div class=" flex flex-row justify-center items-center w-full">
<label on:click={() => clickWeekday('previous', index) } class="sm:hidden ml-auto">
<svg class="w-8 h-8 inline-block rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
@ -215,7 +215,7 @@
</label>
</div>
{/each}
<label on:click={() => changeWeek('next')} class="{nextMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#3C40F0] hover:bg-purple-600 border border-blue-600 mb-3">
<label on:click={() => changeWeek('next')} class="{nextMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3">
<svg class="w-6 h-6 m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
</label>
</div>
@ -427,16 +427,4 @@
</section>
<style>
.gradient-effect {
background: linear-gradient(100deg, #B46266, #A24D51);
color: #fff;
position: relative;
overflow: hidden;
}
</style>

22
src/routes/stock-splits-calendar/+page.svelte
View File

@ -342,13 +342,13 @@
<!-- Cards -->
<div class="w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0">
<!-- Start Columns -->
<label on:click={() => changeWeek('previous')} class="{previousMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#3C40F0] hover:bg-purple-600 border border-blue-600 mb-3">
<label on:click={() => changeWeek('previous')} class="{previousMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3">
<svg class="w-6 h-6 m-auto rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
</label>
{#each weekday as day,index}
<div class="w-full {index === selectedWeekday ? '' : 'hidden sm:block'}">
<label on:click={() => toggleDate(index)} class="w-11/12 sm:w-full m-auto cursor-pointer h-16 {index === selectedWeekday ? 'bg-purple-600 bg-opacity-[0.6] sm:bg-[#A24D51] sm:gradient-effect' : ''} rounded-lg sm:rounded-none flex bg-[#3C40F0] border border-blue-600 mb-3">
<label on:click={() => toggleDate(index)} class="w-11/12 sm:w-full m-auto cursor-pointer h-16 {index === selectedWeekday ? 'bg-[#27272A]' : ''} rounded-lg sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3">
<div class=" flex flex-row justify-center items-center w-full">
<label on:click={() => clickWeekday('previous', index) } class="sm:hidden ml-auto">
<svg class="w-8 h-8 inline-block rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
@ -364,7 +364,7 @@
</label>
</div>
{/each}
<label on:click={() => changeWeek('next')} class="{nextMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#3C40F0] hover:bg-purple-600 border border-blue-600 mb-3">
<label on:click={() => changeWeek('next')} class="{nextMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3">
<svg class="w-6 h-6 m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
</label>
</div>
@ -497,18 +497,4 @@
<style>
.gradient-effect {
background: linear-gradient(100deg, #B46266, #A24D51);
color: #fff;
position: relative;
overflow: hidden;
}
</style>