From 51e3629fa5b66c846672abe7eb8a80823094f97d Mon Sep 17 00:00:00 2001
From: efim <efim666@bk.ru>
Date: Thu, 14 Mar 2024 13:04:30 +0000
Subject: [PATCH] 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
---
 18-expenses-chart/templates/index.templ | 29 ++++++++++++++++---------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/18-expenses-chart/templates/index.templ b/18-expenses-chart/templates/index.templ
index c76043e..448a95f 100644
--- a/18-expenses-chart/templates/index.templ
+++ b/18-expenses-chart/templates/index.templ
@@ -11,9 +11,15 @@ type PageData struct {
 }
 
 templ myBalanceComponent(balance float32) {
-	<div class="rounded-xl text-neutral-very-pale-orange text-xs bg-primary-soft-red p-4 shadow">
-		My balance
-		<p class="text-xl font-bold">${ fmt.Sprintf("%.2f", balance) }</p>
+	<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
+			<p class="text-xl font-bold">${ fmt.Sprintf("%.2f", balance) }</p>
+		</div>
+		<img
+			src="./static/images/logo.svg"
+			alt="App logo: a white circle overlapping from the left a filled in black circle"
+		/>
 	</div>
 }
 
@@ -38,17 +44,20 @@ func prepareSummaryComponent(expenses []float32, totalThisMonth, percentCompared
 
 css expenseBarVars(percentage float32) {
 	--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) {
-	<div class="flex flex-col place-items-center">
+	<div class="flex flex-col justify-end items-center h-32">
 		<div
-			class={ "rounded w-full h-32 origin-bottom ",
+			class={ "rounded group relative w-full  h-12",
  expenseBarVars(percentage),
-		 templ.KV("bg-primary-soft-red", !isCurrentDay),
-		 templ.KV("bg-primary-cyan", isCurrentDay) }
-		></div>
+		 templ.KV("bg-primary-soft-red hover:bg-primary-soft-red/70", !isCurrentDay),
+		 templ.KV("bg-primary-cyan hover:bg-primary-cyan/70", isCurrentDay),
+			"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>
 	</div>
 }
@@ -91,7 +100,7 @@ templ IndexPage(pageData PageData) {
 			<link href="/static/output.css" rel="stylesheet"/>
 			<meta charset="UTF-8"/>
 			<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>
 			<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
 			<style>