feat(layout): #211 optimize the overall layout for mobile
Some checks failed
Build Docker Image / Build-Docker-Image (push) Has been cancelled
Some checks failed
Build Docker Image / Build-Docker-Image (push) Has been cancelled
move navigation to aside proper mobile handling update logo.svg remove pirata-one/only use it for the logo
This commit is contained in:
188
assest-source/logo-inkscape.svg
Normal file
188
assest-source/logo-inkscape.svg
Normal file
@@ -0,0 +1,188 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="210mm"
|
||||
height="297mm"
|
||||
viewBox="0 0 210 297"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
|
||||
sodipodi:docname="logo-inkscape.svg"
|
||||
inkscape:export-filename="static/logo.svg"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#999999"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="2.5914723"
|
||||
inkscape:cx="385.10927"
|
||||
inkscape:cy="275.712"
|
||||
inkscape:window-width="2252"
|
||||
inkscape:window-height="1450"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer2" />
|
||||
<defs
|
||||
id="defs1">
|
||||
<rect
|
||||
x="115.37843"
|
||||
y="80.263254"
|
||||
width="470.38898"
|
||||
height="197.18521"
|
||||
id="rect2" />
|
||||
<rect
|
||||
x="175.18448"
|
||||
y="463.06726"
|
||||
width="253.29221"
|
||||
height="303.50433"
|
||||
id="rect6" />
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Faviocon"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
d="m 59.240389,97.978247 c 1.775354,-0.394229 4.087813,-2.156354 4.439709,-3.024187 0.206375,-0.508 -0.822855,-1.30175 -1.098021,-1.621896 -0.629709,-0.73025 -0.375709,-1.090083 -0.132292,-1.960562 0.277813,-0.989542 -0.381,-2.082271 -1.314979,-2.510896 -0.933979,-0.428625 -2.050521,-0.293688 -2.989792,0.124354 -0.939271,0.418042 -1.740958,1.090083 -2.526771,1.751542 -0.574145,-0.36248 -1.489604,-1.963209 -2.97127,-0.923396 -1.023938,0.717021 -1.116542,2.278062 -0.98425,3.52425 0.309562,2.876021 1.018645,4.368271 2.354791,4.770437 1.688042,0.508 3.556,0.240771 5.222875,-0.129646"
|
||||
style="fill:#ffca28;stroke-width:0.264583"
|
||||
id="path1-3"
|
||||
inkscape:export-filename="static/favicon.svg"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96" />
|
||||
<path
|
||||
d="m 62.124348,89.704727 c -0.224896,3.876145 -4.005792,6.447895 -5.799667,7.580312 l 1.164167,1.000125 c 0,0 0.738187,0.01588 1.748895,-0.306917 1.733021,-0.550333 4.265084,-2.106083 4.439709,-3.024187 0.256646,-1.336146 -1.113896,-1.045104 -1.423459,-2.100792 -0.161395,-0.558271 0.785813,-1.613958 -0.129645,-3.148541 m -6.503459,1.03452 c 0,0 -0.674687,-0.690562 -1.17475,-1.005416 -0.248708,0.468312 -0.425979,0.976312 -0.513291,1.500187 -0.156105,0.92075 0,2.227792 0.36777,3.201459 0.05821,0.150812 0.275167,0.127 0.29898,-0.03175 0.3175,-2.092855 1.021291,-3.66448 1.021291,-3.66448"
|
||||
style="fill:#e2a610;stroke-width:0.264583"
|
||||
id="path2-6" />
|
||||
<path
|
||||
d="m 50.906014,97.636935 c 0,0 -8.252354,0.891646 -11.975042,8.056565 -3.722687,7.16492 -0.558271,11.50937 2.791354,13.09158 3.349626,1.58221 11.789834,2.14048 17.279938,0.83873 5.490104,-1.30175 6.863292,-4.0005 6.606646,-6.60664 -0.373062,-3.80471 -3.907896,-6.14363 -3.907896,-6.14363 0,0 0.140229,-4.699 -3.505729,-7.749647 -3.235854,-2.709333 -7.289271,-1.486958 -7.289271,-1.486958"
|
||||
style="fill:#ffca28;stroke-width:0.264583"
|
||||
id="path3-0" />
|
||||
<path
|
||||
d="m 56.120952,95.996518 c 2.233083,0.727604 2.727854,2.746375 2.566458,3.296709 -0.193146,0.645583 -2.667,-1.867959 -6.344708,-1.717146 -1.285875,0.05292 -0.912813,-0.735542 -0.3175,-1.190625 0.785812,-0.600604 2.106083,-1.034521 4.09575,-0.388938"
|
||||
style="fill:#6d4c41;stroke-width:0.264583"
|
||||
id="path6-6" />
|
||||
<path
|
||||
d="m 56.120952,95.996518 c 2.233083,0.727604 2.727854,2.746375 2.566458,3.296709 -0.193146,0.645583 -2.667,-1.867959 -6.344708,-1.717146 -1.285875,0.05292 -0.912813,-0.735542 -0.3175,-1.190625 0.785812,-0.600604 2.106083,-1.034521 4.09575,-0.388938"
|
||||
style="fill:#6b4b46;stroke-width:0.264583"
|
||||
id="path7-2" />
|
||||
<path
|
||||
d="m 60.042077,103.11381 c 0.280458,-0.19314 1.222375,0.14023 1.486958,1.98438 0.129646,0.90223 0.169333,1.77535 0.169333,1.77535 0,0 -1.11125,-0.99748 -1.47902,-1.69862 -0.463021,-0.88636 -0.642938,-1.74361 -0.177271,-2.06111"
|
||||
style="fill:#e2a610;stroke-width:0.264583"
|
||||
id="path8-6" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:19.7556px;font-family:'Pirata One';-inkscape-font-specification:'Pirata One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:start;letter-spacing:-0.529167px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;stroke-width:0.264583"
|
||||
x="82.355011"
|
||||
y="90.66716"
|
||||
id="text4-9"
|
||||
inkscape:label="$"
|
||||
transform="rotate(20.578693)"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4-2"
|
||||
style="font-size:19.7556px;fill:#4d4d4d;stroke-width:0.264583"
|
||||
x="82.355011"
|
||||
y="90.66716">$</tspan></text>
|
||||
</g>
|
||||
<g
|
||||
inkscape:label="Logo"
|
||||
inkscape:groupmode="layer"
|
||||
id="g7"
|
||||
transform="translate(1.4293676,-48.496402)">
|
||||
<g
|
||||
id="g8"
|
||||
inkscape:label="Favicon"
|
||||
transform="translate(-38.797122,-28.178962)"
|
||||
inkscape:export-filename="../static/logo.svg"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96">
|
||||
<path
|
||||
d="m 98.874384,115.02659 c 1.775356,-0.39423 4.087816,-2.15635 4.439706,-3.02419 0.20638,-0.508 -0.82285,-1.30175 -1.09802,-1.62189 -0.62971,-0.73025 -0.37571,-1.09009 -0.13229,-1.96057 0.27781,-0.98954 -0.381,-2.08227 -1.31498,-2.51089 -0.933978,-0.42863 -2.05052,-0.29369 -2.989791,0.12435 -0.939271,0.41804 -1.740958,1.09009 -2.526771,1.75154 -0.574145,-0.36248 -1.489604,-1.96321 -2.97127,-0.92339 -1.023938,0.71702 -1.116542,2.27806 -0.98425,3.52425 0.309562,2.87602 1.018645,4.36827 2.354791,4.77043 1.688042,0.508 3.556,0.24078 5.222875,-0.12964"
|
||||
style="fill:#ffca28;stroke-width:0.264583"
|
||||
id="path1-3-3" />
|
||||
<path
|
||||
d="m 101.75834,106.75307 c -0.22489,3.87614 -4.005789,6.44789 -5.799664,7.58031 l 1.164167,1.00013 c 0,0 0.738187,0.0159 1.748895,-0.30692 1.733022,-0.55033 4.265082,-2.10608 4.439712,-3.02419 0.25664,-1.33614 -1.1139,-1.0451 -1.42346,-2.10079 -0.1614,-0.55827 0.78581,-1.61396 -0.12965,-3.14854 m -6.503456,1.03452 c 0,0 -0.674687,-0.69056 -1.17475,-1.00542 -0.248708,0.46832 -0.425979,0.97632 -0.513291,1.50019 -0.156105,0.92075 0,2.22779 0.36777,3.20146 0.05821,0.15081 0.275167,0.127 0.29898,-0.0317 0.3175,-2.09286 1.021291,-3.66448 1.021291,-3.66448"
|
||||
style="fill:#e2a610;stroke-width:0.264583"
|
||||
id="path2-6-6" />
|
||||
<path
|
||||
d="m 90.540009,114.68528 c 0,0 -8.252354,0.89164 -11.975042,8.05656 -3.722687,7.16492 -0.558271,11.50937 2.791354,13.09158 3.349626,1.58221 11.789834,2.14048 17.279938,0.83873 5.490101,-1.30175 6.863291,-4.0005 6.606641,-6.60664 -0.37306,-3.80471 -3.90789,-6.14363 -3.90789,-6.14363 0,0 0.14023,-4.699 -3.50573,-7.74964 -3.235854,-2.70934 -7.289271,-1.48696 -7.289271,-1.48696"
|
||||
style="fill:#ffca28;stroke-width:0.264583"
|
||||
id="path3-0-1" />
|
||||
<path
|
||||
d="m 95.754947,113.04486 c 2.233083,0.7276 2.727854,2.74638 2.566458,3.29671 -0.193146,0.64558 -2.667,-1.86796 -6.344708,-1.71715 -1.285875,0.0529 -0.912813,-0.73554 -0.3175,-1.19062 0.785812,-0.60061 2.106083,-1.03452 4.09575,-0.38894"
|
||||
style="fill:#6d4c41;stroke-width:0.264583"
|
||||
id="path6-6-2" />
|
||||
<path
|
||||
d="m 95.754947,113.04486 c 2.233083,0.7276 2.727854,2.74638 2.566458,3.29671 -0.193146,0.64558 -2.667,-1.86796 -6.344708,-1.71715 -1.285875,0.0529 -0.912813,-0.73554 -0.3175,-1.19062 0.785812,-0.60061 2.106083,-1.03452 4.09575,-0.38894"
|
||||
style="fill:#6b4b46;stroke-width:0.264583"
|
||||
id="path7-2-9" />
|
||||
<path
|
||||
d="m 99.676072,120.16215 c 0.280458,-0.19314 1.222378,0.14023 1.486958,1.98438 0.12965,0.90223 0.16933,1.77535 0.16933,1.77535 0,0 -1.11125,-0.99748 -1.479017,-1.69862 -0.463021,-0.88636 -0.642938,-1.74361 -0.177271,-2.06111"
|
||||
style="fill:#e2a610;stroke-width:0.264583"
|
||||
id="path8-6-3" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:19.7556px;font-family:'Pirata One';-inkscape-font-specification:'Pirata One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:start;letter-spacing:-0.529167px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;stroke-width:0.264583"
|
||||
x="125.45235"
|
||||
y="92.696564"
|
||||
id="text4-9-1"
|
||||
inkscape:label="$"
|
||||
transform="rotate(20.578693)"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4-2-9"
|
||||
style="font-size:19.7556px;fill:#4d4d4d;stroke-width:0.264583"
|
||||
x="125.45235"
|
||||
y="92.696564">$</tspan></text>
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer2"
|
||||
inkscape:label="Text"
|
||||
transform="translate(-1.4293676,48.496402)">
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:17.6389px;text-align:start;letter-spacing:-0.529167px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;stroke-width:0.264583"
|
||||
x="57.635151"
|
||||
y="55.655094"
|
||||
id="text1"
|
||||
inkscape:label="SpendSparrow"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan1"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:17.6389px;font-family:'Pirata One';-inkscape-font-specification:'Pirata One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:-0.529167px;fill:#4d4d4d;stroke:none;stroke-width:0.264583"
|
||||
x="57.635151"
|
||||
y="55.655094">pendSparrow</tspan></text>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:19.7556px;font-family:'Pirata One';-inkscape-font-specification:'Pirata One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:start;letter-spacing:-0.529167px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#1a1a1a;stroke-width:0.264583"
|
||||
x="93.314896"
|
||||
y="91.227318"
|
||||
id="text5"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan5"
|
||||
style="stroke-width:0.264583"
|
||||
x="93.314896"
|
||||
y="91.227318" /></text>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
transform="scale(0.26458333)"
|
||||
id="text6"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:74.6667px;font-family:'Pirata One';-inkscape-font-specification:'Pirata One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:start;letter-spacing:-2px;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect6);display:inline;fill:#1a1a1a;stroke:none" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
transform="scale(0.26458333)"
|
||||
id="text2"
|
||||
style="fill:#4d4d4d;text-orientation:auto;-inkscape-font-specification:'Pirata One, Normal';font-family:'Pirata One';font-size:74.66666667px;letter-spacing:-2px;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect2)" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
33
input.css
33
input.css
@@ -3,37 +3,34 @@
|
||||
@source './static/**/*.js';
|
||||
@source './template/**/*.templ';
|
||||
|
||||
body {
|
||||
@apply font-garamond text-gray-700;
|
||||
}
|
||||
input:focus {
|
||||
@apply outline-none ring-0;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Pirata One";
|
||||
src: url("/static/font/PirataOne-Regular.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "EB Garamond";
|
||||
src: url("/static/font/EBGaramond-VariableFont_wght.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@theme {
|
||||
--font-pirata: "Pirata One", serif;
|
||||
--font-garamond: "EB Garamond", serif;
|
||||
body {
|
||||
font-family: "EB Garamond", serif;
|
||||
@apply text-gray-700;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
@apply outline-none ring-0;
|
||||
}
|
||||
|
||||
button {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.button {
|
||||
transition: all 150ms linear;
|
||||
transition: all 150ms linear;
|
||||
@apply cursor-pointer border-2 rounded-lg border-transparent;
|
||||
}
|
||||
|
||||
.button-primary:hover,
|
||||
.button-normal:hover {
|
||||
transform: translate(-0.25rem, -0.25rem);
|
||||
box-shadow: 3px 3px 3px var(--color-gray-200);
|
||||
transform: translate(-0.25rem, -0.25rem);
|
||||
box-shadow: 3px 3px 3px var(--color-gray-200);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
@@ -61,3 +58,5 @@ input:focus {
|
||||
box-shadow: 0 0 0 2px var(--color-gray-200);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -66,7 +66,9 @@ templ EditAccount(account *types.Account) {
|
||||
hx-swap="outerHTML"
|
||||
class="button button-neglect px-1 flex items-center gap-2"
|
||||
>
|
||||
@svg.Cancel()
|
||||
<span class="h-4 w-4">
|
||||
@svg.Cancel()
|
||||
</span>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
|
||||
@@ -71,10 +71,10 @@ if isSignIn {
|
||||
Don't have an account?
|
||||
Sign Up
|
||||
</a>
|
||||
<button class="button button-primary font-pirata text-gray-600 text-2xl px-1">Sign In</button>
|
||||
<button class="button button-primary text-gray-600 text-2xl px-1">Sign In</button>
|
||||
} else {
|
||||
<a href="/auth/signin" class="text-gray-500 text-sm px-1 button button-neglect">Already have an account? Sign In</a>
|
||||
<button class="button button-primary font-pirata text-gray-600 text-2xl px-1">
|
||||
<button class="button button-primary text-gray-600 text-2xl px-1">
|
||||
Sign Up
|
||||
</button>
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
package auth
|
||||
|
||||
templ UserComp(user string) {
|
||||
<div id="user-info" class="flex gap-5 items-center">
|
||||
<div id="user-info" class="flex items-center gap-2 text-nowrap">
|
||||
if user != "" {
|
||||
<div class="inline-block group relative">
|
||||
<button class="font-semibold py-2 px-4 inline-flex items-center">
|
||||
@@ -37,8 +37,8 @@ templ UserComp(user string) {
|
||||
</div>
|
||||
</div>
|
||||
} else {
|
||||
<a href="/auth/signup" class="font-pirata text-xl button px-1 button-neglect">Sign Up</a>
|
||||
<a href="/auth/signin" class="font-pirata text-xl button px-1 button-neglect">Sign In</a>
|
||||
<a href="/auth/signup" class="text-xl button px-1 button-neglect">Sign Up</a>
|
||||
<a href="/auth/signin" class="text-xl button px-1 button-neglect">Sign In</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -3,8 +3,7 @@ package template
|
||||
templ Index() {
|
||||
<div class="h-full flex flex-col items-center justify-center">
|
||||
<h1 class="flex gap-2 w-full justify-center">
|
||||
<img class="w-24" src="/static/favicon.svg" alt="SpendSparrow logo"/>
|
||||
<span class="text-8xl tracking-tighter font-bold font-pirata">SpendSparrow</span>
|
||||
<img width="600" src="/static/logo.svg" alt="SpendSparrow logo"/>
|
||||
</h1>
|
||||
<h2 class="text-2xl mt-8 text-gray-800">
|
||||
Spend your <span class="px-2 text-3xl text-yellow-800">treasure</span> on the important
|
||||
@@ -1,10 +1,14 @@
|
||||
package template
|
||||
|
||||
import "spend-sparrow/internal/template/svg"
|
||||
|
||||
func layoutLinkClass(isActive bool) string {
|
||||
common := "text-2xl p-2 text-gray-900 decoration-yellow-400 decoration-[0.25rem] hover:bg-gray-200 rounded-lg"
|
||||
if isActive {
|
||||
return "text-xl hover:bg-gray-100 p-1 duration-100 rounded-xl transition-colors text-gray-900"
|
||||
return common + " " + "underline"
|
||||
}
|
||||
return "text-xl hover:bg-gray-100 hover:text-gray-900 p-1 duration-200 rounded-xl transition-colors text-gray-400"
|
||||
|
||||
return common + " " + "hover:underline"
|
||||
}
|
||||
|
||||
templ Layout(slot templ.Component, user templ.Component, loggedIn bool, path string) {
|
||||
@@ -22,48 +26,69 @@ templ Layout(slot templ.Component, user templ.Component, loggedIn bool, path str
|
||||
"includeIndicatorStyles": false,
|
||||
"selfRequestsOnly": true,
|
||||
"allowScriptTags": false
|
||||
}'
|
||||
}'
|
||||
/>
|
||||
<script src="/static/js/htmx.min.js"></script>
|
||||
<script src="/static/js/toast.js"></script>
|
||||
<script src="/static/js/layout.js"></script>
|
||||
<script src="/static/js/time.js"></script>
|
||||
<script src="/static/js/echarts.min.js"></script>
|
||||
<script src="/static/js/dashboard.js" defer></script>
|
||||
</head>
|
||||
<body class="h-screen flex flex-col" hx-headers='{"Csrf-Token": "CSRF_TOKEN"}'>
|
||||
// Header
|
||||
<nav class="flex bg-white items-center gap-2 py-1 px-2 h-12 md:gap-10 md:px-10 md:py-2">
|
||||
<a href="/" class="flex gap-2 mr-20">
|
||||
<img class="w-6" src="/static/favicon.svg" alt="SpendSparrow logo"/>
|
||||
<span class="text-4xl font-bold font-pirata">SpendSparrow</span>
|
||||
</a>
|
||||
if loggedIn {
|
||||
<a class={ layoutLinkClass(path == "/dashboard") } href="/dashboard">Dashboard</a>
|
||||
<a class={ layoutLinkClass(path == "/transaction") } href="/transaction">Transaction</a>
|
||||
<a class={ layoutLinkClass(path == "/treasurechest") } href="/treasurechest">Treasure Chest</a>
|
||||
<a class={ layoutLinkClass(path == "/account") } href="/account">Account</a>
|
||||
}
|
||||
<div class="ml-auto">
|
||||
@user
|
||||
<body hx-headers='{"Csrf-Token": "CSRF_TOKEN"}'>
|
||||
<div class="flex flex-col min-h-screen">
|
||||
<header class="sticky top-0 z-50 bg-white flex items-center gap-6 p-4 border-b-1 border-gray-200">
|
||||
<button id="menuButton" class="w-10 h-10 block xl:hidden">
|
||||
@svg.Menu()
|
||||
</button>
|
||||
<a href="/" class="flex gap-2 -mt-2">
|
||||
<img width="150" src="/static/logo.svg" alt="SpendSparrow logo"/>
|
||||
</a>
|
||||
<div class="ml-auto">
|
||||
@user
|
||||
</div>
|
||||
</header>
|
||||
// Content
|
||||
<div class="flex flex-1">
|
||||
if loggedIn {
|
||||
<aside class="shrink-0 h-[calc(100vh-4rem)] xl:block hidden sticky top-18 border-r-1 border-gray-200 overflow-y-auto p-4">
|
||||
@navigation(path)
|
||||
</aside>
|
||||
}
|
||||
<main class="flex-1 p-6">
|
||||
if slot != nil {
|
||||
@slot
|
||||
}
|
||||
</main>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="h-12 fixed top-12 mr-4 inset-0 bg-linear-0 from-transparent to-white"></div>
|
||||
// Content
|
||||
<main class="flex-1 overflow-auto">
|
||||
if slot != nil {
|
||||
@slot
|
||||
}
|
||||
</main>
|
||||
// Footer
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<dialog id="menu" class="max-h-none w-64 h-screen">
|
||||
<header class="sticky top-0 z-50 bg-white flex items-center justify-between p-4 border-b-1 border-gray-200">
|
||||
<a href="/" class="flex gap-2 -mt-2">
|
||||
<img width="150" src="/static/logo.svg" alt="SpendSparrow logo"/>
|
||||
</a>
|
||||
<button id="menuButtonClose" class="h-6 w-6">
|
||||
@svg.Cancel()
|
||||
</button>
|
||||
</header>
|
||||
@navigation(path)
|
||||
</dialog>
|
||||
<div id="toasts" class="fixed bottom-4 right-4 ml-4 max-w-96 flex flex-col gap-2 z-50">
|
||||
<div
|
||||
id="toast"
|
||||
class="transition-all duration-300 opacity-0 px-4 py-2 text-lg hidden text-bold rounded bg-amber-900 text-white"
|
||||
>
|
||||
M
|
||||
</div>
|
||||
class="transition-all duration-300
|
||||
opacity-0 px-4 py-2 text-lg hidden text-bold rounded bg-amber-900 text-white"
|
||||
></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
|
||||
templ navigation(path string) {
|
||||
<nav class="w-64 text-nowrap flex gap-2 flex-col text-lg mt-5 px-5 pt-2">
|
||||
<a class={ layoutLinkClass(path == "/dashboard") } href="/dashboard">Dashboard</a>
|
||||
<a class={ layoutLinkClass(path == "/transaction") } href="/transaction">Transaction</a>
|
||||
<a class={ layoutLinkClass(path == "/treasurechest") } href="/treasurechest">Treasure Chest</a>
|
||||
<a class={ layoutLinkClass(path == "/account") } href="/account">Account</a>
|
||||
</nav>
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@ templ Save() {
|
||||
}
|
||||
|
||||
templ Cancel() {
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" class="h-4 w-4 text-gray-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" class="text-gray-500">
|
||||
<path fill="currentColor" d="m654 501l346 346l-154 154l-346-346l-346 346L0 847l346-346L0 155L154 1l346 346L846 1l154 154z"></path>
|
||||
</svg>
|
||||
}
|
||||
@@ -47,3 +47,13 @@ templ Info() {
|
||||
<path fill="currentColor" d="M0 0h48v48H0z" mask="url(#ipSInfo0)"></path>
|
||||
</svg>
|
||||
}
|
||||
|
||||
templ Menu() {
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="text-gray-500">
|
||||
<g data-name="1" id="_1">
|
||||
<path d="M441.13,166.52h-372a15,15,0,1,1,0-30h372a15,15,0,0,1,0,30Z"></path>
|
||||
<path d="M441.13,279.72h-372a15,15,0,1,1,0-30h372a15,15,0,0,1,0,30Z"></path>
|
||||
<path d="M441.13,392.92h-372a15,15,0,1,1,0-30h372a15,15,0,0,1,0,30Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
}
|
||||
|
||||
@@ -188,7 +188,9 @@ templ EditTransaction(transaction *types.Transaction, accounts []*types.Account,
|
||||
hx-swap="outerHTML"
|
||||
class="button button-neglect px-1 flex items-center gap-2"
|
||||
>
|
||||
@svg.Cancel()
|
||||
<span class="h-4 w-4">
|
||||
@svg.Cancel()
|
||||
</span>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
|
||||
@@ -193,7 +193,9 @@ templ EditTransactionRecurring(transactionRecurring *types.TransactionRecurring,
|
||||
hx-swap="outerHTML"
|
||||
class="button button-neglect px-1 flex items-center gap-2"
|
||||
>
|
||||
@svg.Cancel()
|
||||
<span class="h-4 w-4">
|
||||
@svg.Cancel()
|
||||
</span>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
|
||||
@@ -88,7 +88,9 @@ templ EditTreasureChest(treasureChest *types.TreasureChest, parents []*types.Tre
|
||||
hx-swap="outerHTML"
|
||||
class="button button-neglect px-1 flex items-center gap-2"
|
||||
>
|
||||
@svg.Cancel()
|
||||
<span class="h-4 w-4">
|
||||
@svg.Cancel()
|
||||
</span>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
|
||||
@@ -1 +1,53 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 128 128"><path d="M93.46 39.45c6.71-1.49 15.45-8.15 16.78-11.43.78-1.92-3.11-4.92-4.15-6.13-2.38-2.76-1.42-4.12-.5-7.41 1.05-3.74-1.44-7.87-4.97-9.49s-7.75-1.11-11.3.47-6.58 4.12-9.55 6.62c-2.17-1.37-5.63-7.42-11.23-3.49-3.87 2.71-4.22 8.61-3.72 13.32 1.17 10.87 3.85 16.51 8.9 18.03 6.38 1.92 13.44.91 19.74-.49" style="fill:#ffca28"/><path d="M104.36 8.18c-.85 14.65-15.14 24.37-21.92 28.65l4.4 3.78s2.79.06 6.61-1.16c6.55-2.08 16.12-7.96 16.78-11.43.97-5.05-4.21-3.95-5.38-7.94-.61-2.11 2.97-6.1-.49-11.9M79.78 12.09s-2.55-2.61-4.44-3.8c-.94 1.77-1.61 3.69-1.94 5.67-.59 3.48 0 8.42 1.39 12.1.22.57 1.04.48 1.13-.12 1.2-7.91 3.86-13.85 3.86-13.85" style="fill:#e2a610"/><path d="M61.96 38.16S30.77 41.53 16.7 68.61s-2.11 43.5 10.55 49.48 44.56 8.09 65.31 3.17 25.94-15.12 24.97-24.97c-1.41-14.38-14.77-23.22-14.77-23.22s.53-17.76-13.25-29.29c-12.23-10.24-27.55-5.62-27.55-5.62" style="fill:#ffca28"/><path d="M74.76 83.73c-6.69-8.44-14.59-9.57-17.12-12.6-1.38-1.65-2.19-3.32-1.88-5.39.33-2.2 2.88-3.72 4.86-4.09 2.31-.44 7.82-.21 12.45 4.2 1.1 1.04.7 2.66.67 4.11-.08 3.11 4.37 6.13 7.97 3.53 3.61-2.61.84-8.42-1.49-11.24-1.76-2.13-8.14-6.82-16.07-7.56-2.23-.21-11.2-1.54-16.38 8.31-1.49 2.83-2.04 9.67 5.76 15.45 1.63 1.21 10.09 5.51 12.44 8.3 4.07 4.83 1.28 9.08-1.9 9.64-8.67 1.52-13.58-3.17-14.49-5.74-.65-1.83.03-3.81-.81-5.53-.86-1.77-2.62-2.47-4.48-1.88-6.1 1.94-4.16 8.61-1.46 12.28 2.89 3.93 6.44 6.3 10.43 7.6 14.89 4.85 22.05-2.81 23.3-8.42.92-4.11.82-7.67-1.8-10.97" style="fill:#6b4b46"/><path d="M71.16 48.99c-12.67 27.06-14.85 61.23-14.85 61.23" style="fill:none;stroke:#6b4b46;stroke-width:5;stroke-miterlimit:10"/><path d="M81.67 31.96c8.44 2.75 10.31 10.38 9.7 12.46-.73 2.44-10.08-7.06-23.98-6.49-4.86.2-3.45-2.78-1.2-4.5 2.97-2.27 7.96-3.91 15.48-1.47" style="fill:#6d4c41"/><path d="M81.67 31.96c8.44 2.75 10.31 10.38 9.7 12.46-.73 2.44-10.08-7.06-23.98-6.49-4.86.2-3.45-2.78-1.2-4.5 2.97-2.27 7.96-3.91 15.48-1.47" style="fill:#6b4b46"/><path d="M96.49 58.86c1.06-.73 4.62.53 5.62 7.5.49 3.41.64 6.71.64 6.71s-4.2-3.77-5.59-6.42c-1.75-3.35-2.43-6.59-.67-7.79" style="fill:#e2a610"/></svg>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="28.384802mm"
|
||||
height="31.749905mm"
|
||||
viewBox="0 0 28.384802 31.749905"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
id="layer1"
|
||||
transform="translate(-37.253301,-88.598061)">
|
||||
<path
|
||||
d="m 59.240389,97.978247 c 1.775354,-0.394229 4.087813,-2.156354 4.439709,-3.024187 0.206375,-0.508 -0.822855,-1.30175 -1.098021,-1.621896 -0.629709,-0.73025 -0.375709,-1.090083 -0.132292,-1.960562 0.277813,-0.989542 -0.381,-2.082271 -1.314979,-2.510896 -0.933979,-0.428625 -2.050521,-0.293688 -2.989792,0.124354 -0.939271,0.418042 -1.740958,1.090083 -2.526771,1.751542 -0.574145,-0.36248 -1.489604,-1.963209 -2.97127,-0.923396 -1.023938,0.717021 -1.116542,2.278062 -0.98425,3.52425 0.309562,2.876021 1.018645,4.368271 2.354791,4.770437 1.688042,0.508 3.556,0.240771 5.222875,-0.129646"
|
||||
style="fill:#ffca28;stroke-width:0.264583"
|
||||
id="path1-3" />
|
||||
<path
|
||||
d="m 62.124348,89.704727 c -0.224896,3.876145 -4.005792,6.447895 -5.799667,7.580312 l 1.164167,1.000125 c 0,0 0.738187,0.01588 1.748895,-0.306917 1.733021,-0.550333 4.265084,-2.106083 4.439709,-3.024187 0.256646,-1.336146 -1.113896,-1.045104 -1.423459,-2.100792 -0.161395,-0.558271 0.785813,-1.613958 -0.129645,-3.148541 m -6.503459,1.03452 c 0,0 -0.674687,-0.690562 -1.17475,-1.005416 -0.248708,0.468312 -0.425979,0.976312 -0.513291,1.500187 -0.156105,0.92075 0,2.227792 0.36777,3.201459 0.05821,0.150812 0.275167,0.127 0.29898,-0.03175 0.3175,-2.092855 1.021291,-3.66448 1.021291,-3.66448"
|
||||
style="fill:#e2a610;stroke-width:0.264583"
|
||||
id="path2-6" />
|
||||
<path
|
||||
d="m 50.906014,97.636935 c 0,0 -8.252354,0.891646 -11.975042,8.056565 -3.722687,7.16492 -0.558271,11.50937 2.791354,13.09158 3.349626,1.58221 11.789834,2.14048 17.279938,0.83873 5.490104,-1.30175 6.863292,-4.0005 6.606646,-6.60664 -0.373062,-3.80471 -3.907896,-6.14363 -3.907896,-6.14363 0,0 0.140229,-4.699 -3.505729,-7.749647 -3.235854,-2.709333 -7.289271,-1.486958 -7.289271,-1.486958"
|
||||
style="fill:#ffca28;stroke-width:0.264583"
|
||||
id="path3-0" />
|
||||
<path
|
||||
d="m 56.120952,95.996518 c 2.233083,0.727604 2.727854,2.746375 2.566458,3.296709 -0.193146,0.645583 -2.667,-1.867959 -6.344708,-1.717146 -1.285875,0.05292 -0.912813,-0.735542 -0.3175,-1.190625 0.785812,-0.600604 2.106083,-1.034521 4.09575,-0.388938"
|
||||
style="fill:#6d4c41;stroke-width:0.264583"
|
||||
id="path6-6" />
|
||||
<path
|
||||
d="m 56.120952,95.996518 c 2.233083,0.727604 2.727854,2.746375 2.566458,3.296709 -0.193146,0.645583 -2.667,-1.867959 -6.344708,-1.717146 -1.285875,0.05292 -0.912813,-0.735542 -0.3175,-1.190625 0.785812,-0.600604 2.106083,-1.034521 4.09575,-0.388938"
|
||||
style="fill:#6b4b46;stroke-width:0.264583"
|
||||
id="path7-2" />
|
||||
<path
|
||||
d="m 60.042077,103.11381 c 0.280458,-0.19314 1.222375,0.14023 1.486958,1.98438 0.129646,0.90223 0.169333,1.77535 0.169333,1.77535 0,0 -1.11125,-0.99748 -1.47902,-1.69862 -0.463021,-0.88636 -0.642938,-1.74361 -0.177271,-2.06111"
|
||||
style="fill:#e2a610;stroke-width:0.264583"
|
||||
id="path8-6" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:19.7556px;font-family:'Pirata One';-inkscape-font-specification:'Pirata One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:start;letter-spacing:-0.529167px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;stroke-width:0.264583"
|
||||
x="82.355011"
|
||||
y="90.66716"
|
||||
id="text4-9"
|
||||
transform="rotate(20.578693)"><tspan
|
||||
id="tspan4-2"
|
||||
style="font-size:19.7556px;fill:#4d4d4d;stroke-width:0.264583"
|
||||
x="82.355011"
|
||||
y="90.66716">$</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
11
static/js/layout.js
Normal file
11
static/js/layout.js
Normal file
@@ -0,0 +1,11 @@
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
menuButton.addEventListener("click", function (e) {
|
||||
menu.showModal();
|
||||
});
|
||||
menuButtonClose.addEventListener("click", function (e) {
|
||||
menu.close();
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
71
static/logo.svg
Normal file
71
static/logo.svg
Normal file
@@ -0,0 +1,71 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="96.820343mm"
|
||||
height="31.749899mm"
|
||||
viewBox="0 0 96.820343 31.749899"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
id="g7"
|
||||
transform="translate(-38.090175,-77.467441)">
|
||||
<g
|
||||
id="g8"
|
||||
transform="translate(-38.797122,-28.178962)">
|
||||
<path
|
||||
d="m 98.874384,115.02659 c 1.775356,-0.39423 4.087816,-2.15635 4.439706,-3.02419 0.20638,-0.508 -0.82285,-1.30175 -1.09802,-1.62189 -0.62971,-0.73025 -0.37571,-1.09009 -0.13229,-1.96057 0.27781,-0.98954 -0.381,-2.08227 -1.31498,-2.51089 -0.933978,-0.42863 -2.05052,-0.29369 -2.989791,0.12435 -0.939271,0.41804 -1.740958,1.09009 -2.526771,1.75154 -0.574145,-0.36248 -1.489604,-1.96321 -2.97127,-0.92339 -1.023938,0.71702 -1.116542,2.27806 -0.98425,3.52425 0.309562,2.87602 1.018645,4.36827 2.354791,4.77043 1.688042,0.508 3.556,0.24078 5.222875,-0.12964"
|
||||
style="fill:#ffca28;stroke-width:0.264583"
|
||||
id="path1-3-3" />
|
||||
<path
|
||||
d="m 101.75834,106.75307 c -0.22489,3.87614 -4.005789,6.44789 -5.799664,7.58031 l 1.164167,1.00013 c 0,0 0.738187,0.0159 1.748895,-0.30692 1.733022,-0.55033 4.265082,-2.10608 4.439712,-3.02419 0.25664,-1.33614 -1.1139,-1.0451 -1.42346,-2.10079 -0.1614,-0.55827 0.78581,-1.61396 -0.12965,-3.14854 m -6.503456,1.03452 c 0,0 -0.674687,-0.69056 -1.17475,-1.00542 -0.248708,0.46832 -0.425979,0.97632 -0.513291,1.50019 -0.156105,0.92075 0,2.22779 0.36777,3.20146 0.05821,0.15081 0.275167,0.127 0.29898,-0.0317 0.3175,-2.09286 1.021291,-3.66448 1.021291,-3.66448"
|
||||
style="fill:#e2a610;stroke-width:0.264583"
|
||||
id="path2-6-6" />
|
||||
<path
|
||||
d="m 90.540009,114.68528 c 0,0 -8.252354,0.89164 -11.975042,8.05656 -3.722687,7.16492 -0.558271,11.50937 2.791354,13.09158 3.349626,1.58221 11.789834,2.14048 17.279938,0.83873 5.490101,-1.30175 6.863291,-4.0005 6.606641,-6.60664 -0.37306,-3.80471 -3.90789,-6.14363 -3.90789,-6.14363 0,0 0.14023,-4.699 -3.50573,-7.74964 -3.235854,-2.70934 -7.289271,-1.48696 -7.289271,-1.48696"
|
||||
style="fill:#ffca28;stroke-width:0.264583"
|
||||
id="path3-0-1" />
|
||||
<path
|
||||
d="m 95.754947,113.04486 c 2.233083,0.7276 2.727854,2.74638 2.566458,3.29671 -0.193146,0.64558 -2.667,-1.86796 -6.344708,-1.71715 -1.285875,0.0529 -0.912813,-0.73554 -0.3175,-1.19062 0.785812,-0.60061 2.106083,-1.03452 4.09575,-0.38894"
|
||||
style="fill:#6d4c41;stroke-width:0.264583"
|
||||
id="path6-6-2" />
|
||||
<path
|
||||
d="m 95.754947,113.04486 c 2.233083,0.7276 2.727854,2.74638 2.566458,3.29671 -0.193146,0.64558 -2.667,-1.86796 -6.344708,-1.71715 -1.285875,0.0529 -0.912813,-0.73554 -0.3175,-1.19062 0.785812,-0.60061 2.106083,-1.03452 4.09575,-0.38894"
|
||||
style="fill:#6b4b46;stroke-width:0.264583"
|
||||
id="path7-2-9" />
|
||||
<path
|
||||
d="m 99.676072,120.16215 c 0.280458,-0.19314 1.222378,0.14023 1.486958,1.98438 0.12965,0.90223 0.16933,1.77535 0.16933,1.77535 0,0 -1.11125,-0.99748 -1.479017,-1.69862 -0.463021,-0.88636 -0.642938,-1.74361 -0.177271,-2.06111"
|
||||
style="fill:#e2a610;stroke-width:0.264583"
|
||||
id="path8-6-3" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:19.7556px;font-family:'Pirata One';-inkscape-font-specification:'Pirata One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:start;letter-spacing:-0.529167px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;stroke-width:0.264583"
|
||||
x="125.45235"
|
||||
y="92.696564"
|
||||
id="text4-9-1"
|
||||
transform="rotate(20.578693)"><tspan
|
||||
id="tspan4-2-9"
|
||||
style="font-size:19.7556px;fill:#4d4d4d;stroke-width:0.264583"
|
||||
x="125.45235"
|
||||
y="92.696564">$</tspan></text>
|
||||
</g>
|
||||
<g
|
||||
id="layer2"
|
||||
transform="translate(-1.4293676,48.496402)">
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:17.6389px;text-align:start;letter-spacing:-0.529167px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;stroke-width:0.264583"
|
||||
x="57.635151"
|
||||
y="55.655094"
|
||||
id="text1"><tspan
|
||||
id="tspan1"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:17.6389px;font-family:'Pirata One';-inkscape-font-specification:'Pirata One, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:-0.529167px;fill:#4d4d4d;stroke:none;stroke-width:0.264583"
|
||||
x="57.635151"
|
||||
y="55.655094">pendSparrow</tspan></text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
Reference in New Issue
Block a user