changeset 6671:5e3adb20839d

style: replace code-body etc with Bootstrap-ish panel and panel-heading, using panel-default for headers and tweak them grey Based on work by Dominik Ruf.
author Mads Kiilerich <mads@kiilerich.com>
date Sun, 11 Jun 2017 15:02:09 +0200
parents 7bca124ef278
children f70a268bac41
files kallithea/public/css/pygments.css kallithea/public/css/style.css kallithea/public/js/base.js kallithea/templates/admin/gists/edit.html kallithea/templates/admin/gists/new.html kallithea/templates/admin/gists/show.html kallithea/templates/changelog/changelog.html kallithea/templates/changeset/changeset.html kallithea/templates/changeset/changeset_range.html kallithea/templates/changeset/diff_block.html kallithea/templates/compare/compare_diff.html kallithea/templates/files/diff_2way.html kallithea/templates/files/files_add.html kallithea/templates/files/files_browser.html kallithea/templates/files/files_delete.html kallithea/templates/files/files_edit.html kallithea/templates/files/files_source.html kallithea/templates/search/search_commit.html kallithea/templates/search/search_content.html kallithea/templates/search/search_path.html
diffstat 20 files changed, 271 insertions(+), 394 deletions(-) [+]
line wrap: on
line diff
--- a/kallithea/public/css/pygments.css	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/public/css/pygments.css	Sun Jun 11 15:02:09 2017 +0200
@@ -82,11 +82,6 @@
     padding: 0px 0px 0px 10px;
 }
 
-div.search-code-body {
-    background-color: #FFFFFF;
-    padding: 5px 0px 5px 10px;
-}
-
 div.search-code-body pre .match {
     background-color: #FAFFA6;
 }
--- a/kallithea/public/css/style.css	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/public/css/style.css	Sun Jun 11 15:02:09 2017 +0200
@@ -525,11 +525,6 @@
     border-radius: 4px 4px 0 0;
 }
 
-#content div.panel div.panel-heading .panel-title,
-#content div.panel div.panel-heading a {
-    color: #FFFFFF;
-}
-
 #content div.panel div.panel-heading ul.links li {
     list-style: none;
     float: left;
@@ -551,6 +546,43 @@
     padding: 11px 10px 11px 10px;
 }
 
+div.panel.panel-default {
+    border: 1px solid #ccc;
+    box-shadow: none;
+    border-radius: 6px 6px 0px 0px;
+    margin-bottom: 20px;
+}
+
+div.panel.panel-default:last-child {
+    margin-bottom: 0;
+}
+
+div.panel.panel-default > div.panel-heading {
+    background: #eee;
+    border-bottom: 1px solid #ccc;
+    font-size: 14px;
+    font-weight: 700;
+}
+
+div.panel.panel-default div.panel-heading a,
+div.panel.panel-default div.panel-heading .pull-left,
+div.panel.panel-default div.panel-heading .pull-left a,
+div.panel.panel-default div.panel-heading .pull-right,
+div.panel.panel-default div.panel-heading .pull-right a {
+    color: black !important;
+}
+
+div.panel.panel-default div.panel-heading .diff-actions a,
+div.panel.panel-default div.panel-heading .diff-actions span.no-file,
+div.panel.panel-default div.panel-heading .diff-actions span.arrow {
+    color: #577632 !important;
+}
+
+div.panel.panel-default div.panel-heading .diff-actions span.no-file,
+div.panel.panel-default div.panel-heading .diff-actions span.arrow {
+    opacity: 0.5;
+}
+
 .clearfix::before, .clearfix::after, .dl-horizontal dd::before, .dl-horizontal dd::after, .container::before, .container::after, .container-fluid::before, .container-fluid::after, .row::before, .row::after, .form-horizontal .form-group::before, .form-horizontal .form-group::after, .btn-toolbar::before, .btn-toolbar::after, .btn-group-vertical > .btn-group::before, .btn-group-vertical > .btn-group::after, .nav::before, .nav::after, .navbar::before, .navbar::after, .navbar-header::before, .navbar-header::after, .navbar-collapse::before, .navbar-collapse::after, .pager::before, .pager::after, .panel::before, .panel::after, .panel-body::before, .panel-body::after, .modal-header::before, .modal-header::after, .modal-footer::before, .modal-footer::after, td.inline-comments::before, td.inline-comments::after {
     content: " ";
     display: table;
@@ -575,11 +607,20 @@
     float: right;
 }
 
+#content div.panel div.panel-heading a,
 #content div.panel div.panel-heading .pull-left,
 #content div.panel div.panel-heading .pull-right {
     color: white;
 }
 
+#content div.panel div.panel-heading .pull-left {
+    margin-right: 10px;
+}
+
+#content div.panel div.panel-heading .pull-right {
+    margin-left: 10px;
+}
+
 #content div.panel h1,
 #content div.panel h2,
 #content div.panel h3,
@@ -1753,11 +1794,6 @@
     padding: 5px;
 }
 
-#changeset_compare_view_content {
-    border: 1px solid #CCC;
-    padding: 5px;
-}
-
 #changeset_content .container {
     font-size: 1.2em;
     overflow: hidden;
@@ -1922,8 +1958,7 @@
 #graph_content #changesets {
     table-layout: fixed;
     border-collapse: collapse;
-    border-left: none;
-    border-right: none;
+    border: none;
     border-color: #cdcdcd;
 }
 
@@ -2163,7 +2198,7 @@
     clear: both;
 }
 
