From 9aacaaf079373f8bc25f0533d7f6218e691c5de7 Mon Sep 17 00:00:00 2001
From: pennae <github@quasiparticle.net>
Date: Sat, 23 Jul 2022 22:41:42 +0200
Subject: make the main settings ui a bit nicer

---
 web/index.html | 37 ++++++++++++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 7 deletions(-)

(limited to 'web/index.html')

diff --git a/web/index.html b/web/index.html
index dd60e7d..d3291f0 100644
--- a/web/index.html
+++ b/web/index.html
@@ -47,6 +47,13 @@
 				margin-left: 1em;
 			}
 
+			.dialog input {
+				margin: 0.5em;
+			}
+			.dialog input[type=submit] {
+				margin: 0.5em 25%;
+			}
+
 			hr {
 				width: 100%;
 			}
@@ -148,6 +155,7 @@
 		<template id="tpl-desktop-signin">
 			<div class="container dialog">
 				<credentials-form submit-text="sign in"></credentials-form>
+				<hr>
 				<div>
 					<a href="#/signup" class="_signup">sign up</a> |
 					<a href="#/reset-password" class="_reset">reset password</a>
@@ -257,20 +265,35 @@
 
 		<template id="tpl-desktop-settings-main">
 			<style>
+				#frm-avatar input {
+					vertical-align: top;
+					margin-left: 1em;
+				}
+
 				#avatar-img {
 					max-width: 200px;
 					max-height: 200px;
 				}
+
+				h2 {
+					display: inline;
+				}
+
+				h2:empty::before {
+					color: #888;
+					content: "(no name set)";
+				}
+
+				form {
+					margin: 1em 0;
+				}
 			</style>
+			<h2 id="name"></h2>
+			<a href="" class="_change-name"><small>change</small></a>
 			<form id="frm-avatar">
 				<img id="avatar-img">
-				<input type="file" accept="image/*" name="avatar">
-				<input type="submit" value="save">
-			</form>
-			<form id="frm-name">
-				<label for="name">user name:</label>
-				<input type="text" id="name" name="name" maxlength="256">
-				<input type="submit" value="save">
+				<input type="file" accept="image/*" name="avatar" hidden>
+				<input type="submit" value="change avatar">
 			</form>
 			<table id="clients">
 				<thead>
-- 
cgit v1.2.3