style: optimized <code> element fonts.

rhodecode/public/css/type.less

@@ -1,545 +1,545 b''
 //
 // Typography
 // modified from Bootstrap
 // --------------------------------------------------
 
 // Base
 body {
     font-size: @basefontsize;
     font-family: @text-light;
     letter-spacing: .02em;
     color: @grey2;
 }
 
 #content, label{
   font-size: @basefontsize;
 }
 
 label {
   color: @grey2;
 }
 
 ::selection { background: @rchighlightblue; }
 
 // Headings
 // -------------------------
 
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   margin: 0 0 @textmargin 0;
   padding: 0;
   line-height: 1.8em;
   color: @text-color;
   a {
     color: @rcblue;
   }
 }
 
 h1, .h1 { font-size: 1.54em; font-family: @text-bold; }
 h2, .h2 { font-size: 1.23em; font-family: @text-semibold; }
 h3, .h3 { font-size: 1.23em; font-family: @text-regular; }
 h4, .h4 { font-size: 1em;    font-family: @text-bold; }
 h5, .h5 { font-size: 1em;    font-family: @text-bold-italic; }
 h6, .h6 { font-size: 1em;    font-family: @text-bold-italic; }
 
 // Breadcrumbs
 .breadcrumbs {
     &:extend(h1);
     margin: 0;
 }
 
 .breadcrumbs_light {
   float:left;
   font-size: 1.3em;
   line-height: 38px;
 }
 
 // Body text
 // -------------------------
 
 p {
     margin: 0 0 @textmargin 0;
     padding: 0;
     line-height: 2em;
 }
 
 .lead {
   margin-bottom: @textmargin;
   font-weight: 300;
   line-height: 1.4;
 
   @media (min-width: @screen-sm-min) {
     font-size: (@basefontsize * 1.5);
   }
 }
 
 a,
 .link {
     color: @rcblue;
     text-decoration: none;
     outline: none;
     cursor: pointer;
 
     &:focus {
         outline: none;
     }
 
     &:hover {
         color: @rcdarkblue;
     }
 }
 
 img {
     border: none;
     outline: none;
 }
 
 strong {
   font-family: @text-bold;
 }
 
 em {
   font-family: @text-italic;
 }
 
 strong em,
 em strong {
   font-family: @text-bold-italic;
 }
 
 //TODO: lisa: b and i are depreciated, but we are still using them in places.
 //            Should probably make some decision whether to keep or lose these.
 b {
 
 }
 
 i {
     font-style: normal;
 }
 
 label {
     color: @text-color;
 
     input[type="checkbox"] {
         margin-right: 1em;
     }
     input[type="radio"] {
         margin-right: 1em;
     }
 }
 
 code,
 .code {
   font-size: .95em;
-  font-family: "Lucida Console", Monaco, monospace;
+  font-family: @text-code;
   color: @grey3;
 
   a {
       color: lighten(@rcblue,10%)
   }
 }
 
 pre {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-size: @basefontsize*.95;
     line-height: 1.4em;
-    font-family: "Lucida Console", Monaco, monospace;
+    font-family: @text-code;
     color: @grey3;
 }
 
 // Emphasis & misc
 // -------------------------
 
 small,
 .small {
   font-size: 75%;
   font-weight: normal;
   line-height: 1em;
 }
 
 mark,
 .mark {
   background-color: @rclightblue;
   padding: .2em;
 }
 
 // Alignment
 .text-left           { text-align: left; }
 .text-right          { text-align: right; }
 .text-center         { text-align: center; }
 .text-justify        { text-align: justify; }
 .text-nowrap         { white-space: nowrap; }
 
 // Transformation
 .text-lowercase      { text-transform: lowercase; }
 .text-uppercase      { text-transform: uppercase; }
 .text-capitalize     { text-transform: capitalize; }
 
 // Contextual colors
 .text-muted {
   color: @grey4;
 }
 .text-primary {
   color: @rcblue;
 }
 .text-success {
   color: @alert1;
 }
 .text-info {
   color: @alert4;
 }
 .text-warning {
   color: @alert3;
 }
 .text-danger {
   color: @alert2;
 }
 
 // Contextual backgrounds
 .bg-primary {
   background-color: white;
 }
 .bg-success {
   background-color: @alert1;
 }
 .bg-info {
   background-color: @alert4;
 }
 .bg-warning {
   background-color: @alert3;
 }
 .bg-danger {
   background-color: @alert2;
 }
 
 
 // Page header
 // -------------------------
 
 .page-header {
   margin: @pagepadding 0 @textmargin;
   border-bottom: @border-thickness solid @grey5;
 }
 
 .title {
     clear: both;
     float: left;
     width: 100%;
     margin: @pagepadding 0 @pagepadding;
 
     .breadcrumbs{
         float: left;
         clear: both;
         width: 700px;
         margin: 0;
 
         .q_filter_box {
           margin-right: @padding;
         }
     }
 
     h1 a {
         color: @rcblue;
     }
 
     input{
         margin-right: @padding;
     }
 
     h5, .h5 {
         color: @grey1;
         margin-bottom: @space;
 
         span {
             display: inline-block;
         }
     }
 
     p {
       margin-bottom: 0;
     }
 
     .links {
         float: right;
         display: inline;
         margin: 0;
         padding-left: 0;
         list-style: none;
         text-align: right;
 
         li:before { content: none; }
         li { float: right; }
         a {
             display: inline-block;
             margin-left: @textmargin/2;
         }
     }
 
     .title-content {
       float: left;
       margin: 0;
       padding: 0;
 
       & + .breadcrumbs {
         margin-top: @padding;
       }
 
       & + .links {
         margin-top: -@button-padding;
 
         & + .breadcrumbs {
           margin-top: @padding;
         }
       }
     }
 
     .title-main {
       font-size: @repo-title-fontsize;
     }
 
     .title-description {
       margin-top: .5em;
     }
 
     .q_filter_box {
       width: 200px;
     }
 
 }
 
 #readme .title {
   text-transform: none;
 }
 
 // Lists
 // -------------------------
 
 // Unordered and Ordered lists
 ul,
 ol {
   margin-top: 0;
   margin-bottom: @textmargin;
   ul,
   ol {
     margin-bottom: 0;
   }
 }
 
 li {
   line-height: 2em;
 }
 
 ul li {
   position: relative;
   display: block;
   list-style-type: none;
 
   &:before {
     content: "\2014\00A0";
     position: absolute;
     top: 0;
     left: -1.25em;
   }
 
   p:first-child {
     display:inline;
   }
 }
 
 // List options
 
 // Unstyled keeps list items block level, just removes default browser padding and list-style
 .list-unstyled {
   padding-left: 0;
   list-style: none;
   li:before { content: none; }
 }
 
 // Inline turns list items into inline-block
 .list-inline {
   .list-unstyled();
   margin-left: -5px;
 
   > li {
     display: inline-block;
     padding-left: 5px;
     padding-right: 5px;
   }
 }
 
 // Description Lists
 
 dl {
   margin-top: 0; // Remove browser default
   margin-bottom: @textmargin;
 }
 
 dt,
 dd {
   line-height: 1.4em;
 }
 
 dt {
   margin: @textmargin 0 0 0;
   font-family: @text-bold;
 }
 
 dd {
   margin-left: 0; // Undo browser default
 }
 
 // Horizontal description lists
 // Defaults to being stacked without any of the below styles applied, until the
 // grid breakpoint is reached (default of ~768px).
 // These are used in forms as well; see style guide.
 // TODO: lisa: These should really not be used in forms.
 
 .dl-horizontal {
 
     overflow: hidden;
     margin-bottom: @space;
 
     dt, dd {
       float: left;
       margin: 5px 0 5px 0;
     }
 
     dt {
         clear: left;
         width: @label-width - @form-vertical-margin;
     }
 
     dd {
         &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is  present
         margin-left: @form-vertical-margin;
         max-width: @form-max-width - (@label-width - @form-vertical-margin) - @form-vertical-margin;
     }
 
     pre {
         margin: 0;
     }
 
     &.settings {
       dt {
         text-align: left;
       }
     }
 
     @media (min-width: 768px) {
       dt {
         float: left;
         width: 180px;
         clear: left;
         text-align: right;
       }
       dd {
         margin-left: 20px;
       }
     }
 }
 
 
 // Misc
 // -------------------------
 
 // Abbreviations and acronyms
 abbr[title],
 abbr[data-original-title] {
   cursor: help;
   border-bottom: @border-thickness dotted @grey4;
 }
 .initialism {
   font-size: 90%;
   text-transform: uppercase;
 }
 
 // Blockquotes
 blockquote {
   padding: 1em 2em;
   margin: 0 0 2em;
   font-size: @basefontsize;
   border-left: 2px solid @grey6;
 
   p,
   ul,
   ol {
     &:last-child {
       margin-bottom: 0;
     }
   }
 
   footer,
   small,
   .small {
     display: block;
     font-size: 80%;
 
     &:before {
       content: '\2014 \00A0'; // em dash, nbsp
     }
   }
 }
 
 // Opposite alignment of blockquote
 //
 .blockquote-reverse,
 blockquote.pull-right {
   padding-right: 15px;
   padding-left: 0;
   border-right: 5px solid @grey6;
   border-left: 0;
   text-align: right;
 
   // Account for citation
   footer,
   small,
   .small {
     &:before { content: ''; }
     &:after {
       content: '\00A0 \2014'; // nbsp, em dash
     }
   }
 }
 
 // Addresses
 address {
   margin-bottom: 2em;
   font-style: normal;
   line-height: 1.8em;
 }
 
 .error-message {
     display: block;
     margin: @padding/3 0;
     color: @alert2;
 }
 
 .issue-tracker-link {
     color: @rcblue;
 }
 
 .info_text{
   font-size: @basefontsize;
   color: @grey4;
   font-family: @text-regular;
 }
 
 // help block text
 .help-block {
   display: block;
   margin: 0 0 @padding;
   color: @grey4;
   font-family: @text-light;
   &.pre-formatting {
       white-space: pre;
   }
 }
 
 .error-message {
   display: block;
   margin: @padding/3 0;
   color: @alert2;
 }

