changeset 6531:482c531e62ef

style: refactor panel margin css - make it more like real Bootstrap by putting padding on .panel-body
author Mads Kiilerich <mads@kiilerich.com>
date Mon, 06 Mar 2017 02:23:26 +0100
parents 85a1ffa5d96a
children 33b71a130b16
files kallithea/public/css/contextbar.css kallithea/public/css/style.css kallithea/templates/about.html kallithea/templates/changelog/changelog.html kallithea/templates/search/search.html kallithea/templates/summary/summary.html
diffstat 6 files changed, 69 insertions(+), 80 deletions(-) [+]
line wrap: on
line diff
--- a/kallithea/public/css/contextbar.css	Fri Mar 03 02:44:13 2017 +0100
+++ b/kallithea/public/css/contextbar.css	Mon Mar 06 02:23:26 2017 +0100
@@ -293,7 +293,7 @@
 }
 
 #context-pages li:last-child a {
-    padding-right: 10px;
+    padding-right: 20px;
 }
 
 #context-bar #revision-changer {
--- a/kallithea/public/css/style.css	Fri Mar 03 02:44:13 2017 +0100
+++ b/kallithea/public/css/style.css	Mon Mar 06 02:23:26 2017 +0100
@@ -158,7 +158,7 @@
 
 code,
 .code pre,
-div.readme .readme_box pre,
+div.readme pre,
 div.rst-block pre,
 div.formatted-fixed,
 #changeset_content div.message,
@@ -511,7 +511,6 @@
     clear: both;
     background: #fff;
     margin: 0 0 10px;
-    padding: 0 0 10px;
     border-radius: 4px 4px 4px 4px;
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
 }
@@ -522,11 +521,11 @@
     background-color: #577632;
     background-repeat: repeat-x;
     background-image: linear-gradient(to bottom, #577632, #577632);
-    margin: 0 0 20px;
     padding: 10px 20px;
     border-radius: 4px 4px 0 0;
 }
 
+#content div.panel div.panel-heading .panel-title,
 #content div.panel div.panel-heading a {
     color: #FFFFFF;
 }
@@ -603,8 +602,11 @@
     color: #5f5f5f;
     font-size: 12px;
     line-height: 150%;
-    margin: 0 24px 10px;
-    padding: 0;
+    margin: 0 0 10px;
+}
+
+#content div.panel .panel-body.panel-about > ul {
+    margin: 0 0 10px 20px;
 }
 
 #content div.panel blockquote {
@@ -1161,7 +1163,7 @@
     background-color: #f9f9f9;
     border: 1px solid #d1d1d1;
     border-radius: 4px;
-    margin: 10px 20px;
+    margin: 20px;
 }
 
 #content #summary-menu-stats li {
@@ -1593,10 +1595,6 @@
     padding-bottom: 4px;
 }
 
-#journal {
-    margin-left: 20px;
-}
-
 #journal .journal_day {
     font-size: 20px;
     padding: 10px 0px;
@@ -2548,13 +2546,6 @@
     padding-right: .3em;
 }
 
-.panel .search {
-    clear: both;
-    overflow: hidden;
-    margin: 0;
-    padding: 0 20px 10px;
-}
-
 .panel .search div.search_path {
     background: none repeat scroll 0 0 #EEE;
     border: 1px solid #CCC;
@@ -2904,7 +2895,7 @@
 .panel-body.settings > ul.nav-stacked {
     float: left;
     width: 150px;
-    margin: 20px;
+    margin: 0 20px 0 0;
     color: #393939;
     font-weight: 700;
 }
@@ -2936,13 +2927,19 @@
 .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;
+    margin: 0;
+}
+
+.panel-body {
+    padding: 20px;
+}
+
+.panel-body ~ .panel-body {
+    padding-top: 0;
+}
+
+.panel-body.settings .text-muted {
+    margin: 5px 0;
 }
 
 /* make .btn inputs and buttons and divs look the same */
@@ -3416,31 +3413,21 @@
 
 /*README STYLE*/
 