-.right .changes .changed_total {
+.pull-right .changes .changed_total {
     display: block;
     float: right;
     text-align: center;
@@ -2175,7 +2210,7 @@
     padding: 1px;
 }
 
-.right .changes .added,
+.pull-right .changes .added,
 .changed, .removed {
     display: block;
     padding: 1px;
@@ -2185,15 +2220,15 @@
     min-width: 15px;
 }
 
-.right .changes .added {
+.pull-right .changes .added {
     background: #CFC;
 }
 
-.right .changes .changed {
+.pull-right .changes .changed {
     background: #FEA;
 }
 
-.right .changes .removed {
+.pull-right .changes .removed {
     background: #FAA;
 }
 
@@ -2465,63 +2500,7 @@
     padding-left: 5px;
     text-align: left;
 }
-.diffblock .changeset_header {
-    height: 16px;
-}
-.diffblock .changeset_file {
-    float: left;
-}
-.diffblock .diff-menu-wrapper {
-    float: left;
-}
-
-.diffblock .diff-menu {
-    position: absolute;
-    background: none repeat scroll 0 0 #FFFFFF;
-    border-color: #577632 #666666 #666666;
-    border-right: 1px solid #666666;
-    border-style: solid solid solid;
-    border-width: 1px;
-    box-shadow: 2px 8px 4px rgba(0, 0, 0, 0.2);
-    margin-top: 5px;
-    margin-left: 1px;
-
-}
-.diffblock .diff-actions {
-    float: left;
-}
-.diffblock .diff-actions span.no-file,
-.diffblock .diff-actions span.arrow {
-    opacity: 0.5;
-}
-.diffblock .diff-actions span.arrow {
-    margin: 0 -3px;
-}
-.diffblock .diff-actions a i {
-    margin: 0 2px;
-}
-.diffblock.twoway {
-    overflow: visible;
-}
-.diffblock.twoway .diff-actions {
-    padding-top: 0;
-}
-.diffblock.twoway .diff-actions label input {
-    margin: -5px 5px 0 10px;
-    position: relative;
-    top: 3px;
-}
-.diffblock .diff-menu ul li {
-    padding: 0px 0px 0px 0px !important;
-}
-.diffblock .diff-menu ul li a {
-    display: block;
-    padding: 3px 8px 3px 8px !important;
-}
-.diffblock .diff-menu ul li a:hover {
-    text-decoration: none;
-    background-color: #EEEEEE;
-}
+
 table.code-browser .browser-dir {
     height: 16px;
     padding-left: 5px;
@@ -2926,12 +2905,21 @@
 
 .panel-body {
     padding: 20px;
+
+}
+
+.panel-body.no-padding {
+    padding: 0;
 }
 
 .panel-body ~ .panel-body {
     padding-top: 0;
 }
 
+.panel-body.no-padding ~ .panel-body {
+    padding-top: 20px;
+}
+
 .panel-body.settings .text-muted {
     margin: 5px 0;
 }
@@ -3148,7 +3136,8 @@
 .repo-switcher-dropdown.select2-drop.select2-drop-active {
     box-shadow: none;
     color: #fff;
-    background-color: #576622;
+    background-color: #577632;
+    border-color: #577632;
 }
 
 .branch-switcher-dropdown.select2-drop.select2-drop-active .select2-results .select2-highlighted,
@@ -3690,9 +3679,11 @@
     margin: -1px 0px 0px 0px;
 }
 
-.show-inline-comments {
+.panel-heading .pull-left input[type=checkbox],
+.panel-heading .pull-right input[type=checkbox] {
     position: relative;
-    top: 1px
+    top: 4px;
+    margin: -10px 2px 0;
 }
 
 /** comment inline form **/
@@ -3988,109 +3979,20 @@
 ******************************************************************************/
 .diff-collapse {
     text-align: center;
-    margin: 0 0 -10px;
-}
+    margin-bottom: 20px;
+}
+
 .diff-collapse-button {
     cursor: pointer;
     color: #666;
     font-size: 16px;
 }
-.diff-container {
-
-}
-
-.compare-revision-selector {
-    font-weight: bold;
-    font-size: 14px;
-}
+
 .compare-revision-selector > div {
     display: inline-block;
-    margin-left: 8px;
-    vertical-align: middle;
-}
-.compare-revision-selector .btn {
-    margin-bottom: 0;
-}
-
-
-div.diffblock {
-    overflow: auto;
-    padding: 0px;
-    border: 1px solid #ccc;
-    background: #f8f8f8;
-    font-size: 100%;
-    line-height: 100%;
-    /* new */
-    line-height: 125%;
-    border-radius: 6px 6px 0px 0px;
-}
-
-.compare-revision-selector,
-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;
-}
+    margin-right: 8px;
+}
+
 table.code-difftable {
     border-collapse: collapse;
     width: 99%;
@@ -4555,3 +4457,13 @@
 #clone_by_id.input-group > input {
     width: 80% !important;
 }
+
+#content div.panel .changelog-panel > .changelog-heading,
+#content div.panel .changelog-panel > ul.pagination {
+    margin-left: 100px;
+}
+
+textarea.commit-message {
+    width: 100%;
+    box-sizing: border-box;
+}
--- a/kallithea/public/js/base.js	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/public/js/base.js	Sun Jun 11 15:02:09 2017 +0200
@@ -880,17 +880,15 @@
         });
 
     $('#file_enable').click(function(){
-            $('#editor_container').show();
             $('#upload_file_container').hide();
             $('#filename_container').show();
-            $('#mimetype_header').show();
+            $('#body').show();
         });
 
     $('#upload_file_enable').click(function(){
-            $('#editor_container').hide();
             $('#upload_file_container').show();
             $('#filename_container').hide();
-            $('#mimetype_header').hide();
+            $('#body').hide();
         });
 
     return myCodeMirror
--- a/kallithea/templates/admin/gists/edit.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/admin/gists/edit.html	Sun Jun 11 15:02:09 2017 +0200
@@ -47,7 +47,7 @@
             <div>
                 ${h.gravatar_div(request.authuser.email, size=32)}
                 <input type="hidden" value="${c.file_changeset.raw_id}" name="parent_hash">
-                <textarea style="resize:vertical; width:400px;border: 1px solid #ccc;border-radius: 3px;"
+                <textarea class="form-control commit-message"
                           id="description" name="description"
                           placeholder="${_('Gist description ...')}">${c.gist.gist_description}</textarea>
                 <div>
@@ -66,15 +66,16 @@
             </div>
 
             % for cnt, file in enumerate(c.files):
-                <div id="body" class="codeblock" style="margin-bottom: 4px">
-                    <div style="padding: 10px 10px 10px 26px;color:#666666">
+                <div id="body" class="panel panel-default form-inline">
+                    <div class="panel-heading">
                         <input type="hidden" value="${h.safe_unicode(file.path)}" name="org_files">
