nocache => 1,
raw => <<'EOT',
<style>
-dd > input {
+dl {
+ display: inline-grid;
+ grid: auto-flow / min-content repeat(10, auto);
+}
+
+form > ul {
+ display: table;
+ border-spacing: 0 2px;
+}
+form > ul li {
+ display: table-row;
+}
+form > ul li > * {
+ display: table-cell;
+ padding-right: .5em;
+}
+form > ul li > label {
+ /* th */
+ text-align: right;
+}
+form > ul li > label + * {
+ /* td */
width: 32em;
- max-width: 100%;
- padding: 1ex;
- font-family: monospace;
}
-dl > dt, dl > dd {
- float: none;
- display: inline-block;
+
+form > ul li > p input {
box-sizing: border-box;
- width: 50%;
- margin: 0;
- line-height: 4ex;
- vertical-align: text-top;
+ width: 100%;
+ padding: .4rem;
+ font-family: monospace;
}
-dd > img {
+form > ul li img {
max-width: 300px;
- display: block;
-}
-dd input ~ button {
- margin-left: -5em;
}
ul.popup {
border: 1px solid #CCC;
}
-section {
- position: absolute;
- top: 7ex;
- right: 1em;
+h1 {
+ margin-bottom: 1ex;
}
-section > ul {
- margin-top: 1ex;
+.inline {
+ display: inline-flex;
+ align-items: start;
+ margin: 0 -1ex; /* inner gap */
}
-section > ul strong, section form {
- line-height: 2;
+.inline > * {
+ margin: 0 1ex;
+}
+.inline .inline {
+ display: flex;
+}
+
+#nav {
+ -margin-left: 1em; /* flex gap */
+}
+#nav > ul,
+#nav > ul strong,
+#nav form {
+ margin: 1ex 0;
+ display: inline-block;
}
</style>
:>
<h1>Words <:= $title :></h1>
+<div class="inline">
+
<form action="?" method="post">
<input id="id" name="id" value="<:= $row->{id} // '' :>" type="hidden" />
-<dl>
+<ul>
<:
for my $col (pairs @wordcols) {
my $val = $row->{$col->key} // '';
$val = '{'.join(',', map {s/,/\\,/gr} @{$val}).'}' if ref $val eq 'ARRAY';
- printf '<dt><label for="%s">%s</label></dt>'
- . '<dd><input id="%1$s" name="%1$s" value="%s" />',
+ printf '<li><label for="%s">%s</label><p><span class=inline>'
+ . '<input id="%1$s" name="%1$s" value="%s" />',
$col->key, $col->value, Entity($val);
- -e and printf ' <img src="/%s" alt="%s" />', $_, $row->{form} for
+ -e and printf '<img src="/%s" alt="%s" />', $_, $row->{form} for
$col->key eq 'source' ? "data/word/org/$row->{id}.jpg" :
$col->key eq 'thumb' ? "data/word/eng/$row->{form}.jpg" :
();
- say '</dd>';
+ say '</span></p></li>';
}
:>
-</dl>
+</ul>
<p>
<input type="submit" value="Save" />
<input type="submit" value="New" formaction="/writer?copy=cat" />
</form>
<:
-$row->{id} or exit;
+if ($row->{id}) {
:>
-<section>
+<section id="nav">
<h2>Hierarchy</h2>
<:
</form></li>
</ul>
</section>
+<:
+}
+:>
+</div>