rhodecode/public/css/variables.less

@@ -1,137 +1,138 b''
 // variables for use in all RhodeCode products
 
 // FONTS
 //Primary Colors (brand)
 @rcblue: #427cc9;		//RhodeCode blue
 @rcdarkblue: #305b91;	//RhodeCode dark blue
 @rclightblue: lighten(@rcblue, 30%);
 @rchighlightblue: lighten(@rcblue, 35%);
 
 // Secondary Colors (greyscale)
 @grey1: #202020;		//midnight
 @grey2: #323232;		//charcoal
 @grey3: #666666;		//tungsten
 @grey4: #979797;		//light grey
 @grey5: #dbd9da;		//greyish
 @grey6: #eeeeee;		//silver
 @grey7: #f9f9f9;		//light silver
 
 // special for navigation
 @nav-grey: #CDCCCD;
 
 @grey5-alpha: rgba(219, 217, 218, 0.3);
 
 // Tertiary Colors
 @color1: #879938;		//olive green
 @color2: #fcc93a;		//bright yellow
 @color3: #ff9e07;		//orange-yellow
 @color4: #fc663a;		//bright orange
 @color5: #d63d44;		//signal red
 @color6: #99287c;		//violet
 @color7: #682668;		//dark purple
 @color8: #194f8e;		//dark blue
 
 // Alert Colors (bright)
 @alert1: #0ac878;		//bright green
 @alert2: #e85e4d;		//soft red
 @alert3: #ffc854;		//corn yellow
 @alert4: #84a5d2;		//light blue
 
 // Alert Inner Colors
 @alert1-inner: #daf7eb;		//bright green
 @alert2-inner: #fbdfdb;		//soft red
 @alert3-inner: #fff4dd;		//corn yellow
 @alert4-inner: #e6edf6;		//light blue
 
 // Highlight color for lines and colors
 @comment-highlight-color: #ffd887;
 
 // FONTS
 @basefontsize: 13px;
 @navigation-fontsize: 14px;
 @journal-fontsize: @basefontsize+7px;
 @text-color: @grey2;
 @repo-title-fontsize: 18px;
 
 @text-regular: "proximanovaregular","Proxima Nova Regular", "Proxima Nova", sans-serif;
 @text-italic: "proximanovaitalic","Proxima Nova Italic", "Proxima Nova", sans-serif;
 @text-bold: "proximanovabold","Proxima Nova Bold", "Proxima Nova", sans-serif;
 @text-semibold: "proximanovasemibold","Proxima Nova Semibold", "Proxima Nova", sans-serif;
 @text-bold-italic: "proximanovabolditalic","Proxima Nova Bold Italic", "Proxima Nova", sans-serif;
