(refs #865)Apply the flat style to box headers

src/main/twirl/gitbucket/core/admin/menu.scala.html

@@ -3,22 +3,20 @@
 <div class="container">
   <div class="row-fluid">
     <div class="span3">
-      <div class="box">
+      <ul class="nav nav-tabs nav-stacked side-menu" id="system-admin-menu-container">
-        <ul class="nav nav-tabs nav-stacked side-menu" id="system-admin-menu-container">
+        <li@if(active=="users"){ class="active"}>
-          <li@if(active=="users"){ class="active"}>
+          <a href="@path/admin/users">User Management</a>
-            <a href="@path/admin/users">User Management</a>
+        </li>
-          </li>
+        <li@if(active=="system"){ class="active"}>
-          <li@if(active=="system"){ class="active"}>
+          <a href="@path/admin/system">System Settings</a>
-            <a href="@path/admin/system">System Settings</a>
+        </li>
-          </li>
+        <li@if(active=="plugins"){ class="active"}>
-          <li@if(active=="plugins"){ class="active"}>
+        <a href="@path/admin/plugins">Plugins</a>
-          <a href="@path/admin/plugins">Plugins</a>
+        </li>
-          </li>
+        <li>
-          <li>
+          <a href="@path/console/login.jsp">H2 Console</a>
-            <a href="@path/console/login.jsp">H2 Console</a>
+        </li>
-          </li>
+     </ul>
-       </ul>
-     </div>
     </div>
     <div class="span9">
       @body

src/main/twirl/gitbucket/core/index.scala.html

@@ -24,56 +24,48 @@
         @if(loginAccount.isEmpty){
           @signinform(settings)
         } else {
-          <table class="table table-bordered">
+          <div class="box-header">
-            <tr>
+            <div class="pull-right">
-              <th class="metal">
+              <a href="@path/new" class="btn btn-success btn-mini">New repository</a>
-                <div class="pull-right">
+            </div>
-                  <a href="@path/new" class="btn btn-success btn-mini">New repository</a>
+            Your repositories (@userRepositories.size)
-                </div>
+          </div>
-                Your repositories (@userRepositories.size)
-              </th>
-            </tr>
             @if(userRepositories.isEmpty){
-              <tr>
+              <div class="box-content-bottom">
-                <td>No repositories</td>
+                No repositories
-              </tr>
+              </div>
             } else {
-              @userRepositories.map { repository =>
+              <div class="box-content-bottom" style="padding: 0px;">
-                <tr>
+                @userRepositories.map { repository =>
-                  <td>
+                  <div class="box-content-row">
                     @helper.html.repositoryicon(repository, false)
                     @if(repository.owner == loginAccount.get.userName){
                       <a href="@url(repository)"><span class="strong">@repository.name</span></a>
                     } else {
                       <a href="@url(repository)">@repository.owner/<span class="strong">@repository.name</span></a>
                     }
-                  </td>
+                  </div>
-                </tr>
+                }
-              }
+              </div>
             }
-          </table>
         }
-        <table class="table table-bordered">
+        <div class="box-header">
-          <tr>
+          Recent updated repositories
-            <th class="metal">
+        </div>
-              Recent updated repositories
+        @if(recentRepositories.isEmpty){
-            </th>
+          <div class="box-content-bottom">
-          </tr>
+            No repositories
-          @if(recentRepositories.isEmpty){
+          </div>
-            <tr>
+        } else {
-              <td>No repositories</td>
+          <div class="box-content-bottom" style="padding: 0px;">
-            </tr>
-          } else {
             @recentRepositories.map { repository =>
-              <tr>
+              <div class="box-content-row">
-                <td>
+                @helper.html.repositoryicon(repository, false)
-                  @helper.html.repositoryicon(repository, false)
+                <a href="@url(repository)">@repository.owner/<span class="strong">@repository.name</span></a>
-                  <a href="@url(repository)">@repository.owner/<span class="strong">@repository.name</span></a>
+              </div>
-                </td>
-              </tr>
             }
-          }
+          </div>
-        </table>
+        }
       </div>
     </div>
   </div>

src/main/twirl/gitbucket/core/issues/commentform.scala.html

@@ -8,7 +8,7 @@
   <hr/><br/>
   <form method="POST" validate="true">
     <div class="issue-avatar-image">@avatar(loginAccount.get.userName, 48)</div>
-      <div class="box issue-comment-box">
+      <div class="issue-comment-box">
       <div class="box-content">
         @helper.html.preview(
           repository         = repository,
@@ -20,15 +20,15 @@
           style              = "width: 635px; height: 100px; max-height: 150px;",
           elastic            = true
         )
+        <div style="text-align: right;">
+          <input type="hidden" name="issueId" value="@issue.issueId"/>
+          <input type="submit" class="btn btn-success" formaction="@url(repository)/issue_comments/new" value="Comment"/>
+          @if((reopenable || !issue.closed) && (hasWritePermission || issue.openedUserName == loginAccount.get.userName)){
+            <input type="submit" class="btn" formaction="@url(repository)/issue_comments/state" value="@{if(issue.closed) "Reopen" else "Close"}" id="action"/>
+          }
+        </div>
       </div>
     </div>
-    <div class="pull-right">
-      <input type="hidden" name="issueId" value="@issue.issueId"/>
-      <input type="submit" class="btn btn-success" formaction="@url(repository)/issue_comments/new" value="Comment"/>
-      @if((reopenable || !issue.closed) && (hasWritePermission || issue.openedUserName == loginAccount.get.userName)){
-        <input type="submit" class="btn" formaction="@url(repository)/issue_comments/state" value="@{if(issue.closed) "Reopen" else "Close"}" id="action"/>
-      }
-    </div>
   </form>
 }
 <script>

