Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/info and table styling #8

Merged
merged 8 commits into from
Sep 6, 2024
+174 −114
Merged

Fix/info and table styling #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
619e3c3
fix: info modal breaks
shanehull Sep 6, 2024
715f7c9
chore: remove unused tw conf
shanehull Sep 6, 2024
ebc32c6
chore: tw cmd on one line
shanehull Sep 6, 2024
e87ebbb
fix: info and table styling
shanehull Sep 6, 2024
ccb49af
fix: source code link
shanehull Sep 6, 2024
8b4b5ca
fix: source code link
shanehull Sep 6, 2024
d4985aa
chore: update readme
shanehull Sep 6, 2024
9ff6cbb
chore: spaces
shanehull Sep 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ RUN update-ca-certificates
RUN go install github.com/a-h/templ/cmd/templ@latest

RUN curl -sLO \
https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64

RUN mv tailwindcss-linux-x64 tailwindcss && chmod +x tailwindcss
https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64 && \
mv tailwindcss-linux-x64 tailwindcss \
&& chmod +x tailwindcss

RUN templ generate

Expand Down
8 changes: 4 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ This project is a debt recycling calculator built with Go, Templ, Tailwind CSS a

**Features:**

- Calculate debt recycling scenarios with configurable options;
investment amounts, growth rates, and reinvestment of cash flow.
- Automatically adjusts for tax liabilities based on salary, country and dividends income.
- Calculate and compare debt recycling scenarios with configurable options;
investment amounts, growth rates, and reinvestment of cash flows.
- Automatically adjusts for tax liabilities based on salary, country and dividend income.

**Technology Stack:**

Expand All @@ -33,4 +33,4 @@ It also does not take into account franking credits, or the (hopefully) increasi

> _"It is better to be roughly right than precisely wrong."_
>
> -- <cite>John Manyard Keynes</cite>
> \- <cite>John Manyard Keynes</cite>
39 changes: 21 additions & 18 deletions internal/templates/Hero.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ package templates

