Skip to content

Commit

Permalink
style: Update styling in settings page and layout files
Browse files Browse the repository at this point in the history
  • Loading branch information
wajeht committed Aug 14, 2024
1 parent 55c2ade commit 1232886
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/handler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function postNotificationHandler(req: Request, res: Response) {
export function getSettingsPageHandler(req: Request, res: Response) {
return res.render('settings.html', {
path: '/settings',
layout: '../layouts/auth.html',
layout: '../layouts/settings.html',
});
}

Expand Down
32 changes: 32 additions & 0 deletions src/views/layouts/settings.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!doctype html>
<html lang="en">

<%- include('../components/head.html') %>

<body style="display: flex; flex-direction: column; gap: 20px; min-height: 100vh;">

<%- include('../components/header.html') %>

<main style="flex: 1; display: flex; flex-direction: column; gap: 10px;">

<h2>Settings</h2>

<div style="display: grid; grid-template-columns: 15% 85%; flex: 1;">
<aside style="display: inline-block; border-right: dashed; height: 100%;">
<div style="display: flex; flex-direction: column; gap: 10px">
<a style="font-weight: <%= path === '/settings' ? 'bold' : 'normal' %>; <%= path === '/settings' ? 'text-decoration: underline' : null %>" href="/settings">Settings</a>
</div>
</aside>

<div style="display: inline-block; padding-left: 40px;">
<%- body %>
</div>

</div>

</main>

<%- include('../components/footer.html') %>

</body>
</html>
46 changes: 43 additions & 3 deletions src/views/pages/settings.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,44 @@
<div>
<h2>Settings</h2>
<p>Settings</p>
<div style="display: flex; flex-direction: column; gap: 20px; max-width: 100%;">

<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
<h2 style="margin: 0;">Settings</h2>
<span>settings</span>
</div>

<div style="display: flex; flex-direction: column; gap: 20px; max-width: 100%;">
<form
style="border-style: dashed; border-radius: 5px; padding: 20px; width: fit-content; display: flex; flex-direction: column; gap: 10px;"
action="#" method="POST">

<div>
<h3>Account</h3>
<p>Manage your account details.</p>
</div>

<div>
<label for="name">Username:</label>
<input type="text" id="username" name="username" required>
</div>

<div>
<label for="name">Email:</label>
<input type="text" id="email" name="email" required>
</div>

<button type="submit">Update</button>
</form>

<form
style="border-style: dashed; border-radius: 5px; padding: 20px; width: fit-content; display: flex; flex-direction: column; gap: 10px;"
action="#" method="POST">

<div>
<h3>Danger Zone</h3>
<p>The following actions are destructive and cannot be reversed.</p>
</div>

<button type="submit">Delete my account</button>
</form>
</div>

</div>

0 comments on commit 1232886

Please sign in to comment.