style: use panel, panel-heading, panel-title, panel-body and settings

This imply lots of tweaking of header handling and panel spacing.

Not converted yet: codeblock code-header code-body.

Based on work by Dominik Ruf.

kallithea/public/css/style.css

@@ -538,18 +538,14 b' div.header img {'
     background-repeat: repeat-x;
     background-image: linear-gradient(to bottom, #577632, #577632);
     margin: 0 0 20px;
-    padding: 0;
+    padding: 10px 20px;
     border-radius: 4px 4px 0 0;
 }
 
-#content div.panel div.panel-heading .link-white {
+#content div.panel div.panel-heading a {
     color: #FFFFFF;
 }
 
-#content div.panel div.panel-heading .link-white.current {
-    color: #BFE3FF;
-}
-
 #content div.panel div.panel-heading ul.links li {
     list-style: none;
     float: left;
@@ -561,7 +557,6 b' div.header img {'
     font-size: 13px;
     font-weight: 700;
     height: 1%;
-    margin: 4px;
     text-decoration: none;
 }
 
@@ -572,14 +567,6 b' div.header img {'
     padding: 11px 10px 11px 10px;
 }
 
-#content div.panel div.panel-heading .links.icon-only-links a {
-    float: left;
-    color: #fff;
-    margin: 0;
-    padding: 0 10px;
-    line-height: 18px;
-}
-
 .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;
@@ -604,13 +591,10 b' div.header img {'
     float: right;
 }
 
-#content div.panel div.panel-heading .pull-left {
-    margin: 10px;
-    color: white;
-}
-
-#content div.panel div.panel-heading .pull-right {
-    margin: 5px;
+#content div.panel div.panel-heading .pull-left,
+#content div.panel div.panel-heading .pull-left a,
+#content div.panel div.panel-heading .pull-right,
+#content div.panel div.panel-heading .pull-right a {
     color: white;
 }
 
@@ -628,14 +612,10 b' div.header img {'
 #content div.panel div.h6 {
     clear: both;
     overflow: hidden;
-    margin: 8px 20px 3px;
+    margin: 8px 0 3px;
     padding-bottom: 2px;
 }
 
-#content div.panel div.normal-indent {
-    margin: 0 20px 10px 20px;
-}
-
 #content div.panel p {
     color: #5f5f5f;
     font-size: 12px;
@@ -1176,6 +1156,10 b' div.form div.form-horizontal div.form-gr'
     padding: 0 3px 2px;
 }
 
+#content div.panel #summary-panel-body {
+    position: relative;
+}
+
 #content div.panel #summary {
     margin-right: 200px;
     min-height: 240px;
@@ -1190,7 +1174,6 b' div.form div.form-horizontal div.form-gr'
 }
 
 #summary-menu-stats ul {
-    margin: 0 10px;
     display: block;
     background-color: #f9f9f9;
     border: 1px solid #d1d1d1;
@@ -1322,7 +1305,7 b' a.metatag[data-tag="license"]:hover {'
     overflow: hidden;
     text-align: right;
     margin: 0;
-    padding: 0 10px 4px;
+    padding: 10px 20px;
     margin: -10px 0 0;
     background-color: #577632;
     background-repeat: repeat-x;
@@ -1332,7 +1315,6 b' a.metatag[data-tag="license"]:hover {'
 }
 
 #footer > span {
-    padding: 15px 25px 15px 0;
     color: #FFF;
     font-weight: 700;
 }
@@ -1630,6 +1612,10 b' a.metatag[data-tag="license"]:hover {'
     padding-bottom: 4px;
 }
 
+#journal {
+    margin-left: 20px;
+}
+
 #journal .journal_day {
     font-size: 20px;
     padding: 10px 0px;
@@ -1639,13 +1625,11 b' a.metatag[data-tag="license"]:hover {'
 }
 
 #journal .journal_container {
-    padding: 5px;
     clear: both;
-    margin: 0px 5px 0px 10px;
 }
 
 #journal .journal_action_container {
-    padding-left: 38px;
+    padding-left: 18px;
 }
 
 #journal .journal_user {
@@ -2791,14 +2775,8 b" table.code-browser i[class^='icon-'] {"
 .breadcrumbs {
     border: medium none;
     color: #FFF;
-    float: left;
     font-weight: 700;
     font-size: 14px;
-    margin: 10px;
-}
-
-.pull-left .breadcrumbs {
-    margin: 0;
 }
 
 .breadcrumbs .hash {
@@ -2806,10 +2784,6 b" table.code-browser i[class^='icon-'] {"
     color: #fff;
 }
 
-.breadcrumbs a {
-    color: #FFF;
-}
-
 .flash_msg {
 }
 
