style: Improve page layout with wider container and added margin

This commit is contained in:
Ruidy (aider) 2024-12-24 17:57:05 +01:00 committed by Ruidy
parent 65f921cf5a
commit aa436542c4
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
2 changed files with 5 additions and 5 deletions

View file

@ -7,13 +7,13 @@ import (
templ Reports(months []string, m int, year string) { templ Reports(months []string, m int, year string) {
@layout.BaseLayout() { @layout.BaseLayout() {
<section class="container"> <section class="container mx-auto px-4 mb-8">
<hgroup class="flex flex-col"> <hgroup class="flex flex-col">
<h1 class="text-3xl font-bold text-primary">Reports</h1> <h1 class="text-3xl font-bold text-primary">Reports</h1>
<h2 class="text-lg text-muted">Generate monthly and yearly statements</h2> <h2 class="text-lg text-muted">Generate monthly and yearly statements</h2>
</hgroup> </hgroup>
</section> </section>
<section class="container mx-auto max-w-2xl"> <section class="container mx-auto px-4">
<form hx-get="/reports/do" hx-target="#report" class="bg-base-200 p-6 rounded-lg shadow-md"> <form hx-get="/reports/do" hx-target="#report" class="bg-base-200 p-6 rounded-lg shadow-md">
<fieldset class="space-y-4"> <fieldset class="space-y-4">
<legend class="text-lg font-semibold mb-4">Period</legend> <legend class="text-lg font-semibold mb-4">Period</legend>
@ -56,6 +56,6 @@ templ Reports(months []string, m int, year string) {
</div> </div>
</form> </form>
</section> </section>
<section id="report" class="container mx-auto max-w-2xl mt-8"></section> <section id="report" class=" px-4 mt-8"></section>
} }
} }

View file

@ -46,7 +46,7 @@ func Reports(months []string, m int, year string) templ.Component {
}() }()
} }
ctx = templ.InitializeContext(ctx) ctx = templ.InitializeContext(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<section class=\"container\"><hgroup class=\"flex flex-col\"><h1 class=\"text-3xl font-bold text-primary\">Reports</h1><h2 class=\"text-lg text-muted\">Generate monthly and yearly statements</h2></hgroup></section><section class=\"container mx-auto max-w-2xl\"><form hx-get=\"/reports/do\" hx-target=\"#report\" class=\"bg-base-200 p-6 rounded-lg shadow-md\"><fieldset class=\"space-y-4\"><legend class=\"text-lg font-semibold mb-4\">Period</legend><div class=\"flex gap-6 mb-4\"><label for=\"month\" class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" id=\"month\" name=\"period\" value=\"month\" checked class=\"radio radio-primary\"> <span>Monthly</span></label> <label for=\"year\" class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" id=\"year\" name=\"period\" value=\"year\" class=\"radio radio-primary\"> <span>Yearly</span></label></div><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><label for=\"year\" class=\"block\"><span class=\"block text-sm font-medium mb-1\">Year</span> <input type=\"number\" id=\"year\" name=\"year\" value=\"") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<section class=\"container mx-auto px-4 mb-8\"><hgroup class=\"flex flex-col\"><h1 class=\"text-3xl font-bold text-primary\">Reports</h1><h2 class=\"text-lg text-muted\">Generate monthly and yearly statements</h2></hgroup></section><section class=\"container mx-auto px-4\"><form hx-get=\"/reports/do\" hx-target=\"#report\" class=\"bg-base-200 p-6 rounded-lg shadow-md\"><fieldset class=\"space-y-4\"><legend class=\"text-lg font-semibold mb-4\">Period</legend><div class=\"flex gap-6 mb-4\"><label for=\"month\" class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" id=\"month\" name=\"period\" value=\"month\" checked class=\"radio radio-primary\"> <span>Monthly</span></label> <label for=\"year\" class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" id=\"year\" name=\"period\" value=\"year\" class=\"radio radio-primary\"> <span>Yearly</span></label></div><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><label for=\"year\" class=\"block\"><span class=\"block text-sm font-medium mb-1\">Year</span> <input type=\"number\" id=\"year\" name=\"year\" value=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -105,7 +105,7 @@ func Reports(months []string, m int, year string) templ.Component {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></label></div></fieldset><div class=\"mt-6 flex justify-end\"><button class=\"btn btn-primary\">Generate Report</button></div></form></section><section id=\"report\" class=\"container mx-auto max-w-2xl mt-8\"></section>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></label></div></fieldset><div class=\"mt-6 flex justify-end\"><button class=\"btn btn-primary\">Generate Report</button></div></form></section><section id=\"report\" class=\" px-4 mt-8\"></section>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }