feat(18): displaying + for positive month comparison

wrapping + into span inline, to make it behave like part of
surrounding text in a div, somewhat ok
This commit is contained in:
efim 2024-03-14 14:10:23 +00:00
parent 843c71946f
commit 8ff2ec3766
2 changed files with 8 additions and 3 deletions

View File

@ -20,7 +20,7 @@ func main() {
Balance: 500 + rand.Float32()*1000, Balance: 500 + rand.Float32()*1000,
Expenses: []float32{randomDailyExpense(), randomDailyExpense(), randomDailyExpense(), randomDailyExpense(), randomDailyExpense(), randomDailyExpense(), randomDailyExpense()}, Expenses: []float32{randomDailyExpense(), randomDailyExpense(), randomDailyExpense(), randomDailyExpense(), randomDailyExpense(), randomDailyExpense(), randomDailyExpense()},
TotalThisMonth: 50 + rand.Float32()*600, TotalThisMonth: 50 + rand.Float32()*600,
PercentComparedToLastMonth: 5 * rand.Float32(), PercentComparedToLastMonth: -5 + 10*rand.Float32(),
}) })
component.Render(context.Background(), w) component.Render(context.Background(), w)
}) })

View File

@ -82,8 +82,13 @@ templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum in
<div class="grow"> <div class="grow">
<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> <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 grid content-center">
<p class="text-neutral-dark-brown font-bold">{ fmt.Sprintf("%.2f", percentComparedToLastMonth) }%</p> <div class="text-neutral-dark-brown font-bold ">
if (percentComparedToLastMonth > 0) {
<span class="inline">+</span>
}
{ fmt.Sprintf("%.2f", percentComparedToLastMonth) }%
</div>
from last month from last month
</div> </div>
</div> </div>