Change input field to be “Material-like”, as per design
This commit is contained in:
parent
1675ada70b
commit
c6eb1ef24e
26
po/ca.po
26
po/ca.po
|
@ -8,7 +8,7 @@ msgid ""
|
||||||
msgstr ""
|
msgstr ""
|
||||||
"Project-Id-Version: numerus\n"
|
"Project-Id-Version: numerus\n"
|
||||||
"Report-Msgid-Bugs-To: jordi@tandem.blog\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"
|
"PO-Revision-Date: 2023-01-18 17:08+0100\n"
|
||||||
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
|
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
|
||||||
"Language-Team: Catalan <ca@dodds.net>\n"
|
"Language-Team: Catalan <ca@dodds.net>\n"
|
||||||
|
@ -26,17 +26,17 @@ msgstr "Entrada"
|
||||||
msgid "Invalid user or password"
|
msgid "Invalid user or password"
|
||||||
msgstr "Nom d’usuari o contrasenya incorrectes"
|
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"
|
msgctxt "input"
|
||||||
msgid "Email"
|
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"
|
msgctxt "input"
|
||||||
msgid "Password"
|
msgid "Password"
|
||||||
msgstr "Contrasenya"
|
msgstr "Contrasenya"
|
||||||
|
|
||||||
#: web/template/login.html:17
|
#: web/template/login.html:21
|
||||||
msgctxt "action"
|
msgctxt "action"
|
||||||
msgid "Login"
|
msgid "Login"
|
||||||
msgstr "Entra"
|
msgstr "Entra"
|
||||||
|
@ -51,41 +51,41 @@ msgctxt "title"
|
||||||
msgid "User Access Data"
|
msgid "User Access Data"
|
||||||
msgstr "Dades accés usuari"
|
msgstr "Dades accés usuari"
|
||||||
|
|
||||||
#: web/template/profile.html:7
|
#: web/template/profile.html:9
|
||||||
msgctxt "input"
|
msgctxt "input"
|
||||||
msgid "User name"
|
msgid "User name"
|
||||||
msgstr "Nom d’usuari"
|
msgstr "Nom d’usuari"
|
||||||
|
|
||||||
#: web/template/profile.html:14
|
#: web/template/profile.html:18
|
||||||
msgctxt "title"
|
msgctxt "title"
|
||||||
msgid "Password Change"
|
msgid "Password Change"
|
||||||
msgstr "Canvi contrasenya"
|
msgstr "Canvi contrasenya"
|
||||||
|
|
||||||
#: web/template/profile.html:19
|
#: web/template/profile.html:27
|
||||||
msgctxt "input"
|
msgctxt "input"
|
||||||
msgid "Password Confirmation"
|
msgid "Password Confirmation"
|
||||||
msgstr "Confirmació contrasenya"
|
msgstr "Confirmació contrasenya"
|
||||||
|
|
||||||
#: web/template/profile.html:23
|
#: web/template/profile.html:31
|
||||||
msgctxt "input"
|
msgctxt "input"
|
||||||
msgid "Language"
|
msgid "Language"
|
||||||
msgstr "Idioma"
|
msgstr "Idioma"
|
||||||
|
|
||||||
#: web/template/profile.html:25
|
#: web/template/profile.html:33
|
||||||
msgctxt "language option"
|
msgctxt "language option"
|
||||||
msgid "Automatic"
|
msgid "Automatic"
|
||||||
msgstr "Automàtic"
|
msgstr "Automàtic"
|
||||||
|
|
||||||
#: web/template/profile.html:30
|
#: web/template/profile.html:38
|
||||||
msgctxt "action"
|
msgctxt "action"
|
||||||
msgid "Save changes"
|
msgid "Save changes"
|
||||||
msgstr "Desa canvis"
|
msgstr "Desa canvis"
|
||||||
|
|
||||||
#: web/template/app.html:15
|
#: web/template/app.html:16
|
||||||
msgid "Account"
|
msgid "Account"
|
||||||
msgstr "Compte"
|
msgstr "Compte"
|
||||||
|
|
||||||
#: web/template/app.html:16
|
#: web/template/app.html:19
|
||||||
msgctxt "action"
|
msgctxt "action"
|
||||||
msgid "Logout"
|
msgid "Logout"
|
||||||
msgstr "Surt"
|
msgstr "Surt"
|
||||||
|
|
26
po/es.po
26
po/es.po
|
@ -7,7 +7,7 @@ msgid ""
|
||||||
msgstr ""
|
msgstr ""
|
||||||
"Project-Id-Version: numerus\n"
|
"Project-Id-Version: numerus\n"
|
||||||
"Report-Msgid-Bugs-To: jordi@tandem.blog\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"
|
"PO-Revision-Date: 2023-01-18 17:45+0100\n"
|
||||||
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
|
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
|
||||||
"Language-Team: Spanish <es@tp.org.es>\n"
|
"Language-Team: Spanish <es@tp.org.es>\n"
|
||||||
|
@ -26,17 +26,17 @@ msgstr "Entrada"
|
||||||
msgid "Invalid user or password"
|
msgid "Invalid user or password"
|
||||||
msgstr "Nombre de usuario o contraseña inválido"
|
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"
|
msgctxt "input"
|
||||||
msgid "Email"
|
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"
|
msgctxt "input"
|
||||||
msgid "Password"
|
msgid "Password"
|
||||||
msgstr "Contraseña"
|
msgstr "Contraseña"
|
||||||
|
|
||||||
#: web/template/login.html:17
|
#: web/template/login.html:21
|
||||||
msgctxt "action"
|
msgctxt "action"
|
||||||
msgid "Login"
|
msgid "Login"
|
||||||
msgstr "Entrar"
|
msgstr "Entrar"
|
||||||
|
@ -51,41 +51,41 @@ msgctxt "title"
|
||||||
msgid "User Access Data"
|
msgid "User Access Data"
|
||||||
msgstr "Datos acceso usuario"
|
msgstr "Datos acceso usuario"
|
||||||
|
|
||||||
#: web/template/profile.html:7
|
#: web/template/profile.html:9
|
||||||
msgctxt "input"
|
msgctxt "input"
|
||||||
msgid "User name"
|
msgid "User name"
|
||||||
msgstr "Nombre de usuario"
|
msgstr "Nombre de usuario"
|
||||||
|
|
||||||
#: web/template/profile.html:14
|
#: web/template/profile.html:18
|
||||||
msgctxt "title"
|
msgctxt "title"
|
||||||
msgid "Password Change"
|
msgid "Password Change"
|
||||||
msgstr "Cambio de contraseña"
|
msgstr "Cambio de contraseña"
|
||||||
|
|
||||||
#: web/template/profile.html:19
|
#: web/template/profile.html:27
|
||||||
msgctxt "input"
|
msgctxt "input"
|
||||||
msgid "Password Confirmation"
|
msgid "Password Confirmation"
|
||||||
msgstr "Confirmación contrasenya"
|
msgstr "Confirmación contrasenya"
|
||||||
|
|
||||||
#: web/template/profile.html:23
|
#: web/template/profile.html:31
|
||||||
msgctxt "input"
|
msgctxt "input"
|
||||||
msgid "Language"
|
msgid "Language"
|
||||||
msgstr "Idioma"
|
msgstr "Idioma"
|
||||||
|
|
||||||
#: web/template/profile.html:25
|
#: web/template/profile.html:33
|
||||||
msgctxt "language option"
|
msgctxt "language option"
|
||||||
msgid "Automatic"
|
msgid "Automatic"
|
||||||
msgstr "Automático"
|
msgstr "Automático"
|
||||||
|
|
||||||
#: web/template/profile.html:30
|
#: web/template/profile.html:38
|
||||||
msgctxt "action"
|
msgctxt "action"
|
||||||
msgid "Save changes"
|
msgid "Save changes"
|
||||||
msgstr "Guardar cambios"
|
msgstr "Guardar cambios"
|
||||||
|
|
||||||
#: web/template/app.html:15
|
#: web/template/app.html:16
|
||||||
msgid "Account"
|
msgid "Account"
|
||||||
msgstr "Cuenta"
|
msgstr "Cuenta"
|
||||||
|
|
||||||
#: web/template/app.html:16
|
#: web/template/app.html:19
|
||||||
msgctxt "action"
|
msgctxt "action"
|
||||||
msgid "Logout"
|
msgid "Logout"
|
||||||
msgstr "Salir"
|
msgstr "Salir"
|
||||||
|
|
|
@ -241,6 +241,45 @@ main {
|
||||||
padding: 3rem;
|
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 {
|
.relative {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,11 +8,15 @@
|
||||||
<section id="login">
|
<section id="login">
|
||||||
<h2>{{( pgettext "Login" "title" )}}</h2>
|
<h2>{{( pgettext "Login" "title" )}}</h2>
|
||||||
<form method="POST" action="/login">
|
<form method="POST" action="/login">
|
||||||
|
<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>
|
<label for="user_email">{{( pgettext "Email" "input" )}}</label>
|
||||||
<input id="user_email" type="email" required autofocus name="email" autocapitalize="none" value="{{ .Email }}">
|
</input>
|
||||||
|
|
||||||
|
<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>
|
<label for="user_password">{{( pgettext "Password" "input" )}}</label>
|
||||||
<input id="user_password" type="password" required name="password" autocomplete="current-password" value="{{ .Password }}">
|
</div>
|
||||||
|
|
||||||
<button type="submit">{{( pgettext "Login" "action" )}}</button>
|
<button type="submit">{{( pgettext "Login" "action" )}}</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -4,20 +4,28 @@
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>{{( pgettext "User Access Data" "title" )}}</legend>
|
<legend>{{( pgettext "User Access Data" "title" )}}</legend>
|
||||||
|
|
||||||
|
<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>
|
<label for="name">{{( pgettext "User name" "input" )}}</label>
|
||||||
<input type="text" name="name" id="name" required="required" value="{{ .Name }}">
|
</div>
|
||||||
|
|
||||||
|
<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>
|
<label for="email">{{( pgettext "Email" "input" )}}</label>
|
||||||
<input type="email" name="email" id="email" required="required" value="{{ .Email }}">
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>{{( pgettext "Password Change" "title" )}}</legend>
|
<legend>{{( pgettext "Password Change" "title" )}}</legend>
|
||||||
|
|
||||||
|
<div class="input">
|
||||||
|
<input type="password" name="password" id="password" value="{{ .Password }}" placeholder="{{( pgettext "Password" "input" )}}">
|
||||||
<label for="password">{{( pgettext "Password" "input" )}}</label>
|
<label for="password">{{( pgettext "Password" "input" )}}</label>
|
||||||
<input type="password" name="password" id="password" value="{{ .Password }}">
|
</div>
|
||||||
|
|
||||||
|
<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>
|
<label for="password_confirm">{{( pgettext "Password Confirmation" "input" )}}</label>
|
||||||
<input type="password" name="password_confirm" id="password_confirm" value="{{ .PasswordConfirm }}">
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<label for="language">{{( pgettext "Language" "input" )}}</label>
|
<label for="language">{{( pgettext "Language" "input" )}}</label>
|
||||||
|
|
Loading…
Reference in New Issue