Move sidemenu to header

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

@@ -22,7 +22,7 @@
           </div>
         }
         @if(loginAccount.isEmpty){
-          @signinform(settings)
+          <div id="dashboard-signin-form">@signinform(settings)</div>
         } else {
           <div class="panel panel-default">
             <div class="panel-heading strong">

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

@@ -10,12 +10,11 @@
 @import gitbucket.core.service.RepositoryService._
 
 @sidemenu(path: String, name: String, icon: String, label: String, count: Int = 0) = {
-  <li @if(active == name){class="active"} @if(!expand){data-toggle="tooltip" data-placement="left" data-original-title="@label"}>
+  <li @if(active == name){class="active"}>
     <a href="@url(repository)@path">
-      <i class="menu-icon @if(active == name){menu-icon-active} octicon octicon-@{icon} "></i>
+      <i class="menu-icon @if(active == name){menu-icon-active} octicon octicon-@{icon} "></i> @label
-      @if(expand){ @label}
+      @if(count > 0){
-      @if(expand && count > 0){
+        <span class="badge">@count</span>
-        <div class="pull-right"><span class="badge">@count</span></div>
       }
     </a>
   </li>
@@ -24,7 +23,6 @@
 <div class="container">
   @helper.html.information(info)
   @helper.html.error(error)
-  <div class="row">
   <div class="head">
     @if(repository.commitCount > 0){
       <div class="input-group pull-right">
@@ -60,13 +58,7 @@
       }
     }
   </div>
-  </div>
+  <ul class="headmenu">
-</div>
-<hr style="margin-bottom: 20px;"/>
-<div class="container body">
-  <div style="width: @if(expand){170px} else {40px};" class="pull-right">
-    <ul class="sidemenu">
-      <li style="height: 12px"><div class="gradient pull-left" style="height: 12px"></div></li>
     @sidemenu(""       , "code"   , "code" , "Code")
     @sidemenu("/issues", "issues" , "issue-opened" , "Issues", repository.issueCount)
     @sidemenu("/pulls" , "pulls"  , "git-pull-request" , "Pull Requests", repository.pullCount)
@@ -74,8 +66,12 @@
     @if(loginAccount.isDefined && (loginAccount.get.isAdmin || repository.managers.contains(loginAccount.get.userName))){
       @sidemenu("/settings" , "settings" , "tools", "Settings")
     }
-      <li style="height: 12px"><div class="gradient pull-left" style="height: 12px"></div></li>
   </ul>
+</div>
+<hr style="margin-bottom: 20px;"/>
+
+<div class="container body">
+@*
     @if(expand){
       <div class="small">
         <strong id="repository-url-proto">HTTP</strong> <span class="mute">clone URL</span>
@@ -97,15 +93,13 @@
         <div style="margin-top: 10px;">
           <a href="@{url(repository)}/archive/@{encodeRefName(id)}.zip" class="btn btn-sm btn-default btn-block"><i class="octicon octicon-cloud-download"></i>Download ZIP</a>
         </div>
-        @*
         <div style="margin-top: 10px;">
           <a href="@{url(repository)}/archive/@{encodeRefName(id)}.tar.gz" class="btn btn-sm btn-default btn-block "><i class="octicon octicon-cloud-download"></i>Download TAR.GZ</a>
         </div>
+      }
+    }
 *@
-      }
+@*  <div class="pull-left" style="width: 895px;">*@
-    }
-  </div>
-  <div class="pull-left" style="width: @if(expand){770px} else {895px};">
     @if(expand){
       @repository.repository.description.map { description =>
         <p class="description">@detectAndRenderLinks(description)</p>
@@ -141,7 +135,7 @@
     }
     @body
   </div>
-</div>
+@*</div>*@
 <script>
 $(function(){
 

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

@@ -533,61 +533,48 @@ a.btn-danger:hover .octicon {
 }
 
 /****************************************************************************/
-/* Side Menu */
+/* Head Menu */
 /****************************************************************************/
-ul.sidemenu {
+ul.headmenu {
+  margin-top: 20px;
   margin-left: 0px;
   padding-left: 0px;
+  margin-bottom: -5px;
 }
 
-ul.sidemenu a {
+ul.headmenu a:hover {
-  display: block;
-  padding: 8px 10px;
-}
-
-ul.sidemenu a:hover {
   text-decoration: none;
+  color: black;
 }
 
-ul.sidemenu li.active {
+ul.headmenu li {
-  border-top: 1px solid #eee;
+  display: inline-block;
-  border-bottom: 1px solid #eee;
+  list-style-type: none;
-  border-right: 3px solid #bb4444;
+  font-size: 13px;
-  border-left: 1px solid white;
 }
 
-ul.sidemenu li.active a {
+ul.headmenu li a {
+  color: #666;
+  padding: 8px 10px;
+  display: block;
+}
+
+ul.headmenu li.active a {
+  color: black;
+}
+
+ul.headmenu li.active {
+  border-top: 3px solid #bb4444;
+  border-left: 1px solid #eee;
+  border-right: 1px solid #eee;
+  border-bottom: none;
+  background-color: white;
+}
+
+ul.headmenu li.active a {
   background-color: #fff;
 }
 
-ul.sidemenu {
-  background-image: -webkit-linear-gradient(left, #f6f6f6 0%, #fff 8px);
-  background-image: linear-gradient(to right, #f6f6f6 0%, #fff 8px);
-  box-shadow: inset 1px 0 0 #eee;
-}
-
-ul.sidemenu div.margin {
-  width: 5px;
-  height: 30px;
-  margin-right: 4px;
-  border-left: 1px solid white;
-}
-
-ul.sidemenu li {
-  border-left: 1px solid #eee;
-  margin-left:0px;
-  border-right: 2px solid white;
-  list-style-type: none;
-  font-size: 90%;
-}
-
-ul.sidemenu span.badge {
-
-}
-
-ul.sidemenu a:hover i.menu-icon, ul.sidemenu i.menu-icon-active {
-  color: #333;
-}
 /****************************************************************************/
 /* Create Repository */
 /****************************************************************************/
@@ -2220,25 +2207,25 @@ div.container.blame-container{
 /* Mobile */
 /****************************************************************************/
 @media (max-width: 767px) {
-    body>form#search {
+  /* Hide header search box */
-      margin: 0 -20px 20px -20px;
+  input[name=query] {
+    display: none;
   }
-
+  #dashboard-signin-form {
-    body>div.dashboard-nav {
+    display: none;
-      margin: 0 -20px 20px -20px;
-      padding: 0 10px;
   }
-
   .container {
     width: auto !important;
   }
+  .body>div.pull-left {
+    width: auto !important;
+  }
 
   /* Adjust issue search box size and position */
   #search-filter-box {
-      width: 90% !important;
+    width: 98% !important;
     position: absolute;
-      left: 14px;
+    left: 4px;
-      right: 20px;
     margin-top: 42px;
   }
 
@@ -2265,44 +2252,30 @@ div.container.blame-container{
   body>div.container.body {
     margin: 0 -12px 40px -12px;
   }
-
+  /* Adjust sidemenu */
   .container.body>div[style="width: 170px;"]{
     width: 32px !important;
     margin-right: -5px;
     overflow: hidden;
     white-space: nowrap;
   }
-
+  /* Hide badge of sidemenu */
-    .container.body>div[style="margin-right: 180px;"]{
+  .container.body>div[style="width: 170px;"] span.badge {
-      margin-right: 32px !important;
+    display: none;
   }
-
+  /* Hide download button */
-    .container.body>div[style="width: 170px;"] .sidemenu i, .container.body>div[style="width: 170px;"] .sidemenu img {
+  .container.body>div[style="width: 170px;"] a.btn-sm {
-      padding-right: 5px;
+    display: none;
   }
-
   /* Hide repository url box */
-    .container.body>div[style="width: 170px;"] .small,.container.body>div[style="width: 170px;"] .input-group {
+  .container.body>div[style="width: 170px;"] .small,
+  .container.body>div[style="width: 170px;"] .input-group {
     display: none;
   }
-
-    .container.body>div[style="width: 170px;"] div[style="margin-top: 10px;"] a.btn{
-      width: 26px !important;
-      padding: 2px;
-    }
-
-    .container.body>div[style="width: 170px;"] div[style="margin-top: 10px;"] a.btn i {
-      margin: 5px 10px 5px 6px;
-    }
-
   /* Hide fork button */
-    div.col-md-1>div.input-group.pull-right {
+  div.input-group>span.fork {
     display: none;
   }
-
-    body>.container>#fork-form{
-      display: inline;
-    }
 }
 
 /****************************************************************************/