[PATCH v2] repository summary: avoid table bleed on long commit messages

[Thomas De Schampheleire]

# HG changeset patch
# User Thomas De Schampheleire <thomas.de_schampheleire at alcatel-lucent.com>
# Date 1424381993 -3600
#      Thu Feb 19 22:39:53 2015 +0100
# Node ID f5897d3eddf183efb8a9ea1ab29f2d2792936840
# Parent  1619d9ebc1b9b40379c192ddb45e5802ecfb8f2b
repository summary: avoid table bleed on long commit messages

For commit messages with the first line being very long, the 'latest
changes' table on the repository overview page can 'bleed', so that the
commit number overlaps with the commit status.

Commit 15cb8156b10d732cf39b37a88c656894621c0f54 changed the initial truncate
on 50 characters to a chop at the first newline characters, causing this
issue to pop up more frequently.

Instead of using floating divs for the commit status and number of comments,
use dedicated table columns, as compact as possible.
Additionally, move these new columns to the very left of the table, instead
of cramming them in between the revision and commit message.

The comments-container class gets a new attribute 'white-space: nowrap' to
avoid the comment icon to wrap from the number of comments, when the table
does wrap on a small screen.
Note that the icon currently does not display as it should be renamed from
icon-comment-alt/colored to icon-comment. This will be fixed by Sean Farley.

diff --git a/kallithea/public/css/style.css b/kallithea/public/css/style.css
--- a/kallithea/public/css/style.css
+++ b/kallithea/public/css/style.css
@@ -1417,6 +1417,10 @@
     padding: 5px;
 }
 
+#content div.box table td.compact {
+    padding: 0;
+}
+
 #content div.box table tr.selected td {
     background: #FFC;
 }
@@ -2581,6 +2585,7 @@
     overflow: hidden;
     padding: 0;
     margin: 0;
+    white-space: nowrap;
 }
 
 #graph_content .comments-container {
diff --git a/kallithea/templates/changelog/changelog_summary_data.html b/kallithea/templates/changelog/changelog_summary_data.html
--- a/kallithea/templates/changelog/changelog_summary_data.html
+++ b/kallithea/templates/changelog/changelog_summary_data.html
@@ -2,6 +2,8 @@
 %if c.repo_changesets:
 <table class="table_disp">
     <tr>
+        <th class="left"></th>
+        <th class="left"></th>
         <th class="left">${_('Revision')}</th>
         <th class="left">${_('Commit Message')}</th>
         <th class="left">${_('Age')}</th>
@@ -10,8 +12,7 @@
     </tr>
 %for cnt,cs in enumerate(c.repo_changesets):
     <tr class="parity${cnt%2}">
-        <td>
-          <div>
+        <td class="compact">
             <div class="changeset-status-container">
               %if c.statuses.get(cs.raw_id):
                 <div class="changeset-status-ico shortlog">
@@ -24,18 +25,21 @@
                 %endif
                 </div>
               %endif
+            </div>
+        </td>
+        <td class="compact">
               %if c.comments.get(cs.raw_id,[]):
                <div class="comments-container">
                    <div title="${('comments')}">
                        <a href="${h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id,anchor='comment-%s' % c.comments[cs.raw_id][0].comment_id)}">
-                          <i class="icon-comment-alt icon-comment-colored"></i> ${len(c.comments[cs.raw_id])}
+                          <i class="icon-comment-alt icon-comment-colored"></i>${len(c.comments[cs.raw_id])}
                        </a>
                    </div>
                </div>
               %endif
-            </div>
+        </td>
+        <td>
             <pre><a href="${h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id)}">${h.show_id(cs)}</a></pre>
-         </div>
         </td>
         <td>
             ${h.urlify_commit(h.chop_at(cs.message,'\n'),c.repo_name, h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}