kallithea Changeset - bce8e20057e1

Changeset - bce8e20057e1

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Thomas De Schampheleire - 11 years ago 2015-02-19 22:39:53
thomas.de_schampheleire@alcatel-lucent.com

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.

2 files changed with 13 insertions and 4 deletions:

kallithea/public/css/style.css

kallithea/templates/changelog/changelog_summary_data.html

0 comments (0 inline, 0 general)

kallithea/public/css/style.css

➞

Show inline comments

@@ @@ -1228,384 +1228,388 @@ div.label-summary label { @@
+}
 #content div.box div.form div.fields div.field div.editor {
     margin: 0 0 0 200px;
+}
 #content div.box-left div.form div.fields div.field div.input,
 #content div.box-right div.form div.fields div.field div.input {
     margin: 0 0 0 0px;
+}
 #content div.box div.form div.fields div.field div.input input,
 .reviewer_ac input {
     background: #FFF;
     border-top: 1px solid #b3b3b3;
     border-left: 1px solid #b3b3b3;
     border-right: 1px solid #eaeaea;
     border-bottom: 1px solid #eaeaea;
     color: #000;
     font-size: 12px;
     margin: 0;
     padding: 7px 7px 6px;
+}
 #content div.box div.form div.fields div.field div.input input#clone_url,
 #content div.box div.form div.fields div.field div.input input#clone_url_id
+{
     font-size: 16px;
     padding: 2px;
+}
 #content div.box div.form div.fields div.field div.file input {
     background: none repeat scroll 0 0 #FFFFFF;
     border-color: #B3B3B3 #EAEAEA #EAEAEA #B3B3B3;
     border-style: solid;
     border-width: 1px;
     color: #000000;
     font-size: 12px;
     margin: 0;
     padding: 7px 7px 6px;
+}
 input.disabled {
     background-color: #F5F5F5 !important;
+}
 #content div.box div.form div.fields div.field div.input input.small {
     width: 30%;
+}
 #content div.box div.form div.fields div.field div.input input.medium {
     width: 55%;
+}
 #content div.box div.form div.fields div.field div.input input.large {
     width: 85%;
+}
 #content div.box div.form div.fields div.field div.input input.date {
     width: 177px;
+}
 #content div.box div.form div.fields div.field div.input input.button {
     background: #D4D0C8;
     border-top: 1px solid #FFF;
     border-left: 1px solid #FFF;
     border-right: 1px solid #404040;
     border-bottom: 1px solid #404040;
     color: #000;
     margin: 0;
     padding: 4px 8px;
+}
 #content div.box div.form div.fields div.field div.textarea {
     border-top: 1px solid #b3b3b3;
     border-left: 1px solid #b3b3b3;
     border-right: 1px solid #eaeaea;
     border-bottom: 1px solid #eaeaea;
     margin: 0 0 0 200px;
     padding: 7px 7px 6px;
+}
 #content div.box div.form div.fields div.field div.textarea-editor {
     border: 1px solid #ddd;
     padding: 0;
+}
 #content div.box div.form div.fields div.field div.textarea textarea {
     width: 100%;
     height: 220px;
     overflow-y: auto;
     background: #FFF;
     color: #000;
     font-size: 12px;
     outline: none;
     border-width: 0;
     margin: 0;
     padding: 0;
+}
 #content div.box-left div.form div.fields div.field div.textarea textarea,
 #content div.box-right div.form div.fields div.field div.textarea textarea {
     width: 100%;
     height: 100px;
+}
 #content div.box div.form div.fields div.field div.textarea table {
     width: 100%;
     border: none;
     margin: 0;
     padding: 0;
+}
 #content div.box div.form div.fields div.field div.textarea table td {
     background: #DDD;
     border: none;
     padding: 0;
+}
 #content div.box div.form div.fields div.field div.textarea table td table {
     width: auto;
     border: none;
     margin: 0;
     padding: 0;
+}
 #content div.box div.form div.fields div.field div.textarea table td table td {
     font-size: 11px;
     padding: 5px 5px 5px 0;
+}
 #content div.box div.form div.fields div.field input[type=text]:focus,
 #content div.box div.form div.fields div.field input[type=password]:focus,
 #content div.box div.form div.fields div.field input[type=file]:focus,
 #content div.box div.form div.fields div.field textarea:focus,
 #content div.box div.form div.fields div.field select:focus,
 .reviewer_ac input:focus {
     background: #f6f6f6;
     border-color: #666;
+}
 .reviewer_ac {
     padding: 10px
+}
 div.form div.fields div.field div.button {
     margin: 0;
     padding: 0 0 0 8px;
+}
 #content div.box table.noborder {
     border: 1px solid transparent;
