sergey/anti-hvost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: empty tasks page style

Browse Source
This commit is contained in:
Sergey Elpashev
2025-04-16 14:13:34 +03:00
parent 1b1c45935b
commit a00ec135f1
2 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/profile_tasks.module.scss
View File

@@ -1,7 +1,7 @@
@reference "../index.scss";
.container {
@apply flex h-fit w-full flex-col items-center gap-4 pt-3 md:px-6;
@apply flex h-fit min-h-full w-full flex-col items-center gap-4 pt-3 md:px-6;
}
.header {

47
src/pages/profile_tasks.tsx
View File

@@ -17,25 +17,38 @@ const ProfileTasks: FunctionComponent = () => {
}, []);
return (
<div class={classes.container}>
<div class={classes.header}>Сегодня: {getDate}</div>
<div class={classes.tasks_container}>
{example_tasks.map((task, index) => (
<Task name={task} key={index} checked={index % 2 === 0} />
))}
</div>
<div class="group fixed right-[22rem] bottom-4 hidden flex-row items-center justify-start space-x-3 overflow-x-hidden md:flex">
<div class="aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white transition-all duration-300 ease-out group-hover:ml-[12rem] hover:bg-[rgb(251,194,199,0.7)]">
<PlusIcon />
</div>
<div class="absolute left-0 my-auto flex flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100">
<div class="flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 hover:bg-[rgba(206,232,251,0.9)]">
<MagnifyingGlassIcon class="size-12" />
{example_tasks.length > 0 ? (
<>
<div class={classes.header}>Сегодня: {getDate}</div>
<div class={classes.tasks_container}>
{example_tasks.map((task, index) => (
<Task name={task} key={index} checked={index % 2 === 0} />
))}
</div>
<div class="flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 hover:bg-[rgba(206,232,251,0.9)]">
<FunnelIcon class="size-12" />
<div class="group fixed right-[22rem] bottom-4 hidden flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:flex">
<div class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out group-hover:ml-[12rem] hover:bg-[rgb(251,194,199,0.7)]">
<PlusIcon />
</div>
<div class="absolute left-0 my-auto flex flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100">
<div class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]">
<MagnifyingGlassIcon class="size-12" />
</div>
<div class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]">
<FunnelIcon class="size-12" />
</div>
</div>
</div>
</div>
</div>
</>
) : (
<>
<div class="flex w-full flex-1 flex-col items-center justify-center text-2xl">Начни уже сегодня!</div>
<div class="fixed right-[22rem] bottom-4 hidden flex-row items-center justify-start overflow-x-hidden py-2 md:flex">
<div class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out hover:bg-[rgb(251,194,199,0.7)]">
<PlusIcon />
</div>
</div>
</>
)}
</div>
);
};