Changeset - 85a6526a15a8
[Not reviewed]
stable
0 1 0
Thomas De Schampheleire - 11 years ago 2015-05-01 21:17:55
thomas.de.schampheleire@gmail.com
diff view: do not hide overflow on very long lines that cannot be wrapped

When a change contains very long lines that cannot be wrapped because they
contain very long 'words' without spaces, the overflow is currently not
visible at all. This occurrence of such very long non-wrappable words is
pretty uncommon, but can for example happen in comma-separated value files.

Not touching the existing behavior of trying to wrap long lines, this patch
adds horizontal scrollbars for these exceptional cases of unavoidable
overflow.
On normal lines and long lines that can be wrapped, the diff block remains
the same as before.
1 file changed with 0 insertions and 1 deletions:
0 comments (0 inline, 0 general)
kallithea/public/css/style.css
Show inline comments
 
@@ -4599,385 +4599,384 @@ form.comment-inline-form {
 
    height: 24px;
 
    float: left
 
}
 
.notification-list .container.unread {
 
    background: none repeat scroll 0 0 rgba(255, 255, 180, 0.6);
 
}
 
.notification-header .gravatar {
 
    background: none repeat scroll 0 0 transparent;
 
    padding: 0px 0px 0px 8px;
 
}
 
.notification-list .container .notification-header .desc {
 
    font-weight: bold;
 
    font-size: 17px;
 
}
 
.notification-table {
 
    border: 1px solid #ccc;
 
    -webkit-border-radius: 6px 6px 6px 6px;
 
    border-radius: 6px 6px 6px 6px;
 
    clear: both;
 
    margin: 0px 20px 0px 20px;
 
}
 
.notification-header .delete-notifications {
 
    float: right;
 
    padding-top: 8px;
 
    cursor: pointer;
 
}
 
.notification-header .read-notifications {
 
    float: right;
 
    padding-top: 8px;
 
    cursor: pointer;
 
}
 
.notification-subject {
 
    clear: both;
 
    border-bottom: 1px solid #eee;
 
    padding: 5px 0px 5px 38px;
 
}
 

	
 
.notification-body {
 
    clear: both;
 
    margin: 34px 2px 2px 8px
 
}
 

	
 
/****
 
PULL REQUESTS
 
*****/
 
.pullrequests_section_head {
 
    padding: 10px 10px 10px 0px;
 
    margin: 0 20px;
 
    font-size: 16px;
 
    font-weight: bold;
 
}
 

	
 
div.pr-details-title.closed {
 
    color: #555;
 
    background: #eee;
 
}
 

	
 
div.pr-details-title {
 
    font-size: 1.6em;
 
    padding: 5px 0px 5px 10px;
 
}
 

	
 
div.pr {
 
    margin: 0px 20px;
 
    padding: 4px 4px;
 
}
 
div.pr-desc {
 
    margin: 0px 20px;
 
}
 
tr.pr-closed td {
 
    background-color: #eee !important;
 
    color: #555 !important;
 
}
 

	
 
span.pr-closed-tag {
 
    margin-bottom: 1px;
 
    margin-right: 1px;
 
    padding: 1px 3px;
 
    font-size: 10px;
 
    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;
 
}
 

	
 
.pr-box {
 
    max-width: 978px;
 
}
 

	
 
#s2id_org_ref,
 
#s2id_other_ref,
 
#s2id_org_repo,
 
#s2id_other_repo {
 
    min-width: 150px;
 
    margin: 5px;
 
}
 

	
 
#pr-summary .msg-div {
 
    margin: 5px 0;
 
}
 

	
 
/****
 
  PERMS
 
*****/
 
#perms .perms_section_head {
 
    padding: 10px 10px 10px 0px;
 
    font-size: 16px;
 
    font-weight: bold;
 
    text-transform: capitalize;
 
}
 

	
 