+}
 #content div.box table {
     width: 100%;
     border-collapse: separate;
     margin: 0;
     padding: 0;
     border: 1px solid #eee;
     -webkit-border-radius: 4px;
     border-radius: 4px;
+}
 #content div.box table th {
     background: #eee;
     border-bottom: 1px solid #ddd;
     padding: 5px 0px 5px 5px;
     text-align: left;
+}
 #content div.box table th.left {
     text-align: left;
+}
 #content div.box table th.right {
     text-align: right;
+}
 #content div.box table th.center {
     text-align: center;
+}
 #content div.box table th.selected {
     vertical-align: middle;
     padding: 0;
+}
 #content div.box table td {
     background: #fff;
     border-bottom: 1px solid #cdcdcd;
     vertical-align: middle;
     padding: 5px;
+}
 #content div.box table td.compact {
     padding: 0;
+}
 #content div.box table tr.selected td {
     background: #FFC;
+}
 #content div.box table td.selected {
     width: 3%;
     text-align: center;
     vertical-align: middle;
     padding: 0;
+}
 #content div.box table td.action {
     width: 45%;
     text-align: left;
+}
 #content div.box table td.date {
     width: 33%;
     text-align: center;
+}
 #content div.box div.action {
     float: right;
     background: #FFF;
     text-align: right;
     margin: 10px 0 0;
     padding: 0;
+}
 #content div.box div.action select {
     font-size: 11px;
     margin: 0;
+}
 #content div.box div.action .ui-selectmenu {
     margin: 0;
     padding: 0;
+}
 #content div.box div.pagination {
     height: 1%;
     clear: both;
     overflow: hidden;
     margin: 10px 0 0;
     padding: 0;
+}
 #content div.box div.pagination ul.pager {
     float: right;
     text-align: right;
     margin: 0;
     padding: 0;
+}
 #content div.box div.pagination ul.pager li {
     height: 1%;
     float: left;
     list-style: none;
     background: #ebebeb url("../images/pager.png") repeat-x;
     border-top: 1px solid #dedede;
     border-left: 1px solid #cfcfcf;
     border-right: 1px solid #c4c4c4;
     border-bottom: 1px solid #c4c4c4;
     color: #4A4A4A;
     font-weight: 700;
     margin: 0 0 0 4px;
     padding: 0;
+}
 #content div.box div.pagination ul.pager li.separator {
     padding: 6px;
+}
 #content div.box div.pagination ul.pager li.current {
     background: #b4b4b4 url("../images/pager_selected.png") repeat-x;
     border-top: 1px solid #ccc;
     border-left: 1px solid #bebebe;
     border-right: 1px solid #b1b1b1;
     border-bottom: 1px solid #afafaf;
     color: #515151;
     padding: 6px;
+}
 #content div.box div.pagination ul.pager li a {
     height: 1%;
     display: block;
     float: left;
     color: #515151;
     text-decoration: none;
     margin: 0;
     padding: 6px;
+}
 #content div.box div.pagination ul.pager li a:hover,
 #content div.box div.pagination ul.pager li a:active {
     background: #b4b4b4 url("../images/pager_selected.png") repeat-x;
     border-top: 1px solid #ccc;
     border-left: 1px solid #bebebe;
     border-right: 1px solid #b1b1b1;
     border-bottom: 1px solid #afafaf;
     margin: -1px;
+}
 #content div.box div.pagination-right {
     float: right;
+}
 #content div.box div.pagination-wh {
     height: 1%;
     overflow: hidden;
     text-align: right;
     margin: 10px 0 0;
     padding: 0;
+}
 #content div.box div.pagination-wh > :first-child {
     border-radius: 4px 0px 0px 4px;
+}
 #content div.box div.pagination-wh > :last-child {
     border-radius: 0px 4px 4px 0px;
     border-right: 1px solid #cfcfcf;
+}
 #content div.box div.pagination-wh a,
 #content div.box div.pagination-wh span.pager_dotdot,
 #content div.box div.pagination-wh span.yui-pg-previous,
 #content div.box div.pagination-wh span.yui-pg-last,
 #content div.box div.pagination-wh span.yui-pg-next,
 #content div.box div.pagination-wh span.yui-pg-first {
     height: 1%;
     float: left;
     background: #ebebeb url("../images/pager.png") repeat-x;
     border-top: 1px solid #dedede;
     border-left: 1px solid #cfcfcf;
     border-bottom: 1px solid #c4c4c4;
     color: #4A4A4A;
     font-weight: 700;
     padding: 6px;