-                        <input id="filename_${h.FID('f',file.path)}" name="files" size="30" type="text" value="${h.safe_unicode(file.path)}">
-                        <select id="mimetype_${h.FID('f',file.path)}" name="mimetypes"></select>
+                        <input class="form-control" id="filename_${h.FID('f',file.path)}" name="files" size="30" type="text" value="${h.safe_unicode(file.path)}">
+                        <select class="form-control" id="mimetype_${h.FID('f',file.path)}" name="mimetypes"></select>
                     </div>
-                    <div class="editor_container">
-                        <pre id="editor_pre"></pre>
-                        <textarea id="editor_${h.FID('f',file.path)}" name="contents" style="display:none">${file.content}</textarea>
+                    <div class="panel-body">
+                        <div id="editor_container">
+                            <textarea id="editor_${h.FID('f',file.path)}" name="contents" style="display:none">${file.content}</textarea>
+                        </div>
                     </div>
                 </div>
 
--- a/kallithea/templates/admin/gists/new.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/admin/gists/new.html	Sun Jun 11 15:02:09 2017 +0200
@@ -32,8 +32,7 @@
         <div id="files_data">
           ${h.form(h.url('gists'), method='post',id='eform')}
             <div>
-                ${h.gravatar_div(request.authuser.email, size=32)}
-                <textarea style="resize:vertical; width:400px;border: 1px solid #ccc;border-radius: 3px;" id="description" name="description" placeholder="${_('Gist description ...')}"></textarea>
+                <textarea class="form-control commit-message" id="description" name="description" placeholder="${_('Gist description ...')}"></textarea>
                 <div>
                     <label>
                         ${_('Gist lifetime')}
@@ -41,17 +40,16 @@
                     </label>
                 </div>
             </div>
-            <div id="body" class="codeblock">
-                <div style="padding: 10px 10px 10px 26px;color:#666666">
-                    ${h.text('filename', size=30, placeholder=_('name this file...'))}
-                    <select id="mimetype" name="mimetype"></select>
+            <div id="body" class="panel panel-default">
+                <div class="panel-heading">
+                    ${h.text('filename', size=30, placeholder=_('Name this gist ...'), class_='form-control')}
+                    <select class="form-control" id="mimetype" name="mimetype"></select>
                 </div>
-                <div id="editor_container">
-                    <pre id="editor_pre"></pre>
-                    <textarea id="editor" name="content" style="display:none"></textarea>
+                <div class="panel-body no-padding">
+                        <textarea id="editor" name="content"></textarea>
                 </div>
             </div>
-            <div style="padding-top: 5px">
+            <div>
             ${h.submit('private',_('Create Private Gist'),class_="btn btn-success btn-xs")}
             ${h.submit('public',_('Create Public Gist'),class_="btn btn-default btn-xs")}
             ${h.reset('reset',_('Reset'),class_="btn btn-default btn-xs")}
--- a/kallithea/templates/admin/gists/show.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/admin/gists/show.html	Sun Jun 11 15:02:09 2017 +0200
@@ -28,9 +28,8 @@
     </div>
     <div class="panel-body">
         <div id="files_data">
-            <div id="body" class="codeblock">
-                <div class="code-header">
-                    <div class="stats">
+            <div id="body" class="panel panel-default">
+                <div class="panel-heading clearfix">
                         <div class="pull-left">
                           %if c.gist.gist_type == 'public':
                             <div class="label label-success">${_('Public Gist')}</div>
@@ -63,34 +62,33 @@
                           %endif
                           ${h.link_to(_('Show as Raw'),h.url('formatted_gist', gist_id=c.gist.gist_access_id, format='raw'),class_="btn btn-default btn-xs")}
                         </div>
-                    </div>
-
+                </div>
+                <div class="panel-body">
                     <div class="author">
                         ${h.gravatar_div(h.email_or_none(c.file_changeset.author), size=16)}
                         <div title="${c.file_changeset.author}" class="user">${h.person(c.file_changeset.author)} - ${_('created')} ${h.age(c.file_changeset.date)}</div>
                     </div>
-                    <div class="commit">${h.urlify_text(c.file_changeset.message,c.repo_name)}</div>
+                    <div>${h.urlify_text(c.file_changeset.message,c.repo_name)}</div>
                 </div>
             </div>
 
-               ## iterate over the files
-               % for file in c.files:
-               <div style="border: 1px solid #EEE;margin-top:20px">
-                <div id="${h.FID('G', file.path)}" class="stats" style="border-bottom: 1px solid #DDD;padding: 8px 14px;">
-                    <a href="${c.gist.gist_url()}">ΒΆ</a>
-                    <b style="margin:0px 0px 0px 4px">${h.safe_unicode(file.path)}</b>
-                    <div class="pull-right" style="margin: -5px">
-                       ${h.link_to(_('Show as raw'),h.url('formatted_gist_file', gist_id=c.gist.gist_access_id, format='raw', revision=file.changeset.raw_id, f_path=h.safe_unicode(file.path)),class_="btn btn-default btn-xs")}
+            %for file in c.files:
+              <div class="panel panel-default">
+                <div id="${h.FID('G', file.path)}" class="panel-heading clearfix">
+                    <div class="pull-left">
+                      <b>${h.safe_unicode(file.path)}</b>
+                    </div>
+                    <div class="pull-right">
+                      ${h.link_to(_('Show as raw'),h.url('formatted_gist_file', gist_id=c.gist.gist_access_id, format='raw', revision=file.changeset.raw_id, f_path=h.safe_unicode(file.path)),class_="btn btn-default btn-xs")}
                     </div>
                 </div>
-                <div class="code-body">
+                <div class="panel-body no-padding">
                     ${h.pygmentize(file,linenos=True,anchorlinenos=True,lineanchors='L',cssclass="code-highlight")}
                 </div>
               </div>
-               %endfor
+            %endfor
         </div>
     </div>
 
-
 </div>
 </%def>
--- a/kallithea/templates/changelog/changelog.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/changelog/changelog.html	Sun Jun 11 15:02:09 2017 +0200
@@ -31,10 +31,9 @@
     <div class="panel-heading clearfix">
         ${self.breadcrumbs()}
     </div>
-    <div class="panel-body">
+    <div class="panel-body changelog-panel">
         %if c.pagination:
-            <div>
-              <div class="clearfix" style="${'display:none' if c.changelog_for_path else ''}">
+                <div class="changelog-heading clearfix" style="${'display:none' if c.changelog_for_path else ''}">
                     <div class="pull-left">
                         ${h.form(h.url.current(),method='get',class_="form-inline")}
                             ${h.submit('set',_('Show'),class_="btn btn-default btn-sm")}
