fixed compare view layout

rhodecode/public/css/summary.less

@@ -1,470 +1,478 b''
 // summary.less
 // For use in RhodeCode applications;
 // Used for headers and file detail summary screens.
 
 .summary {
     clear: both;
     float: none;
     position: relative;
     width: 100%;
     margin: 0;
     padding: 0;
     background: #FCFCFC;
     border: 1px solid #EAEAEA;
     border-radius: @border-radius;
     margin-bottom: 20px;
 
     .summary-detail-header {
         display: block;
         width: 100%;
-        margin-bottom: @textmargin;
+        margin-bottom: 10px;
         padding: 0 0 .5em 0;
         border-bottom: @border-thickness solid @border-default-color;
 
         .breadcrumbs {
             display: inline;
             margin: 0;
             padding: 0;
         }
 
         h4 {
             margin: 0 1em 0 0;
-            padding: 0;
+            padding: 10px 0 5px 20px;
             line-height: 1.2em;
             font-size: @basefontsize;
         }
 
         .action_link {
             float: right;
         }
 
         .new-file {
             float: right;
             margin-top: -1.5em;
         }
     }
 
     .summary-detail {
         float: none;
         position: relative;
         width: 100%;
         margin: 0;
-        padding: 0;
+        padding: 0 0 20px 0;
 
         .file_diff_buttons {
             margin-top: @space;
         }
 
         // commit message
         .commit {
           white-space: pre-wrap;
         }
 
         .left-clone {
             float: left;
             height: 30px;
             margin: 0;
             padding: 0;
             width: 130px;
             font-weight: @text-semibold-weight;
             font-family: @text-semibold;
         }
         .left-clone select {
             width: 130px;
             margin-right: 0;
             background-color: @grey7;
             border-color: @grey4;
             color: #5C5C5C;
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
         }
 
         .right-clone {
             float: left;
             width: ~"calc(100% - 170px)";
 
             .clipboard-action {
                 margin-left: -30px;
             }
         }
 
         .clone_url_input {
             width: ~"calc(100% - 90px)";
             padding: 6px 30px 6px 10px;
             height: 14px;
             box-shadow: 0 1px 1px 0 rgba(0,0,0,0.07);
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
             margin-left: -1px;
         }
 
         &.directory {
             margin-bottom: 0;
         }
 
         .desc {
             white-space: pre-wrap;
         }
         .disabled {
             opacity: .5;
             cursor: inherit;
         }
         .help-block {
             color: inherit;
             margin: 0;
         }
     }
 
     .sidebar-right {
         float: left;
         width: 24%;
         margin: 0;
         padding: 0;
 
         ul {
             margin-left: 0;
             padding-left: 0;
 
             li {
                 list-style-type: none;
             }
         }
     }
 
     #clone_by_name, #clone_by_id{
         display: inline-block;
         margin-left: 0px;
     }
 
     .codeblock {
         border: none;
         background-color: transparent;
     }
 
     .code-body {
         border: @border-thickness solid @border-default-color;
         .border-radius(@border-radius);
     }
 
     .btn-collapse {
         clear: both;
         float: none;
         background: #F7F7F7;
         text-align: center;
         color: #949494;
         font-size: 11px;
 
         &:hover {
             background: #f1f1f1;
             color: #2B2B2D;
         }
     }
 }
 
 // this is used outside of just the summary
 .fieldset, // similar to form fieldset
 .summary .sidebar-right-content { // these have to match
     clear: both;
     float: none;
     position: relative;
     display:block;
     width: 100%;
     min-height: 1em;
     margin-bottom: 10px;
     padding: 0;
     line-height: 1.2em;
 
     &:after { // clearfix
         content: "";
         clear: both;
         width: 100%;
         height: 1em;
     }
 }
 
 .summary .sidebar-right-content {
     margin-bottom: 0;
 
     .rc-user {
         min-width: 0;
     }
 
     li {
         list-style: none;
         line-height: normal;
     }
 }
 
 .summary {
     .fieldset {
         margin-bottom: 0;
     }
 }
 
 .fieldset {
 
     .left-label { // similar to form legend
         display: block;
         margin: 0;
         padding: 0;
         font-weight: @text-semibold-weight;
         font-family: @text-semibold;
     }
 
     .left-label-summary {
         padding-left: 20px;
         margin-bottom: 5px;
 
         p {
             margin-bottom: 5px;
             color: @grey1;
             float: left;
             width: 130px;
+
+            &.spacing {
+                margin-top: 10px;
+            }
         }
 
         .right-label-summary {
             float: left;
             margin-top: 7px;
             width: ~"calc(100% - 160px)";
         }
     }
 
     .left-label-summary-files {
         padding-left: 45px;
         margin-top: 5px;
 
         p {
             margin-bottom: 5px;
             color: @grey1;
             float: left;
             width: 130px;
+
+            &.spacing {
+                margin-top: 10px;
+            }
         }
 
         .right-label-summary {
             float: left;
             margin-top: 7px;
         }
     }
 
     .left-content {
         width: ~"calc(60% - 20px)";
         float: left;
         margin: 15px 0 15px 20px;
 
         .rc-user {
             min-width: auto;
             max-width: none;
             min-height: auto;
             padding-right: 5px;
         }
 
         .left-content-avatar {
             width: 45px;
             float: left;
             margin-top: 8px;
         }
 
         .left-content-message {
             float: left;
             width: ~"calc(100% - 45px)";
         }
     }
 
     .right-content { // similar to form fields
         float: left;
         display: block;
         width: ~"calc(40% - 20px)";
         text-align: right;
         margin: 15px 20px 15px 0;
 
         .truncate-wrap,
         .truncate {
             max-width: 100%;
             width: 100%;
         }
 
         .commit-long {
             overflow-x: auto;
         }
 
         .commit-info {
             margin-top: 7px;
         }
 
         .tag, .tagtag, .branchtag, .booktag, .metatag, .perm_tag {
             background:transparent;
             border: none;
             box-shadow: none;
             margin-left: 10px;
             font-size: 13px;
         }
 
         .tag span, .tag i {
             color: @grey1;
         }
     }
     .commit {
         color: @grey1;
         margin-bottom: 5px;
         white-space: pre;
     }
     .commit.truncate-wrap {
         overflow:hidden;
         text-overflow: ellipsis;
     }
     .commit-author {
         color: @grey1;
     }
     .commit-date {
         color: @grey4;
     }
 }
 
 // expand commit message
 #message_expand {
     clear: both;
     display: block;
     color: @rcblue;
     cursor: pointer;
 }
 
 #trimmed_message_box {
     max-height: floor(2 * @basefontsize * 1.2);  // 2 lines * line-height
     overflow: hidden;
 }
 
 // show/hide comments button
 .show-inline-comments {
     display: inline;
     cursor: pointer;
 
     .comments-show { display: inline; }
     .comments-hide { display: none; }
 
     &.comments-visible {
         .comments-show { display: none; }
         .comments-hide { display: inline; }
     }
 }
 
 // Quick Start section
 
 .empty-repo {
     border: 1px solid #EAEAEA;
     border-bottom: 0;
     border-radius: @border-radius;
     padding: 0 20px;
 }
 
 .empty-repo h3, .quick_start p {
     margin-bottom: 10px;
 }
 
 .quick_start pre {
     background: #FCFEFF;
     border: 1px solid #CBDBEB;
     box-shadow: @button-shadow;
     padding: 10px 15px;
     border-radius: 4px;
     color: @grey2;
 }
 
 .clear-fix {
     clear: both;
 }
 
 .quick_start {
     display: block;
     position: relative;
     border: 1px solid #EAEAEA;
     border-top: 0;
     border-radius: @border-radius;
     padding: 0 20px;
 
     // adds some space to make copy and paste easier
     .left-label,
     .right-content {
         line-height: 1.6em;
     }
 }
 
 
 .submodule {
     .summary-detail {
         width: 100%;
 
         .btn-collapse {
             display: none;
         }
     }
 }
 
 .codeblock-header {
     float: left;
     display: block;
     width: 100%;
     margin: 0;
 
     .stats {
         float: left;
         padding: 10px;
     }
     .stats-filename {
         font-size: 120%;
     }
     .stats-first-item {
         padding: 0px 0px 0px 3px;
     }
 
     .stats-info {
         margin-top: 5px;
         color: @grey4;
     }
 
     .buttons {
         float: right;
         text-align: right;
         color: @grey4;
         padding: 10px;
         margin-top: 15px;
     }
 
     .file-container {
         display: inline-block;
         width: 100%;
     }
 
 }
 
 #summary-menu-stats {
 
     .stats-bullet {
         color: @grey3;
         min-width: 3em;
     }
 
     .repo-size {
         margin-bottom: .5em;
     }
 
 }
 
 .rctable.repo_summary {
     border: 1px solid #eaeaea;
     border-radius: 2px;
     border-collapse: inherit;
     border-bottom: 0;
 
     th {
         background: @grey7;
         border-bottom: 0;
     }
 
     td {
         border-color: #eaeaea;
     }
 
     td.td-status {
         padding: 0 0 0 10px;
     }
 }