+}
 #content div.box div.pagination-wh span.pager_curpage {
     height: 1%;
     float: left;
     background: #b4b4b4 url("../images/pager_selected.png") repeat-x;
     border-top: 1px solid #ccc;
     border-left: 1px solid #bebebe;
     border-bottom: 1px solid #afafaf;
     color: #515151;
     font-weight: 700;
     padding: 6px;
+}
 #content div.box div.pagination-wh a:hover,
 #content div.box div.pagination-wh a:active {
     background: #b4b4b4 url("../images/pager_selected.png") repeat-x;
     border-top: 1px solid #ccc;
     border-left: 1px solid #bebebe;
     border-bottom: 1px solid #afafaf;
     text-decoration: none;
+}
 #content div.box div.traffic div.legend {
     clear: both;
     overflow: hidden;
     border-bottom: 1px solid #ddd;
     margin: 0 0 10px;
     padding: 0 0 10px;
+}
 #content div.box div.traffic div.legend h6 {
     float: left;
     border: none;
     margin: 0;
     padding: 0;
+}
 #content div.box div.traffic div.legend li {
     list-style: none;
     float: left;
     font-size: 11px;
     margin: 0;
     padding: 0 8px 0 4px;
+}
 #content div.box div.traffic div.legend li.visits {
     border-left: 12px solid #edc240;
+}
 #content div.box div.traffic div.legend li.pageviews {
     border-left: 12px solid #afd8f8;
+}
@@ @@ -2393,384 +2397,385 @@ BIN_FILENODE = 6 @@
 /*rename file*/
 .cs_files .changes .bin.bin4 {
     background-color: #6D99FF;
+}
 /*chmod file*/
 .cs_files .changes .bin.bin5 {
     background-color: #6D99FF;
+}
 .cs_files .cs_added,
 .cs_files .cs_A {
     height: 16px;
     margin-top: 7px;
     text-align: left;
+}
 .cs_files .cs_changed,
 .cs_files .cs_M {
     height: 16px;
     margin-top: 7px;
     text-align: left;
+}
 .cs_files .cs_removed,
 .cs_files .cs_D {
     height: 16px;
     margin-top: 7px;
     text-align: left;
+}
 .cs_files .cs_renamed,
 .cs_files .cs_R {
     height: 16px;
     margin-top: 7px;
     text-align: left;
+}
 .table {
     position: relative;
+}
 #graph {
     position: relative;
     overflow: hidden;
+}
 #graph_nodes {
     position: absolute;
+}
 #graph_content,
 #graph .info_box,
 #graph .container_header {
     margin-left: 100px;
+}
 #graph_content {
     position: relative;
+}
 #graph .container_header {
     padding: 10px;
     height: 25px;
+}
 #graph_content #rev_range_container {
     float: left;
     margin: 0px 0px 0px 3px;
+}
 #graph_content #rev_range_clear {
     float: left;
     margin: 0px 0px 0px 3px;
+}
 #graph_content #changesets {
     table-layout: fixed;
     border-collapse: collapse;
     border-left: none;
     border-right: none;
     border-color: #cdcdcd;
+}
 #graph_content #changesets td {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     height: 31px;
     border-color: #cdcdcd;
     text-align: left;
+}
 #graph_content .container .checkbox {
     width: 12px;
     font-size: 0.85em;
+}
 #graph_content .container .status {
     width: 14px;
     font-size: 0.85em;
+}
 #graph_content .container .author {
    width: 105px;
+}
 #graph_content .container .hash {
     width: 100px;
     font-size: 0.85em;
+}
 #graph_content #changesets .container .date {
     width: 76px;
     color: #666;
     font-size: 10px;
+}
 #graph_content_pr .compare_view_commits .expand_commit,
 #graph_content .container .expand_commit {
     width: 24px;
     cursor: pointer;
+}
 #graph_content #changesets .container .right {
     width: 120px;
     padding-right: 0px;
     overflow: visible;
     position: relative;
+}
 #graph_content .container .mid {
     padding: 0;
+}
 #graph_content .log-container {
     position: relative;
+}
 #graph_content .container .changeset_range {
     float: left;
     margin: 6px 3px;
