tandem
/
numerus
2
0
Fork 0
Code Issues 39 Pull Requests Packages Projects 1 Releases 1 Wiki Activity

Add template for InputField of type textarea

This commit is contained in:
jordi fita mas 2023-02-07 15:28:22 +01:00
parent 043bd9cc3f
commit 73ca559209
3 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/products.go
View File

@ -152,7 +152,7 @@ func newProductForm(ctx context.Context, conn *Conn, locale *Locale, company *Co
Description: &InputField{ Description: &InputField{
Name: "description", Name: "description",
Label: pgettext("input", "Description", locale), Label: pgettext("input", "Description", locale),
Type: "text", Type: "textarea",
}, },
Price: &InputField{ Price: &InputField{
Name: "price", Name: "price",

7
web/static/numerus.css
View File

@ -304,7 +304,7 @@ main {
margin-top: 2rem; margin-top: 2rem;
} }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select { input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea {
background-color: var(--numerus--background-color); background-color: var(--numerus--background-color);
border: 1px solid var(--numerus--color--black); border: 1px solid var(--numerus--color--black);
border-radius: 0; border-radius: 0;
@ -320,7 +320,7 @@ input.width-2x {
max-width: 30rem; max-width: 30rem;
} }
.input input::placeholder { .input input::placeholder, .input textarea::placeholder {
color: transparent; color: transparent;
} }
@ -330,6 +330,7 @@ input.width-2x {
pointer-events: none; pointer-events: none;
} }
.input textarea:not(:focus):placeholder-shown ~ label,
.input input:placeholder-shown ~ label { .input input:placeholder-shown ~ label {
font-size: 1em; font-size: 1em;
background-color: initial; background-color: initial;
@ -342,11 +343,13 @@ input.width-2x {
color: var(--numerus--color--red); color: var(--numerus--color--red);
} }
[lang="en"] textarea:not([required]) + label::after,
[lang="en"] input:not([required]) + label::after, [lang="en"] input:not([required]) + label::after,
[lang="en"] select:not([required]) + label::after { [lang="en"] select:not([required]) + label::after {
content: " (optional)" content: " (optional)"
} }
[lang="ca"] textarea:not([required]) + label::after, [lang="es"] textarea:not([required]) + label::after,
[lang="ca"] input:not([required]) + label::after, [lang="es"] input:not([required]) + label::after, [lang="ca"] input:not([required]) + label::after, [lang="es"] input:not([required]) + label::after,
[lang="ca"] select:not([required]) + label::after, [lang="es"] select:not([required]) + label::after { [lang="ca"] select:not([required]) + label::after, [lang="es"] select:not([required]) + label::after {
content: " (opcional)" content: " (opcional)"

7
web/template/form.gohtml
View File

@ -1,8 +1,15 @@
{{ define "input-field" -}} {{ define "input-field" -}}
<div class="input {{ if .Errors }}has-errors{{ end }}"> <div class="input {{ if .Errors }}has-errors{{ end }}">
{{ if eq .Type "textarea" }}
<textarea name="{{ .Name }}" id="{{ .Name }}-field"
{{- range $attribute := .Attributes }} {{$attribute}} {{ end }}
{{ if .Required }}required="required"{{ end }} placeholder="{{ .Label }}"
>{{ .Val }}</textarea>
{{ else }}
<input type="{{ .Type }}" name="{{ .Name }}" id="{{ .Name }}-field" <input type="{{ .Type }}" name="{{ .Name }}" id="{{ .Name }}-field"
{{- range $attribute := .Attributes }} {{$attribute}} {{ end }} {{- range $attribute := .Attributes }} {{$attribute}} {{ end }}
{{ if .Required }}required="required"{{ end }} value="{{ .Val }}" placeholder="{{ .Label }}"> {{ if .Required }}required="required"{{ end }} value="{{ .Val }}" placeholder="{{ .Label }}">
{{ end }}
<label for="{{ .Name }}-field">{{ .Label }}</label> <label for="{{ .Name }}-field">{{ .Label }}</label>
{{- if .Errors }} {{- if .Errors }}
<ul> <ul>