+@text-code: "Lucida Console", Menlo, Monaco, monospace;
 @text-light: @text-regular;
 @text-light-italic: @text-italic;
 // Used for .close buttons
 @text-bootstrap: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
 @panel-title: @basefontsize;
 @panel-footer: @basefontsize;
 
 // BORDERS
 @border-thickness: 1px;
 @border-thickness-buttons: 1px;
 @border-thickness-tags: 1px;
 @border-radius: 2px;
 @border-default-color: @grey5;
 @border-highlight-color: @grey4;
 
 // SPACING
 @contentpadding: 15px;  //padding on left and right of pages
 @pagepadding: 40px;		//padding on top and bottom of pages
 @menupadding: 12px;		//padding for sidebar and content
 @sidebarpadding: 15px;	//spacing between sections
 @space: 40px;			//spacing between sections
 @padding: 15px;			//padding inside modules
 @textmargin: 20px;		//spacing below headers
 @header-padding: 20px;
 @panel-padding: @padding;
 @gravatar-size: 16px;   // height/width of gravatar w/o border
 
 // ADMIN
 @form-max-width: 750px;
 
 // FORMS (new)
 @border-thickness-inputs: 1px;
 @input-padding: @button-padding; //needs to match button padding
 // TODO: johbo: Needed for working computation of paddings around labels etc.
 // Expected to be replaced once we are done with the form refactoring.
 @input-padding-px: 12px;
 @legend-width: 220px;
 @form-vertical-margin: 20px;
 @form-check-width: 20px;
 @form-radio-width: 10px;
 @form-textcolor: @grey3;
 
 // FORMS
 @label-width: 220px;
 //TODO: lisa: Eventually we don't need both of these; remove
 //            label-width when legend-width is no longer used
 
 @input-border-thickness: @border-thickness;
 @medium-inline-input-width: 115px;
 @input-description-minwidth: 300px;
 @label2-width: 200px;
 @checkboxes-width: 420px;
 @label-summary-minwidth: 80px;
 @search-form-width: 400px;
 @fields-input-m: 400px;
 @fields-input-l: 800px;
 
 // BUTTONS
 @button-padding: .9em;
 
 // DEFAULT WIDTHS
 @wrapper-maxwidth: 1200px;
 @sidebar-width: 145px;
 @sidebar-all-width: @sidebar-width + 2 * @sidebarpadding;
 @sidebar-small-width: 100px;
 @sidebar-small-all-width: @sidebar-small-width + 2 * @sidebarpadding;
 @texteditor-width: 660px;
 @maincontent-maxwidth: 940px;
 @pullrequest-width: 1025px;
 @summary-menu-stats-width: 200px;
 
 // SCREEN WIDTHS
 @screen-sm-min: 320px;
 
 // For Bootstrap
 @panel-border-radius: @border-radius;