rhodecode/templates/compare/compare_diff.mako

@@ -1,303 +1,297 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 <%namespace name="cbdiffs" file="/codeblocks/diffs.mako"/>
 
 <%def name="title()">
     %if c.compare_home:
         ${_('%s Compare') % c.repo_name}
     %else:
         ${_('%s Compare') % c.repo_name} - ${'%s@%s' % (c.source_repo.repo_name, c.source_ref)} &gt; ${'%s@%s' % (c.target_repo.repo_name, c.target_ref)}
     %endif
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()"></%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='repositories')}
 </%def>
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='compare')}
 </%def>
 
 <%def name="main()">
     <script type="text/javascript">
         // set fake commitId on this commit-range page
         templateContext.commit_data.commit_id = "${h.EmptyCommit().raw_id}";
     </script>
 
     <div class="box">
         <div class="summary changeset">
             <div class="summary-detail">
               <div class="summary-detail-header">
                   <span class="breadcrumbs files_location">
                     <h4>
                         ${_('Compare Commits')}
                         % if c.file_path:
                         ${_('for file')} <a href="#${'a_' + h.FID('',c.file_path)}">${c.file_path}</a>
                         % endif
 
                         % if c.commit_ranges:
                         <code>
                         r${c.source_commit.idx}:${h.short_id(c.source_commit.raw_id)}...r${c.target_commit.idx}:${h.short_id(c.target_commit.raw_id)}
                         </code>
                         % endif
                     </h4>
                   </span>