src/main/twirl/gitbucket/core/issues/commentlist.scala.html

@@ -8,8 +8,8 @@
 @import gitbucket.core.model.CommitComment
 @if(issue.isDefined){
   <div class="issue-avatar-image">@avatar(issue.get.openedUserName, 48)</div>
-  <div class="box issue-comment-box">
+  <div class="issue-comment-box">
-    <div class="box-header-small">
+    <div class="box-header">
       @user(issue.get.openedUserName, styleClass="username strong") <span class="muted">commented @helper.html.datetimeago(issue.get.registeredDate)</span>
       <span class="pull-right">
         @if(hasWritePermission || loginAccount.map(_.userName == issue.get.openedUserName).getOrElse(false)){
@@ -17,7 +17,7 @@
         }
       </span>
     </div>
-    <div class="box-content issue-content markdown-body" id="issueContent">
+    <div class="box-content-bottom issue-content markdown-body" id="issueContent">
       @markdown(issue.get.content getOrElse "No description provided.", repository, false, true, true, hasWritePermission)
     </div>
   </div>
@@ -28,7 +28,7 @@
     @if(comment.action != "close" && comment.action != "reopen" && comment.action != "delete_branch"){
       <div class="issue-avatar-image">@avatar(comment.commentedUserName, 48)</div>
       <div class="box issue-comment-box" id="comment-@comment.commentId">
-        <div class="box-header-small">
+        <div class="box-header">
           @user(comment.commentedUserName, styleClass="username strong")
           <span class="muted">
             @if(comment.action == "comment"){
@@ -46,7 +46,7 @@
             }
           </span>
         </div>
-        <div class="box-content"class="issue-content" id="commentContent-@comment.commentId">
+        <div class="box-content-bottom issue-content" id="commentContent-@comment.commentId">
           @if(comment.action == "commit" && comment.content.split(" ").last.matches("[a-f0-9]{40}")){
             @defining(comment.content.substring(comment.content.length - 40)){ id =>
               <div class="pull-right"><a href="@path/@repository.owner/@repository.name/commit/@id" class="monospace">@id.substring(0, 7)</a></div>

src/main/twirl/gitbucket/core/issues/issue.scala.html

@@ -13,9 +13,9 @@
     <div>
       <div class="show-title pull-right">
         @if(hasWritePermission || loginAccount.map(_.userName == issue.openedUserName).getOrElse(false)){
-          <a class="btn btn-small" href="#" id="edit">Edit</a>
+          <a class="btn" href="#" id="edit">Edit</a>
         }
-        <a class="btn btn-small btn-success" href="@url(repository)/issues/new">New issue</a>
+        <a class="btn btn-success" href="@url(repository)/issues/new">New issue</a>
       </div>
       <div class="edit-title pull-right" style="display: none;">
         <a class="btn" href="#" id="update">Save</a>  <a href="#" id="cancel">Cancel</a>

src/main/twirl/gitbucket/core/main.scala.html

@@ -67,14 +67,14 @@
               @if(loginAccount.isDefined){
                 <div class="btn-group" style="margin-top: 0px;">
                   <a class="dropdown-toggle menu" data-toggle="dropdown" href="#"><i class="octicon octicon-plus" style="font-size: 20px; vertical-align: top; margin-top: 10px;"></i><span class="caret" style="vertical-align: middle;"></span></a>
-                  <ul class="dropdown-menu">
+                  <ul class="dropdown-menu pull-right">
                     <li><a href="@path/new">New repository</a></li>
                     <li><a href="@path/groups/new">New group</a></li>
                   </ul>
                 </div>
                 <div class="btn-group" style="margin-top: 0px;">
                   <a class="dropdown-toggle menu" data-toggle="dropdown" href="#" data-toggle="tooltip" data-placement="bottom" title="Signed is as @loginAccount.get.userName">@avatar(loginAccount.get.userName, 16)<span class="caret" style="vertical-align: middle;"></span></a>
-                  <ul class="dropdown-menu">
+                  <ul class="dropdown-menu pull-right">
                     <li><a href="@url(loginAccount.get.userName)/_edit">Account settings</a></li>
                     @if(loginAccount.get.isAdmin){
                       <li><a href="@path/admin/users">System administration</a></li>

src/main/twirl/gitbucket/core/pulls/pullreq.scala.html

@@ -18,9 +18,9 @@
       <div>
         <div class="show-title pull-right">
           @if(hasWritePermission || loginAccount.map(_.userName == issue.openedUserName).getOrElse(false)){
-            <a class="btn btn-small" href="#" id="edit">Edit</a>
+            <a class="btn" href="#" id="edit">Edit</a>
           }
-          <a class="btn btn-small btn-success" href="@url(repository)/issues/new">New issue</a>
+          <a class="btn btn-success" href="@url(repository)/issues/new">New issue</a>
         </div>
         <div class="edit-title pull-right" style="display: none;">
           <a class="btn" href="#" id="update">Save</a>  <a href="#" id="cancel">Cancel</a>

src/main/twirl/gitbucket/core/repo/files.scala.html

@@ -128,7 +128,7 @@
     @readme.map { case(filePath, content) =>
       <div id="readme">
         <div class="box-header">@filePath.reverse.head</div>
-        <div class="box-content markdown-body">@renderMarkup(filePath, content, branch, repository, false, false, true)</div>
+        <div class="box-content-bottom markdown-body">@renderMarkup(filePath, content, branch, repository, false, false, true)</div>
       </div>
     }
   }

src/main/twirl/gitbucket/core/signinform.scala.html

@@ -1,29 +1,23 @@
 @(systemSettings: gitbucket.core.service.SystemSettingsService.SystemSettings)(implicit context: gitbucket.core.controller.Context)
 @import context._
-<table class="table table-bordered">
+<div class="box-header">
-  <tr>
+  @if(systemSettings.allowAccountRegistration){
-    <th class="metal">
+    <div class="pull-right">
-      @if(systemSettings.allowAccountRegistration){
+      <a href="@path/register" class="btn btn-mini">Create new account</a>
-        <div class="pull-right">
+    </div>
-          <a href="@path/register" class="btn btn-mini">Create new account</a>
+  }
-        </div>
+  Sign in
-      }
+</div>
-      Sign in
+<div class="box-content-bottom">
-    </th>
+  <form action="@path/signin" method="POST" validate="true">
-  </tr>
+    <label for="userName">Username:</label>
-  <tr>
+    <span id="error-userName" class="error"></span>
-    <td>
+    <input type="text" name="userName" id="userName" style="width: 95%" autofocus/>
-      <form action="@path/signin" method="POST" validate="true">
+    <label for="password">Password:</label>
-        <label for="userName">Username:</label>
+    <span id="error-password" class="error"></span>
-        <span id="error-userName" class="error"></span>
+    <input type="password" name="password" id="password" style="width: 95%"/>
-        <input type="text" name="userName" id="userName" style="width: 95%" autofocus/>
+    <div>
-        <label for="password">Password:</label>
+      <input type="submit" class="btn btn-success" value="Sign in"/>
-        <span id="error-password" class="error"></span>
+    </div>
-        <input type="password" name="password" id="password" style="width: 95%"/>
+  </form>
-        <div>
+</div>
-          <input type="submit" class="btn btn-success" value="Sign in"/>
-        </div>
-      </form>
-    </td>
-  </tr>
-</table>

src/main/webapp/assets/common/css/gitbucket.css

@@ -131,15 +131,6 @@ a.global-header-menu {
   line-height: 3.5;
 }
 
-/*
-img.plugin-global-menu {
-  width: 16px;
-  height: 16px;
-  position: relative;
-  top: -2px;
-}
-*/
-
 /* ======================================================================== */
 /* General Styles */
 /* ======================================================================== */
@@ -227,82 +218,57 @@ h3 {
   margin-top: 0px;
 }
 
-div.box {
-  background-color: #efefef;
-  padding: 2px;
-  margin-bottom: 10px;
-}
-
 div.box-header {
-  font-size: 120%;
+  background-color: #f5f5f5;
-  font-weight: bold;
-  background-color: #e0e0e0;
-  background-image: -moz-linear-gradient(#fafafa, #e0e0e0);
-  background-image: -webkit-linear-gradient(#fafafa, #e0e0e0);
-  background-image: linear-gradient(#fafafa, #e0e0e0);
-  background-repeat: repeat-x;
   margin: 0;
-  border-top-left-radius: 1px;
+  border-top-left-radius: 3px;
-  border-top-right-radius: 1px;
+  border-top-right-radius: 3px;
   border: 1px solid #d8d8d8;
   border-bottom: none;
-  padding: 8px 10px 8px 10px;
+  padding: 8px 8px 8px 8px;
-  text-shadow: 0 1px 0 #fff
-}
-
-div.box-header-small {
-  background-color: #e0e0e0;
-  background-image: -moz-linear-gradient(#fafafa, #e0e0e0);
-  background-image: -webkit-linear-gradient(#fafafa, #e0e0e0);
-  background-image: linear-gradient(#fafafa, #e0e0e0);
-  background-repeat: repeat-x;
-  margin: 0;
-  border-top-left-radius: 1px;
-  border-top-right-radius: 1px;
-  border: 1px solid #d8d8d8;
-  border-bottom: none;
-  padding: 6px 4px 6px 4px;
-  text-shadow: 0 1px 0 #fff
 }
 
 .inline-comment div.box-header-small {
   background: #f2f8fa;
 }
 
-
 div.box-content {
   background-color: white;
   border: 1px solid #d8d8d8;
   padding: 4px;
+  border-radius: 3px;
+}
+
+div.box-content-bottom > div.box-content-row:nth-of-type(1) {
+  border: none;
+}
+
+div.box-content-row {
+  border-top: 1px solid #d8d8d8;
+  padding: 4px;
+}
+
+div.box-content-bottom {
+  background-color: white;
+  border: 1px solid #d8d8d8;
+  padding: 4px;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  margin-bottom: 20px;
 }
 
 th.box-header {
   background-color: #e0e0e0;
-  background-image: -moz-linear-gradient(#fafafa, #e0e0e0);
-  background-image: -webkit-linear-gradient(#fafafa, #e0e0e0);
-  background-image: linear-gradient(#fafafa, #e0e0e0);
-  background-repeat: repeat-x;
   margin: 0;
-  border-top-left-radius: 1px;
+  border-top-left-radius: 3px;
-  border-top-right-radius: 1px;
+  border-top-right-radius: 3px;
   border: 1px solid #d8d8d8;
   border-bottom: none;
   text-shadow: 0 1px 0 #fff
 }
 
 th.box-header .octicon {
-    display: inline;
+  display: inline;
-}
-
-th.metal {
-  background-color: #e0e0e0;
-  background-image: -moz-linear-gradient(#fafafa, #e8e8e8);
-  background-image: -webkit-linear-gradient(#fafafa, #e8e8e8);
-  background-image: linear-gradient(#fafafa, #e8e8e8);
-  background-repeat: repeat-x;
-  margin: 0;
-  border-top-left-radius: 1px;
-  border-top-right-radius: 1px;
 }
 
 dl {
@@ -485,36 +451,24 @@ ul.nav-stacked.side-menu li.active a:hover {
 }
 
 .nav-tabs.nav-stacked.side-menu > li:first-child > a {
-  -webkit-border-top-right-radius: 0px;
+  border-top-right-radius: 3px;
-
+  border-top-left-radius: 3px;
-  border-top-right-radius: 0px;
-  -webkit-border-top-left-radius: 0px;
-
-  border-top-left-radius: 0px;
-  -moz-border-radius-topright: 0px;
-  -moz-border-radius-topleft: 0px;
 }
 
 .nav-tabs.nav-stacked.side-menu > li:last-child > a {
-  -webkit-border-bottom-right-radius: 0px;
+  border-bottom-right-radius: 3px;
-
+  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 0px;
-  -webkit-border-bottom-left-radius: 0px;
-
-  border-bottom-left-radius: 0px;
-  -moz-border-radius-bottomright: 0px;
-  -moz-border-radius-bottomleft: 0px;
 }
 
 /****************************************************************************/
 /* Repositories */
 /****************************************************************************/
 div.repository-icon {
-    position: absolute;
+  position: absolute;
 }
 
 div.repository-content {
-    margin-left: 40px;
+  margin-left: 40px;
 }
 
 .branches .muted-link{
@@ -639,10 +593,11 @@ a.header-link:hover i.octicon-x{
     color: #FFF;
 }
 
-
+/*
 table.blobview {
   table-layout: fixed;
 }
+*/
 
 table.table-file-list {
   margin-bottom: 0px;