diffs: made pills display on single side. Better UX and readability.

rhodecode/public/css/code-block.less

@@ -743,9 +743,10 b' input.filediff-collapse-state {'
 .pill-group {
     .pill {
         opacity: .8;
+        margin-right: 3px;
+
         &:first-child {
             border-radius: @border-radius 0 0 @border-radius;
-            margin-right: 3px;
         }
         &:last-child {
             border-radius: 0 @border-radius @border-radius 0;

rhodecode/templates/codeblocks/diffs.mako

@@ -383,19 +383,16 b' from rhodecode.lib.diffs import NEW_FILE'
         %endif
         <i style="color: #aaa" class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${final_path}" title="${_('Copy the full path')}" onclick="return false;"></i>
     </span>
-    <span class="pill-group" style="float: left">
+    ## anchor link
+    <a class="pill filediff-anchor" href="#a_${h.FID('', filediff.patch['filename'])}">¶</a>
+
+    <span class="pill-group" style="float: right">
+
+        ## ops pills
         %if filediff.limited_diff:
         <span class="pill tooltip" op="limited" title="The stats for this diff are not complete">limited diff</span>
         %endif
 
-        %if RENAMED_FILENODE in filediff.patch['stats']['ops']:
-        <span class="pill" op="renamed">renamed</span>
-        %endif
-
-        %if COPIED_FILENODE in filediff.patch['stats']['ops']:
-        <span class="pill" op="copied">copied</span>
-        %endif
-
         %if NEW_FILENODE in filediff.patch['stats']['ops']:
         <span class="pill" op="created">created</span>
             %if filediff['target_mode'].startswith('120'):
@@ -405,6 +402,14 b' from rhodecode.lib.diffs import NEW_FILE'
             %endif
         %endif
 
+        %if RENAMED_FILENODE in filediff.patch['stats']['ops']:
+        <span class="pill" op="renamed">renamed</span>
+        %endif
+
+        %if COPIED_FILENODE in filediff.patch['stats']['ops']:
+        <span class="pill" op="copied">copied</span>
+        %endif
+
         %if DEL_FILENODE in filediff.patch['stats']['ops']:
         <span class="pill" op="removed">removed</span>
         %endif
@@ -414,23 +419,17 b' from rhodecode.lib.diffs import NEW_FILE'
             ${nice_mode(filediff['source_mode'])} ➡ ${nice_mode(filediff['target_mode'])}
         </span>
         %endif
-    </span>
 
-    <a class="pill filediff-anchor" href="#a_${h.FID('', filediff.patch['filename'])}">¶</a>
-
-    <span class="pill-group" style="float: right">
         %if BIN_FILENODE in filediff.patch['stats']['ops']:
         <span class="pill" op="binary">binary</span>
             %if MOD_FILENODE in filediff.patch['stats']['ops']:
-            <span class="pill" op="modified">modified</span>
+        <span class="pill" op="modified">modified</span>
             %endif
         %endif
-        %if filediff.patch['stats']['added']:
-        <span class="pill" op="added">+${filediff.patch['stats']['added']}</span>
-        %endif
-        %if filediff.patch['stats']['deleted']:
-        <span class="pill" op="deleted">-${filediff.patch['stats']['deleted']}</span>
-        %endif
+
+        <span class="pill" op="added">${('+' if filediff.patch['stats']['added'] else '')}${filediff.patch['stats']['added']}</span>
+        <span class="pill" op="deleted">${((h.safe_int(filediff.patch['stats']['deleted']) or 0) * -1)}</span>
+
     </span>
 
 </%def>