feat(ads): banner message editor — top help aside + multi-line fields
CI / changes (pull_request) Successful in 3s
CI / unit (pull_request) Successful in 10s
CI / integration (pull_request) Successful in 14s
CI / ui (pull_request) Successful in 49s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m10s
CI / changes (pull_request) Successful in 3s
CI / unit (pull_request) Successful in 10s
CI / integration (pull_request) Successful in 14s
CI / ui (pull_request) Successful in 49s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m10s
Admin campaign editor polish: - move the link-formatting help aside to the top of the Messages section, beside the intro note (~40% width), so it no longer drops below and stretches the form fields. - make the English/Russian message fields 3-row, vertically resizable textareas (was single-line inputs) so long text wraps instead of scrolling off to the right. The strip is white-space:nowrap, so a stray newline collapses to a space on display.
This commit is contained in:
@@ -86,13 +86,13 @@ h1 { font-size: 1.4rem; margin: 0 0 0.4rem; }
|
|||||||
font: inherit;
|
font: inherit;
|
||||||
}
|
}
|
||||||
.form textarea { min-height: 4rem; resize: vertical; }
|
.form textarea { min-height: 4rem; resize: vertical; }
|
||||||
/* A form beside a static help aside (e.g. message-formatting hints). The form keeps its
|
/* A static help aside (e.g. message-formatting hints) beside an intro note at the top of a
|
||||||
own max-width; the aside fills the remainder and wraps below on a narrow viewport. */
|
section: the note fills the row, the aside takes ~40% and both wrap on a narrow viewport. */
|
||||||
.form-help { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
|
.help-top { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin: 0.2rem 0 0.6rem; }
|
||||||
|
.help-top .note { flex: 1 1 16rem; margin: 0; }
|
||||||
.help {
|
.help {
|
||||||
flex: 1 1 16rem;
|
flex: 0 1 40%;
|
||||||
min-width: 14rem;
|
min-width: 16rem;
|
||||||
max-width: 30rem;
|
|
||||||
background: var(--panel-hi);
|
background: var(--panel-hi);
|
||||||
border: 1px solid var(--line);
|
border: 1px solid var(--line);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
|||||||
@@ -21,12 +21,21 @@
|
|||||||
{{end}}
|
{{end}}
|
||||||
</section>
|
</section>
|
||||||
<section class="panel"><h2>Messages</h2>
|
<section class="panel"><h2>Messages</h2>
|
||||||
|
<div class="help-top">
|
||||||
<p class="note">Each message must be filled in both languages; the viewer sees the variant for the bot they play through. The messages of a campaign share its show weight, rotating in this order.</p>
|
<p class="note">Each message must be filled in both languages; the viewer sees the variant for the bot they play through. The messages of a campaign share its show weight, rotating in this order.</p>
|
||||||
|
<aside class="help">
|
||||||
|
<h4>Formatting</h4>
|
||||||
|
<p>Plain text is shown as-is (any HTML is escaped).</p>
|
||||||
|
<p>Add a link with markdown — <code>[visible text](https://example.com)</code> — which renders as the linked <em>visible text</em>.</p>
|
||||||
|
<p>Only <code>https://</code>, <code>http://</code> and root-relative <code>/path</code> targets become links; any other scheme (e.g. <code>javascript:</code>, <code>ftp:</code>) is dropped and shown as plain text.</p>
|
||||||
|
<p>Keep it short: an over-long line scrolls in the strip; the same formatting applies when editing a message above.</p>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
{{range .Messages}}
|
{{range .Messages}}
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<form class="form col" method="post" action="/_gm/banners/{{$.Data.ID}}/messages/{{.ID}}">
|
<form class="form col" method="post" action="/_gm/banners/{{$.Data.ID}}/messages/{{.ID}}">
|
||||||
<label>English <input type="text" name="body_en" value="{{.BodyEn}}" maxlength="500" required></label>
|
<label>English <textarea name="body_en" rows="3" maxlength="500" required>{{.BodyEn}}</textarea></label>
|
||||||
<label>Russian <input type="text" name="body_ru" value="{{.BodyRu}}" maxlength="500" required></label>
|
<label>Russian <textarea name="body_ru" rows="3" maxlength="500" required>{{.BodyRu}}</textarea></label>
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<button type="submit">Save</button>
|
<button type="submit">Save</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -39,20 +48,11 @@
|
|||||||
</div>
|
</div>
|
||||||
{{else}}<p class="note">no messages yet</p>{{end}}
|
{{else}}<p class="note">no messages yet</p>{{end}}
|
||||||
<h3>Add message</h3>
|
<h3>Add message</h3>
|
||||||
<div class="form-help">
|
|
||||||
<form class="form col" method="post" action="/_gm/banners/{{.ID}}/messages">
|
<form class="form col" method="post" action="/_gm/banners/{{.ID}}/messages">
|
||||||
<label>English <input type="text" name="body_en" maxlength="500" required></label>
|
<label>English <textarea name="body_en" rows="3" maxlength="500" required></textarea></label>
|
||||||
<label>Russian <input type="text" name="body_ru" maxlength="500" required></label>
|
<label>Russian <textarea name="body_ru" rows="3" maxlength="500" required></textarea></label>
|
||||||
<div><button type="submit">Add message</button></div>
|
<div><button type="submit">Add message</button></div>
|
||||||
</form>
|
</form>
|
||||||
<aside class="help">
|
|
||||||
<h4>Formatting</h4>
|
|
||||||
<p>Plain text is shown as-is (any HTML is escaped).</p>
|
|
||||||
<p>Add a link with markdown — <code>[visible text](https://example.com)</code> — which renders as the linked <em>visible text</em>.</p>
|
|
||||||
<p>Only <code>https://</code>, <code>http://</code> and root-relative <code>/path</code> targets become links; any other scheme (e.g. <code>javascript:</code>, <code>ftp:</code>) is dropped and shown as plain text.</p>
|
|
||||||
<p>Keep it short: an over-long line scrolls in the strip. The same formatting applies when editing a message above.</p>
|
|
||||||
</aside>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{- end}}
|
{{- end}}
|
||||||
|
|||||||
Reference in New Issue
Block a user