feat(ads): client banner rotation, fade UX & live toggle (PR2) #71
@@ -86,6 +86,22 @@ h1 { font-size: 1.4rem; margin: 0 0 0.4rem; }
|
||||
font: inherit;
|
||||
}
|
||||
.form textarea { min-height: 4rem; resize: vertical; }
|
||||
/* A form beside a static help aside (e.g. message-formatting hints). The form keeps its
|
||||
own max-width; the aside fills the remainder and wraps below on a narrow viewport. */
|
||||
.form-help { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
|
||||
.help {
|
||||
flex: 1 1 16rem;
|
||||
min-width: 14rem;
|
||||
max-width: 30rem;
|
||||
background: var(--panel-hi);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.8rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--ink-dim);
|
||||
}
|
||||
.help h4 { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--ink); }
|
||||
.help p { margin: 0.35rem 0; }
|
||||
button {
|
||||
background: var(--accent);
|
||||
color: #06121f;
|
||||
|
||||
@@ -39,11 +39,20 @@
|
||||
</div>
|
||||
{{else}}<p class="note">no messages yet</p>{{end}}
|
||||
<h3>Add message</h3>
|
||||
<div class="form-help">
|
||||
<form class="form col" method="post" action="/_gm/banners/{{.ID}}/messages">
|
||||
<label>English <input type="text" name="body_en" maxlength="500" required></label>
|
||||
<label>Russian <input type="text" name="body_ru" maxlength="500" required></label>
|
||||
<div><button type="submit">Add message</button></div>
|
||||
</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>
|
||||
{{end}}
|
||||
{{- end}}
|
||||
|
||||
Reference in New Issue
Block a user