Add template for InputField of type textarea

pkg/products.go

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

web/static/numerus.css

@@ -304,7 +304,7 @@ main {
     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);
     border: 1px solid var(--numerus--color--black);
     border-radius: 0;
@@ -320,7 +320,7 @@ input.width-2x {
     max-width: 30rem;
 }
 
-.input input::placeholder {
+.input input::placeholder, .input textarea::placeholder {
     color: transparent;
 }
 
@@ -330,6 +330,7 @@ input.width-2x {
     pointer-events: none;
 }
 
+.input textarea:not(:focus):placeholder-shown ~ label,
 .input input:placeholder-shown ~ label {
     font-size: 1em;
     background-color: initial;
@@ -342,11 +343,13 @@ input.width-2x {
     color: var(--numerus--color--red);
 }
 
+[lang="en"] textarea:not([required]) + label::after,
 [lang="en"] input:not([required]) + label::after,
 [lang="en"] select:not([required]) + label::after {
     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"] select:not([required]) + label::after, [lang="es"] select:not([required]) + label::after {
     content: " (opcional)"

web/template/form.gohtml

@@ -1,8 +1,15 @@
 {{ define "input-field" -}}
     <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"
                     {{- range $attribute := .Attributes }} {{$attribute}} {{ end }}
                     {{ if .Required }}required="required"{{ end }} value="{{ .Val }}" placeholder="{{ .Label }}">
+        {{ end }}
         <label for="{{ .Name }}-field">{{ .Label }}</label>
         {{- if .Errors }}
             <ul>