Diff options
| author | Bryce Kwon <bryce@brycekwon.com> | |
|---|---|---|
| committer | Bryce Kwon <bryce@brycekwon.com> | |
| commit | ||
| parent | ||
| tree | ||
| download | ||
Tidy the diff and stat options panel
Its caption sat above the box, each select took its own width, and the
reload button hung indented under them. The caption is now the panel's
header strip, the selects and the button share one column at the width
of the widest select, and the labels lose their colons to match the
commit details.
| -rw-r--r-- | assets/cgit.css | 22 | |
| -rw-r--r-- | source/ui-diff.c | 8 | |
| -rw-r--r-- | source/ui-stats.c | 6 | |
| -rwxr-xr-x | tests/t0005-markup.sh | 4 |
4 files changed, 22 insertions, 18 deletions
diff --git a/assets/cgit.css b/assets/cgit.css index a9ae84e..ac56513 100644 --- a/assets/cgit.css +++ b/assets/cgit.css @@ -814,28 +814,32 @@ div#cgit table.commit-info { div#cgit div.cgit-panel { float: right; - margin-top: 1.5em; + margin: 1.5em 0 1em 1em; + border: solid 1px var(--border-mid); +} + +div#cgit div.cgit-panel strong { + display: block; + padding: 0.35em 0.6em; + background-color: var(--surface); + border-bottom: solid 1px var(--border-mid); } div#cgit div.cgit-panel .fields { display: grid; grid-template-columns: max-content max-content; align-items: center; - justify-items: start; - padding-top: 0.5em; - border: solid 1px var(--border-mid); - background-color: var(--surface); + gap: 0.5em 0.9em; + padding: 0.6em; } -div#cgit div.cgit-panel label, div#cgit div.cgit-panel select, -div#cgit div.cgit-panel input { - margin: 0.25em 0.5em; +div#cgit div.cgit-panel input[type="submit"] { + width: 100%; } div#cgit div.cgit-panel input[type="submit"] { grid-column: 2; - justify-self: start; } div#cgit table.commit-info th { diff --git a/source/ui-diff.c b/source/ui-diff.c index 33d1751..91ad860 100644 --- a/source/ui-diff.c +++ b/source/ui-diff.c @@ -572,11 +572,11 @@ void cgit_print_diff_ctrls(void) int i, selected; html("<div class='cgit-panel'>\n"); - html("<strong>diff options</strong>"); + html("<strong>Diff options</strong>"); html("<form method='get' aria-label='Diff options'>"); cgit_add_hidden_formfields(1, 0, ctx.qry.page); html("<div class='fields'>"); - html("<label for='diff-context'>context:</label>"); + html("<label for='diff-context'>context</label>"); html("<select id='diff-context' name='context'>"); selected = ctx.qry.context; if (!selected) @@ -586,12 +586,12 @@ void cgit_print_diff_ctrls(void) for (i = 15; i <= MAX_DIFF_CONTEXT_LINES; i += 5) html_intoption(i, cgit_fmt("%d", i), selected); html("</select>"); - html("<label for='diff-space'>space:</label>"); + html("<label for='diff-space'>space</label>"); html("<select id='diff-space' name='ignorews'>"); html_intoption(0, "include", ctx.qry.ignorews); html_intoption(1, "ignore", ctx.qry.ignorews); html("</select>"); - html("<label for='diff-mode'>mode:</label>"); + html("<label for='diff-mode'>mode</label>"); html("<select id='diff-mode' name='dt'>"); selected = ctx.qry.has_difftype ? ctx.qry.difftype : ctx.cfg.difftype; html_intoption(0, "unified", selected); diff --git a/source/ui-stats.c b/source/ui-stats.c index a332335..e4dcf8e 100644 --- a/source/ui-stats.c +++ b/source/ui-stats.c @@ -373,20 +373,20 @@ static void print_options_form(const struct cgit_period *period, int top) int choices, i; html("<div class='cgit-panel'>\n"); - html("<strong>stat options</strong>"); + html("<strong>Stat options</strong>"); html("<form method='get' aria-label='Stat options'>"); cgit_add_hidden_formfields(1, 0, "stats"); html("<div class='fields'>"); if (ctx.repo->max_stats > 1) { choices = ctx.repo->max_stats; - html("<label for='stats-period'>Period:</label>"); + html("<label for='stats-period'>period</label>"); html("<select id='stats-period' name='period'>"); for (i = 0; i < choices; i++) html_option(cgit_fmt("%c", periods[i].code), periods[i].name, cgit_fmt("%c", period->code)); html("</select>\n"); } - html("<label for='stats-authors'>Authors:</label>"); + html("<label for='stats-authors'>authors</label>"); html("<select id='stats-authors' name='ofs'>"); html_intoption(10, "10", top); html_intoption(25, "25", top); diff --git a/tests/t0005-markup.sh b/tests/t0005-markup.sh index 740a4f8..e2bf8f3 100755 --- a/tests/t0005-markup.sh +++ b/tests/t0005-markup.sh @@ -71,13 +71,13 @@ test_expect_success 'the diff pages wrap each file and label their controls' ' grep "<table class=.commit-info.>" tmp && grep "<th scope=.row.>author</th>" tmp && grep "<div class=.file. data-path=.dir/hello.c.>" tmp && - grep "<label for=.diff-context.>" tmp && + grep "<label for=.diff-context.>context</label>" tmp && grep "<select id=.diff-context. name=.context.>" tmp && grep "<form method=.get. aria-label=.Diff options.>" tmp && hooks "hooks/diff/&ss=1" >tmp && grep "<tbody class=.file. data-path=.dir/hello.c.>" tmp && hooks "hooks/stats/" >tmp && - grep "<label for=.stats-authors.>" tmp + grep "<label for=.stats-authors.>authors</label>" tmp ' test_expect_success 'the blob, blame and about pages open with their own containers' ' |