Change input field to be “Material-like”, as per design

po/ca.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: numerus\n"
 "Report-Msgid-Bugs-To: jordi@tandem.blog\n"
-"POT-Creation-Date: 2023-01-22 21:38+0100\n"
+"POT-Creation-Date: 2023-01-23 00:41+0100\n"
 "PO-Revision-Date: 2023-01-18 17:08+0100\n"
 "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
 "Language-Team: Catalan <ca@dodds.net>\n"
@@ -26,17 +26,17 @@ msgstr "Entrada"
 msgid "Invalid user or password"
 msgstr "Nom d’usuari o contrasenya incorrectes"
 
-#: web/template/login.html:11 web/template/profile.html:10
+#: web/template/login.html:13 web/template/profile.html:14
 msgctxt "input"
 msgid "Email"
-msgstr "Correu electrònic"
+msgstr "Correu-e"
 
-#: web/template/login.html:14 web/template/profile.html:16
+#: web/template/login.html:18 web/template/profile.html:22
 msgctxt "input"
 msgid "Password"
 msgstr "Contrasenya"
 
-#: web/template/login.html:17
+#: web/template/login.html:21
 msgctxt "action"
 msgid "Login"
 msgstr "Entra"
@@ -51,41 +51,41 @@ msgctxt "title"
 msgid "User Access Data"
 msgstr "Dades accés usuari"
 
-#: web/template/profile.html:7
+#: web/template/profile.html:9
 msgctxt "input"
 msgid "User name"
 msgstr "Nom d’usuari"
 
-#: web/template/profile.html:14
+#: web/template/profile.html:18
 msgctxt "title"
 msgid "Password Change"
 msgstr "Canvi contrasenya"
 
-#: web/template/profile.html:19
+#: web/template/profile.html:27
 msgctxt "input"
 msgid "Password Confirmation"
 msgstr "Confirmació contrasenya"
 
-#: web/template/profile.html:23
+#: web/template/profile.html:31
 msgctxt "input"
 msgid "Language"
 msgstr "Idioma"
 
-#: web/template/profile.html:25
+#: web/template/profile.html:33
 msgctxt "language option"
 msgid "Automatic"
 msgstr "Automàtic"
 
-#: web/template/profile.html:30
+#: web/template/profile.html:38
 msgctxt "action"
 msgid "Save changes"
 msgstr "Desa canvis"
 
-#: web/template/app.html:15
+#: web/template/app.html:16
 msgid "Account"
 msgstr "Compte"
 
-#: web/template/app.html:16
+#: web/template/app.html:19
 msgctxt "action"
 msgid "Logout"
 msgstr "Surt"

po/es.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: numerus\n"
 "Report-Msgid-Bugs-To: jordi@tandem.blog\n"
-"POT-Creation-Date: 2023-01-22 21:38+0100\n"
+"POT-Creation-Date: 2023-01-23 00:41+0100\n"
 "PO-Revision-Date: 2023-01-18 17:45+0100\n"
 "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
 "Language-Team: Spanish <es@tp.org.es>\n"
@@ -26,17 +26,17 @@ msgstr "Entrada"
 msgid "Invalid user or password"
 msgstr "Nombre de usuario o contraseña inválido"
 
-#: web/template/login.html:11 web/template/profile.html:10
+#: web/template/login.html:13 web/template/profile.html:14
 msgctxt "input"
 msgid "Email"
-msgstr "Correo electrónico"
+msgstr "Correo-e"
 
-#: web/template/login.html:14 web/template/profile.html:16
+#: web/template/login.html:18 web/template/profile.html:22
 msgctxt "input"
 msgid "Password"
 msgstr "Contraseña"
 
-#: web/template/login.html:17
+#: web/template/login.html:21
 msgctxt "action"
 msgid "Login"
 msgstr "Entrar"
@@ -51,41 +51,41 @@ msgctxt "title"
 msgid "User Access Data"
 msgstr "Datos acceso usuario"
 
-#: web/template/profile.html:7
+#: web/template/profile.html:9
 msgctxt "input"
 msgid "User name"
 msgstr "Nombre de usuario"
 
-#: web/template/profile.html:14
+#: web/template/profile.html:18
 msgctxt "title"
 msgid "Password Change"
 msgstr "Cambio de contraseña"
 
-#: web/template/profile.html:19
+#: web/template/profile.html:27
 msgctxt "input"
 msgid "Password Confirmation"
 msgstr "Confirmación contrasenya"
 
-#: web/template/profile.html:23
+#: web/template/profile.html:31
 msgctxt "input"
 msgid "Language"
 msgstr "Idioma"
 
-#: web/template/profile.html:25
+#: web/template/profile.html:33
 msgctxt "language option"
 msgid "Automatic"
 msgstr "Automático"
 