+                  <div class="clear-fix"></div>
               </div>
 
               <div class="fieldset">
-                <div class="left-label">
-                  ${_('Target')}:
-                </div>
-                <div class="right-content">
-                    <div>
+                <div class="left-label-summary">
+                    <p class="spacing">${_('Target')}:</p>
+                    <div class="right-label-summary">
                         <div class="code-header" >
                             <div class="compare_header">
                                 ## The hidden elements are replaced with a select2 widget
                                 ${h.hidden('compare_source')}
                             </div>
                         </div>
                     </div>
                 </div>
               </div>
 
               <div class="fieldset">
-                <div class="left-label">
-                  ${_('Source')}:
-                </div>
-                <div class="right-content">
-                    <div>
+                <div class="left-label-summary">
+                    <p class="spacing">${_('Source')}:</p>
+                    <div class="right-label-summary">
                         <div class="code-header" >
                             <div class="compare_header">
                                 ## The hidden elements are replaced with a select2 widget
                                 ${h.hidden('compare_target')}
                             </div>
                         </div>
                     </div>
                 </div>
               </div>
 
               <div class="fieldset">
-                <div class="left-label">
-                  ${_('Actions')}:
-                </div>
-                <div class="right-content">
-                    <div>
+                <div class="left-label-summary">
+                    <p class="spacing">${_('Actions')}:</p>
+                    <div class="right-label-summary">
                         <div class="code-header" >
                             <div class="compare_header">
