efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(18): desktop styling close enough

This commit is contained in:
efim 2024-03-14 13:51:32 +00:00
parent 51e3629fa5
commit 843c71946f
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
18-expenses-chart/templates/index.templ
View File

@ -11,10 +11,10 @@ type PageData struct {
} }
templ myBalanceComponent(balance float32) { templ myBalanceComponent(balance float32) {
<div class="flex flex-row rounded-xl text-neutral-very-pale-orange text-xs bg-primary-soft-red p-4 shadow "> <div class="flex flex-row rounded-xl text-neutral-very-pale-orange text-xs md:text-base bg-primary-soft-red p-4 shadow md:rounded-[1rem] md:p-7">
<div class="grow "> <div class="grow ">
My balance My balance
<p class="text-xl font-bold">${ fmt.Sprintf("%.2f", balance) }</p> <p class="text-xl md:text-2xl font-bold">${ fmt.Sprintf("%.2f", balance) }</p>
</div> </div>
<img <img
src="./static/images/logo.svg" src="./static/images/logo.svg"
@ -73,14 +73,14 @@ templ expensesChart(expenses, percentages []float32, currentDayNum int) {
// Big container with chard and total expenses of the week // Big container with chard and total expenses of the week
templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum int, totalThisMonth, percentComparedToLastMonth float32) { templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum int, totalThisMonth, percentComparedToLastMonth float32) {
<div class="bg-neutral-very-pale-orange rounded-xl shadow p-4 py-6 flex flex-col gap-y-4"> <div class="bg-neutral-very-pale-orange rounded-xl shadow p-4 py-6 flex flex-col gap-y-4 md:p-7 md:px-10 md:rounded-[1rem] md:gap-y-5">
<p2 class="text-neutral-dark-brown text-xl font-bold pb-6">Spending - Last 7 days</p2> <p2 class="text-neutral-dark-brown text-xl font-bold pb-6 md:text-2xl md:pb-12 ">Spending - Last 7 days</p2>
@expensesChart(expenses, percentages, currentDayNum) @expensesChart(expenses, percentages, currentDayNum)
<hr class="bg-neutral-cream border-t-0 h-0.5"/> <hr class="bg-neutral-cream border-t-0 h-0.5"/>
<div class="grid grid-cols-2 text-sm text-neutral-medium-brown"> <div class="grid grid-cols-2 text-sm text-neutral-medium-brown">
<p class="col-span-full">Total this month</p> <p class="col-span-full">Total this month</p>
<div class="grow"> <div class="grow">
<p class="grid items-center text-neutral-dark-brown text-2xl font-bold h-full">$ { fmt.Sprintf("%.2f", totalThisMonth) }</p> <p class="grid items-center text-neutral-dark-brown text-2xl font-bold h-full md:text-4xl md:py-2">$ { fmt.Sprintf("%.2f", totalThisMonth) }</p>
</div> </div>
<div class="text-right"> <div class="text-right">
<p class="text-neutral-dark-brown font-bold">{ fmt.Sprintf("%.2f", percentComparedToLastMonth) }%</p> <p class="text-neutral-dark-brown font-bold">{ fmt.Sprintf("%.2f", percentComparedToLastMonth) }%</p>
@ -90,6 +90,13 @@ templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum in
</div> </div>
} }
templ WidgetsComponend(pageData PageData) {
<div class="flex flex-col gap-4">
@myBalanceComponent(pageData.Balance)
@prepareSummaryComponent(pageData.Expenses, pageData.PercentComparedToLastMonth, pageData.TotalThisMonth)
</div>
}
templ IndexPage(pageData PageData) { templ IndexPage(pageData PageData) {
<html lang="en"> <html lang="en">
<head> <head>
@ -108,11 +115,10 @@ templ IndexPage(pageData PageData) {
.attribution a { color: hsl(228, 45%, 44%); } .attribution a { color: hsl(228, 45%, 44%); }
</style> </style>
</head> </head>
<body class="bg-neutral-cream text-bold p-4 h-full grid items-center"> <body class="bg-neutral-cream text-bold p-4 h-full grid place-items-center">
<div class="flex flex-col gap-4"> <main class="w-full md:w-1/4">
@myBalanceComponent(pageData.Balance) @WidgetsComponend(pageData)
@prepareSummaryComponent(pageData.Expenses, pageData.PercentComparedToLastMonth, pageData.TotalThisMonth) </main>
</div>
<div class="attribution fixed bottom-0 inset-x-0"> <div class="attribution fixed bottom-0 inset-x-0">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>. Coded by <a href="#">Your Name Here</a>.