rhodecode/templates/changeset/changeset.mako

@@ -1,352 +1,354 b''
 ## -*- coding: utf-8 -*-
 
 <%inherit file="/base/base.mako"/>
 <%namespace name="diff_block" file="/changeset/diff_block.mako"/>
 
 <%def name="title()">
     ${_('%s Commit') % c.repo_name} - ${h.show_id(c.commit)}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='repositories')}
 </%def>
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='changelog')}
 </%def>
 
 <%def name="main()">
 <script>
     // TODO: marcink switch this to pyroutes
     AJAX_COMMENT_DELETE_URL = "${h.route_path('repo_commit_comment_delete',repo_name=c.repo_name,commit_id=c.commit.raw_id,comment_id='__COMMENT_ID__')}";
     templateContext.commit_data.commit_id = "${c.commit.raw_id}";
 </script>
 <div class="box">
     <div class="title">
         ${self.repo_page_title(c.rhodecode_db_repo)}
     </div>
 
   <div id="changeset_compare_view_content"  class="summary changeset">
     <div class="summary-detail">
       <div class="summary-detail-header">
-          <span class="breadcrumbs files_location">
-            <h4>${_('Commit')}
-              <code>
+          <div class="breadcrumbs files_location">
+            <h4>
+            ${_('Commit')}
+
+            <code>
                 ${h.show_id(c.commit)}
