Mercurial > kallithea
changeset 8574:33a57f96c5e0
diff: fix width of line number columns
Column widths did in some cases break with 32757d5e9d0b. The markup was too
magic to find and fix the exact root cause, but we fix it by refactoring to a
slightly different approach:
Use fixed table-layout to be able to control columns width from the first row,
without too much auto sizing.
Instead of using padding, put the line number in a centered block-inline with
right-align and min-width. The numbers will thus generally be right aligned,
but will expand to use less margin for big line numbers.
author | Mads Kiilerich <mads@kiilerich.com> |
---|---|
date | Sun, 21 Jun 2020 19:32:15 +0200 |
parents | 8d6a7e174b03 |
children | 8305790b9533 |
files | kallithea/front-end/kallithea-diff.less |
diffstat | 1 files changed, 7 insertions(+), 11 deletions(-) [+] |
line wrap: on
line diff
--- a/kallithea/front-end/kallithea-diff.less Sun Jun 21 19:32:15 2020 +0200 +++ b/kallithea/front-end/kallithea-diff.less Sun Jun 21 19:32:15 2020 +0200 @@ -62,6 +62,7 @@ border-collapse: collapse; border-radius: 0px !important; width: 100%; + table-layout: fixed; /* line coloring */ .context { @@ -107,9 +108,7 @@ /* line number columns */ td.lineno { - padding-left: 2px; - padding-right: 2px !important; - width: 30px; + width: 4em; border-right: 1px solid @panel-default-border !important; vertical-align: middle !important; font-size: 11px; @@ -117,17 +116,14 @@ line-height: normal; text-align: center; } - td.lineno.new { - text-align: right; - } - td.lineno.old { - text-align: right; + td.lineno[colspan="2"] { + width: 8em; } td.lineno a { color: #aaa !important; - padding-left: 6px; - padding-right: 6px; - display: block; + display: inline-block; + min-width: 2em; + text-align: right; } tr.line:hover td.lineno a { color: #333 !important;