-
                                 <div class="compare-buttons">
                                 % if c.compare_home:
                                   <a id="compare_revs" class="btn btn-primary"> ${_('Compare Commits')}</a>
 
                                   <a class="btn disabled tooltip" disabled="disabled" title="${_('Action unavailable in current view')}">${_('Swap')}</a>
                                   <a class="btn disabled tooltip" disabled="disabled" title="${_('Action unavailable in current view')}">${_('Comment')}</a>
                                   <div id="changeset_compare_view_content">
                                      <div class="help-block">${_('Compare commits, branches, bookmarks or tags.')}</div>
                                   </div>
 
                                 % elif c.preview_mode:
                                   <a class="btn disabled tooltip" disabled="disabled" title="${_('Action unavailable in current view')}">${_('Compare Commits')}</a>
                                   <a class="btn disabled tooltip" disabled="disabled" title="${_('Action unavailable in current view')}">${_('Swap')}</a>
                                   <a class="btn disabled tooltip" disabled="disabled" title="${_('Action unavailable in current view')}">${_('Comment')}</a>
 
                                 % else:
                                   <a id="compare_revs" class="btn btn-primary"> ${_('Compare Commits')}</a>
                                   <a id="btn-swap" class="btn btn-primary" href="${c.swap_url}">${_('Swap')}</a>
 
                                   ## allow comment only if there are commits to comment on
                                   % if c.diffset and c.diffset.files and c.commit_ranges:
                                     <a id="compare_changeset_status_toggle" class="btn btn-primary">${_('Comment')}</a>
                                   % else:
                                     <a class="btn disabled tooltip" disabled="disabled" title="${_('Action unavailable in current view')}">${_('Comment')}</a>
                                   % endif
                                 % endif
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
+                    </div>
               </div>
 
               ## commit status form
               <div class="fieldset" id="compare_changeset_status" style="display: none; margin-bottom: -80px;">
-                <div class="left-label">
-                  ${_('Commit status')}:
-                </div>
-                <div class="right-content">
-                    <%namespace name="comment" file="/changeset/changeset_file_comment.mako"/>
-                    ## main comment form and it status
-                    <%
-                    def revs(_revs):
-                        form_inputs = []
-                        for cs in _revs:
-                            tmpl = '<input type="hidden" data-commit-id="%(cid)s" name="commit_ids" value="%(cid)s">' % {'cid': cs.raw_id}
-                            form_inputs.append(tmpl)
-                        return form_inputs
-                    %>
-                    <div>
-                        ${comment.comments(h.route_path('repo_commit_comment_create', repo_name=c.repo_name, commit_id='0'*16), None, is_compare=True, form_extras=revs(c.commit_ranges))}
+                <div class="left-label-summary">
+                    <p class="spacing">${_('Commit status')}:</p>
+                    <div class="right-label-summary">
+                        <%namespace name="comment" file="/changeset/changeset_file_comment.mako"/>
+                        ## main comment form and it status
+                        <%
+                        def revs(_revs):
+                            form_inputs = []
+                            for cs in _revs:
+                                tmpl = '<input type="hidden" data-commit-id="%(cid)s" name="commit_ids" value="%(cid)s">' % {'cid': cs.raw_id}
+                                form_inputs.append(tmpl)
+                            return form_inputs
+                        %>
+                        <div>
+                            ${comment.comments(h.route_path('repo_commit_comment_create', repo_name=c.repo_name, commit_id='0'*16), None, is_compare=True, form_extras=revs(c.commit_ranges))}
+                        </div>
                     </div>
                 </div>
               </div>