@@ -63,9 +62,8 @@
                         <a id="open_new_pr" class="btn btn-default btn-sm"></a>
                         ${_("Branch filter:")} ${h.select('branch_filter',c.branch_name,c.branch_filters)}
                     </div>
-              </div>
+                </div>
 
-              <div>
                 <div id="graph_nodes">
                     <canvas id="graph_canvas" style="width:0"></canvas>
                 </div>
@@ -179,8 +177,6 @@
                 <ul class="pagination">
                     ${c.pagination.pager()}
                 </ul>
-              </div>
-            </div>
 
         <script type="text/javascript" src="${h.url('/js/graph.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript">
--- a/kallithea/templates/changeset/changeset.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/changeset/changeset.html	Sun Jun 11 15:02:09 2017 +0200
@@ -29,22 +29,22 @@
     AJAX_COMMENT_DELETE_URL = ${h.js(url('changeset_comment_delete',repo_name=c.repo_name,comment_id='__COMMENT_ID__'))};
   </script>
   <div class="panel-body">
-    <div>
-        <div class="diffblock">
+    <div class="panel panel-default">
+        <div class="panel-heading clearfix">
             <div class="parents pull-left">
                 <div id="parent_link" class="changeset_hash">
-                    <i style="color:#036185" class="icon-left-open"></i> <a href="#">${_('Parent rev.')}</a>
+                    <i class="icon-left-open"></i> <a href="#">${_('Parent rev.')}</a>
                 </div>
             </div>
 
             <div class="pull-right children">
                 <div id="child_link" class="changeset_hash">
-                    <a href="#">${_('Child rev.')}</a> <i style="color:#036185" class="icon-right-open"></i>
+                    <a href="#">${_('Child rev.')}</a> <i class="icon-right-open"></i>
                 </div>
             </div>
 
-            <div class="pull-left code-header banner">
-                <div class="pull-left changeset-status-container">
+            <div class="pull-left">
+                <div class="pull-left">
                     %if c.statuses:
                         <span class="changeset-status-ico"><i class="icon-circle changeset-status-${c.statuses[0]}"></i></span>
                         <span title="${_('Changeset status')}" class="changeset-status-lbl">[${h.changeset_status_lbl(c.statuses[0])}]</span>
@@ -63,12 +63,9 @@
                   ${c.ignorews_url(request.GET)}
                   ${c.context_url(request.GET)}
                 </div>
-                <div class="text-right pull-right comments-number" style="padding-right:5px">
-                    ${comment.comment_count(c.inline_cnt, len(c.comments))}
-                </div>
             </div>
         </div>
-        <div id="changeset_content">
+        <div class="panel-body">
             <div class="form-group container">
 
                 <div class="pull-right">
@@ -157,7 +154,7 @@
                      % endif
                 </div>
             </div>
-            <div class="message form-group">${h.urlify_text(c.changeset.message, c.repo_name)}</div>
+            <div class="form-group">${h.urlify_text(c.changeset.message, c.repo_name)}</div>
             <div class="changes_txt">
               <% a_rev, cs_rev, file_diff_data = c.changes[c.changeset.raw_id] %>
               % if c.limited_diff:
@@ -180,14 +177,16 @@
                   <h5>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff anyway')}</a></h5>
                 %endif
             </div>
+            <div class="comments-number">
+                ${comment.comment_count(c.inline_cnt, len(c.comments))}
+            </div>
         </div>
 
     </div>
-  </div>
 
-  ## diff block
-  <div class="panel-body">
-  <div class="commentable-diff">
+    ## diff block
+
+    <div class="commentable-diff">
     <%namespace name="diff_block" file="/changeset/diff_block.html"/>
     ${diff_block.diff_block_js()}
     <% a_rev, cs_rev, file_diff_data = c.changes[c.changeset.raw_id] %>
@@ -207,6 +206,8 @@
     ## main comment form and it status
     ${comment.comments()}
 