#perms .perm_tag {
 
    padding: 1px 3px 1px 3px;
 
    font-size: 10px;
 
    font-weight: bold;
 
    text-transform: uppercase;
 
    white-space: nowrap;
 
    -webkit-border-radius: 3px;
 
    border-radius: 3px;
 
}
 

	
 
#perms .perm_tag.admin {
 
    background-color: #B94A48;
 
    color: #ffffff;
 
}
 

	
 
#perms .perm_tag.write {
 
    background-color: #DB7525;
 
    color: #ffffff;
 
}
 

	
 
#perms .perm_tag.read {
 
    background-color: #468847;
 
    color: #ffffff;
 
}
 

	
 
#perms .perm_tag.none {
 
    background-color: #bfbfbf;
 
    color: #ffffff;
 
}
 

	
 
.perm-gravatar {
 
    vertical-align: middle;
 
    padding: 2px;
 
}
 
.perm-gravatar-ac {
 
    vertical-align: middle;
 
    padding: 2px;
 
    width: 14px;
 
    height: 14px;
 
}
 

	
 
/*****************************************************************************
 
                                  DIFFS CSS
 
******************************************************************************/
 
.diff-collapse {
 
    text-align: center;
 
    margin-bottom: -15px;
 
}
 
.diff-collapse-button {
 
    cursor: pointer;
 
    color: #666;
 
    font-size: 16px;
 
}
 
.diff-container {
 

	
 
}
 

	
 
.diff-container.hidden {
 
    display: none;
 
    overflow: hidden;
 
}
 

	
 

	
 
div.diffblock {
 
    overflow: auto;
 
    padding: 0px;
 
    border: 1px solid #ccc;
 
    background: #f8f8f8;
 
    font-size: 100%;
 
    line-height: 100%;
 
    /* new */
 
    line-height: 125%;
 
    -webkit-border-radius: 6px 6px 0px 0px;
 
    border-radius: 6px 6px 0px 0px;
 
}
 
div.diffblock.margined {
 
    margin: 0px 20px 0px 20px;
 
    overflow: hidden;
 
}
 
div.diffblock .code-header {
 
    border-bottom: 1px solid #CCCCCC;
 
    background: #EEEEEE;
 
    padding: 10px 0 10px 0;
 
    min-height: 14px;
 
}
 

	
 
div.diffblock .code-header.banner {
 
    border-bottom: 1px solid #CCCCCC;
 
    background: #EEEEEE;
 
    height: 14px;
 
    margin: 0;
 
    padding: 3px 100px 11px 100px;
 
}
 

	
 
div.diffblock .code-header-title {
 
    padding: 0px 0px 10px 5px !important;
 
    margin: 0 !important;
 
}
 
div.diffblock .code-header .hash {
 
    float: left;
 
    padding: 2px 0 0 2px;
 
}
 
div.diffblock .code-header .date {
 
    float: left;
 
    text-transform: uppercase;
 
    padding: 2px 0px 0px 2px;
 
}
 
div.diffblock .code-header div {
 
    margin-left: 4px;
 
    font-weight: bold;
 
    font-size: 14px;
 
}
 

	
 
div.diffblock .parents {
 
    float: left;
 
    min-height: 26px;
 
    font-size: 10px;
 
    font-weight: 400;
 
    vertical-align: middle;
 
    padding: 0px 2px 2px 2px;
 
    background-color: #eeeeee;
 
    border-bottom: 1px solid #CCCCCC;
 
}
 

	
 
div.diffblock .children {
 
    float: right;
 
    min-height: 26px;
 
    font-size: 10px;
 
    font-weight: 400;
 
    vertical-align: middle;
 
    text-align: right;
 
    padding: 0px 2px 2px 2px;
 
    background-color: #eeeeee;
 
    border-bottom: 1px solid #CCCCCC;
 
}
 

	
 
div.diffblock .code-body {
 
    background: #FFFFFF;
 
    clear: both;
 
}
 
div.diffblock pre.raw {
 
    background: #FFFFFF;
 
    color: #000000;
 
}
 