@@ -2913,6 +2887,7 b' table#permissions_manage tr#add_perm_inp'
 }
 
 div.gravatar {
+    float: left;
     background-color: #FFF;
     margin-right: 0.7em;
     padding: 1px 1px 1px 1px;
@@ -2947,7 +2922,7 b' div.gravatar img {'
 
 .label,
 .btn {
-    color: #515151;
+    color: #515151 !important;
     background-color: #DADADA;
     background-repeat: repeat-x;
     background-image: linear-gradient(to bottom, #F4F4F4, #DADADA);
@@ -2957,7 +2932,7 b' div.gravatar img {'
     border-right: 1px solid #DDD;
     border-bottom: 1px solid #c6c6c6;
     outline: none;
-    margin: 0px 3px 3px 0px;
+    margin: 0 3px 0 0;
     border-radius: 4px 4px 4px 4px !important;
     padding: 3px 3px 3px 3px;
     display: inline-block;
@@ -2970,20 +2945,35 b' div.gravatar img {'
     cursor: default !important;
 }
 
-ul.nav-stacked {
+.panel-body.settings > ul.nav-stacked {
+    float: left;
+    width: 150px;
     margin: 20px;
     color: #393939;
     font-weight: 700;
 }
 
-ul.nav-stacked a {
+.panel-body.settings > ul.nav-stacked a {
     color: inherit;
 }
 
-ul.nav-stacked li.active {
+.panel-body.settings > ul.nav-stacked li.active {
     list-style-type: disc
 }
 
+.panel-body.settings > div,
+.panel-body.settings > form {
+    float: left;
+    width: 750px;
+    margin: 10px 0 0 0;
+    border-left: 1px solid #DDDDDD;
+}
+
+.panel-body > div,
+.panel-body > form {
+    padding: 0 20px 10px;
+}
+
 /* make .btn inputs and buttons and divs look the same */
 button.btn,
 input.btn {
@@ -3035,7 +3025,7 b' input[disabled].btn,'
 
 .label.label-danger,
 .btn.btn-danger {
-    color: #fff;
+    color: #fff !important;
     background-color: #c43c35;
     background-repeat: repeat-x;
     background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
@@ -3045,7 +3035,7 b' input[disabled].btn,'
 
 .label.label-primary,
 .btn.btn-primary {
-    color: #fff;
+    color: #fff !important;
     background-color: #339bb9;
     background-repeat: repeat-x;
     background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
@@ -3055,7 +3045,7 b' input[disabled].btn,'
 
 .label.label-success,
 .btn.btn-success {
-    color: #fff;
+    color: #fff !important;
     background-color: #57a957;
     background-repeat: repeat-x;
     background-image: linear-gradient(to bottom, #62c462, #57a957);
@@ -3065,7 +3055,7 b' input[disabled].btn,'
 
 .label.label-warning,
 .btn.btn-warning {
-    color: #fff;
+    color: #fff !important;
     background-color: #faa732;
     background-repeat: repeat-x;
     background-image: linear-gradient(to bottom, #fbb450, #f89406);
@@ -3074,7 +3064,7 b' input[disabled].btn,'
 }
 
 label.disabled {
-    color: #aaa;
+    color: #aaa !important;
 }
 
 .btn.active {
@@ -3206,26 +3196,6 b' div#legend_data, div#legend_container, d'
     margin: 10px 24px 10px 44px;
 }
 
-#content div.panel div.form,
-#content div.panel div.panel-body,
-#content div.panel div.traffic {
-    position: relative;
-    clear: both;
-    margin: 0;
-    padding: 0 20px 10px;
-}
-
-#content div.panel div.form div.form-horizontal,
-#login div.form-horizontal,
-#login div.form-horizontal div.form-group,
-#register div.form,
-#register div.form div.form-horizontal {
-    clear: both;
-    overflow: hidden;
-    margin: 0;
-    padding: 0;
-}
-
 #content div.panel div.form div.form-horizontal div.form-group > div input.error,
 #login div.form div.form-horizontal div.form-group > div input.error,
 #register div.form div.form-horizontal div.form-group > div input.error {
@@ -3440,10 +3410,6 b' div#legend_choices table td {'
     padding: 0px 0px 0px 10px;
 }
 
-.emails_wrap {
-    padding: 0px 20px;
-}
-
 .emails_wrap .email_entry {
     height: 30px;
     padding: 0px 0px 0px 10px;
@@ -3455,10 +3421,6 b' div#legend_choices table td {'
     float: left
 }
 
-.ips_wrap {
-    padding: 0px 20px;
-}
-
 .ips_wrap .ip_entry {
     height: 30px;
     padding: 0px 0px 0px 10px;
@@ -3920,12 +3882,6 b' input.status_change_radio {'
     font-weight: bold;
     font-size: 17px;
 }
-.notification-table {
-    border: 1px solid #ccc;
-    border-radius: 6px 6px 6px 6px;
-    clear: both;
-    margin: 0px 20px 0px 20px;
-}
 .notification-header .delete-notifications {
     float: right;
     padding-top: 8px;
@@ -3939,7 +3895,7 b' input.status_change_radio {'
 .notification-subject {
     clear: both;
     border-bottom: 1px solid #eee;
-    padding: 5px 0px 5px 38px;
+    padding: 5px 0px;
 }
 
 .notification-body {
@@ -4014,7 +3970,13 b' span.pr-closed-tag {'
     text-transform: capitalize;
 }
 
+#perms .perms_section_head label {
+    margin-left: 10px;
+}
+
 #perms .perm_tag {
+    position: relative;
+    top: -2px;
     padding: 3px 3px 1px 3px;
     font-size: 10px;
     font-weight: bold;
@@ -4043,6 +4005,11 b' span.pr-closed-tag {'
     color: #ffffff;
 }
 
+input.perm_filter {
+    position: relative;
+    top: 2px;
+}
+
 .perm-gravatar {
     vertical-align: middle;
     padding: 2px;
@@ -4095,9 +4062,7 b' div.diffblock {'
     line-height: 125%;
     border-radius: 6px 6px 0px 0px;
 }
-div.diffblock.margined {
-    margin: 0px 20px 0px 20px;
-}
+
 .compare-revision-selector,
 div.diffblock .code-header {
     border-bottom: 1px solid #CCCCCC;
@@ -4397,15 +4362,6 b' div.comment-prev-next-links div.next-com'
     margin: 3px 6px;
 }
 
-#help_kb {
-    display: none;
-}
-
-.icon-only-links i {
-    color: white;
-}
-
-
 body table.dataTable thead .sorting {
   background-image: none;
 }
@@ -4472,3 +4428,12 b' body table.dataTable thead .sorting_desc'
 .text-nowrap {
     white-space: nowrap;
 }
+
+div.codeblock div.code-header div.author {
+    height: auto;
+    min-height: 25px;
+}
+
+ul.user_group_member li {
+    clear: both;
+}

kallithea/templates/about.html

@@ -12,10 +12,11 b''
 <%def name="main()">
 
 <div class="panel panel-primary">
-  <div class="panel-heading clearfix">
-    <h5>${_('About')} Kallithea</h5>
+  <div class="panel-heading">
+    <h5 class="panel-title">${_('About')} Kallithea</h5>
   </div>
 
+  <div class="panel-body">
   <p><a href="https://kallithea-scm.org/">Kallithea</a> is a project of the
   <a href="http://sfconservancy.org/">Software Freedom Conservancy, Inc.</a>
   and is released under the terms of the
@@ -143,15 +144,16 b''
 ## Stefan Engel <[e-mail]> in 2012
 ## Ton Plomp <[e-mail]> in 2013
 ##
-</ul></p>
+  </ul></p>
 
-<p>The above are the copyright holders who have submitted direct
+  <p>The above are the copyright holders who have submitted direct
   contributions to the Kallithea repository.  In
   the <a href="https://kallithea-scm.org/repos/kallithea">Kallithea source
   code</a>, there is
   a <a href="https://kallithea-scm.org/repos/kallithea/files/tip/LICENSE.md">list
   of third-party libraries and code that Kallithea incorporates</a>.</p>
 
+  </div>
 </div>
 
 </%def>

kallithea/templates/admin/auth/auth_settings.html

@@ -20,8 +20,8 b''
     <div class="panel-heading clearfix">
         ${self.breadcrumbs()}
     </div>
+    <div class="form panel-body settings">
     ${h.form(url('auth_settings'))}
-    <div class="form">
 
     ## enabled auth plugins
     <h1>${_('Authentication Plugins')}</h1>
@@ -107,8 +107,8 b''
                 </div>
             </div>
         </div>
+    ${h.end_form()}
     </div>
-    ${h.end_form()}
 </div>
 
 <script>

kallithea/templates/admin/defaults/defaults.html

@@ -22,7 +22,7 b''
     </div>
 
     ${h.form(url('defaults_update', id='defaults'))}
-    <div class="form">
+    <div class="form panel-body settings">
         <div class="form-horizontal">
 
             <div class="form-group">

kallithea/templates/admin/gists/edit.html

@@ -50,7 +50,7 b''
                 <textarea style="resize:vertical; width:400px;border: 1px solid #ccc;border-radius: 3px;"
                           id="description" name="description"
                           placeholder="${_('Gist description ...')}">${c.gist.gist_description}</textarea>
-                <div style="padding:0px 0px 0px 42px">
+                <div>
                     <label>
                         ${_('Gist lifetime')}
                         ${h.select('lifetime', '0', c.lifetime_options)}

kallithea/templates/admin/gists/index.html

@@ -38,10 +38,10 b''
         </div>
         %endif
     </div>
-    %if c.gists_pager.item_count>0:
+    <div class="panel-body">
+      %if c.gists_pager.item_count>0:
         % for gist in c.gists_pager:
-          <div class="gist-item" style="padding:10px 20px 10px 15px">
-
+          <div class="gist-item clearfix" style="padding:10px 20px 10px 15px">
             ${h.gravatar_div(gist.owner.email, size=28)}
             <div title="${gist.owner.full_contact}" class="user" style="font-size: 16px">
                 <b>${h.person(gist.owner.full_contact)}</b> /
@@ -65,8 +65,9 b''
         <ul class="pagination">
             ${c.gists_pager.pager(**request.GET.mixed())}
         </ul>
-    %else:
+      %else:
         <div>${_('There are no gists yet')}</div>
-    %endif
+      %endif
+    </div>
 </div>
 </%def>

kallithea/templates/admin/gists/new.html

@@ -34,7 +34,7 b''
             <div>
                 ${h.gravatar_div(c.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>
-                <div style="padding:0px 0px 0px 42px">
+                <div>
                     <label>
                         ${_('Gist lifetime')}
                         ${h.select('lifetime', '', c.lifetime_options)}

kallithea/templates/admin/my_account/my_account.html

@@ -14,13 +14,13 b''
 </%block>
 
 <%def name="main()">
-<div class="panel panel-primary" style="overflow:auto">
-    <div class="panel-heading clearfix">
+<div class="panel panel-primary">
+    <div class="panel-heading">
         ${self.breadcrumbs()}
     </div>
 
     ##main
-    <div style="width: 150px; float:left">
+    <div class="panel-body settings">
         <ul class="nav nav-pills nav-stacked">
             <li>
               <div class="gravatar_box" style="height: 26px">
@@ -38,10 +38,10 b''
             <li class="${'active' if c.active=='watched' else ''}"><a href="${h.url('my_account_watched')}">${_('Watched Repositories')}</a></li>
             <li class="${'active' if c.active=='perms' else ''}"><a href="${h.url('my_account_perms')}">${_('Show Permissions')}</a></li>
         </ul>
-    </div>
 
-    <div style="min-width:750px; float:left; padding: 10px 0px 0px 20px;margin: 0px 0px 0px 10px; border-left: 1px solid #DDDDDD">
-        <%include file="/admin/my_account/my_account_${c.active}.html"/>
+        <div>
+            <%include file="/admin/my_account/my_account_${c.active}.html"/>
+        </div>
     </div>
 </div>
 

kallithea/templates/admin/my_account/my_account_api_keys.html

@@ -1,5 +1,4 b''
-<div class="apikeys_wrap">
-  <table class="table">
+<table class="table">
     <tr>
         <td style="width: 450px"><div class="truncate autoexpand" style="width:120px;font-size:16px;font-family: monospace">${c.user.api_key}</div></td>
         <td>
@@ -48,8 +47,7 b''
     %else:
     <tr><td><div class="ip">${_('No additional API keys specified')}</div></td></tr>
     %endif
-  </table>
-</div>
+</table>
 
 <div>
     ${h.form(url('my_account_api_keys'), method='post')}

kallithea/templates/admin/notifications/notifications.html

@@ -19,15 +19,17 b''
         ${self.breadcrumbs()}
     </div>
 
-    <div class="pull-left">
+    <div class="panel-body">
+      <div class="pull-left">
             <span id='all' class="btn btn-default btn-sm"><a href="${h.url.current()}">${_('All')}</a></span>
             <span id='comment' class="btn btn-default btn-sm"><a href="${h.url.current(type=c.comment_type)}">${_('Comments')}</a></span>
             <span id='pull_request' class="btn btn-default btn-sm"><a href="${h.url.current(type=c.pull_request_type)}">${_('Pull Requests')}</a></span>
-    </div>
-    %if c.notifications:
+      </div>
+      %if c.notifications:
         <span id='mark_all_read' class="btn btn-default btn-sm pull-right">${_('Mark All Read')}</span>
-    %endif
-    <div id="notification_data">
+      %endif
+    </div>
+    <div id="notification_data" class="panel-body">
         <%include file='notifications_data.html'/>
     </div>
 </div>

kallithea/templates/admin/permissions/permissions.html

@@ -17,22 +17,22 b''
 
 
 <%def name="main()">
-<div class="panel panel-primary" style="overflow:auto">
+<div class="panel panel-primary">
     <div class="panel-heading clearfix">
         ${self.breadcrumbs()}
     </div>
 
     ##main
-    <div style="width: 150px; float:left">
+    <div class="panel-body settings">
       <ul class="nav nav-pills nav-stacked">
         <li class="${'active' if c.active=='globals' else ''}"><a href="${h.url('admin_permissions')}">${_('Global')}</a></li>
         <li class="${'active' if c.active=='ips' else ''}"><a href="${h.url('admin_permissions_ips')}">${_('IP Whitelist')}</a></li>
         <li class="${'active' if c.active=='perms' else ''}"><a href="${h.url('admin_permissions_perms')}">${_('Show Permissions')}</a></li>
       </ul>
-    </div>
 
-    <div style="width:750px; float:left; padding: 10px 0px 0px 20px;margin: 0px 0px 0px 10px; border-left: 1px solid #DDDDDD">
+      <div>
         <%include file="/admin/permissions/permissions_${c.active}.html"/>
+      </div>
     </div>
 </div>
 

kallithea/templates/admin/permissions/permissions_ips.html

@@ -1,5 +1,4 b''
-<div class="ips_wrap">
-      <table class="table">
+<table class="table">
       %if c.user_ip_map:
         %for ip in c.user_ip_map:
           <tr>
@@ -18,8 +17,7 b''
        %else:
         <tr><td><div class="ip">${_('All IP addresses are allowed.')}</div></td></tr>
        %endif
-      </table>
-</div>
+</table>
 
 ${h.form(url('edit_user_ips_update', id=c.user.user_id))}
     <div class="form">

kallithea/templates/admin/repo_groups/repo_group_add.html

@@ -23,7 +23,7 b''
         ${self.breadcrumbs()}
     </div>
     ${h.form(url('repos_groups'))}
-    <div class="form">
+    <div class="form panel-body settings">
         <div class="form-horizontal">
             <div class="form-group">
                 <label class="control-label" for="group_name">${_('Group name')}:</label>

kallithea/templates/admin/repo_groups/repo_group_edit.html

@@ -31,16 +31,16 b''
     </div>
 
     ##main
-    <div style="width: 150px; float:left">
+    <div class="panel-body settings">
       <ul class="nav nav-pills nav-stacked">
         <li class="${'active' if c.active=='settings' else ''}"><a href="${h.url('edit_repo_group', group_name=c.repo_group.group_name)}">${_('Settings')}</a></li>
         <li class="${'active' if c.active=='advanced' else ''}"><a href="${h.url('edit_repo_group_advanced', group_name=c.repo_group.group_name)}">${_('Advanced')}</a></li>
         <li class="${'active' if c.active=='perms' else ''}"><a href="${h.url('edit_repo_group_perms', group_name=c.repo_group.group_name)}">${_('Permissions')}</a></li>
       </ul>
-    </div>
 
-    <div style="width:750px; float:left; padding: 10px 0px 0px 20px;margin: 0px 0px 0px 10px; border-left: 1px solid #DDDDDD">
+      <div>
         <%include file="/admin/repo_groups/repo_group_edit_${c.active}.html"/>
+      </div>
     </div>
 </div>
 </%def>

kallithea/templates/admin/repos/repo_add.html

@@ -28,6 +28,8 b''
         <div class="panel-heading clearfix">
             ${self.breadcrumbs()}
         </div>
-        <%include file="repo_add_base.html"/>
+        <div class="panel-body settings">
+            <%include file="repo_add_base.html"/>
+        </div>
     </div>
 </%def>

kallithea/templates/admin/repos/repo_creating.html

@@ -22,22 +22,22 b''
         ${self.breadcrumbs()}
     </div>
 
-    <div style="display:table; padding: 10px 0px; font-size: 14px;font-weight: bold;margin-right: auto;margin-left: auto">
+    <div class="panel-body">
             <h4 class="text-center">
                 ${_('Repository "%(repo_name)s" is being created, you will be redirected when this process is finished.' % {'repo_name':c.repo_name})}
             </h4>
-    </div>
 
-    <div id="progress" style="width: 500px;margin-left: auto; margin-right: auto">
+        <div id="progress" style="width: 500px;margin-left: auto; margin-right: auto">
             <div class="progress progress-striped active">
                 <div class="progress-bar progress-bar" role="progressbar"
                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                 </div>
             </div>
-    </div>
-    <div id="progress_error" style="display: none;">
-        <div class="alert alert-danger">
+        </div>
+        <div id="progress_error" style="display: none;">
+            <div class="alert alert-danger">
                 ${_("We're sorry but error occurred during this operation. Please check your Kallithea server logs, or contact administrator.")}
+            </div>
         </div>
     </div>
 </div>

kallithea/templates/admin/repos/repo_edit.html

@@ -18,8 +18,8 b''
 
 <%def name="main()">
 ${self.repo_context_bar('options')}
-<div class="panel panel-primary" style="overflow:auto">
-    <div style="width: 150px; float:left">
+<div class="panel panel-primary">
+    <div class="panel-body settings">
         <ul class="nav nav-pills nav-stacked">
           <li class="${'active' if c.active=='settings' else ''}">
               <a href="${h.url('edit_repo', repo_name=c.repo_name)}">${_('Settings')}</a>
@@ -43,10 +43,10 b''
               <a href="${h.url('edit_repo_statistics', repo_name=c.repo_name)}">${_('Statistics')}</a>
           </li>
         </ul>
-    </div>
 
-    <div style="width:750px; float:left; padding: 10px 0px 0px 20px;margin: 0px 0px 0px 10px; border-left: 1px solid #DDDDDD">
-        <%include file="/admin/repos/repo_edit_${c.active}.html"/>
+        <div>
+            <%include file="/admin/repos/repo_edit_${c.active}.html"/>
+        </div>
     </div>
 </div>
 

kallithea/templates/admin/settings/settings.html

@@ -16,13 +16,13 b''
 </%block>
 
 <%def name="main()">
-<div class="panel panel-primary" style="overflow:auto">
+<div class="panel panel-primary">
     <div class="panel-heading clearfix">
         ${self.breadcrumbs()}
     </div>
 
     ##main
-    <div style="width: 150px; float:left">
+    <div class="panel-body settings">
       <ul class="nav nav-pills nav-stacked">
         <li class="${'active' if c.active=='vcs' else ''}"><a href="${h.url('admin_settings')}">${_('VCS')}</a></li>
         <li class="${'active' if c.active=='mapping' else ''}"><a href="${h.url('admin_settings_mapping')}">${_('Remap and Rescan')}</a></li>
@@ -33,10 +33,10 b''
         <li class="${'active' if c.active=='search' else ''}"><a href="${h.url('admin_settings_search')}">${_('Full Text Search')}</a></li>
         <li class="${'active' if c.active=='system' else ''}"><a href="${h.url('admin_settings_system')}">${_('System Info')}</a></li>
       </ul>
-    </div>
 
-    <div style="width:750px; float:left; padding: 10px 0px 0px 20px;margin: 0px 0px 0px 10px; border-left: 1px solid #DDDDDD">
-        <%include file="/admin/settings/settings_${c.active}.html"/>
+      <div>
+          <%include file="/admin/settings/settings_${c.active}.html"/>
+      </div>
     </div>
 </div>
 

kallithea/templates/admin/user_groups/user_group_add.html

@@ -22,7 +22,7 b''
         ${self.breadcrumbs()}
     </div>
     ${h.form(url('users_groups'))}
-    <div class="form">
+    <div class="form panel-body settings">
         <div class="form-horizontal">
             <div class="form-group">
                 <label class="control-label" for="users_group_name">${_('Group name')}:</label>

kallithea/templates/admin/user_groups/user_group_edit.html

@@ -18,13 +18,13 b''
 </%block>
 
 <%def name="main()">
-<div class="panel panel-primary" style="overflow:auto">
+<div class="panel panel-primary">
     <div class="panel-heading clearfix">
         ${self.breadcrumbs()}
     </div>
 
     ##main
-    <div style="width: 150px; float:left">
+    <div class="form panel-body settings">
       <ul class="nav nav-pills nav-stacked">
         <li class="${'active' if c.active=='settings' else ''}"><a href="${h.url('edit_users_group', id=c.user_group.users_group_id)}">${_('Settings')}</a></li>
         <li class="${'active' if c.active=='advanced' else ''}"><a href="${h.url('edit_user_group_advanced', id=c.user_group.users_group_id)}">${_('Advanced')}</a></li>
@@ -32,10 +32,10 b''
         <li class="${'active' if c.active=='default_perms' else ''}"><a href="${h.url('edit_user_group_default_perms', id=c.user_group.users_group_id)}">${_('Show Permissions')}</a></li>
         <li class="${'active' if c.active=='members' else ''}"><a href="${h.url('edit_user_group_members', id=c.user_group.users_group_id)}">${_('Show Members')}</a></li>
       </ul>
-    </div>
 
-    <div style="width:750px; float:left; padding: 10px 0px 0px 20px;margin: 0px 0px 0px 10px; border-left: 1px solid #DDDDDD">
+      <div>
         <%include file="/admin/user_groups/user_group_edit_${c.active}.html"/>
+      </div>
     </div>
 </div>
 </%def>

kallithea/templates/admin/user_groups/user_group_edit_members.html

@@ -1,5 +1,5 b''
 % if c.group_members_obj:
-  <ul>
+  <ul class="user_group_member">
   %for user in c.group_members_obj:
     <li>
         ${h.gravatar_div(user.email, size=24)}
@@ -7,6 +7,6 b''
     </li>
   %endfor
   </ul>
-  %else:
+%else:
     <span class="empty_data">${_('No members yet')}</span>
-  %endif
+%endif

kallithea/templates/admin/users/user_add.html

@@ -22,7 +22,7 b''
         ${self.breadcrumbs()}
     </div>
     ${h.form(url('new_user'))}
-    <div class="form">
+    <div class="form panel-body settings">
         <div class="form-horizontal">
             <div class="form-group">
                 <label class="control-label" for="username">${_('Username')}:</label>

kallithea/templates/admin/users/user_edit.html

@@ -18,13 +18,13 b''
 </%block>
 
 <%def name="main()">
-<div class="panel panel-primary" style="overflow:auto">
+<div class="panel panel-primary">
     <div class="panel-heading clearfix">
         ${self.breadcrumbs()}
     </div>
 
     ##main
-    <div style="width: 150px; float:left">
+    <div class="panel-body settings">
       <ul class="nav nav-pills nav-stacked">
         <li class="${'active' if c.active=='profile' else ''}"><a href="${h.url('edit_user', id=c.user.user_id)}">${_('Profile')}</a></li>
         <li class="${'active' if c.active=='emails' else ''}"><a href="${h.url('edit_user_emails', id=c.user.user_id)}">${_('Emails')}</a></li>
@@ -33,10 +33,10 b''
         <li class="${'active' if c.active=='advanced' else ''}"><a href="${h.url('edit_user_advanced', id=c.user.user_id)}">${_('Advanced')}</a></li>
         <li class="${'active' if c.active=='perms' else ''}"><a href="${h.url('edit_user_perms', id=c.user.user_id)}">${_('Show Permissions')}</a></li>
       </ul>
-    </div>
 
-    <div style="width:750px; float:left; padding: 10px 0px 0px 20px;margin: 0px 0px 0px 10px; border-left: 1px solid #DDDDDD">
-        <%include file="/admin/users/user_edit_${c.active}.html"/>
+      <div>
+          <%include file="/admin/users/user_edit_${c.active}.html"/>
+      </div>
     </div>
 </div>
 

kallithea/templates/admin/users/user_edit_api_keys.html

@@ -1,5 +1,4 b''
-<div class="apikeys_wrap">
-  <table class="table">
+<table class="table">
     <tr>
         <td style="width: 450px"><div class="truncate autoexpand" style="width:120px;font-size:16px;font-family: monospace">${c.user.api_key}</div></td>
         <td>
@@ -48,8 +47,7 b''
     %else:
     <tr><td><div class="ip">${_('No additional API keys specified')}</div></td></tr>
     %endif
-  </table>
-</div>
+</table>
 
 <div>
     ${h.form(url('edit_user_api_keys_update', id=c.user.user_id))}

kallithea/templates/admin/users/user_edit_ips.html

@@ -1,5 +1,4 b''
-<div class="ips_wrap">
-  <table class="table">
+<table class="table">
     %if c.default_user_ip_map and c.inherit_default_ips:
         %for ip in c.default_user_ip_map:
           <tr>
@@ -29,8 +28,7 b''
     %if not c.default_user_ip_map and not c.user_ip_map:
         <tr><td><div class="ip">${_('All IP addresses are allowed.')}</div></td></tr>
     %endif
-  </table>
-</div>
+</table>
 
 <div>
     ${h.form(url('edit_user_ips_update', id=c.user.user_id))}

kallithea/templates/base/base.html

@@ -45,7 +45,7 b''
 </%def>
 
 <%def name="breadcrumbs()">
-    <div class="breadcrumbs">
+    <div class="breadcrumbs panel-title">
     ${self.breadcrumbs_links()}
     </div>
 </%def>

kallithea/templates/changelog/changelog.html

@@ -33,42 +33,39 b''
     </div>
     <div class="panel-body">
         %if c.pagination:
-            <div>
-                <div style="overflow:auto; ${'display:none' if c.changelog_for_path else ''}">
-                    <div class="container_header">
-                        <div class="pull-left">
-                            ${h.form(h.url.current(),method='get',class_="form-inline")}
-                                ${h.submit('set',_('Show'),class_="btn btn-default btn-sm")}
-                                ${h.text('size',size=3,value=c.size,class_='form-control')}
-                                ${_('revisions')}
-                                %if c.branch_name:
-                                    ${h.hidden('branch', c.branch_name)}
-                                %endif
-                            ${h.end_form()}
+            <div class="panel">
+                <div class="panel-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")}
+                            ${h.text('size',size=3,value=c.size,class_='form-control')}
+                            ${_('revisions')}
+                            %if c.branch_name:
+                                ${h.hidden('branch', c.branch_name)}
+                            %endif
                             <a href="#" class="btn btn-default btn-sm" id="rev_range_clear" style="display:none">${_('Clear selection')}</a>
-                        </div>
-                        <div class="pull-right">
-                            <a href="#" class="btn btn-default btn-sm" id="rev_range_container" style="display:none"></a>
-                            %if c.revision:
-                                <a class="btn btn-default btn-sm" href="${h.url('changelog_home', repo_name=c.repo_name)}">
-                                    ${_('Go to tip of repository')}
-                                </a>
-                            %endif
-                            %if c.db_repo.fork:
-                                <a id="compare_fork"
-                                   title="${_('Compare fork with %s' % c.db_repo.fork.repo_name)}"
-                                   href="${h.url('compare_url',repo_name=c.db_repo.fork.repo_name,org_ref_type=c.db_repo.landing_rev[0],org_ref_name=c.db_repo.landing_rev[1],other_repo=c.repo_name,other_ref_type='branch' if request.GET.get('branch') else c.db_repo.landing_rev[0],other_ref_name=request.GET.get('branch') or c.db_repo.landing_rev[1], merge=1)}"
-                                   class="btn btn-default btn-sm"><i class="icon-git-compare"></i> ${_('Compare fork with parent repository (%s)' % c.db_repo.fork.repo_name)}</a>
-                            %endif
-                            ## text and href of open_new_pr is controlled from javascript
-                            <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>
+                        ${h.end_form()}
+                    </div>
+                    <div class="pull-right">
+                        <a href="#" class="btn btn-default btn-sm" id="rev_range_container" style="display:none"></a>
+                        %if c.revision:
+                            <a class="btn btn-default btn-sm" href="${h.url('changelog_home', repo_name=c.repo_name)}">
+                                ${_('Go to tip of repository')}
+                            </a>
+                        %endif
+                        %if c.db_repo.fork:
+                            <a id="compare_fork"
+                               title="${_('Compare fork with %s' % c.db_repo.fork.repo_name)}"
+                               href="${h.url('compare_url',repo_name=c.db_repo.fork.repo_name,org_ref_type=c.db_repo.landing_rev[0],org_ref_name=c.db_repo.landing_rev[1],other_repo=c.repo_name,other_ref_type='branch' if request.GET.get('branch') else c.db_repo.landing_rev[0],other_ref_name=request.GET.get('branch') or c.db_repo.landing_rev[1], merge=1)}"
+                               class="btn btn-default btn-sm"><i class="icon-git-compare"></i> ${_('Compare fork with parent repository (%s)' % c.db_repo.fork.repo_name)}</a>
+                        %endif
+                        ## text and href of open_new_pr is controlled from javascript
+                        <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 id="changelog" style="clear:both">
-
+              <div class="panel-body">
                 <div id="graph_nodes">
                     <canvas id="graph_canvas" style="width:0"></canvas>
                 </div>
@@ -184,8 +181,8 b''
                 <ul class="pagination">
                     ${c.pagination.pager()}
                 </ul>
+              </div>
             </div>
-        </div>
 
         <script type="text/javascript" src="${h.url('/js/graph.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript">

kallithea/templates/changeset/changeset.html

@@ -29,6 +29,7 b''
     AJAX_COMMENT_DELETE_URL = "${url('changeset_comment_delete',repo_name=c.repo_name,comment_id='__COMMENT_ID__')}";
   </script>
   <div class="panel-body">
+    <div>
         <div class="diffblock">
             <div class="parents">
                 <div id="parent_link" class="changeset_hash">
@@ -182,9 +183,11 b''
         </div>
 
     </div>
+  </div>
 
-    ## diff block
-    <div class="commentable-diff">
+  ## diff block
+  <div class="panel-body">
+  <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] %>
@@ -300,4 +303,5 b''
     </script>
 
   </div>
+  </div>
 </%def>

kallithea/templates/changeset/changeset_range.html

@@ -23,6 +23,7 b''
         ${self.breadcrumbs()}
     </div>
     <div class="panel-body">
+      <div>
         <div id="body" class="diffblock">
             <div class="code-header">
                 <div>
@@ -71,11 +72,13 b''
                     %endfor
               </div>
         </div>
+      </div>
     </div>
     <%namespace name="comment" file="/changeset/changeset_file_comment.html"/>
     <%namespace name="diff_block" file="/changeset/diff_block.html"/>
     ${diff_block.diff_block_js()}
     %for cs in c.cs_ranges:
+        <div class="panel-body">
           ## diff block
           <div class="h3">
           <a data-toggle="tooltip" title="${cs.message}" href="${h.url('changeset_home',repo_name=c.cs_repo.repo_name,revision=cs.raw_id)}">${h.show_id(cs)}</a>
@@ -107,6 +110,7 b''
           <% a_rev, cs_rev, file_diff_data = c.changes[cs.raw_id] %>
           ${diff_block.diff_block(c.repo_name, 'rev', a_rev, a_rev,
                                   c.repo_name, 'rev', cs_rev, cs_rev, file_diff_data)}
+        </div>
     %endfor
 </div>
 </%def>

kallithea/templates/compare/compare_diff.html

@@ -24,6 +24,7 b''
         ${self.breadcrumbs()}
     </div>
     <div class="panel-body">
+      <div>
         <div id="body" class="diffblock">
             <div class="compare-revision-selector">
                 ## divs are "inline-block" and cannot have whitespace between them.
@@ -80,7 +81,7 b''
                     <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>
+        </div>
 
         ## diff block
         <%namespace name="diff_block" file="/changeset/diff_block.html"/>
@@ -90,6 +91,7 b''
         % 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>
 

kallithea/templates/files/file_diff.html

@@ -18,7 +18,7 b''
     <div class="panel-heading clearfix">
         ${self.breadcrumbs()}
     </div>
-    <div>
+    <div class="panel-body">
     ## diff block
     <%namespace name="diff_block" file="/changeset/diff_block.html"/>
     ${diff_block.diff_block_js()}

kallithea/templates/files/files_browser.html

@@ -55,7 +55,7 b''
         </div>
     </div>
 
-    <div class="browser-body">
+    <div class="panel-body">
         <table class="table code-browser">
             <thead>
                 <tr>

kallithea/templates/forks/fork.html

@@ -20,7 +20,7 b''
         ${self.breadcrumbs()}
     </div>
     ${h.form(url('repo_fork_create_home',repo_name=c.repo_info.repo_name))}
-    <div class="form">
+    <div class="form panel-body settings">
         <div class="form-horizontal">
 
             <div class="form-group">

kallithea/templates/index_base.html

@@ -1,7 +1,7 b''
 <%page args="parent,group_name=''" />
     <div class="panel panel-primary">
         <div class="panel-heading clearfix">
-            <div class="breadcrumbs">
+            <div class="pull-left breadcrumbs">
                 %if c.group is not None:
                     %for group in c.group.parents:
                         ${h.link_to(group.name, url('repos_group_home', group_name=group.group_name))}
@@ -12,7 +12,7 b''
             </div>
 
             %if c.authuser.username != 'default':
-              <ul class="links">
+              <ul class="pull-right links">
                 <li>
                 <%
                     gr_name = c.group.group_name if c.group else None
@@ -43,7 +43,6 b''
         </div>
         %if c.groups:
         <div class="panel-body">
-            <div id='groups_list_wrap'>
               <table id="groups_list" class="table">
                   <thead>
                       <tr>
@@ -71,10 +70,9 b''
                     </tr>
                   % endfor
               </table>
-            </div>
         </div>
         %endif
-        <div>
+        <div class="panel-body">
             <table class="table" id="repos_list_wrap"></table>
         </div>
     </div>

kallithea/templates/journal/journal.html

@@ -25,14 +25,14 b''
             <div class="pull-left">
                 ${self.breadcrumbs()}
             </div>
-            <div class="pull-right links icon-only-links panel-title">
+            <div class="pull-right panel-title">
                 <a href="${h.url('my_account_watched')}"><i class="icon-eye"></i> ${_('Watched Repositories')}</a>
                 <a href="${h.url('my_account_repos')}"><i class="icon-database"></i> ${_('My Repositories')}</a>
                 <a id="refresh" href="${h.url('journal')}"><i class="icon-arrows-cw"></i></a>
                 <a href="${h.url('journal_atom', api_key=c.authuser.api_key)}"><i class="icon-rss-squared"></i></a>
             </div>
         </div>
-        <div id="journal">
+        <div id="journal" class="panel-body">
             <%include file='journal_data.html'/>
         </div>
     </div>

kallithea/templates/journal/public_journal.html

@@ -20,12 +20,12 b''
     <div class="pull-left">
       ${_('Public Journal')}
     </div>
-    <div class="pull-right">
+    <div class="pull-right panel-title">
         <a href="${h.url('public_journal_atom')}"><i class="icon-rss-squared"></i></a>
     </div>
   </div>
 
-  <div id="journal">
+  <div id="journal" class="panel-body">
     <%include file='journal_data.html'/>
   </div>
 </div>

kallithea/templates/login.html

@@ -5,16 +5,16 b''
     ${_('Log In')}
 </%block>
 
-<div id="login" class="panel panel-default">
-    <%include file="/base/flash_msg.html"/>
-    <div class="panel-heading clearfix">
+<%include file="/base/flash_msg.html"/>
+<div id="login" class="panel panel-primary">
+    <div class="panel-heading">
         %if c.site_name:
             <h5>${_('Log In to %s') % c.site_name}</h5>
         %else:
             <h5>${_('Log In')}</h5>
         %endif
     </div>
-    <div class="panel-body inner">
+    <div class="panel-body">
         ${h.form(url('login_home', came_from=c.came_from))}
         <div class="form">
             <i class="icon-lock"></i>

kallithea/templates/password_reset.html

@@ -5,16 +5,16 b''
     ${_('Password Reset')}
 </%block>
 
-<div id="register">
-    <%include file="/base/flash_msg.html"/>
-    <div class="panel-heading clearfix">
+<%include file="/base/flash_msg.html"/>
+<div id="register" class="panel panel-primary">
+    <div class="panel-heading">
         %if c.site_name:
             <h5>${_('Reset Your Password to %s') % c.site_name}</h5>
         %else:
             <h5>${_('Reset Your Password')}</h5>
         %endif
     </div>
-    <div class="inner">
+    <div class="panel-body">
         ${h.form(url('password_reset'))}
         <div class="form">
             <div class="form-horizontal">
@@ -64,4 +64,4 b''
          });
         </script>
     </div>
-   </div>
+</div>

kallithea/templates/password_reset_confirmation.html

@@ -5,23 +5,22 b''
     ${_('Reset Your Password')}
 </%block>
 
-<div id="register">
-    <%include file="/base/flash_msg.html"/>
-    <div class="panel-heading clearfix">
+<%include file="/base/flash_msg.html"/>
+
+<div class="panel panel-primary">
+    <div class="panel-heading">
         %if c.site_name:
             <h5>${_('Reset Your Password to %s') % c.site_name}</h5>
         %else:
             <h5>${_('Reset Your Password')}</h5>
         %endif
     </div>
-    <div class="inner">
+    <div class="panel-body">
         ${h.form(h.url('reset_password_confirmation'), method='post')}
         <p>${_('You are about to set a new password for the email address %s.') % c.email}</p>
         <p>${_('Note that you must use the same browser session for this as the one used to request the password reset.')}</p>
-        <div style="display: none;">
-            ${h.hidden('email')}
-            ${h.hidden('timestamp')}
-        </div>
+        ${h.hidden('email')}
+        ${h.hidden('timestamp')}
         <div class="form">
             <div class="form-horizontal">
                 <div class="form-group">

kallithea/templates/pullrequests/pullrequest.html

@@ -20,9 +20,9 b''
     </div>
 
     ${h.form(url('pullrequest', repo_name=c.repo_name), method='post', id='pull_request_form')}
-    <div class="form">
-
-        <div class="form-horizontal" style="float:left;width:50%;padding-right:30px;">
+    <div class="form panel-body">
+        <div class="settings clearfix">
+          <div class="form-horizontal">
 
             <div class="form-group">
                 <label class="control-label" for="pullrequest_title">${_('Title')}:</label>
@@ -40,7 +40,7 b''
 
             <div class="form-group">
                 <label class="control-label">${_('Changeset flow')}:</label>
-                <div>
+                <div class="clearfix">
                     ##ORG
                     <div>
                         <div>
@@ -71,7 +71,6 b''
                             </div>
                         </div>
                     </div>
-                    <div style="clear:both"></div>
                 </div>
             </div>
 
@@ -82,12 +81,13 b''
                 </div>
             </div>
 
+          </div>
         </div>
 
         <div style="clear:both;padding: 0 0 30px 0;"></div>
 
-        <h4>${_('Changesets')}</h4>
         <div style="float:left;padding:0px 30px 30px 30px">
+           <h4>${_('Changesets')}</h4>
            ## overview pulled by ajax
            <div style="float:left" id="pull_request_overview"></div>
         </div>

kallithea/templates/pullrequests/pullrequest_show.html

@@ -22,7 +22,7 b''
     ${self.breadcrumbs()}
   </div>
 
-  ${h.form(url('pullrequest_post', repo_name=c.repo_name, pull_request_id=c.pull_request.pull_request_id), method='post', id='pull_request_form')}
+  ${h.form(url('pullrequest_post', repo_name=c.repo_name, pull_request_id=c.pull_request.pull_request_id), method='post', id='pull_request_form',class_='panel-body')}
     <div class="form pr-box" style="float: left">
       <div class="pr-details-title ${'closed' if c.pull_request.is_closed() else ''}">
         <h3>
@@ -152,7 +152,7 b''
             <div>
               <div class="msg-div">${c.update_msg}</div>
               %if c.avail_revs:
-              <div id="updaterevs" style="max-height:200px; overflow-y:auto; overflow-x:hidden; margin-bottom: 10px; padding: 1px 0">
+              <div id="updaterevs" class="clearfix" style="max-height:200px; overflow-y:auto; overflow-x:hidden; margin-bottom: 10px; padding: 1px 0">
                 <div style="height:0;width:40px">
                   <canvas id="avail_graph_canvas" style="width:0"></canvas>
                 </div>
@@ -286,7 +286,8 b''
       <div class="breadcrumbs">${_('Pull Request Content')}</div>
     </div>
     <div class="panel-body">
-          <div id="changeset_compare_view_content">
+        <div>
+            <div id="changeset_compare_view_content">
               <h5>
                   ${comment.comment_count(c.inline_cnt, len(c.comments))}
               </h5>
@@ -326,7 +327,8 b''
                   <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>
+            </div>
+        </div>
     </div>
     <script>
     var _USERS_AC_DATA = ${c.users_array|n};
@@ -341,6 +343,7 b''
     </script>
 
     ## diff block
+    <div class="panel-body">
     <div class="commentable-diff">
     <%namespace name="diff_block" file="/changeset/diff_block.html"/>
     ${diff_block.diff_block_js()}
@@ -350,6 +353,7 b''
       <h4>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff anyway')}</a></h4>
     % endif
     </div>
+    </div>
 
     ## template for inline comment form
     ${comment.comment_inline_form()}

kallithea/templates/pullrequests/pullrequest_show_all.html

@@ -38,7 +38,7 b''
         </div>
     </div>
 
-    <div class="normal-indent">
+    <div class="panel-body">
         <div>
         %if c.closed:
             ${h.link_to(_('Hide closed pull requests (only show open pull requests)'), h.url('pullrequest_show_all',repo_name=c.repo_name,from_=c.from_))}
@@ -46,9 +46,9 b''
             ${h.link_to(_('Show closed pull requests (in addition to open pull requests)'), h.url('pullrequest_show_all',repo_name=c.repo_name,from_=c.from_,closed=1))}
         %endif
         </div>
+
+        ${pullrequest_data.pullrequest_overview(c.pullrequests_pager)}
     </div>
 
-    ${pullrequest_data.pullrequest_overview(c.pullrequests_pager)}
-
 </div>
 </%def>

kallithea/templates/pullrequests/pullrequest_show_my.html

@@ -21,7 +21,8 b''
         ${self.breadcrumbs()}
     </div>
 
-    <div class="normal-indent">
+    <div class="panel-body">
+      <div>
         <div>
         %if c.closed:
             ${h.link_to(_('Hide closed pull requests (only show open pull requests)'), h.url('my_pullrequests'))}
@@ -38,6 +39,7 b''
 
         <h4>${_('Pull Requests I Participate In')}</h4>
         ${pullrequest_data.pullrequest_overview(c.participate_in_pull_requests)}
+      </div>
     </div>
 </div>
 </%def>

kallithea/templates/register.html

@@ -5,16 +5,17 b''
     ${_('Sign Up')}
 </%block>
 
-<div id="register">
-    <%include file="/base/flash_msg.html"/>
-    <div class="panel-heading clearfix">
+<%include file="/base/flash_msg.html"/>
+
+<div id="register" class="panel panel-primary">
+    <div class="panel-heading">
         %if c.site_name:
             <h5>${_('Sign Up to %s') % c.site_name}</h5>
         %else:
             <h5>${_('Sign Up')}</h5>
         %endif
     </div>
-    <div class="inner">
+    <div class="panel-body">
         ${h.form(url('register'))}
         <div class="form">
             <div class="form-horizontal">

kallithea/templates/search/search.html

@@ -41,7 +41,8 b''
     %else:
         ${h.form(h.url('search'),method='get')}
     %endif
-    <div class="form">
+
+    <div class="panel-body settings form">
         <div class="form-horizontal">
             <div class="form-group">
                 <label class="control-label" for="q">${_('Search term')}:</label>

kallithea/templates/search/search_path.html

@@ -2,8 +2,8 b''
 
 %for cnt,sr in enumerate(c.formated_results):
     %if h.HasRepoPermissionAny('repository.write','repository.read','repository.admin')(sr['repository'],'search results check'):
-        <div class="search_path">
-            <div class="link">
+        <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>

kallithea/templates/summary/statistics.html

@@ -27,7 +27,7 b''
         ${self.breadcrumbs()}
     </div>
 
-    <div class="graph">
+    <div class="graph panel-body">
          <div style="padding:0 10px 10px 17px;">
          %if c.no_data:
            ${c.no_data_msg}

kallithea/templates/summary/summary.html

@@ -63,7 +63,7 b" summary = lambda n:{False:'summary-short"
     <div class="panel-heading clearfix">
         ${self.breadcrumbs()}
     </div>
-    <div class="form">
+    <div id="summary-panel-body" class="form panel-body">
         <div id="summary" class="form-horizontal">
             <div class="form-group form-inline clearfix">
               <label>${_('Clone URL')}:</label>
@@ -170,7 +170,7 b" summary = lambda n:{False:'summary-short"
 
 
 <div class="panel panel-primary">
-    <div class="panel-heading clearfix">
+    <div class="panel-heading">
         <div class="breadcrumbs panel-title">
         %if c.repo_changesets:
             ${h.link_to(_('Latest Changes'),h.url('changelog_home',repo_name=c.repo_name))}