-
+              <div class="clear-fix"></div>
             </div> <!-- end summary-detail -->
         </div> <!-- end summary -->
 
         ## use JS script to load it quickly before potentially large diffs render long time
         ## this prevents from situation when large diffs block rendering of select2 fields
         <script type="text/javascript">
 
                 var cache = {};
 
                 var formatSelection = function(repoName){
                     return function(data, container, escapeMarkup) {
                         var selection = data ? this.text(data) : "";
                         return escapeMarkup('{0}@{1}'.format(repoName, selection));
                     }
                 };
 
                 var feedCompareData = function(query, cachedValue){
                     var data = {results: []};
                     //filter results
                     $.each(cachedValue.results, function() {
                         var section = this.text;
                         var children = [];
                         $.each(this.children, function() {
                             if (query.term.length === 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0) {
                                 children.push({
                                     'id': this.id,
                                     'text': this.text,
                                     'type': this.type
                                 })
                             }
                         });
                         data.results.push({
                             'text': section,
                             'children': children
                         })
                     });
                     //push the typed in changeset
                     data.results.push({
                         'text': _gettext('specify commit'),
                         'children': [{
                             'id': query.term,
                             'text': query.term,
                             'type': 'rev'
                         }]
                     });
                     query.callback(data);
                 };
 
                 var loadCompareData = function(repoName, query, cache){
                     $.ajax({
                         url: pyroutes.url('repo_refs_data', {'repo_name': repoName}),
                         data: {},
                         dataType: 'json',
                         type: 'GET',
                         success: function(data) {
                             cache[repoName] = data;
                             query.callback({results: data.results});
                         }
                     })
                 };
 
                 var enable_fields = ${"false" if c.preview_mode else "true"};
                 $("#compare_source").select2({
                     placeholder: "${'%s@%s' % (c.source_repo.repo_name, c.source_ref)}",
                     containerCssClass: "drop-menu",
                     dropdownCssClass: "drop-menu-dropdown",
                     formatSelection: formatSelection("${c.source_repo.repo_name}"),
                     dropdownAutoWidth: true,
                     query: function(query) {
                         var repoName = '${c.source_repo.repo_name}';
                         var cachedValue = cache[repoName];
 
                         if (cachedValue){
                             feedCompareData(query, cachedValue);
                         }
                         else {
                             loadCompareData(repoName, query, cache);
                         }
                     }
                 }).select2("enable", enable_fields);
 
                 $("#compare_target").select2({
                     placeholder: "${'%s@%s' % (c.target_repo.repo_name, c.target_ref)}",
                     dropdownAutoWidth: true,
                     containerCssClass: "drop-menu",
                     dropdownCssClass: "drop-menu-dropdown",
                     formatSelection: formatSelection("${c.target_repo.repo_name}"),
                     query: function(query) {
                         var repoName = '${c.target_repo.repo_name}';
                         var cachedValue = cache[repoName];
 
                         if (cachedValue){
                             feedCompareData(query, cachedValue);
                         }
                         else {
                             loadCompareData(repoName, query, cache);
                         }
                     }
                 }).select2("enable", enable_fields);
                 var initial_compare_source = {id: "${c.source_ref}", type:"${c.source_ref_type}"};
                 var initial_compare_target = {id: "${c.target_ref}", type:"${c.target_ref_type}"};
 
                 $('#compare_revs').on('click', function(e) {
                     var source = $('#compare_source').select2('data') || initial_compare_source;
                     var target = $('#compare_target').select2('data')  || initial_compare_target;
                     if (source && target) {
                         var url_data = {
                             repo_name: "${c.repo_name}",
                             source_ref: source.id,
                             source_ref_type: source.type,
                             target_ref: target.id,
                             target_ref_type: target.type
                         };
                         window.location = pyroutes.url('repo_compare', url_data);
                     }
                 });
                 $('#compare_changeset_status_toggle').on('click', function(e) {
                     $('#compare_changeset_status').toggle();
                 });
 
         </script>
 
         ## table diff data
         <div class="table">
 
 
             % if not c.compare_home:
                 <div id="changeset_compare_view_content">
                     <div class="pull-left">
                       <div class="btn-group">
                           <a
                               class="btn"
                               href="#"
                               onclick="$('.compare_select').show();$('.compare_select_hidden').hide(); return false">
                               ${_ungettext('Expand %s commit','Expand %s commits', len(c.commit_ranges)) % len(c.commit_ranges)}
                           </a>
                           <a
                               class="btn"
                               href="#"
                               onclick="$('.compare_select').hide();$('.compare_select_hidden').show(); return false">
                               ${_ungettext('Collapse %s commit','Collapse %s commits', len(c.commit_ranges)) % len(c.commit_ranges)}
                           </a>
                       </div>
                     </div>
                     <div style="padding:0 10px 10px 0px" class="pull-left"></div>
                     ## commit compare generated below
                     <%include file="compare_commits.mako"/>
                     ${cbdiffs.render_diffset_menu(c.diffset)}
                     ${cbdiffs.render_diffset(c.diffset)}
                  </div>
             % endif
 
         </div>
     </div>
 
 </%def>