Implemented bootstrap 2.2.1.1. Restyled header panel

app/assets/stylesheets/gitlab_bootstrap/buttons.scss

 .btn {
   @include bg-gradient(#f7f7f7, #d5d5d5);
   border-color:#aaa;
+  font-size: 13px;
+  line-height: 17px;
   &:hover {
     @include bg-gray-gradient;
     border-color:#bbb;
@@ -84,6 +86,7 @@
 
   &.small {
     @extend .btn-small;
+    line-height: 16px;
   }
 
   &.active {
@@ -94,6 +97,7 @@
   &.very_small {
     font-size:11px;
     padding:2px 6px;
+    line-height: 16px;
     margin:2px;
   }
 

app/assets/stylesheets/gitlab_bootstrap/typography.scss

@@ -3,10 +3,10 @@
  *
  */
 
-body { font-size: 13px; }
-h1, h2, h3, h4, h5, h6 { margin:0 }
+h1, h2, h3, h4, h5, h6 { margin: 0; }
 h3, h4, h5, h6 { line-height: 36px; }
 h5 { font-size:14px; }
+
 h3.page_title {
   color:#456;
   font-size:20px;

app/assets/stylesheets/main.scss

+/** Override bootstrap variables **/
+$baseFontSize: 13px !default;
+$baseLineHeight: 18px !default;
+
 @import "bootstrap";
 @import "bootstrap-responsive";
 @import 'font-awesome';

app/assets/stylesheets/sections/header.scss

@@ -3,18 +3,27 @@
  *
  */
 header {
-  width:100%;
-  padding:0;
-  margin:0;
-  top:1px;
-  left:0;
-  background: #F1F1F1; /* for non-css3 browsers */
-  border-bottom: 1px solid #ccc;
-  box-shadow: 0 -1px 0 white inset;
-  -moz-box-shadow: 0 -1px 0 white inset;
-  -webkit-box-shadow: 0 -1px 0 white inset;
+  &.navbar-gitlab {
+    .navbar-inner {
+      height:45px;
+      padding: 5px;
+      background: #F1F1F1;
+
+      .nav > li > a {
+        color: $style_color;
+        text-shadow: 0 1px 0 #fff;
+      }
+
+      /** NAV block with links and profile **/
+      .nav {
+        float: right;
+        margin-right: 0;
+      }
+    }
+  }
+
   z-index:10;
-  height:60px;
+  /*height:60px;*/
 
   /**
    *
@@ -22,21 +31,19 @@ header {
    *
    */
   .app_logo {
-    width:200px;
+    width:170px;
     float:left;
-    position:relative;
-    top:-5px;
     a {
       float:left;
+      padding: 0px;
 
       h1 {
-        padding-top: 5px;
         width:90px;
         background: url('logo_dark.png') no-repeat 0px -3px;
         float:left;
         margin-left:5px;
-        font-size:36px;
-        line-height:36px;
+        font-size:30px;
+        line-height:48px;
         font-weight:normal;
         color:$style_color;
         text-shadow: 0 1px 1px #FFF;
@@ -47,7 +54,6 @@ header {
 
     }
     .separator {
-      margin-left:20px;
       float: left;
       height: 60px;
       width: 1px;
@@ -56,13 +62,6 @@ header {
       margin-top: -10px;
     }
   }
-  .container {
-    .top_panel_content {
-      margin:auto;
-      position:relative;
-      padding:15px 0;
-    }
-  }
 
   /**
    *
@@ -74,33 +73,23 @@ header {
     float:left;
     margin:0;
     margin-right:30px;
-    font-size:36px;
-    line-height:36px;
+    font-size:30px;
+    line-height:48px;
     font-weight:normal;
     color:$style_color;
     text-shadow: 0 1px 1px #FFF;
     font-family: 'Korolev', sans-serif;
   }
 
-  .fbtn {
-    float: right;
-    margin-right:10px;
-    .btn {
-      margin-left:7px;
-      background: #F1F1F1;
-      border: 1px solid #CCC;
-    }
-  }
-
-
   /**
    *
    * Search box
    *
    */
   .search {
-    float: right;
     margin-right: 45px;
+    margin-left:10px;
+    margin-top: 2px;
 
     .search-input {
       @extend .span2;
@@ -108,8 +97,13 @@ header {
       background-repeat: no-repeat;
       background-position: 10px;
       padding-left:25px;
-      @include border-radius(5px);
-      border:1px solid #ccc;
+      font-size: 13px;
+      @include border-radius(2px);
+      border:1px solid #c6c6c6;
+      box-shadow:none;
+      &:focus {
+        @extend .span3;
+      }
     }
   }
 
@@ -121,7 +115,7 @@ header {
   .account-box {
     position: absolute;
     right: 0;
-    top: 13px;
+    top: 6px;
     z-index: 10000;
     width: 128px;
     font-size: 11px;
@@ -129,13 +123,13 @@ header {
     display: block;
     cursor: pointer;
     img {
-      @include border-radius(4px);
+      @include border-radius(2px);
       right: 5px;
       position: absolute;
       width: 28px;
       height: 28px;
       display: block;
-      top: 2px;
+      top:1px;
       &:after {
         content: " ";
         display: block;
@@ -186,7 +180,7 @@ header {
     background: #333;
     display: none;
     z-index: 100000;
-    border-radius: 5px;
+    @include border-radius(4px);
     width: 100px;
     position: absolute;
     right: 10px;
@@ -200,6 +194,7 @@ header {
       display: block;
       text-shadow: none;
       border-bottom: 1px solid #555;
+      font-size: 12px;
       &:hover {
         color:#eee;
         background: #444;

app/assets/stylesheets/sections/projects.scss

@@ -85,9 +85,14 @@
 }
 
 .project_clone_holder {
+  .btn {
+    height: 27px;
+  }
   input[type="text"] {
+    height: 17px;
     border: 1px solid #BBB;
     box-shadow: none;
+    padding: 4px 10px;
   }
 }
 

app/assets/stylesheets/themes/ui_basic.scss

@@ -15,36 +15,4 @@
       color: $blue_link;
     }
   }
-
-  header { 
-    .fbtn {
-      .btn {
-        background-color: #F8F8F8;
-        background-image: -webkit-gradient(linear,left top,left bottom,from(#F8F8F8),to(#ECECEC));
-        background-image: -webkit-linear-gradient(top,#F8F8F8,#ECECEC);
-        background-image: -moz-linear-gradient(top,#F8F8F8,#ECECEC);
-        background-image: -ms-linear-gradient(top,#F8F8F8,#ECECEC);
-        background-image: -o-linear-gradient(top,#F8F8F8,#ECECEC);
-        background-image: linear-gradient(top,#F8F8F8,#ECECEC);
-        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8',EndColorStr='#ececec');
-        border-color: #C6C6C6;
-        margin-left:7px;
-        @include border-radius(3px);
-        box-shadow:none;
-        color:#666;
-      }
-    }
-    .search {
-      .search-input {
-        @include border-radius(3px);
-        border-color: #C6C6C6;
-        box-shadow:none;
-      }
-    }
-    .pic { 
-      img { 
-        @include border-radius(3px);
-      }
-    }
-  }
 }

app/assets/stylesheets/themes/ui_mars.scss

@@ -14,42 +14,24 @@
    *
    */
   header {
+
+    &.navbar-gitlab {
+      .navbar-inner {
         background: #474D57 url('bg-header.png') repeat-x bottom;
-    box-shadow:none;
         border-bottom: 1px solid #444;
 
-    .fbtn {
-      .btn {
-        i {
-          position: relative;
-          top: 1px;
-        }
-        margin-left:8px;
-        background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #595D63), to(#31363E));
-        background-image: -webkit-linear-gradient(#595D63 6.6%, #31363E);
-        background-image: -moz-linear-gradient(#595D63 6.6%, #31363E);
-        background-image: -o-linear-gradient(#595D63 6.6%, #31363E);
-        font-size: 12px;
-        &:hover {
-          background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #595D63), to(#2C2F35));
-          background-image: -webkit-linear-gradient(#595D63 6.6%, #2C2F35);
-          background-image: -moz-linear-gradient(#595D63 6.6%, #202227);
-          background-image: -o-linear-gradient(#595D63 6.6%, #202227);
-          background-position:0 0;
-          color:#fff;
+        .nav > li > a {
+          color: #eee;
+          text-shadow: 0 1px 0 #444;
         }
-
-        border: 1px solid #31363E;
-        color:#D6DADF;
-        text-shadow: 0 -1px 0 #000000;
       }
     }
+
     .search {
       float: right;
       margin-right: 45px;
       .search-input {
         border: 1px solid rgba(0, 0, 0, 0.7);
-        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.4) inset;
         background-color: #D2D5DA;
         background-color: rgba(255, 255, 255, 0.5);
 
@@ -65,7 +47,7 @@
       a {
         h1 {
           background: url('logo_white.png') no-repeat 0px -3px;
-          color:#fff;
+          color:#eee;
           text-shadow: 0 1px 1px #111;
         }
       }
@@ -75,7 +57,7 @@
 
     }
     .project_name {
-      color:#fff;
+      color:#eee;
       text-shadow: 0 1px 1px #111;
     }
   }

app/assets/stylesheets/themes/ui_modern.scss

@@ -4,91 +4,34 @@
  *
  * Next items should be placed there
  * - link colors
- * - header styles
- * - main menu styles
+ * - header restyles
  *
  */
 .ui_modern {
+
   /*
    *  Application Header
    *
    */
   header {
-    height:40px;
-    background-image: -moz-linear-gradient(top, #333, #222);
-    background-image: -ms-linear-gradient(top, #333, #222);
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#222));
-    background-image: -webkit-linear-gradient(top, #333, #222);
-    background-image: -o-linear-gradient(top, #333, #222);
-    background-image: linear-gradient(top, #333, #222);
-    background-repeat: repeat-x;
-    background-repeat: repeat-x;
-    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
-    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-
-    .container .top_panel_content  { padding: 5px 0; }
 
+    &.navbar-gitlab {
+      .navbar-inner {
+        background: #333;
+        border-bottom: 1px solid #111;
 
-    /**
-     *
-     * Logo holder
-     *
-     */
-    .app_logo {
-      width:160px;
-      a {
-        h1 {
-          background: none;
-          color:#DDD;
-          font-size:30px;
-          text-shadow: 0 1px 1px #111;
-          padding-left: 0;
+        .nav > li > a {
+          color: #eee;
+          text-shadow: 0 1px 0 #111;
         }
       }
-      .separator {
-        width: 1px;
-        height: 40px;
-        margin: 0 10px;
-        overflow: hidden;
-        background: #222;
-        border-left: 1px solid #333;
-      }
     }
 
-    .fbtn {
-      .btn {
-        i {
-          position: relative;
-          top: 2px;
-        }
-        background:none;
-        margin-left:8px;
-        font-size: 13px;
-        line-height: 19px;
-        color:#ccc;
-        &:hover {
-          color:#fff;
-        }
-        border: none;
-        box-shadow:none;
-        text-shadow: 0 -1px 0 #000000;
-        border-left: 1px solid #333;
-      }
-    }
-
-    /**
-     *
-     * Search box
-     *
-     */
     .search {
       float: right;
       margin-right: 45px;
       .search-input {
         border: 1px solid rgba(0, 0, 0, 0.7);
-        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.4) inset;
         background-color: #D2D5DA;
         background-color: rgba(255, 255, 255, 0.5);
 
@@ -96,36 +39,30 @@
           background-color: white;
         }
       }
+    }
     .search-input::-webkit-input-placeholder {
       color: #666;
     }
+    .app_logo {
+      a {
+        h1 {
+          background: url('logo_white.png') no-repeat 0px -3px;
+          color:#eee;
+          text-shadow: 0 1px 1px #111;
+        }
+      }
+      .separator {
+        display:none;
       }
 
-    /**
-     *
-     * Project / Area name
-     *
-     */
+    }
     .project_name {
-      line-height:36px;
-      font-size:30px;
-      color:#DDD;
+      color:#eee;
       text-shadow: 0 1px 1px #111;
     }
-
-    /**
-     *
-     * Account box
+  }
+  /*
+   *  End of Application Header
    *
    */
-    .account-box {
-      top:6px;
-      img {
-        top:1px;
-        right: 5px;
-        width: 26px;
-        height: 26px;
-      }
-    }
-  }
 }

app/views/commits/_diffs.html.haml

@@ -32,7 +32,7 @@
           - if diff.a_mode && diff.b_mode && diff.a_mode != diff.b_mode
             %span.file-mode= "#{diff.a_mode} → #{diff.b_mode}"
 
-          = link_to project_tree_path(@project, tree_join(@commit.id, diff.new_path)), {:class => 'btn right view-commit'} do
+          = link_to project_tree_path(@project, tree_join(@commit.id, diff.new_path)), {:class => 'btn very_small right view-commit'} do
             View file @
             %span.commit-short-id= @commit.short_id(6)
 

app/views/layouts/_head_panel.html.haml

-/ Page Header
-%header.top_panel_holder
+%header.navbar.navbar-static-top.navbar-gitlab
+  .navbar-inner
     .container
-    .top_panel_content
       %div.app_logo
         = link_to root_path, class: "home", title: "Home" do
-          %h1
-            GITLAB
+          %h1 GITLAB
         %span.separator
       %h1.project_name= title
-      = render "layouts/search"
-      .fbtn
+      %ul.nav
         - if current_user.is_admin?
-          = link_to admin_root_path, class: "btn small", title: "Admin area" do
+          %li
+            = link_to admin_root_path, title: "Admin area" do
               %i.icon-cog
               Admin
         - if current_user.can_create_project?
-          = link_to new_project_path, class: "btn small", title: "Create New Project" do
+          %li
+            = link_to new_project_path, title: "Create New Project" do
               %i.icon-plus
               Project
+        %li
+          = render "layouts/search"
+        %li
           .account-box
             = link_to profile_path, class: "pic" do
               = image_tag gravatar_icon(current_user.email)
             .account-links
               = link_to profile_path, class: "username" do
+                %i.icon-user.icon-white
                 My profile
-          = link_to 'Logout', destroy_user_session_path, class: "logout", method: :delete
+              = link_to destroy_user_session_path, class: "logout", method: :delete do
+                %i.icon-signout.icon-white
+                Logout
+
 
 = render "layouts/init_auto_complete"

app/views/layouts/_search.html.haml

 .search
-  = form_tag search_path, method: :get do |f|
+  = form_tag search_path, method: :get, class: 'navbar-form pull-left' do |f|
     = text_field_tag "search", nil, placeholder: "Search", class: "search-input"
 
 :javascript

app/views/projects/_clone_panel.html.haml

@@ -6,12 +6,12 @@
       .right
         - unless @project.empty_repo?
           - if can? current_user, :download_code, @project
-            = link_to archive_project_repository_path(@project), class: "btn small grouped" do
+            = link_to archive_project_repository_path(@project), class: "btn grouped" do
               %i.icon-download-alt
               Download
           - if @project.merge_requests_enabled && can?(current_user, :write_merge_request, @project)
-            = link_to new_project_merge_request_path(@project), title: "New Merge Request", class: "btn small grouped" do
+            = link_to new_project_merge_request_path(@project), title: "New Merge Request", class: "btn grouped" do
               Merge Request
           - if @project.issues_enabled && can?(current_user, :write_issue, @project)
-            = link_to new_project_issue_path(@project), title: "New Issue", class: "btn small grouped" do
+            = link_to new_project_issue_path(@project), title: "New Issue", class: "btn grouped" do
               Issue

app/views/shared/_clone_panel.html.haml

 .input-prepend.project_clone_holder
-  %button{class: "btn small active", :"data-clone" => @project.ssh_url_to_repo} SSH
-  %button{class: "btn small", :"data-clone" => @project.http_url_to_repo}= Gitlab.config.web_protocol.upcase
+  %button{class: "btn active", :"data-clone" => @project.ssh_url_to_repo} SSH
+  %button{class: "btn", :"data-clone" => @project.http_url_to_repo}= Gitlab.config.web_protocol.upcase
   = text_field_tag :project_clone, @project.url_to_repo, class: "one_click_select span5"