+}
 #graph_content .container .author img {
     vertical-align: middle;
+}
 #graph_content .container .author .user {
     color: #444444;
+}
 #graph_content .container .mid .message {
     white-space: pre-wrap;
     padding: 0;
     overflow: hidden;
     height: 1.1em;
+}
 #graph_content_pr .compare_view_commits .message {
     padding: 0 !important;
     height: 1.1em;
+}
 #graph_content .container .mid .message.expanded,
 #graph_content_pr .compare_view_commits .message.expanded {
     height: auto;
     margin: 8px 0px 8px 0px;
     overflow: initial;
+}
 #graph_content .container .extra-container {
     display: block;
     position: absolute;
     top: -15px;
     right: 0;
     padding-left: 5px;
     background: #FFFFFF;
     height: 41px;
+}
 #pull_request_overview .comments-container,
 #changeset_compare_view_content .comments-container,
 #graph_content .comments-container,
 #shortlog_data .comments-container,
 #graph_content .logtags {
     display: block;
     float: left;
     overflow: hidden;
     padding: 0;
     margin: 0;
     white-space: nowrap;
+}
 #graph_content .comments-container {
     margin: 0.8em 0;
     margin-right: 0.5em;
+}
 #graph_content .tagcontainer {
     width: 80px;
     position: relative;
     float: right;
     height: 100%;
     top: 7px;
     margin-left: 0.5em;
+}
 #graph_content .logtags {
     min-width: 80px;
     height: 1.1em;
     position: absolute;
     left: 0px;
     width: auto;
     top: 0px;
+}
 #graph_content .logtags.tags {
     top: 14px;
+}
 #graph_content .logtags:hover {
     overflow: visible;
     position: absolute;
     width: auto;
     right: 0;
     left: initial;
+}
 #graph_content .logtags .booktag,
 #graph_content .logtags .tagtag {
     float: left;
     line-height: 1em;
     margin-bottom: 1px;
     margin-right: 1px;
     padding: 1px 3px;
     font-size: 10px;
+}
 #graph_content .container .mid .message a:hover {
     text-decoration: none;
+}
 .revision-link {
     color: #3F6F9F;
     font-weight: bold !important;
+}
 .issue-tracker-link {
     color: #3F6F9F;
     font-weight: bold !important;
+}
 .changeset-status-container {
     padding-right: 5px;
     margin-top: 1px;
     float: right;
     height: 14px;
+}
 .code-header .changeset-status-container {
     float: left;
     padding: 2px 0px 0px 2px;
+}
 .changeset-status-container .changeset-status-lbl {
     float: left;
     padding: 3px 4px 0px 0px
+}
 .code-header .changeset-status-container .changeset-status-lbl {
     float: left;
     padding: 0px 4px 0px 0px;
+}
 .changeset-status-container .changeset-status-ico {
     float: left;
+}
 .code-header .changeset-status-container .changeset-status-ico,
 .container .changeset-status-ico {
     float: left;
+}
 /* changeset statuses (must be the same name as the status) */
 .changeset-status-not_reviewed {
     color: #bababa;
+}
 .changeset-status-approved {
     color: #81ba51;
+}
 .changeset-status-rejected {
     color: #cc392e;
+}
 .changeset-status-under_review {
     color: #ffc71e;
+}
 #graph_content .comments-cnt {
     color: rgb(136, 136, 136);
     padding: 5px 0;
+}
 #shortlog_data .comments-cnt {
     color: rgb(136, 136, 136);
     padding: 3px 0;
+}
 .right .changes {
     clear: both;
+}
 .right .changes .changed_total {
     display: block;
     float: right;
     text-align: center;
     min-width: 45px;
     cursor: pointer;
     color: #444444;
     background: #FEA;
     -webkit-border-radius: 0px 0px 0px 6px;
     border-radius: 0px 0px 0px 6px;
     padding: 1px;
+}
 .right .changes .added,
 .changed, .removed {
     display: block;
     padding: 1px;
     color: #444444;
     float: right;
     text-align: center;
     min-width: 15px;
+}
 .right .changes .added {
     background: #CFC;
+}
 .right .changes .changed {
     background: #FEA;
+}
 .right .changes .removed {
     background: #FAA;
+}
 .right .merge {
     padding: 1px 3px 1px 3px;
     background-color: #fca062;
     font-size: 10px;
     color: #ffffff;
     text-transform: uppercase;
     white-space: nowrap;
     -webkit-border-radius: 3px;
     border-radius: 3px;
     margin-right: 2px;
+}
 .right .parent {
     color: #666666;
     clear: both;
+}
 .right .logtags {
     line-height: 2.2em;
+}
 .repotag, .branchtag, .logtags .tagtag, .logtags .booktag {
     margin: 0px 2px;
+}
 .repotag,
 .branchtag,
 .tagtag,
 .booktag,
 .spantag {
     padding: 1px 3px 1px 3px;
     font-size: 10px;
     color: #577632;
     white-space: nowrap;
     -webkit-border-radius: 4px;
     border-radius: 4px;
     border: 1px solid #d9e8f8;
     line-height: 1.5em;
+}
 #graph_content .branchtag,
 #graph_content .tagtag,
 #graph_content .booktag {
     margin: 1.1em 0;

