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 ""
|
||||
"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"
|
||||
|
|
|
|||
26
po/es.po
26
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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue