git.shiar.nl
/
sheet.git
/ commitdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
| commitdiff |
tree
raw
|
patch
|
inline
| side by side (parent:
4ff4d21
)
word edit: dynamically aligned form styling (emulate table)
author
Mischa POSLAWSKY
<perl@shiar.org>
Tue, 26 May 2020 07:24:43 +0000
(09:24 +0200)
committer
Mischa POSLAWSKY
<perl@shiar.org>
Sat, 6 Jun 2020 01:49:20 +0000
(
03:49
+0200)
writer.plp
patch
|
blob
|
history
diff --git
a/writer.plp
b/writer.plp
index 9c74b0a8f96a29354fcf828e10da8c6fbfa44ed2..9d67520bdd1230d6d14412d3c009986ace370cb1 100644
(file)
--- a/
writer.plp
+++ b/
writer.plp
@@
-6,27
+6,39
@@
Html({
nocache => 1,
raw => <<'EOT',
<style>
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;
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;
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;
max-width: 300px;
- display: block;
-}
-dd input ~ button {
- margin-left: -5em;
}
ul.popup {
}
ul.popup {
@@
-44,16
+56,29
@@
ul.popup {
border: 1px solid #CCC;
}
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>
}
</style>
@@
-199,25
+224,27
@@
my $title = $row->{id} ? "entry <small>#$row->{id}</small>" : 'new entry';
:>
<h1>Words <:= $title :></h1>
:>
<h1>Words <:= $title :></h1>
+<div class="inline">
+
<form action="?" method="post">
<input id="id" name="id" value="<:= $row->{id} // '' :>" type="hidden" />
<form action="?" method="post">
<input id="id" name="id" value="<:= $row->{id} // '' :>" type="hidden" />
-<
d
l>
+<
u
l>
<:
for my $col (pairs @wordcols) {
my $val = $row->{$col->key} // '';
$val = '{'.join(',', map {s/,/\\,/gr} @{$val}).'}' if ref $val eq 'ARRAY';
<:
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);
$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" :
();
$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
>';
}
:>
}
:>
-</
d
l>
+</
u
l>
<p>
<input type="submit" value="Save" />
<input type="submit" value="New" formaction="/writer?copy=cat" />
<p>
<input type="submit" value="Save" />
<input type="submit" value="New" formaction="/writer?copy=cat" />
@@
-225,9
+252,9
@@
for my $col (pairs @wordcols) {
</form>
<:
</form>
<:
-$row->{id} or exit;
+if ($row->{id}) {
:>
:>
-<section>
+<section
id="nav"
>
<h2>Hierarchy</h2>
<:
<h2>Hierarchy</h2>
<:
@@
-249,3
+276,7
@@
while (my $ref = $children->hash) {
</form></li>
</ul>
</section>
</form></li>
</ul>
</section>
+<:
+}
+:>
+</div>