-                <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.commit.raw_id}" title="${_('Copy the full commit id')}"></i>
-                % if hasattr(c.commit, 'phase'):
-                      <span class="tag phase-${c.commit.phase} tooltip" title="${_('Commit phase')}">${c.commit.phase}</span>
-                % endif
+            </code>
+            <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.commit.raw_id}" title="${_('Copy the full commit id')}"></i>
+            % if hasattr(c.commit, 'phase'):
+                  <span class="tag phase-${c.commit.phase} tooltip" title="${_('Commit phase')}">${c.commit.phase}</span>
+            % endif
 
-                ## obsolete commits
-                % if hasattr(c.commit, 'obsolete'):
-                  % if c.commit.obsolete:
-                      <span class="tag obsolete-${c.commit.obsolete} tooltip" title="${_('Evolve State')}">${_('obsolete')}</span>
-                  % endif
-                % endif
+            ## obsolete commits
+            % if hasattr(c.commit, 'obsolete'):
+              % if c.commit.obsolete:
+                  <span class="tag obsolete-${c.commit.obsolete} tooltip" title="${_('Evolve State')}">${_('obsolete')}</span>
+              % endif
+            % endif
 
-                ## hidden commits
-                % if hasattr(c.commit, 'hidden'):
-                  % if c.commit.hidden:
-                      <span class="tag hidden-${c.commit.hidden} tooltip" title="${_('Evolve State')}">${_('hidden')}</span>
-                  % endif
-                % endif
+            ## hidden commits
+            % if hasattr(c.commit, 'hidden'):
+              % if c.commit.hidden:
+                  <span class="tag hidden-${c.commit.hidden} tooltip" title="${_('Evolve State')}">${_('hidden')}</span>
+              % endif
+            % endif
+            </h4>
 
