kallithea Changeset - 7d02958345ff

Changeset - 7d02958345ff

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Mads Kiilerich - 8 years ago 2018-02-15 00:23:52
mads@kiilerich.com

diff: fix 2-way diff panes not being shown side by side

eee7674cef41 had the side effect of setting overflow styling on the DOM
elements used by mergely. That confused it's computation of sizes on some
browsers, scroll bars got added, and the panes were re-flowed to not be
side-by-side.

To fix that, add an exception that allow overflow-x to be set to visible.

2 files changed with 7 insertions and 2 deletions:

kallithea/public/less/style.less

kallithea/templates/files/diff_2way.html

0 comments (0 inline, 0 general)

kallithea/public/less/style.less

➞

Show inline comments

@@ @@ -77,24 +77,29 @@ nav.navbar.mainmenu .navbar-brand .brand @@
 .code-highlighttable pre {
   background: inherit;
   border: 0;
+}
 /* every direct child of a panel, that is not .panel-heading, should auto
  * overflow to prevent overflowing of elements like text boxes and tables */
 .panel > :not(.panel-heading){
   overflow-x: auto;
   min-height: 0.01%;
+}
 /* allow other exceptions to automatic overflow-x */
 .panel > .overflow-x-visible {
   overflow-x: visible;
+}
 /* search highlighting */
 div.search-code-body pre .match {
   background-color: @highlight-color;
+}
 div.search-code-body pre .break {
   background-color: @highlight-line-color;
   width: 100%;
   display: block;
+}
 /* use @alert-danger-text for form error messages and .alert-danger for the input element */
 .form-group .error-message {

kallithea/templates/files/diff_2way.html

➞

Show inline comments

@@ @@ -21,25 +21,25 @@ @@
 <%block name="header_menu">
     ${self.menu('repositories')}
 </%block>
 <%def name="main()">
 ${self.repo_context_bar('changelog')}
 <div class="panel panel-primary">
     <div class="panel-heading clearfix">
         ${self.breadcrumbs()}
     </div>
     <div class="no-padding panel-body">
+    <div class="no-padding panel-body overflow-x-visible">
         <div class="panel panel-default">
             <div class="panel-heading clearfix">
                     <div class="pull-left">
                         ${h.link_to(h.safe_unicode(c.node1.path),h.url('files_home',repo_name=c.repo_name,
                         revision=c.cs2.raw_id,f_path=h.safe_unicode(c.node1.path)))}
                     </div>
                     <div class="pull-left diff-actions">
                       <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='diff',fulldiff=1)}"
                          data-toggle="tooltip"
                          title="${_('Show full diff for this file')}">
                           <i class="icon-file-code"></i></a>
                       <a href="${h.url('files_diff_2way_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='diff',fulldiff=1)}"
@@ @@ -47,25 +47,25 @@ ${self.repo_context_bar('changelog')} @@
                          title="${_('Show full side-by-side diff for this file')}">
                           <i class="icon-docs"></i></a>
                       <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='raw')}"
                          data-toggle="tooltip"
                          title="${_('Raw diff')}"><i class="icon-diff"></i></a>
                       <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='download')}"
                          data-toggle="tooltip"
                          title="${_('Download diff')}"><i class="icon-floppy"></i></a>
                       ${h.checkbox('ignorews', label=_('Ignore whitespace'))}
                       ${h.checkbox('edit_mode', label=_('Edit'))}
                     </div>
             </div>
             <div id="compare"></div>
+            <div id="compare" class="overflow-x-visible"></div>
         </div>
     </div>
 <script>
 var orig1_url = ${h.jshtml(h.url('files_raw_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),revision=c.cs1.raw_id))};
 var orig2_url = ${h.jshtml(h.url('files_raw_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node2.path),revision=c.cs2.raw_id))};
 $(document).ready(function () {
     $('#compare').mergely({
         width: 'auto',
         height: $(window).height() - $('#compare').offset().top - $('#footer').height() - 35,
         fgcolor: {a:'#ddffdd',c:'#cccccc',d:'#ffdddd'},

0 comments (0 inline, 0 general)