-div.readme {
-    padding: 0px;
-}
-
 div.readme h2 {
     font-weight: normal;
 }
 
-div.readme .readme_box {
-    background-color: #fafafa;
-}
-
-div.readme .readme_box {
+div.readme {
     clear: both;
     overflow: hidden;
-    margin: 0;
-    padding: 0 20px 10px;
-}
-
-div.readme .readme_box h1,
-div.readme .readme_box h2,
-div.readme .readme_box h3,
-div.readme .readme_box h4,
-div.readme .readme_box h5,
-div.readme .readme_box h6 {
+}
+
+div.readme h1,
+div.readme h2,
+div.readme h3,
+div.readme h4,
+div.readme h5,
+div.readme h6 {
     border-bottom: 0 !important;
     margin: 0 !important;
     padding: 0 !important;
@@ -3448,38 +3435,34 @@
 }
 
 
-div.readme .readme_box h1:first-child {
-    padding-top: .25em !important;
-}
-
-div.readme .readme_box h2,
-div.readme .readme_box h3 {
+div.readme h2,
+div.readme h3 {
     margin: 1em 0 !important;
 }
 
-div.readme .readme_box h2 {
+div.readme h2 {
     margin-top: 1.5em !important;
     border-top: 4px solid #e0e0e0 !important;
     padding-top: .5em !important;
 }
 
-div.readme .readme_box p {
+div.readme p {
     color: black !important;
     margin: 1em 0 !important;
     line-height: 1.5em !important;
 }
 
-div.readme .readme_box ul {
+div.readme ul {
     list-style: disc !important;
     margin: 1em 0 1em 2em !important;
 }
 
-div.readme .readme_box ol {
+div.readme ol {
     list-style: decimal;
     margin: 1em 0 1em 2em !important;
 }
 
-div.readme .readme_box code {
+div.readme code {
     font-size: 12px !important;
     background-color: ghostWhite !important;
     color: #444 !important;
@@ -3487,14 +3470,14 @@
     border: 1px solid #dedede !important;
 }
 
-div.readme .readme_box pre code {
+div.readme pre code {
     padding: 0 !important;
     font-size: 12px !important;
     background-color: #eee !important;
     border: none !important;
 }
 
-div.readme .readme_box pre {
+div.readme pre {
     margin: 1em 0;
     font-size: 12px;
     background-color: #eee;
@@ -3505,7 +3488,7 @@
     border-radius: 3px;
 }
 
-div.readme .readme_box table {
+div.readme table {
     display: table;
     border-collapse: separate;
     border-spacing: 2px;
@@ -3609,7 +3592,6 @@
 
 /** comment main **/
 .comments {
-    padding: 10px 20px;
     max-width: 978px;
 }
 
@@ -3648,10 +3630,8 @@
 }
 
 .comments-number {
-    padding: 0px 20px 10px;
-    font-weight: bold;
+    padding: 10px 0;
     color: #666;
-    font-size: 16px;
 }
 
 .automatic-comment {
@@ -3726,6 +3706,11 @@
     margin: 4px;
     max-width: 978px;
 }
+
+#comments-general-comments .comment-inline-form {
+    margin: 0;
+}
+
 .comment-inline-form .submitting-overlay {
     display: none;
     height: 0;
@@ -3780,15 +3765,18 @@
 }
 
 /** comment inline **/
-.inline-comments {
-    padding: 0 20px;
+.inline-comments .comment {
+    margin: 3px 3px 5px 5px;
+}
+
+.inline-comments #comments-general-comments .comment {
+    margin-left: 0;
 }
 
 .inline-comments .comment .comment-wrapp {
     max-width: 978px;
     border: 1px solid #ddd;
     border-radius: 4px;
-    margin: 3px 3px 5px 5px;
     background-color: #FAFAFA;
 }
 
@@ -3826,9 +3814,7 @@
 
 .inline-comments .comments-number {
     padding: 0px 0px 10px 0px;
-    font-weight: bold;
     color: #666;
-    font-size: 16px;
 }
 
 input.status_change_radio {
@@ -4008,7 +3994,7 @@
 ******************************************************************************/
 .diff-collapse {
     text-align: center;
-    margin-bottom: -15px;
+    margin: 0 0 -10px;
 }
 .diff-collapse-button {
     cursor: pointer;
@@ -4344,6 +4330,11 @@
     margin: 3px 6px;
 }
 
+#comments-general-comments div.comment-prev-next-links div.prev-comment,
+#comments-general-comments div.comment-prev-next-links div.next-comment {
+    margin-left: 0;
+}
+
 body table.dataTable thead .sorting {
   background-image: none;
 }
--- a/kallithea/templates/about.html	Fri Mar 03 02:44:13 2017 +0100
+++ b/kallithea/templates/about.html	Mon Mar 06 02:23:26 2017 +0100
@@ -16,7 +16,7 @@
     <h5 class="panel-title">${_('About')} Kallithea</h5>
   </div>
 
-  <div class="panel-body">
+  <div class="panel-body panel-about">
   <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
@@ -25,7 +25,7 @@
 
   <p>Kallithea is copyrighted by various authors, including but not
   necessarily limited to the following:</p>
-  <ul style="margin: 0 0 0 50px;">
+  <ul>
 
   <li>Copyright &copy; 2012&ndash;2016, Mads Kiilerich</li>
   <li>Copyright &copy; 2012&ndash;2016, Takumi IINO</li>
--- a/kallithea/templates/changelog/changelog.html	Fri Mar 03 02:44:13 2017 +0100
+++ b/kallithea/templates/changelog/changelog.html	Mon Mar 06 02:23:26 2017 +0100
@@ -33,8 +33,8 @@
     </div>
     <div class="panel-body">
         %if c.pagination:
-            <div class="panel">
-                <div class="panel-heading clearfix" style="${'display:none' if c.changelog_for_path else ''}">
+            <div class="panel panel-primary">
+              <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")}
@@ -63,7 +63,7 @@
                         <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 class="panel-body">
                 <div id="graph_nodes">
--- a/kallithea/templates/search/search.html	Fri Mar 03 02:44:13 2017 +0100
+++ b/kallithea/templates/search/search.html	Mon Mar 06 02:23:26 2017 +0100
@@ -36,13 +36,13 @@
     <div class="panel-heading clearfix">
         ${self.breadcrumbs()}
     </div>
+    <div class="panel-body settings form">
     %if c.repo_name:
         ${h.form(h.url('search_repo',repo_name=c.repo_name),method='get')}
     %else:
         ${h.form(h.url('search'),method='get')}
     %endif
 
-    <div class="panel-body settings form">
         <div class="form-horizontal">
             <div class="form-group">
                 <label class="control-label" for="q">${_('Search term')}:</label>
@@ -74,9 +74,9 @@
                 <div style="font-weight: bold;clear:both">${c.runtime}</div>
             </div>
         </div>
+        ${h.end_form()}
     </div>
-    ${h.end_form()}
-    <div class="search">
+    <div class="panel-body">
     %if c.cur_type == 'content':
         <%include file='search_content.html'/>
     %elif c.cur_type == 'path':
--- a/kallithea/templates/summary/summary.html	Fri Mar 03 02:44:13 2017 +0100
+++ b/kallithea/templates/summary/summary.html	Mon Mar 06 02:23:26 2017 +0100
@@ -193,6 +193,7 @@
 
 %if c.readme_data:
 <div id="readme" class="anchor">
+</div>
 <div class="panel panel-primary">
     <div class="panel-heading" title="${_('Readme file from revision %s:%s') % (c.db_repo.landing_rev[0], c.db_repo.landing_rev[1])}">
         <div class="breadcrumbs panel-title">
@@ -200,12 +201,9 @@
         </div>
     </div>
     <div class="readme panel-body">
-      <div class="readme_box">
         ${c.readme_data|n}
-      </div>
     </div>
 </div>
-</div>
 %endif
 
 <script type="text/javascript">