+    </div>
+
     ## FORM FOR MAKING JS ACTION AS CHANGESET COMMENTS
     <script type="text/javascript">
       $(document).ready(function(){
@@ -303,5 +304,4 @@
     </script>
 
   </div>
-  </div>
 </%def>
--- a/kallithea/templates/changeset/changeset_range.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/changeset/changeset_range.html	Sun Jun 11 15:02:09 2017 +0200
@@ -20,29 +20,22 @@
 ${self.repo_context_bar('changelog')}
 <div class="panel panel-primary">
     <div class="panel-heading clearfix">
-        ${self.breadcrumbs()}
+        <div class="pull-left">
+            ${self.breadcrumbs()}
+        </div>
+        <div class="pull-right">
+            <a href="${h.url('compare_url',repo_name=c.repo_name,org_ref_type='rev',org_ref_name=getattr(c.cs_ranges[0].parents[0] if c.cs_ranges[0].parents else h.EmptyChangeset(),'raw_id'),other_ref_type='rev',other_ref_name=c.cs_ranges[-1].raw_id)}" class="btn btn-default btn-sm"><i class="icon-git-compare"></i> Compare Revisions</a>
+        </div>
     </div>
     <div class="panel-body">
-      <div>
-        <div id="body" class="diffblock">
-            <div class="code-header">
-                <div>
-                    ${h.show_id(c.cs_ranges[0])}
-                    <i class="icon-right"></i>
-                    ${h.show_id(c.cs_ranges[-1])}
-                    <a style="font-weight: bold" href="${h.url('compare_url',repo_name=c.repo_name,org_ref_type='rev',org_ref_name=getattr(c.cs_ranges[0].parents[0] if c.cs_ranges[0].parents else h.EmptyChangeset(),'raw_id'),other_ref_type='rev',other_ref_name=c.cs_ranges[-1].raw_id)}" class="btn btn-default btn-sm"><i class="icon-git-compare"></i> Compare Revisions</a>
-                </div>
-            </div>
-        </div>
-        <div id="changeset_compare_view_content">
-              <div class="container">
+        <div>
                 <table class="table compare_view_commits">
                 %for cnt,cs in enumerate(c.cs_ranges):
                   <tr>
                     %if c.visual.use_gravatar:
                     <td>${h.gravatar_div(h.email_or_none(cs.author), size=14)}</td>
                     %endif
-                    <td>${h.link_to('r%s:%s' % (cs.revision,h.short_id(cs.raw_id)),h.url('changeset_home',repo_name=c.cs_repo.repo_name,revision=cs.raw_id))}</td>
+                    <td>${h.link_to(h.short_id(cs.raw_id),h.url('changeset_home',repo_name=c.cs_repo.repo_name,revision=cs.raw_id))}</td>
                     <td><div class="author">${h.person(cs.author)}</div></td>
                     <td><span data-toggle="tooltip" title="${h.age(cs.date)}">${cs.date}</span></td>
                     <td>
@@ -54,9 +47,8 @@
                   </tr>
                 %endfor
                 </table>
-              </div>
-              <h4>${_('Files affected')}</h4>
-              <div class="cs_files">
+                <h4>${_('Files affected')}</h4>
+                <div class="cs_files">
                     %for cs in c.cs_ranges:
                         <h6 class="cur_cs">${h.link_to(h.show_id(cs),h.url('changeset_home',repo_name=c.cs_repo.repo_name,revision=cs.raw_id))}</h6>
                         <% a_rev, cs_rev, file_diff_data = c.changes[cs.raw_id] %>
@@ -70,9 +62,8 @@
                             </div>
                         %endfor
                     %endfor
-              </div>
+                </div>
         </div>
-      </div>
     </div>
     <%namespace name="comment" file="/changeset/changeset_file_comment.html"/>
     <%namespace name="diff_block" file="/changeset/diff_block.html"/>
--- a/kallithea/templates/changeset/diff_block.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/changeset/diff_block.html	Sun Jun 11 15:02:09 2017 +0200
@@ -4,29 +4,27 @@
                        cs_repo_name, cs_ref_name, cs_ref_type, cs_rev,
                        file_diff_data)">
 <div class="diff-collapse">
-    <span data-target="${'diff-container-%s' % (id(file_diff_data))}" class="diff-collapse-button">&uarr; ${_('Collapse Diff')} &uarr;</span>
+    <span data-target="${'no-padding-%s' % (id(file_diff_data))}" class="diff-collapse-button">&uarr; ${_('Collapse Diff')} &uarr;</span>
 </div>
-<div class="diff-container" id="${'diff-container-%s' % (id(file_diff_data))}">
 %for id_fid, url_fid, op, a_filename, cs_filename, diff, stats in file_diff_data:
     ${diff_block_diffblock(id_fid, url_fid, op, diff,
         a_repo_name, a_rev, a_ref_type, a_ref_name, a_filename,
-        cs_repo_name, cs_rev, cs_ref_type, cs_ref_name, cs_filename)}
+        cs_repo_name, cs_rev, cs_ref_type, cs_ref_name, cs_filename,
+        'no-padding-%s' % id(file_diff_data))}
 %endfor
-</div>
 </%def>
 
 <%def name="diff_block_diffblock(id_fid, url_fid, op, diff,
     a_repo_name, a_rev, a_ref_type, a_ref_name, a_filename,
-    cs_repo_name, cs_rev, cs_ref_type, cs_ref_name, cs_filename)"
+    cs_repo_name, cs_rev, cs_ref_type, cs_ref_name, cs_filename, cls)"
 >
-    <div id="${id_fid}_target" style="clear:both;margin-top:25px"></div>
-    <div id="${id_fid}" class="diffblock margined comm">
-        <div class="code-header">
-            <div class="changeset_header">
-                <div class="changeset_file">
+    <div id="${id_fid}_target"></div>
+    <div id="${id_fid}" class="panel panel-default ${cls}">
+        <div class="panel-heading clearfix">
+                <div class="pull-left">
                     ${h.safe_unicode(cs_filename)}
                 </div>
-                <div class="diff-actions">
+                <div class="pull-left diff-actions">
                   <span style="margin: 0 10px">
                     %if op == 'A':
                       <span class="no-file" data-toggle="tooltip" title="${_('No file before')}">
@@ -70,22 +68,19 @@
                   ${c.ignorews_url(request.GET, url_fid)}
                   ${c.context_url(request.GET, url_fid)}
                 </div>
-                <span class="pull-right" style="margin-top:-3px">
-                    <label>
-                        ${_('Show inline comments')}
-                        ${h.checkbox('checkbox-show-inline-' + id_fid, checked="checked",class_="show-inline-comments",**{'data-id_for':id_fid})}
-                    </label>
-                </span>
-            </div>
+                <div class="pull-right">
+                    ${_('Show inline comments')}
+                    ${h.checkbox('checkbox-show-inline-' + id_fid, checked="checked",class_="show-inline-comments",**{'data-id_for':id_fid})}
+                </div>
         </div>
-        <div class="code-body" data-f_path="${h.safe_unicode(cs_filename)}">
+        <div class="no-padding panel-body" data-f_path="${h.safe_unicode(cs_filename)}">
             ${diff|n}
             %if cs_filename.rsplit('.')[-1] in ['png', 'gif', 'jpg', 'bmp']:
               <div class="btn btn-image-diff-show">Show images</div>
               %if op == 'M':
                 <div id="${id_fid}_image-diff" class="btn btn-image-diff-swap" style="display:none">Press to swap images</div>
               %endif
-              <div style="font-size: 0">
+              <div>
                 %if op in 'DM':
                   <img id="${id_fid}_image-diff-img-a" class="img-diff img-diff-swapable" style="display:none"
                       realsrc="${h.url('files_raw_home',repo_name=a_repo_name,revision=a_rev,f_path=a_filename)}" />