table.code-difftable {
 
    border-collapse: collapse;
 
    width: 99%;
 
    border-radius: 0px !important;
 
}
 
table.code-difftable td {
 
    padding: 0 !important;
 
    background: none !important;
 
    border: 0 !important;
 
    vertical-align: baseline !important
 
}
 
table.code-difftable .context {
 
    background: none repeat scroll 0 0 #DDE7EF;
 
    color: #999;
 
}
 
table.code-difftable .add {
 
    background: none repeat scroll 0 0 #DDFFDD;
 
}
 
table.code-difftable .add ins {
 
    background: none repeat scroll 0 0 #AAFFAA;
 
    text-decoration: none;
 
}
 
table.code-difftable .del {
 
    background: none repeat scroll 0 0 #FFDDDD;
 
}
 
table.code-difftable .del del {
 
    background: none repeat scroll 0 0 #FFAAAA;
 
    text-decoration: none;
 
}
 

	
 
table.code-highlighttable div.code-highlight pre u:before,
 
table.code-difftable td.code pre u:before {
 
    content: "\21a6";
 
    display: inline-block;
 
    width: 0;
 
}
 
table.code-highlighttable div.code-highlight pre u.cr:before,
 
table.code-difftable td.code pre u.cr:before {
 
    content: "\21a4";
 
    display: inline-block;
 
    color: rgba(0,0,0,0.5);
 
}
 
table.code-highlighttable div.code-highlight pre u,
 
table.code-difftable td.code pre u {
 
    color: rgba(0,0,0,0.15);
 
}
 
table.code-highlighttable div.code-highlight pre i,
 
table.code-difftable td.code pre i {
 
    border-style: solid;
 
    border-left-width: 1px;
 
    color: rgba(0,0,0,0.5);
 
}
 

	
 
/** LINE NUMBERS **/
 
table.code-difftable .lineno {
 
    padding-left: 2px;
 
    padding-right: 2px !important;
 
    text-align: right;
 
    width: 30px;
 
    -moz-user-select: none;
 
    -webkit-user-select: none;
 
    border-right: 1px solid #CCC !important;
 
    border-left: 0px solid #CCC !important;
 
    border-top: 0px solid #CCC !important;
 
    border-bottom: none !important;
 
    vertical-align: middle !important;
 
}
 
table.code-difftable .lineno.new {
 
}
 
table.code-difftable .lineno.old {
 
}
 
table.code-difftable .lineno a {
 
    color: #aaa !important;
 
    font: 11px Consolas, Monaco, Inconsolata, Liberation Mono, monospace !important;
 
    letter-spacing: -1px;
 
    text-align: right;
 
    padding-right: 8px;
 
    cursor: pointer;
 
    display: block;
 
    width: 30px;
 
}
 

	
 
table.code-difftable .lineno-inline {
 
    background: none repeat scroll 0 0 #FFF !important;
 
    padding-left: 2px;
 
    padding-right: 2px;
 
    text-align: right;
 
    width: 30px;
 
    -moz-user-select: none;
 
    -webkit-user-select: none;
 
}
 

	
 
/** CODE **/
 
table.code-difftable .code {
 
    display: block;
 
    width: 100%;
 
}
 
table.code-difftable .code td {
 
    margin: 0;
 
    padding: 0;
 
}
 
table.code-difftable .code pre {
 
    margin: 0 0 0 12px;
 
    padding: 0;
 
    min-height: 17px;
 
    line-height: 17px;
 
    white-space: pre-wrap;
 
}
 

	
 
table.code-difftable .del .code pre:before {
 
    content: "-";
 
    color: #550000;
 
}
 
 
 
table.code-difftable .add .code pre:before {
 
    content: "+";
 
    color: #005500;
 
}
 
 
 
table.code-difftable .unmod .code pre:before {
 
    content: " ";
 
}
 
 
 
.add-bubble {
 
    position: relative;
 
    display: none;
0 comments (0 inline, 0 general)