-#: web/template/profile.html:30
+#: web/template/profile.html:38
 msgctxt "action"
 msgid "Save changes"
 msgstr "Guardar cambios"
 
-#: web/template/app.html:15
+#: web/template/app.html:16
 msgid "Account"
 msgstr "Cuenta"
 
-#: web/template/app.html:16
+#: web/template/app.html:19
 msgctxt "action"
 msgid "Logout"
 msgstr "Salir"

web/static/numerus.css

@@ -241,6 +241,45 @@ main {
 	padding: 3rem;
 }
 
+.input {
+	position: relative;
+	display: inline-block;
+}
+
+input[type="text"], input[type="password"], input[type="email"], select {
+	background-color: var(--numerus--background-color);
+	border: 1px solid var(--numerus--color--black);
+	border-radius: 0;
+	padding: 1rem 2rem;
+	min-width: 30rem;
+}
+
+.input input::placeholder {
+	color: transparent;
+}
+
+.input label, .input input:focus ~ label {
+	position: absolute;
+	font-style: italic;
+	pointer-events: none;
+}
+
+.input input:placeholder-shown ~ label {
+	font-size: 1em;
+	background-color: initial;
+	left: 2rem;
+	top: 1rem;
+}
+
+.input label, .input input:focus ~ label {
+	background-color: var(--numerus--background-color);
+	top: -.9rem;
+	left: 1rem;
+	font-size: 0.8em;
+	padding: 0 .25rem;
+	transition: 0.2s;
+}
+
 .relative {
 	position: relative;
 }

web/template/login.html

@@ -8,11 +8,15 @@
 	<section id="login">
 		<h2>{{( pgettext "Login" "title" )}}</h2>
 		<form method="POST" action="/login">
-			<label for="user_email">{{( pgettext "Email" "input" )}}</label>
+			<div class="input">
-			<input id="user_email" type="email" required autofocus name="email" autocapitalize="none" value="{{ .Email }}">
+				<input id="user_email" type="email" required autofocus name="email" autocapitalize="none" value="{{ .Email }}" placeholder="{{( pgettext "Email" "input" )}}">
+				<label for="user_email">{{( pgettext "Email" "input" )}}</label>
+			</input>
 
-			<label for="user_password">{{( pgettext "Password" "input" )}}</label>
+			<div class="input">
-			<input id="user_password" type="password" required name="password" autocomplete="current-password" value="{{ .Password }}">
+				<input id="user_password" type="password" required name="password" autocomplete="current-password" value="{{ .Password }}" placeholder="{{( pgettext "Password" "input" )}}">
+				<label for="user_password">{{( pgettext "Password" "input" )}}</label>
+			</div>
 
 			<button type="submit">{{( pgettext "Login" "action" )}}</button>
 		</form>

web/template/profile.html

@@ -4,20 +4,28 @@
 				<fieldset>
 					<legend>{{( pgettext "User Access Data" "title" )}}</legend>
 
-					<label for="name">{{( pgettext "User name" "input" )}}</label>
+					<div class="input">
-					<input type="text" name="name" id="name" required="required" value="{{ .Name }}">
+						<input type="text" name="name" id="name" required="required" value="{{ .Name }}" placeholder="{{( pgettext "User name" "input" )}}">
+						<label for="name">{{( pgettext "User name" "input" )}}</label>
+					</div>
 
-					<label for="email">{{( pgettext "Email" "input" )}}</label>
+					<div class="input">
-					<input type="email" name="email" id="email" required="required" value="{{ .Email }}">
+						<input type="email" name="email" id="email" required="required" value="{{ .Email }}" placeholder="{{( pgettext "Email" "input" )}}">
+						<label for="email">{{( pgettext "Email" "input" )}}</label>
+					</div>
 				</fieldset>
 				<fieldset>
 					<legend>{{( pgettext "Password Change" "title" )}}</legend>
 
-					<label for="password">{{( pgettext "Password" "input" )}}</label>
+					<div class="input">
-					<input type="password" name="password" id="password" value="{{ .Password }}">
+						<input type="password" name="password" id="password" value="{{ .Password }}" placeholder="{{( pgettext "Password" "input" )}}">
+						<label for="password">{{( pgettext "Password" "input" )}}</label>
+					</div>
 
-					<label for="password_confirm">{{( pgettext "Password Confirmation" "input" )}}</label>
+					<div class="input">
-					<input type="password" name="password_confirm" id="password_confirm" value="{{ .PasswordConfirm }}">
+						<input type="password" name="password_confirm" id="password_confirm" value="{{ .PasswordConfirm }}" placeholder="{{( pgettext "Password Confirmation" "input" )}}">
+						<label for="password_confirm">{{( pgettext "Password Confirmation" "input" )}}</label>
+					</div>
 				</fieldset>
 
 				<label for="language">{{( pgettext "Language" "input" )}}</label>