@@ -125,8 +120,9 @@
     $('.btn-image-diff-swap').mouseleave(reset);
 
     $('.diff-collapse-button').click(function(e) {
+        $('.diff_block').toggleClass('hidden');
         var $button = $(e.currentTarget);
-        var $target = $('#' + $button.data('target'));
+        var $target = $('.' + $button.data('target'));
         if($target.hasClass('hidden')){
             $target.removeClass('hidden');
             $button.html("&uarr; {0} &uarr;".format(_TM['Collapse Diff']));
--- a/kallithea/templates/compare/compare_diff.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/compare/compare_diff.html	Sun Jun 11 15:02:09 2017 +0200
@@ -24,8 +24,8 @@
         ${self.breadcrumbs()}
     </div>
     <div class="panel-body">
-      <div>
-        <div id="body" class="diffblock">
+      <div class="panel panel-default">
+        <div id="body" class="panel-heading">
             <div class="compare-revision-selector">
                 ## divs are "inline-block" and cannot have whitespace between them.
                 <div>
@@ -44,11 +44,11 @@
         </div>
 
     %if c.compare_home:
-        <div id="changeset_compare_view_content">
+        <div id="changeset_compare_view_content" class="panel-body">
          <h4 class="text-muted">${_('Compare revisions, branches, bookmarks, or tags.')}</h4>
         </div>
     %else:
-        <div id="changeset_compare_view_content">
+        <div id="changeset_compare_view_content" class="panel-body">
                 ##CS
                 <h5>${ungettext('Showing %s commit','Showing %s commits', len(c.cs_ranges)) % len(c.cs_ranges)}</h5>
                 <%include file="compare_cs.html" />
@@ -82,7 +82,10 @@
                   %endif
                 </div>
         </div>
+      </div>
+    %endif
 
+    %if not c.compare_home:
         ## diff block
         <%namespace name="diff_block" file="/changeset/diff_block.html"/>
         ${diff_block.diff_block_js()}
@@ -91,7 +94,6 @@
         % if c.limited_diff:
           <h4>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff')}</a></h4>
         % endif
-      </div>
     %endif
     </div>
 
--- a/kallithea/templates/files/diff_2way.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/files/diff_2way.html	Sun Jun 11 15:02:09 2017 +0200
@@ -30,15 +30,15 @@
         ${self.breadcrumbs()}
     </div>
 
-    <div class="diff-container">
-        <div class="diffblock comm twoway">
-            <div class="code-header">
+    <div class="no-padding panel-body">
+        <div class="panel panel-default">
+            <div class="panel-heading">
                 <div class="changeset_header">
-                    <div class="changeset_file">
+                    <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="diff-actions">
+                    <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/kallithea/templates/files/files_add.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/files/files_add.html	Sun Jun 11 15:02:09 2017 +0200
@@ -28,15 +28,15 @@
         <div class="pull-left">
             ${self.breadcrumbs()}
         </div>
-        <div class="pull-right panel-title">
+        <div class="pull-right">
             <a href="#">${_('Branch')}: ${c.cs.branch}</a>
         </div>
     </div>
     <div class="panel-body" id="edit">
         <div id="files_data">
-          ${h.form(h.url.current(),method='post',id='eform',enctype="multipart/form-data", class_="form-horizontal form-inline")}
-          <h3 class="files_location">
-            ${_('Location')}: ${h.files_breadcrumbs(c.repo_name,c.cs.raw_id,c.f_path)} /
+            ${h.form(h.url.current(),method='post',id='eform',enctype="multipart/form-data", class_="form-horizontal form-inline")}
+            <h3 class="files_location">
+              ${_('Location')}: ${h.files_breadcrumbs(c.repo_name,c.cs.raw_id,c.f_path)} /
               <span id="filename_container" class="file reviewer_ac">
                   <input class="form-control input-small" type="text" value="" size="30" name="filename" id="filename" placeholder="${_('Enter filename...')}">
                   <input type="hidden" value="${c.f_path}" name="location" id="location">
@@ -46,24 +46,28 @@
                   <input class="form-control" type="file" size="20" name="upload_file" id="upload_file">
                   ${_('or')} <span class="btn btn-default btn-sm" id="file_enable">${_('Create New File')}</span>
               </span>
-          </h3>
-            <div id="body" class="codeblock">
-            <div class="code-header" id="mimetype_header">
-                <label class="commit">
-                    ${_('New file type')}
-                    <select class="form-control" id="mimetype" name="mimetype"></select>
-                </label>
+            </h3>
+            <div id="body" class="panel panel-default">
+              <div class="panel-heading">
+                  <div class="pull-left">
+                    <label>${_('New file type')}
+                        <select class="form-control" id="mimetype" name="mimetype"></select>
+                    </label>
+                  </div>
+              </div>
+              <div class="panel-body no-padding">
+                <textarea id="editor" name="content" style="display:none"></textarea>
+              </div>
             </div>
-                <div id="editor_container">
-                    <pre id="editor_pre"></pre>
-                    <textarea id="editor" name="content" style="display:none"></textarea>
-                </div>
-                <div style="padding: 10px;color:#666666">${_('Commit Message')}</div>
-                <textarea class="form-control" name="message" style="height: 100px;width: 99%;margin-left:4px" placeholder="${c.default_message}"></textarea>
-            </div>
-            <div style="text-align: left;padding-top: 5px">
-            ${h.submit('commit',_('Commit Changes'),class_="btn btn-success btn-sm")}
-            ${h.reset('reset',_('Reset'),class_="btn btn-default btn-sm")}
+            <div>
+              <div>
+                  <div>${_('Commit Message')}</div>
+                  <textarea class="form-control commit-message" name="message" placeholder="${c.default_message}"></textarea>
+              </div>
+              <div class="buttons">
+                ${h.submit('commit',_('Commit Changes'),class_="btn btn-success")}
+                ${h.reset('reset',_('Reset'),class_="btn btn-default")}
+              </div>
             </div>
             ${h.end_form()}
             <script type="text/javascript">
--- a/kallithea/templates/files/files_browser.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/files/files_browser.html	Sun Jun 11 15:02:09 2017 +0200
@@ -55,7 +55,7 @@
         </div>
     </div>
 
-    <div class="panel-body">
+    <div>
         <table class="table code-browser">
             <thead>
                 <tr>
--- a/kallithea/templates/files/files_delete.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/files/files_delete.html	Sun Jun 11 15:02:09 2017 +0200
@@ -30,15 +30,13 @@
                 ${_('Delete file')}: ${h.files_breadcrumbs(c.repo_name,c.cs.raw_id,c.f_path)}
             </h3>
 
-            <div id="body" class="codeblock">
-                <div id="editor_container">
-                    <pre id="editor_pre"></pre>
-                    <textarea class="form-control" id="editor" name="content" style="display:none"></textarea>
+            <div id="body" class="panel panel-default">
+                <div class="panel-heading">${_('Commit Message')}</div>
+                <div class="panel-body">
+                    <textarea class="form-control commit-message" name="message" placeholder="${c.default_message}"></textarea>
                 </div>
-                <div style="padding: 10px;color:#666666">${_('Commit Message')}</div>
-                <textarea id="commit" name="message" style="height: 100px;width: 99%;margin-left:4px" placeholder="${c.default_message}"></textarea>
             </div>
-            <div style="text-align: left;padding-top: 5px">
+            <div>
                 ${h.submit('commit',_('Commit Changes'),class_="btn btn-success btn-sm")}
                 ${h.reset('reset',_('Reset'),class_="btn btn-default btn-sm")}
             </div>
--- a/kallithea/templates/files/files_edit.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/files/files_edit.html	Sun Jun 11 15:02:09 2017 +0200
@@ -34,16 +34,19 @@
     </div>
     <div class="panel-body" id="edit">
         <div id="files_data">
-            <h3 class="files_location">${_('Location')}: ${h.files_breadcrumbs(c.repo_name,c.cs.raw_id,c.file.path)}</h3>
             ${h.form(h.url.current(),method='post',id='eform',class_='form-inline')}
-            <div id="body" class="codeblock">
-            <div class="code-header">
-                <div class="stats">
-                <div class="pull-left">
-                    <div class="left"><i class="icon-doc-inv"></i></div>
-                    <div class="left item">${h.link_to(h.show_id(c.file.changeset),h.url('changeset_home',repo_name=c.repo_name,revision=c.file.changeset.raw_id))}</div>
-                    <div class="left item">${h.format_byte_size(c.file.size,binary=True)}</div>
-                    <div class="left item last">${c.file.mimetype}</div>
+            <h3 class="files_location">
+              ${_('Location')}: ${h.files_breadcrumbs(c.repo_name,c.cs.raw_id,c.file.path)}
+            </h3>
+            <div id="body" class="panel panel-default">
+              <div class="panel-heading clearfix">
+                    <div class="pull-left">
+                        <div class="pull-left"><i class="icon-doc-inv"></i></div>
+                        <div class="pull-left">${h.link_to(h.show_id(c.file.changeset),h.url('changeset_home',repo_name=c.repo_name,revision=c.file.changeset.raw_id))}</div>
+                        <div class="pull-left">${h.format_byte_size(c.file.size,binary=True)}</div>
+                        <div class="pull-left">${c.file.mimetype}</div>
+                        <select class="form-control" id="mimetype" name="mimetype"></select>
+                    </div>
                     <div class="pull-right buttons">
                       ${h.link_to(_('Show Annotation'),h.url('files_annotate_home',repo_name=c.repo_name,revision=c.cs.raw_id,f_path=c.f_path),class_="btn btn-default btn-xs")}
                       ${h.link_to(_('Show as Raw'),h.url('files_raw_home',repo_name=c.repo_name,revision=c.cs.raw_id,f_path=c.f_path),class_="btn btn-default btn-xs")}
@@ -54,21 +57,20 @@
                        % endif
                       % endif
                     </div>
-                </div>
-                </div>
-                <label class="editing-files">
-                    ${_('Editing file')}: ${c.file.unicode_path}
-                    <select class="form-control" id="mimetype" name="mimetype"></select>
-                </label>
+              </div>
+              <div class="panel-body no-padding">
+                <textarea id="editor" name="content" style="display:none">${h.escape(c.file.content)|n}</textarea>
+              </div>
             </div>
-                <pre id="editor_pre"></pre>
-                <textarea id="editor" name="content" style="display:none">${h.escape(c.file.content)|n}</textarea>
-                <div class="text-muted" style="padding: 10px">${_('Commit Message')}</div>
-                <textarea class="form-control" id="commit" name="message" style="height: 60px;width: 99%;margin-left:4px" placeholder="${c.default_message}"></textarea>
-            </div>
-            <div style="text-align: left;padding-top: 5px">
-            ${h.submit('commit',_('Commit Changes'),class_="btn btn-success")}
-            ${h.reset('reset',_('Reset'),class_="btn btn-default")}
+            <div>
+              <div>
+                  <div>${_('Commit Message')}</div>
+                  <textarea class="form-control commit-message" id="commit" name="message" placeholder="${c.default_message}"></textarea>
+              </div>
+              <div class="buttons">
+                ${h.submit('commit',_('Commit Changes'),class_="btn btn-success")}
+                ${h.reset('reset',_('Reset'),class_="btn btn-default")}
+              </div>
             </div>
             ${h.end_form()}
         </div>
--- a/kallithea/templates/files/files_source.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/files/files_source.html	Sun Jun 11 15:02:09 2017 +0200
@@ -1,6 +1,5 @@
-<div id="node_history" style="padding: 0px 0px 10px 0px">
-    <div>
-        <div class="pull-left">
+<div id="node_history" class="clearfix" style="padding: 0px 0px 10px 0px">
+    <div class="pull-left">
         ${h.form(h.url('files_diff_home',repo_name=c.repo_name,f_path=c.f_path),method='get')}
         ${h.hidden('diff2',c.changeset.raw_id)}
         ${h.hidden('diff1')}
@@ -10,23 +9,19 @@
         ${h.link_to(_('Show Full History'),h.url('changelog_file_home',repo_name=c.repo_name, revision=c.changeset.raw_id, f_path=c.f_path),class_="btn btn-default btn-sm")}
         ${h.link_to(_('Show Authors'),'#',class_="btn btn-default btn-sm" ,id="show_authors")}
         ${h.end_form()}
-        </div>
-        <div id="file_authors" class="file_author" style="clear:both; display: none"></div>
     </div>
-    <div style="clear:both"></div>
+    <div id="file_authors" class="file_author" style="clear:both; display: none"></div>
 </div>
 
-
-<div id="body" class="codeblock">
-    <div class="code-header">
-        <div class="stats">
-          <div class="pull-left">
-            <div class="left img"><i class="icon-doc-inv"></i></div>
-            <div class="left item"><pre data-toggle="tooltip" title="${h.fmt_date(c.changeset.date)}">${h.link_to(h.show_id(c.changeset),h.url('changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id))}</pre></div>
-            <div class="left item"><pre>${h.format_byte_size(c.file.size,binary=True)}</pre></div>
-            <div class="left item last"><pre>${c.file.mimetype}</pre></div>
-          </div>
-          <div class="pull-right buttons">
+<div id="body" class="panel panel-default">
+    <div class="panel-heading clearfix">
+        <div class="pull-left">
+            <div class="pull-left img"><i class="icon-doc-inv"></i></div>
+            <div class="pull-left"><pre data-toggle="tooltip" title="${h.fmt_date(c.changeset.date)}">${h.link_to(h.show_id(c.changeset),h.url('changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id))}</pre></div>
+            <div class="pull-left"><pre>${h.format_byte_size(c.file.size,binary=True)}</pre></div>
+            <div class="pull-left"><pre>${c.file.mimetype}</pre></div>
+        </div>
+        <div class="pull-right buttons">
               %if c.annotate:
                 ${h.link_to(_('Show Source'),    h.url('files_home',         repo_name=c.repo_name,revision=c.changeset.raw_id,f_path=c.f_path),class_="btn btn-default btn-xs")}
               %else:
@@ -46,16 +41,16 @@
                 ${h.link_to(_('Delete'), '#', class_="btn btn-danger btn-xs disabled", title=_('Deleting files allowed only when on branch head revision'),**{'data-toggle':'tooltip'})}
                %endif
               %endif
-          </div>
         </div>
-        <div class="author">
+    </div>
+    <div class="panel-body">
+      <div class="author">
             ${h.gravatar_div(h.email_or_none(c.changeset.author), size=16)}
             <div title="${c.changeset.author}" class="user">${h.person(c.changeset.author)}</div>
-        </div>
-        <div class="commit">${h.urlify_text(c.changeset.message,c.repo_name)}</div>
+      </div>
+      <div class="commit">${h.urlify_text(c.changeset.message,c.repo_name)}</div>
     </div>
-    <ul class="list-group">
-      <li class="list-group-item">
+    <div class="panel-body no-padding">
       %if c.file.is_browser_compatible_image():
         <img src="${h.url('files_raw_home',repo_name=c.repo_name,revision=c.changeset.raw_id,f_path=c.f_path)}" class="img-preview"/>
       %elif c.file.is_binary:
@@ -70,18 +65,17 @@
               ${h.pygmentize(c.file,linenos=True,anchorlinenos=True,lineanchors='L',cssclass="code-highlight")}
             %endif
         %else:
-            <h4>
+          <h4>
             ${_('File is too big to display.')}
             %if c.annotate:
               ${h.link_to(_('Show full annotation anyway.'), h.url.current(fulldiff=1, **request.GET.mixed()))}
             %else:
               ${h.link_to(_('Show as raw.'), h.url('files_raw_home',repo_name=c.repo_name,revision=c.changeset.raw_id,f_path=c.f_path))}
             %endif
-            </h4>
+          </h4>
         %endif
       %endif
-      </li>
-    </ul>
+    </div>
 </div>
 
 <script>
--- a/kallithea/templates/search/search_commit.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/search/search_commit.html	Sun Jun 11 15:02:09 2017 +0200
@@ -2,14 +2,13 @@
 
 %for cnt,sr in enumerate(c.formated_results):
     %if h.HasRepoPermissionLevel('read')(sr['repository'],'search results check'):
-        <div id="body${cnt}" class="codeblock">
-            <div class="code-header">
-                <div class="search-path">${h.link_to(h.literal('%s &raquo; %s' % (sr['repository'],sr['raw_id'])),
-                h.url('changeset_home',repo_name=sr['repository'],revision=sr['raw_id']))}
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                ${h.link_to(h.literal('%s &raquo; %s' % (sr['repository'],sr['raw_id'])),
+                    h.url('changeset_home',repo_name=sr['repository'],revision=sr['raw_id']))}
                 ${h.fmt_date(h.time_to_datetime(sr['date']))}
-                </div>
             </div>
-            <div class="left">
+            <div class="panel-body">
                 <div class="author">
                     ${h.gravatar_div(h.email_or_none(sr['author']), size=20)}
                     <span>${h.person(sr['author'])}</span><br/>
@@ -26,8 +25,8 @@
         </div>
     %else:
         %if cnt == 0:
-            <div id="body${cnt}" class="codeblock">
-                <div class="error">${_('Permission denied')}</div>
+            <div class="alert alert-warning" role="alert">
+                ${_('Permission denied')}
             </div>
         %endif
     %endif
--- a/kallithea/templates/search/search_content.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/search/search_content.html	Sun Jun 11 15:02:09 2017 +0200
@@ -2,25 +2,21 @@
 
 %for cnt,sr in enumerate(c.formated_results):
     %if h.HasRepoPermissionLevel('read')(sr['repository'],'search results check'):
-        <div id="body${cnt}" class="codeblock">
-            <div class="code-header">
-                <div class="search-path">${h.link_to(h.literal('%s &raquo; %s' % (sr['repository'],sr['f_path'])),
-                h.url('files_home',repo_name=sr['repository'],revision='tip',f_path=sr['f_path']))}
-                </div>
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                ${h.link_to(h.literal('%s &raquo; %s' % (sr['repository'],sr['f_path'])),
+                    h.url('files_home',repo_name=sr['repository'],revision='tip',f_path=sr['f_path']))}
             </div>
-            <div class="search-code-body">
+            <div class="panel-body search-code-body">
                 <pre>${h.literal(sr['content_short_hl'])}</pre>
             </div>
         </div>
     %else:
         %if cnt == 0:
-        <div>
-            <div id="body${cnt}" class="codeblock">
-                <div class="error">${_('Permission denied')}</div>
+            <div class="alert alert-warning" role="alert">
+                ${_('Permission denied')}
             </div>
-        </div>
         %endif
-
     %endif
 %endfor
 %if c.cur_query and c.formated_results:
--- a/kallithea/templates/search/search_path.html	Sun Jun 11 15:02:09 2017 +0200
+++ b/kallithea/templates/search/search_path.html	Sun Jun 11 15:02:09 2017 +0200
@@ -10,13 +10,10 @@
         </div>
     %else:
         %if cnt == 0:
-            <div class="error">
-                <div class="link">
-                    ${_('Permission denied')}
-                </div>
+            <div class="alert alert-warning" role="alert">
+                ${_('Permission denied')}
             </div>
         %endif
-
     %endif
 %endfor
 %if c.cur_query and c.formated_results: