diff --git a/src/web/contact.rs b/src/web/contact.rs index d996969..c793b77 100644 --- a/src/web/contact.rs +++ b/src/web/contact.rs @@ -261,7 +261,11 @@ mod get { input type="button" value="Add" x-on:click="addresses.push({ label: new_label, value: new_address }); new_label = ''; new_address = ''"; } } - textarea name="text_body" { (text_body) } + .grow-wrap data-replicated-value=(text_body) { + textarea name="text_body" + onInput="this.parentNode.dataset.replicatedValue = this.value" + { (text_body) } + } } })) } diff --git a/static/contact.css b/static/contact.css index 329374e..5d7a40e 100644 --- a/static/contact.css +++ b/static/contact.css @@ -39,6 +39,47 @@ main { } } +#text_body { + margin-top: 1em; + + p+p { + margin-top: 0.5em; + } + + em { + font-style: italic; + } + + strong { + font-weight: bold; + } +} + +.grow-wrap { + display: grid; + + &::after { + content: attr(data-replicated-value) " "; + white-space: pre-wrap; + visibility: hidden; + } + + &>textarea { + resize: none; + overflow: hidden; + } + + &>textarea, + &::after { + /* Identical styling required!! */ + margin-top: 1em; + width: 100%; + + /* Place on top of each other */ + grid-area: 1 / 1 / 2 / 2; + } +} + .hint { font-size: small; }