kallithea Changeset - 3a139a5500dd

Changeset - 3a139a5500dd

Parent rev.

Child rev.

[Not reviewed]

stable

0 2 0

Andrew Shadura - 11 years ago 2015-05-05 18:13:00
andrew@shadura.me

diff view: improve appearance of line numbers

* display the ellipsis just once and centered
instead of showing in twice in both - and + columns
* expand column width as needed to accomodate longer numbers
(previously, the column width was fixed)
* enable box-sizing: border-box for the number links to
make it easier to set paddings

2 files changed with 22 insertions and 14 deletions:

kallithea/lib/diffs.py

kallithea/public/css/style.css

0 comments (0 inline, 0 general)

kallithea/lib/diffs.py

➞

Show inline comments

@@ @@ -642,6 +642,7 @@ class DiffProcessor(object): @@
     def as_html(self, table_class='code-difftable', line_class='line',
                 old_lineno_class='lineno old', new_lineno_class='lineno new',
                 no_lineno_class='lineno',
                 code_class='code', enable_comments=False, parsed_lines=None):
         """
         Return given diff as html table with customized css classes
@@ @@ -693,6 +694,8 @@ class DiffProcessor(object): @@
                                 change['old_lineno'])
                     cond_new = (change['new_lineno'] != '...' and
                                 change['new_lineno'])
                     no_lineno = (change['old_lineno'] == '...' and
                                  change['new_lineno'] == '...')
                     if cond_old:
                         anchor_old_id = 'id="%s"' % anchor_old
                     if cond_new:
@@ @@ -700,9 +703,10 @@ class DiffProcessor(object): @@
                     ###########################################################
                     # OLD LINE NUMBER
                     ###########################################################
                     _html.append('''\t<td %(a_id)s class="%(olc)s">''' % {
+                    _html.append('''\t<td %(a_id)s class="%(olc)s" %(colspan)s>''' % {
                         'a_id': anchor_old_id,
                         'olc': old_lineno_class
                         'olc': no_lineno_class if no_lineno else old_lineno_class,
                         'colspan': 'colspan="2"' if no_lineno else ''
                     })
                     _html.append('''%(link)s''' % {
@@ @@ -714,16 +718,17 @@ class DiffProcessor(object): @@
                     # NEW LINE NUMBER
                     ###########################################################
                     _html.append('''\t<td %(a_id)s class="%(nlc)s">''' % {
                         'a_id': anchor_new_id,
                         'nlc': new_lineno_class
                     })
                     if not no_lineno:
                         _html.append('''\t<td %(a_id)s class="%(nlc)s">''' % {
                             'a_id': anchor_new_id,
                             'nlc': new_lineno_class
                         })
                     _html.append('''%(link)s''' % {
                         'link': _link_to_if(True, change['new_lineno'],
                                             '#%s' % anchor_new)
                     })
                     _html.append('''</td>\n''')
                         _html.append('''%(link)s''' % {
                             'link': _link_to_if(True, change['new_lineno'],
                                                 '#%s' % anchor_new)
                         })
                         _html.append('''</td>\n''')
                     ###########################################################
                     # CODE
                     ###########################################################

kallithea/public/css/style.css

➞

Show inline comments

@@ @@ -4901,7 +4901,6 @@ table.code-difftable td.code pre i { @@
 table.code-difftable .lineno {
     padding-left: 2px;
     padding-right: 2px !important;
     text-align: right;
     width: 30px;
     -moz-user-select: none;
     -webkit-user-select: none;
@@ @@ -4910,20 +4909,24 @@ table.code-difftable .lineno { @@
     border-top: 0px solid #CCC !important;
     border-bottom: none !important;
     vertical-align: middle !important;
     text-align: center;
+}
 table.code-difftable .lineno.new {
     text-align: right;
+}
 table.code-difftable .lineno.old {
     text-align: right;
+}
 table.code-difftable .lineno a {
     color: #aaa !important;
     font: 11px Consolas, Monaco, Inconsolata, Liberation Mono, monospace !important;
     letter-spacing: -1px;
-    text-align: right;
+    padding-left: 10px;
     padding-right: 8px;
     box-sizing: border-box;
     cursor: pointer;
     display: block;
-    width: 30px;
+    width: 100%;
+}
 table.code-difftable .lineno-inline {

0 comments (0 inline, 0 general)