new layout

app/assets/stylesheets/projects.css.scss

@@ -525,22 +525,28 @@ h4.dash-tabs {
   }
 }
 
-body header,
-h4.middle-panel { 
-
+body header { 
+  position:absolute;
+  width:100%;
+  padding:0;
+  margin:0;
+  top:0;
+  left:0;
   background: #999; /* for non-css3 browsers */
-
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#EAEAEA'); /* for IE */
   background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#EAEAEA)); /* for webkit browsers */
   background: -moz-linear-gradient(top,  #FAFAFA,  #EAEAEA); /* for firefox 3.6+ */ 
-
-  margin: 0; 
   border-bottom: 1px solid #ccc; 
-  padding: 10px 20px;
-  font-size: 11px;
-  //background: #F7F7F7;
-  height:30px;
 
+  height:50px;
+
+  .wrapper { 
+    margin:auto;
+    width:980px;
+    padding: 10px 0;
+    font-size: 11px;
+    position:relative;
+  }
   .project_name {
     float:left;
     width:235px;

app/assets/stylesheets/style.scss

@@ -74,7 +74,10 @@ $blue_link: "#2fa0bb";
 /* eo Vars */
 
 html{ -webkit-font-smoothing:antialiased; }
-body{font-size: 12px; background-color: #F5F5F5;}
+body { 
+  font-size: 12px; 
+  background-color: #F7F7F7;
+}
 a{text-decoration: none; font-weight: bold; color: #444}
 a:hover{color: #555}
 /* Typography */
@@ -330,7 +333,12 @@ body.login-page{background-color: #f1f1f1; padding-top: 10%}
 
 /* General */
 #container{background-color: white; overflow: hidden; }
-body.collapsed #container{margin: auto; width: 980px; border: 1px solid rgba(0,0,0,.22); border-top: 0; box-shadow: 0 0 0px 4px rgba(0,0,0,.04)}
+body.collapsed #container{ 
+  margin: auto;
+  margin-top:51px;
+  width: 980px;
+  border-top: 0;
+}
 
 /* Header */
 header{
@@ -429,7 +437,16 @@ header{margin-bottom: 0; clear: both; position:relative;}
 .right{float: right;}
 
 /* Account box */
-header .account-box{position: absolute; right: 0; top: 8px; z-index: 10000; width: 128px;  font-size: 11px; float: right; display: block; cursor: pointer;}
+header .account-box{ 
+  position: absolute; 
+  right: 0; 
+  top: 8px;
+  z-index: 10000;
+  width: 128px;
+  font-size: 11px;
+  float: right;
+  display: block;
+  cursor: pointer;}
 header .account-box img{ border-radius: 4px; right: 20px; position: absolute; width: 38px; height: 38px; display: block; box-shadow: 0 1px 2px black; top:-3px;}
 header .account-box img:after{
   content: " ";
@@ -625,7 +642,7 @@ body.project-page h2.icon .project-name i.arrow{float: right;
 body.project-page h2.icon span{  background-position:  -78px -68px; }
 body.project-page .project-container{ position: relative; float: left; width: 100%; height: 100%; padding-bottom: 10px;}
 body.project-page .page-title{margin-bottom: 0}
-body.project-page .project-sidebar {width: 110px;  left: 0; top: 0; height: 100%; bottom: 0;  position: absolute; float: left; display: inline-block; background: #F7F7F7; padding: 20px 0 20px 2%; margin: 0; border-right: 1px solid #ddd; }
+body.project-page .project-sidebar {width: 110px;  left: 0; top: 0; height: 100%; bottom: 0;  position: absolute; float: left; display: inline-block; background: #F7F7F7; padding: 20px 0 20px 0; margin: 0; border-right: 1px solid #ddd; }
 
 body.projects-page input.text.git-url { font-size: 12px; border-radius: 5px; color: #666; box-shadow: 0 1px 2px rgba(0,0,0,.2) inset; padding:  8px 0 8px 30px;  margin-bottom: 20px;  background: white url('images.png') no-repeat 8px -40px; width: 136px}
 body.projects-page input.text.git-url {margin:10px 0 0 }
@@ -651,7 +668,7 @@ body.project-page .project-sidebar aside a.current {
   border: 1px solid #2FA0BB;
   border-radius:5px;
 }
-body.project-page .project-content{ padding: 20px; display: block; margin-left: 130px; min-height: 600px}
+body.project-page .project-content{ padding: 20px; display: block; margin-left: 110px; min-height: 600px}
 body.project-page .project-content h2{ margin-top: 6px}
 body.project-page .project-content .button.right{margin-left: 20px}
 body.project-page table .commit a{color: #{$blue_link}}

app/views/layouts/_head_panel.html.haml

 / Page Header
 %header.top_panel_holder
-  %div.top_links_holder
-    = link_to root_path, :class => "top_link home", :title => "Home" do 
-      = image_tag "Home-UI.PNG", :width => 26
-    - if current_user.is_admin?
-      = link_to admin_root_path, :class => "top_link admin", :title => "Admin"  do 
-        = image_tag "Gear-UI.PNG", :width => 20
+  .wrapper
+    %div.top_links_holder
+      = link_to root_path, :class => "top_link home", :title => "Home" do 
+        = image_tag "Home-UI.PNG", :width => 26
+      - if current_user.is_admin?
+        = link_to admin_root_path, :class => "top_link admin", :title => "Admin"  do 
+          = image_tag "Gear-UI.PNG", :width => 20
 
 
-  - if project_layout
-    .project_name
-      = truncate @project.name, :length => 28
-    .git_url_wrapper
-      %input.git-url.text{:id => "", :name => "", :readonly => "", :type => "text", :value => @project.url_to_repo, :class => "one_click_select"}
-    - if @project.repo_exists?
-      .left{:style => "margin-left:5px;"}
-        = render :partial => "projects/refs", :locals => { :destination => controller.controller_name == "commits" ? "commits" : "tree" }
-    = yield :rss_icon
+    - if project_layout
+      .project_name
+        = truncate @project.name, :length => 28
+      .git_url_wrapper
+        %input.git-url.text{:id => "", :name => "", :readonly => "", :type => "text", :value => @project.url_to_repo, :class => "one_click_select"}
+      - if @project.repo_exists?
+        .left{:style => "margin-left:5px;"}
+          = render :partial => "projects/refs", :locals => { :destination => controller.controller_name == "commits" ? "commits" : "tree" }
+      = yield :rss_icon
 
-  - elsif profile_layout
-    = link_to "Activities", dashboard_path, :class => "dash_top_link #{"active" if current_page?(dashboard_path) || current_page?(root_path) }"
-    = link_to "Projects", projects_path, :class => "dash_top_link #{"active" if current_page?(projects_path)}"
-    = link_to "Issues", dashboard_issues_path, :class => "dash_top_link #{"active" if current_page?(dashboard_issues_path)}", :id => "issues_slide"
-    = link_to "Merge Requests", dashboard_merge_requests_path, :class => "dash_top_link #{"active" if current_page?(dashboard_merge_requests_path)}", :id => "merge_requests_slide"
-    .search
-      = text_field_tag "search", nil, :placeholder => "Search", :class => "search-input"
+    - elsif profile_layout
+      = link_to "Activities", dashboard_path, :class => "dash_top_link #{"active" if current_page?(dashboard_path) || current_page?(root_path) }"
+      = link_to "Projects", projects_path, :class => "dash_top_link #{"active" if current_page?(projects_path)}"
+      = link_to "Issues", dashboard_issues_path, :class => "dash_top_link #{"active" if current_page?(dashboard_issues_path)}", :id => "issues_slide"
+      = link_to "Merge Requests", dashboard_merge_requests_path, :class => "dash_top_link #{"active" if current_page?(dashboard_merge_requests_path)}", :id => "merge_requests_slide"
+      .search
+        = text_field_tag "search", nil, :placeholder => "Search", :class => "search-input"
 
-  .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
-        My profile
-      = link_to 'Logout', destroy_user_session_path, :class => "logout", :method => :delete
-  / .account-box
-  -#.search
-    = text_field_tag "search", nil, :placeholder => "Search", :class => "search-input"
-  / .login-top
-- if current_user
-  = javascript_tag do
-    $(function(){
-    $("#search").autocomplete({
-    source: #{raw search_autocomplete_source},
-    select: function(event, ui) { location.href = ui.item.url }
-    });
-    });
+    .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
+          My profile
+        = link_to 'Logout', destroy_user_session_path, :class => "logout", :method => :delete
+    / .account-box
+    -#.search
+      = text_field_tag "search", nil, :placeholder => "Search", :class => "search-input"
+    / .login-top
+  - if current_user
+    = javascript_tag do
+      $(function(){
+      $("#search").autocomplete({
+      source: #{raw search_autocomplete_source},
+      select: function(event, ui) { location.href = ui.item.url }
+      });
+      });
 
-- if current_user.require_ssh_key?
-  #no_ssh_key_defined.big-message.error
-    %p
-      No SSH Key is defined. You won't be able to use any Git command!. Click #{link_to( 'here', keys_path )} to add one!
+  - if current_user.require_ssh_key?
+    #no_ssh_key_defined.big-message.error
+      %p
+        No SSH Key is defined. You won't be able to use any Git command!. Click #{link_to( 'here', keys_path )} to add one!