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

fix(18): prettifying styles

This commit is contained in:
efim 2024-03-13 16:04:35 +00:00
parent 44c89e6559
commit 6b764ae61b
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,10 @@ templ myBalanceComponent() {
var days []string = []string{"mon", "tue", "wed", "thu", "fri", "sat", "sun"} var days []string = []string{"mon", "tue", "wed", "thu", "fri", "sat", "sun"}
// returns templ SummaryComponent
// with all attributes computed from the expenses slice
// the percentages of the columns, current day number, etc
// NOTE: this seems to be the way to mix go calculations and templates
func prepareSummaryComponent(expenses []float32) templ.Component { func prepareSummaryComponent(expenses []float32) templ.Component {
fmt.Println("hello, preparing expenses: ", expenses) fmt.Println("hello, preparing expenses: ", expenses)
max := slices.Max(expenses) max := slices.Max(expenses)
@ -35,7 +39,7 @@ css expenseBarVars(percentage float32) {
templ dayExpenseColumn(expense, percentage float32, day string, isCurrentDay bool) { templ dayExpenseColumn(expense, percentage float32, day string, isCurrentDay bool) {
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<div <div
class={ "rounded w-full h-24 origin-bottom ", class={ "rounded w-full h-32 origin-bottom ",
expenseBarVars(percentage), expenseBarVars(percentage),
templ.KV("bg-primary-soft-red", !isCurrentDay), templ.KV("bg-primary-soft-red", !isCurrentDay),
templ.KV("bg-primary-cyan", isCurrentDay) } templ.KV("bg-primary-cyan", isCurrentDay) }
@ -55,8 +59,8 @@ 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) { templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum int) {
<div class="bg-neutral-very-pale-orange rounded-xl shadow p-4 flex flex-col"> <div class="bg-neutral-very-pale-orange rounded-xl shadow p-4 py-6 flex flex-col">
<p2 class="text-neutral-dark-brown text-lg font-bold pb-4">Spending - Last 7 days</p2> <p2 class="text-neutral-dark-brown text-xl font-bold pb-6">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="flex flex-row text-xs text-neutral-medium-brown"> <div class="flex flex-row text-xs text-neutral-medium-brown">