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

feat(18): resize without transform, hover states 

using transform influences text size, and size of rounded corners

current way hardcodes 8rem for the columns,
maybe i'll pass it as parameter when start doing desktop, i don't know
feels like not a good choice overall, but yeah
This commit is contained in:
efim 2024-03-14 13:04:30 +00:00
parent ddc003eb13
commit 51e3629fa5
1 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,10 +11,16 @@ type PageData struct {
} }
templ myBalanceComponent(balance float32) { templ myBalanceComponent(balance float32) {
<div class="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 bg-primary-soft-red p-4 shadow ">
<div class="grow ">
My balance My balance
<p class="text-xl font-bold">${ fmt.Sprintf("%.2f", balance) }</p> <p class="text-xl font-bold">${ fmt.Sprintf("%.2f", balance) }</p>
</div> </div>
<img
src="./static/images/logo.svg"
alt="App logo: a white circle overlapping from the left a filled in black circle"
/>
</div>
} }
var days []string = []string{"mon", "tue", "wed", "thu", "fri", "sat", "sun"} var days []string = []string{"mon", "tue", "wed", "thu", "fri", "sat", "sun"}
@ -38,17 +44,20 @@ func prepareSummaryComponent(expenses []float32, totalThisMonth, percentCompared
css expenseBarVars(percentage float32) { css expenseBarVars(percentage float32) {
--height-percentage: { fmt.Sprintf("%.2f", percentage) }; --height-percentage: { fmt.Sprintf("%.2f", percentage) };
transform: scaleY(var(--height-percentage)); height: calc(var(--height-percentage) * 8rem);
} }
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 justify-end items-center h-32">
<div <div
class={ "rounded w-full h-32 origin-bottom ", class={ "rounded group relative w-full h-12",
expenseBarVars(percentage), expenseBarVars(percentage),
templ.KV("bg-primary-soft-red", !isCurrentDay), templ.KV("bg-primary-soft-red hover:bg-primary-soft-red/70", !isCurrentDay),
templ.KV("bg-primary-cyan", isCurrentDay) } templ.KV("bg-primary-cyan hover:bg-primary-cyan/70", isCurrentDay),
></div> "hover:cursor-pointer" }
>
<span class="absolute left-1/2 -translate-x-1/2 -translate-y-7 opacity-0 group-hover:opacity-100 bg-neutral-dark-brown text-neutral-cream rounded text-xs p-1">${ fmt.Sprintf("%.2f", expense ) }</span>
</div>
<p class="text-neutral-medium-brown text-xs py-2">{ day }</p> <p class="text-neutral-medium-brown text-xs py-2">{ day }</p>
</div> </div>
} }
@ -91,7 +100,7 @@ templ IndexPage(pageData PageData) {
<link href="/static/output.css" rel="stylesheet"/> <link href="/static/output.css" rel="stylesheet"/>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- displays site properly based on user's device --> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"/> <link rel="icon" type="image/png" sizes="32x32" href="./static/images/favicon-32x32.png"/>
<title>Frontend Mentor | Expenses chart component</title> <title>Frontend Mentor | Expenses chart component</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 --> <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style> <style>