From 73ca559209e8fda123bda555e2640b52cbb651b6 Mon Sep 17 00:00:00 2001
From: jordi fita mas <jordi@tandem.blog>
Date: Tue, 7 Feb 2023 15:28:22 +0100
Subject: [PATCH] Add template for InputField of type textarea

---
 pkg/products.go          |  2 +-
 web/static/numerus.css   |  7 +++++--
 web/template/form.gohtml | 13 ++++++++++---
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/pkg/products.go b/pkg/products.go
index 3c50c70..7877ed4 100644
--- a/pkg/products.go
+++ b/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",
diff --git a/web/static/numerus.css b/web/static/numerus.css
index 0240b1e..88f1b23 100644
--- a/web/static/numerus.css
+++ b/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)"
diff --git a/web/template/form.gohtml b/web/template/form.gohtml
index 88c8671..476afe6 100644
--- a/web/template/form.gohtml
+++ b/web/template/form.gohtml
@@ -1,8 +1,15 @@
 {{ define "input-field" -}}
     <div class="input {{ if .Errors }}has-errors{{ end }}">
-        <input type="{{ .Type }}" name="{{ .Name }}" id="{{ .Name }}-field"
-                {{- range $attribute := .Attributes }} {{$attribute}} {{ end }}
-                {{ if .Required }}required="required"{{ end }} value="{{ .Val }}" placeholder="{{ .Label }}">
+        {{ 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>