templ Hero() {
<div class="text-center mt-2 mx-auto max-w-sm sm:max-w-md md:max-w-xl lg:max-w-2xl">

<span class="font-sans text-4xl">♻️</span>
<h1 class="text-lg italic p-2" >
Reduce, Reuse, Recycle!
Expand All @@ -20,10 +19,10 @@ templ Hero() {

<!-- modal body -->
<div id="info-modal" class="fixed inset-0 p-2 z-50 flex items-center justify-center bg-black bg-opacity-50 shadow-xl transition-all backdrop-blur-md hidden">
<div class="bg-stone-50 p-4 rounded-lg shadow-lg w-full max-w-4xl h-4/5 mx-4 flex flex-col">
<div class="bg-stone-200 p-4 mx-4 rounded-lg shadow-lg w-full max-w-4xl h-4/5 flex flex-col">

<!-- modal header -->
<div class="flex justify-between items-center py-2 px-2 border-b">
<div class="flex justify-between items-center py-2 px-2 w-full border-b border-gray-400">
<h2 id="info-modal-label" class="font-bold">
<span class="font-sans text-lg">ℹ️</span> Information
</h2>
Expand All @@ -44,7 +43,9 @@ templ Hero() {
<p class="mt-1 text-gray-800">
While this can be a very effective strategy for building wealth, it's important to consider the risks, such as the possibility of losing money if your investments underperform, or worse, go to zero.
</p>

<br>

<h4 class="text-md font-semibold text-gray-800 ">Further reading...</h4>
<p class="mt-1 text-gray-800">
<ul class="text-md list-disc px-4">
Expand All @@ -57,6 +58,8 @@ templ Hero() {
</ul>
</p>
</div>

<br>

<div class="py-2">
<h3 class="text-lg font-semibold text-gray-800 ">What do all of the fields mean?</h3>
Expand All @@ -65,14 +68,12 @@ templ Hero() {
Descriptions and examples for all fields are provided below.
</p>

<br>

<div class="mt-2 text-gray-800">
<table class="bg-white rounded-lg shadow-md table-auto text-xs sm:text-md mx-auto">
<table class="bg-stone-50 shadow-md rounded-lg striped border-separate spacing-0 table-columns-right table-auto max-w-lg mx-auto text-sm text-xs sm:text-md mx-auto">
<tr>
<th class="border px-4 py-2">Field</th>
<th class="border px-4 py-2">Description</th>
<th class="border px-4 py-2">Example</th>
<th class="bg-gray-200 border px-4 py-2 rounded-tl-lg">Field</th>
<th class="bg-gray-200 border px-4 py-2">Description</th>
<th class="bg-gray-200 border px-4 py-2 rounded-tr-lg">Example</th>
</tr>
<tr>
<td class="border px-4 py-2">Salary</td>
Expand Down Expand Up @@ -143,17 +144,19 @@ templ Hero() {
<td class="border px-4 py-2">✔️</td>
</tr>
<tr>
<td class="border px-4 py-2">Reinvest Tax Refunds</td>
<td class="border px-4 py-2 rounded-bl-lg">Reinvest Tax Refunds</td>
<td class="border px-4 py-2">
Whether to reinvest your tax refunds via debt recycling.
</td>
<td class="border px-4 py-2">✔️</td>
<td class="border px-4 py-2 rounded-br-lg">✔️</td>
</tr>

</table>
</div>
</div>

<br>

<div class="py-2">
<h3 class="text-lg font-semibold text-gray-800 ">DISCLAIMER</h3>

Expand Down Expand Up @@ -184,7 +187,7 @@ templ Hero() {

<blockquote class="relative p-4">
<svg
class="absolute -top-6 -start-2 size-12 text-gray-200 m-2"
class="absolute -top-6 -start-2 size-12 text-stone-300 m-2"
width="12"
height="12"
viewBox="0 0 12 12"
Expand All @@ -202,31 +205,31 @@ templ Hero() {
</svg>

<div class="relative z-10">
<p class="text-gray-800 sm:text-md">
<p class="text-stone-800 sm:text-md">
<em>
It is better to be roughly right than precisely wrong.
</em>
</p>
</div>

<footer class="mt-2">
<div class="text-base font-semibold text-gray-800">John Manyard Keynes</div>
<div class="text-base font-semibold text-stone-800">John Manyard Keynes</div>
</footer>
</blockquote>

<br>

</div>

</div>

<!-- modal footer / close button -->
<hr>
<div class="mt-2 mx-auto p-2">
<button class="w-full py-2 px-4 bg-red-500 text-white rounded hover:bg-red-600 max-w-sm"
<div class="mt-2 mx-auto p-2 flex items-center w-full border-t border-stone-400">
<button class="w-lg mx-auto py-2 px-4 bg-red-500 text-stone-50 rounded hover:bg-red-600 max-w-sm"
_="on click add .hidden to #info-modal">
Close
</button>
</div>
</div>
</div>

}
2 changes: 1 addition & 1 deletion internal/templates/Hero_templ.go
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions internal/templates/Layout.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ templ footer(gitTag string, buildDate string) {
Made with <span class="font-sans">❤️</span> by <a href="https://shanehull.com" target="_blank" class="text-blue-600 hover:underline">Shane Hull</a>
</p>
<p class="flex items-center justify-center text-md mx-auto pb-2">
<a href="https://github.com/shanehull/debt-recycling-calc" target="_blank" class="flex items-center text-blue-600 hover:underline">
<a href="https://github.com/shanehull/debtrecyclingcalc.com" target="_blank" class="flex items-center text-blue-600 hover:underline">
<svg width="22" height="22" version="1.1" id="svg4" alt="GitHub" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<defs id="defs8"></defs>
<path
Expand All @@ -62,7 +62,7 @@ templ footer(gitTag string, buildDate string) {
id="path2">
</path>
</svg>
<span class="p-4">Source code</span>
<span class="p-2">Source code</span>
</a>
</p>
<p class="text-sm p-2">
Expand Down
22 changes: 12 additions & 10 deletions internal/templates/cards.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,38 +9,40 @@ import (
templ cards(data *calc.DebtRecyclingData, years int) {
<div class="block md:hidden md:grid gap-4 text-center">
for year := 0; year < years;year++ {
<table class="bg-white shadow-md rounded-lg mb-4 mx-auto border-separate table-auto max-w-lg mx-auto text-sm">
<table class="bg-stone-50 shadow-md mb-4 mx-auto rounded-lg striped border-separate spacing-0 table-columns-right table-auto max-w-lg mx-auto text-sm">
<tbody>
<tr>
<th colspan="2" class="px-4 py-2 border"><h2 class="text-xl md:text-2xl font-bold">{ fmt.Sprintf("Year %d", year+1) }</h2></th>
<th colspan="2" class="bg-gray-200 px-4 py-2 border rounded-t-lg">
<h2 class="text-xl md:text-2xl font-bold">{ fmt.Sprintf("Year %d", year+1) }</h2>
</th>
</tr>
<tr>
<th class="bg-gray-200 px-4 py-2 border text-left">Debt Recycled</th>
<th class="px-4 py-2 border text-left">Debt Recycled</th>
<td class="px-4 py-2 border text-right">{ fmt.Sprintf("%d", int(data.DebtRecycled[year])) }</td>
</tr>
<tr>
<th class="bg-gray-200 px-4 py-2 border text-left">Non-Deductible Interest</th>
<th class="px-4 py-2 border text-left">Non-Deductible Interest</th>
<td class="px-4 py-2 border text-right">{ fmt.Sprintf("%d", int(data.NonDeductibleInterest[year])) }</td>
</tr>
<tr>
<th class="bg-gray-200 px-4 py-2 border text-left">Tax-Deductible Interest</th>
<th class="px-4 py-2 border text-left">Tax-Deductible Interest</th>
<td class="px-4 py-2 border text-right">{ fmt.Sprintf("%d", int(data.TaxDeductibleInterest[year])) }</td>
</tr>
<tr>
<th class="bg-gray-200 px-4 py-2 border text-left">Tax Savings</th>
<th class="px-4 py-2 border text-left">Tax Savings</th>
<td class="px-4 py-2 border text-right">{ fmt.Sprintf("%d", int(data.TaxRefunds[year])) }</td>
</tr>
<tr>
<th class="bg-gray-200 px-4 py-2 border text-left">Dividends</th>
<th class="px-4 py-2 border text-left">Dividends</th>
<td class="px-4 py-2 border text-right">{ fmt.Sprintf("%d", int(data.DividendReturns[year])) }</td>
</tr>
<tr>
<th class="bg-gray-200 px-4 py-2 border text-left">Portfolio Value</th>
<th class="px-4 py-2 border text-left">Portfolio Value</th>
<td class="px-4 py-2 border text-right">{ fmt.Sprintf("%d", int(data.PortfolioValue[year])) }</td>
</tr>
<tr>
<th class="bg-gray-200 px-4 py-2 border text-left">Net Position</th>
<td class="px-4 py-2 border text-right">{ fmt.Sprintf("%d", int(data.NetPosition[year])) }</td>
<th class="px-4 py-2 border text-left rounded-bl-lg">Net Position</th>
<td class="px-4 py-2 border text-right rounded-br-lg">{ fmt.Sprintf("%d", int(data.NetPosition[year])) }</td>
</tr>
</tbody>
</table>
Expand Down
32 changes: 16 additions & 16 deletions internal/templates/cards_templ.go
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading
Loading