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

This commit is contained in:
jordi fita mas 2023-01-23 00:41:54 +01:00
parent 1675ada70b
commit c6eb1ef24e
5 changed files with 89 additions and 38 deletions

View File

@ -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 dusuari 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 dusuari"
#: 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"

View File

@ -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"

View File

@ -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;
}

View File

@ -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>
<input id="user_email" type="email" required autofocus name="email" autocapitalize="none" value="{{ .Email }}">
<div class="input">
<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>
<input id="user_password" type="password" required name="password" autocomplete="current-password" value="{{ .Password }}">
<div class="input">
<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>

View File

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