kallithea/templates/changelog/changelog_summary_data.html

➞

Show inline comments

 ## -*- coding: utf-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>
         <th class="left">${_('Author')}</th>
         <th class="left">${_('Refs')}</th>
     </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">
                 %if c.statuses.get(cs.raw_id)[2]:
                   <a class="tooltip" title="${_('Changeset status: %s\nClick to open associated pull request #%s') % (c.statuses.get(cs.raw_id)[0], c.statuses.get(cs.raw_id)[2])}" href="${h.url('pullrequest_show',repo_name=c.statuses.get(cs.raw_id)[3],pull_request_id=c.statuses.get(cs.raw_id)[2])}">
                     <i class="icon-circle changeset-status-${c.statuses.get(cs.raw_id)[0]}"></i>
                   </a>
                 %else:
                   <i class="icon-circle changeset-status-${c.statuses.get(cs.raw_id)[0]}"></i>
                 %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])}
                        </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))}
         </td>
         <td><span class="tooltip" title="${h.tooltip(h.fmt_date(cs.date))}">
                       ${h.age(cs.date)}</span>
         </td>
         <td title="${cs.author}">${h.person(cs.author)}</td>
         <td>
             %if h.is_hg(c.db_repo_scm_instance):
                 %for book in cs.bookmarks:
                     <div class="booktag" title="${_('Bookmark %s') % book}">
                         ${h.link_to(book,h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}
                     </div>
                 %endfor
             %endif
             %for tag in cs.tags:
              <div class="tagtag" title="${_('Tag %s') % tag}">
                  ${h.link_to(tag,h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}
              </div>
             %endfor
             %if cs.branch:
              <div class="branchtag" title="${_('Branch %s' % cs.branch)}">
                  ${h.link_to(cs.branch,h.url('changelog_home',repo_name=c.repo_name,branch=cs.branch))}
              </div>
             %endif
         </td>
     </tr>
 %endfor
 </table>
 <script type="text/javascript">
   $(document).ready(function(){
     var $shortlog_data = $('#shortlog_data');
     $shortlog_data.on('click','.pager_link',function(e){
       asynchtml(e.target.href, $shortlog_data, function(){tooltip_activate();});
       e.preventDefault();
     });
   });
 </script>
 <div class="pagination-wh pagination-left">
 ${c.repo_changesets.pager('$link_previous ~2~ $link_next')}
 </div>
 %else:
 %if h.HasRepoPermissionAny('repository.write','repository.admin')(c.repo_name):
 <h4>${_('Add or upload files directly via Kallithea')}</h4>
 <div style="margin: 20px 30px;">
   <div id="add_node_id" class="add_node">
       <a class="btn btn-mini" href="${h.url('files_add_home',repo_name=c.repo_name,revision=0,f_path='', anchor='edit')}">${_('Add New File')}</a>
   </div>
 </div>
 %endif
 <h4>${_('Push new repo')}</h4>
 <pre>
     ${c.db_repo_scm_instance.alias} clone ${c.clone_repo_url}
     ${c.db_repo_scm_instance.alias} add README # add first file
     ${c.db_repo_scm_instance.alias} commit -m "Initial" # commit with message
     ${c.db_repo_scm_instance.alias} push ${'origin master' if h.is_git(c.db_repo_scm_instance) else ''} # push changes back
 </pre>
 <h4>${_('Existing repository?')}</h4>
 <pre>
 %if h.is_git(c.db_repo_scm_instance):
     git remote add origin ${c.clone_repo_url}
     git push -u origin master
 %else:
     hg push ${c.clone_repo_url}
 %endif
 </pre>
 %endif

0 comments (0 inline, 0 general)