-              </code>
-            </h4>
-          </span>
+          </div>
           <div class="pull-right">
               <span id="parent_link">
                 <a href="#parentCommit" title="${_('Parent Commit')}">${_('Parent')}</a>
               </span>
                |
               <span id="child_link">
                 <a href="#childCommit" title="${_('Child Commit')}">${_('Child')}</a>
               </span>
           </div>
       </div>
 
       <div class="fieldset">
         <div class="left-label">
           ${_('Description')}:
         </div>
         <div class="right-content">
           <div id="trimmed_message_box" class="commit">${h.urlify_commit_message(c.commit.message,c.repo_name)}</div>
           <div id="message_expand" style="display:none;">
             ${_('Expand')}
           </div>
         </div>
       </div>
 
       %if c.statuses:
       <div class="fieldset">
         <div class="left-label">
           ${_('Commit status')}:
         </div>
         <div class="right-content">
           <div class="changeset-status-ico">
             <div class="${'flag_status %s' % c.statuses[0]} pull-left"></div>
           </div>
           <div title="${_('Commit status')}" class="changeset-status-lbl">[${h.commit_status_lbl(c.statuses[0])}]</div>
         </div>
       </div>
       %endif
 
       <div class="fieldset">
         <div class="left-label">
           ${_('References')}:
         </div>
         <div class="right-content">
           <div class="tags">
 
             %if c.commit.merge:
               <span class="mergetag tag">
                <i class="icon-merge"></i>${_('merge')}
               </span>
             %endif
 
             %if h.is_hg(c.rhodecode_repo):
               %for book in c.commit.bookmarks:
               <span class="booktag tag" title="${h.tooltip(_('Bookmark %s') % book)}">
                 <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(at=book))}"><i class="icon-bookmark"></i>${h.shorter(book)}</a>
               </span>
               %endfor
             %endif
 
             %for tag in c.commit.tags:
              <span class="tagtag tag"  title="${h.tooltip(_('Tag %s') % tag)}">
               <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(at=tag))}"><i class="icon-tag"></i>${tag}</a>
              </span>
             %endfor
 
             %if c.commit.branch:
               <span class="branchtag tag" title="${h.tooltip(_('Branch %s') % c.commit.branch)}">
                 <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(at=c.commit.branch))}"><i class="icon-code-fork"></i>${h.shorter(c.commit.branch)}</a>
               </span>
             %endif
             </div>
           </div>
         </div>
 
       <div class="fieldset">
         <div class="left-label">
           ${_('Diff options')}:
         </div>
         <div class="right-content">
             <div class="diff-actions">
               <a href="${h.route_path('repo_commit_raw',repo_name=c.repo_name,commit_id=c.commit.raw_id)}"  class="tooltip" title="${h.tooltip(_('Raw diff'))}">
                 ${_('Raw Diff')}
               </a>
                |
               <a href="${h.route_path('repo_commit_patch',repo_name=c.repo_name,commit_id=c.commit.raw_id)}"  class="tooltip" title="${h.tooltip(_('Patch diff'))}">
                 ${_('Patch Diff')}
               </a>
                |
               <a href="${h.route_path('repo_commit_download',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(diff='download'))}" class="tooltip" title="${h.tooltip(_('Download diff'))}">
                 ${_('Download Diff')}
               </a>
                |
               ${c.ignorews_url(request)}
                |
               ${c.context_url(request)}
             </div>
         </div>
       </div>
 
       <div class="fieldset">
         <div class="left-label">
           ${_('Comments')}:
         </div>
         <div class="right-content">
             <div class="comments-number">
                 %if c.comments:
                     <a href="#comments">${_ungettext("%d Commit comment", "%d Commit comments", len(c.comments)) % len(c.comments)}</a>,
                 %else:
                     ${_ungettext("%d Commit comment", "%d Commit comments", len(c.comments)) % len(c.comments)}
                 %endif
                 %if c.inline_cnt:
                     <a href="#" onclick="return Rhodecode.comments.nextComment();" id="inline-comments-counter">${_ungettext("%d Inline Comment", "%d Inline Comments", c.inline_cnt) % c.inline_cnt}</a>
                 %else:
                     ${_ungettext("%d Inline Comment", "%d Inline Comments", c.inline_cnt) % c.inline_cnt}
                 %endif
             </div>
         </div>
       </div>
 
       <div class="fieldset">
         <div class="left-label">
           ${_('Unresolved TODOs')}:
         </div>
         <div class="right-content">
             <div class="comments-number">
                 % if c.unresolved_comments:
                     % for co in c.unresolved_comments:
                         <a class="permalink" href="#comment-${co.comment_id}" onclick="Rhodecode.comments.scrollToComment($('#comment-${co.comment_id}'))"> #${co.comment_id}</a>${'' if loop.last else ','}
                     % endfor
                 % else:
                     ${_('There are no unresolved TODOs')}
                 % endif
             </div>
         </div>
       </div>
 
     </div> <!-- end summary-detail -->
 
     <div id="commit-stats" class="sidebar-right">
       <div class="summary-detail-header">
         <h4 class="item">
           ${_('Author')}
         </h4>
       </div>
         <div class="sidebar-right-content">
             ${self.gravatar_with_user(c.commit.author)}
             <div class="user-inline-data">- ${h.age_component(c.commit.date)}</div>
         </div>
     </div><!-- end sidebar -->
   </div> <!-- end summary -->
   <div class="cs_files">
     <%namespace name="cbdiffs" file="/codeblocks/diffs.mako"/>
     ${cbdiffs.render_diffset_menu()}
     ${cbdiffs.render_diffset(
       c.changes[c.commit.raw_id], commit=c.commit, use_comments=True)}
   </div>
 
     ## template for inline comment form
     <%namespace name="comment" file="/changeset/changeset_file_comment.mako"/>
 
     ## render comments
     ${comment.generate_comments(c.comments)}
 
     ## main comment form and it status
     ${comment.comments(h.route_path('repo_commit_comment_create', repo_name=c.repo_name, commit_id=c.commit.raw_id),
                        h.commit_status(c.rhodecode_db_repo, c.commit.raw_id))}
 </div>
 
     ## FORM FOR MAKING JS ACTION AS CHANGESET COMMENTS
     <script type="text/javascript">
 
       $(document).ready(function() {
 
           var boxmax = parseInt($('#trimmed_message_box').css('max-height'), 10);
           if($('#trimmed_message_box').height() === boxmax){
               $('#message_expand').show();
           }
 
           $('#message_expand').on('click', function(e){
               $('#trimmed_message_box').css('max-height', 'none');
               $(this).hide();
           });
 
           $('.show-inline-comments').on('click', function(e){
               var boxid = $(this).attr('data-comment-id');
               var button = $(this);
 
               if(button.hasClass("comments-visible")) {
                 $('#{0} .inline-comments'.format(boxid)).each(function(index){
                   $(this).hide();
                 });
                 button.removeClass("comments-visible");
               } else {
                 $('#{0} .inline-comments'.format(boxid)).each(function(index){
                   $(this).show();
                 });
                 button.addClass("comments-visible");
               }
           });
 
 
           // next links
           $('#child_link').on('click', function(e){
               // fetch via ajax what is going to be the next link, if we have
               // >1 links show them to user to choose
               if(!$('#child_link').hasClass('disabled')){
                   $.ajax({
                     url: '${h.route_path('repo_commit_children',repo_name=c.repo_name, commit_id=c.commit.raw_id)}',
                     success: function(data) {
                       if(data.results.length === 0){
                           $('#child_link').html("${_('No Child Commits')}").addClass('disabled');
                       }
                       if(data.results.length === 1){
                           var commit = data.results[0];
                           window.location = pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': commit.raw_id});
                       }
                       else if(data.results.length === 2){
                           $('#child_link').addClass('disabled');
                           $('#child_link').addClass('double');
                           var _html = '';
                           _html +='<a title="__title__" href="__url__">__rev__</a> '
                                   .replace('__rev__','r{0}:{1}'.format(data.results[0].revision, data.results[0].raw_id.substr(0,6)))
                                   .replace('__title__', data.results[0].message)
                                   .replace('__url__', pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': data.results[0].raw_id}));
                           _html +=' | ';
                           _html +='<a title="__title__" href="__url__">__rev__</a> '
                                   .replace('__rev__','r{0}:{1}'.format(data.results[1].revision, data.results[1].raw_id.substr(0,6)))
                                   .replace('__title__', data.results[1].message)
                                   .replace('__url__', pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': data.results[1].raw_id}));
                           $('#child_link').html(_html);
                       }
                     }
                   });
                   e.preventDefault();
               }
           });
 
           // prev links
           $('#parent_link').on('click', function(e){
               // fetch via ajax what is going to be the next link, if we have
               // >1 links show them to user to choose
               if(!$('#parent_link').hasClass('disabled')){
                   $.ajax({
                     url: '${h.route_path("repo_commit_parents",repo_name=c.repo_name, commit_id=c.commit.raw_id)}',
                     success: function(data) {
                       if(data.results.length === 0){
                           $('#parent_link').html('${_('No Parent Commits')}').addClass('disabled');
                       }
                       if(data.results.length === 1){
                           var commit = data.results[0];
                           window.location = pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': commit.raw_id});
                       }
                       else if(data.results.length === 2){
                           $('#parent_link').addClass('disabled');
                           $('#parent_link').addClass('double');
                           var _html = '';
                           _html +='<a title="__title__" href="__url__">Parent __rev__</a>'
                                   .replace('__rev__','r{0}:{1}'.format(data.results[0].revision, data.results[0].raw_id.substr(0,6)))
                                   .replace('__title__', data.results[0].message)
                                   .replace('__url__', pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': data.results[0].raw_id}));
                           _html +=' | ';
                           _html +='<a title="__title__" href="__url__">Parent __rev__</a>'
                                   .replace('__rev__','r{0}:{1}'.format(data.results[1].revision, data.results[1].raw_id.substr(0,6)))
                                   .replace('__title__', data.results[1].message)
                                   .replace('__url__', pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': data.results[1].raw_id}));
                           $('#parent_link').html(_html);
                       }
                     }
                   });
                   e.preventDefault();
               }
           });
 
           if (location.hash) {
             var result = splitDelimitedHash(location.hash);
             var line = $('html').find(result.loc);
               if (line.length > 0){
                   offsetScroll(line, 70);
               }
           }
 
           // browse tree @ revision
           $('#files_link').on('click', function(e){
               window.location = '${h.route_path('repo_files:default_path',repo_name=c.repo_name, commit_id=c.commit.raw_id)}';
               e.preventDefault();
           });
 
           // inject comments into their proper positions
           var file_comments = $('.inline-comment-placeholder');
       })
     </script>
 
 </%def>