new layout style

Dmitriy Zaporozhets
1 parent 6cf000ff
Showing 6 changed files with 62 additions and 83 deletions Show diff stats
app/assets/images/Home-UI.PNG
app/assets/stylesheets/projects.css.scss
app/assets/stylesheets/style.scss
app/views/layouts/_head_panel.html.erb
app/views/layouts/_head_panel.html.haml
app/views/layouts/project.html.haml
@@ -525,6 +525,7 @@ h4.dash-tabs {
   }
 }
+body header,
 h4.middle-panel { 
   margin: 0; 
   border-bottom: 1px solid #ccc; 
@@ -333,8 +333,12 @@ body.login-page{background-color: #f1f1f1; padding-top: 10%}
 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)}
 /* Header */
-header{background: #474D57 url('bg-header.png') repeat-x bottom; z-index: 10000; height: 44px; padding: 10px 2% 6px 2%; position: relative}
-header a{color: white; text-shadow: 0 -1px 0 black}
+header{
+  background: #474D57 url('bg-header.png') repeat-x bottom;
+  z-index: 10000;
+  height: 44px; 
+  padding: 10px 2% 6px 2%;
+}
 header a:hover{color: #f1f1f1}
 header h1{
   width: 65px;
@@ -417,7 +421,7 @@ header .login-top a.pic{float: left; margin-right: 10px;
 }
 header .login-top a.username{margin-bottom: 5px}
 header .login-top a.logout{color: #ccc}
-header{margin-bottom: 0; clear: both; }
+header{margin-bottom: 0; clear: both; position:relative;}
 .page-title{background-color: #f1f1f1;display: block; float: left; clear: both; width: 98%; padding: 1% 1%; border-bottom: 1px solid #ccc; box-shadow: 0 -1px 0 white inset; margin-bottom: 1.5em}
 .page-title h1{font-size: 20px; width: 400px; margin: 0; padding-top: 8px }
@@ -426,7 +430,7 @@ header{margin-bottom: 0; clear: both; }
 /* 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 img{ border-radius: 4px; right: 20px; position: absolute; width: 38px; height: 38px; display: block; box-shadow: 0 1px 2px black}
+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: " ";
   display: block;
@@ -550,7 +554,7 @@ header .account-links a:last-child{
 /* eo Account Box */
 input.search-input{float: left; text-shadow: none; width: 116px; background-image: url('icon-search.png') ; background-repeat: no-repeat; background-position: 10px; border-radius: 100px; border: 1px solid rgba(0,0,0,.7); box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 2px rgba(0,0,0,.4) inset ; background-color: #D2D5DA; background-color: rgba(255,255,255,.5); padding: 5px; padding-left: 26px;  margin-top: 4px; margin-right: 10px }
-input.search-input:focus{ background-color: white; width: 216px;}
+/*input.search-input:focus{ background-color: white; width: 216px;}*/
 input.search-input::-webkit-input-placeholder {color: #666}
 /* eo Header */
@@ -607,7 +611,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: 180px;  left: 0; top: 0; height: 100%; bottom: 0;  position: absolute; background-color: #f7f7f7; float: left; display: inline-block; background: #f7f7f7; padding: 20px 0 20px 2%; margin: 0; }
+body.project-page .project-sidebar {width: 110px;  left: 0; top: 0; height: 100%; bottom: 0;  position: absolute; background-color: #f7f7f7; float: left; display: inline-block; background: #f7f7f7; padding: 20px 0 20px 2%; margin: 0; }
 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 }
@@ -615,22 +619,15 @@ body.projects-page input.text.git-url {margin:10px 0 0 }
 .projects_selector:hover > .project-box{ -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .1); -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .1); box-shadow:0px 0px 10px rgba(0, 0, 0, .1); }
-body.project-page .project-sidebar aside{width: 179px}
-body.project-page .project-sidebar aside a{display: block; position: relative; background: white; padding: 15px 10px; border-bottom: 1px solid #eee}
-body.project-page .project-sidebar aside a:first-child{
-  -webkit-border-top-left-radius: 5px;
-  -moz-border-radius-topleft: 5px;
-  border-top-left-radius: 5px;
-}
-.project-page .project-sidebar aside a:last-child{
-  -webkit-border-bottom-left-radius: 5px;
-  -moz-border-radius-bottomleft: 5px;
-  border-bottom-left-radius: 5px;
+body.project-page .project-sidebar aside{width: 109px}
+body.project-page .project-sidebar aside a{
+  display: block; position: relative; background: white; padding: 15px 10px; border-bottom: 1px solid #eee; margin: 10px 20px 0 0;
+  border-radius:5px;
 }
 body.project-page .project-sidebar aside a:hover{background-color: #eee;}
 body.project-page .project-sidebar aside a span.number{float: right; border-radius: 5px; text-shadow: none; background: rgba(0,0,0,.12); text-align: center; padding: 5px 8px; position: absolute; top: 10px; right: 10px}
-body.project-page .project-sidebar aside a.current{background-color: #79c3e0; color: white; text-shadow: none; border-color: transparent}
-body.project-page .project-content{ padding: 20px; display: block; margin-left: 205px; min-height: 600px}
+body.project-page .project-sidebar aside a.current{border: 2px solid #79c3e0; }
+body.project-page .project-content{ padding: 20px; display: block; margin-left: 125px; 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}}
@@ -1,56 +0,0 @@
-<!-- Page Header -->
-<header>
-  <h1 class="logo">
-    <%= link_to "GITLAB", root_url %>
-  </h1>
-  <div class="account-box">
-    <%= link_to profile_path, :class => "pic" do %>
-      <%= image_tag gravatar_icon(current_user.email) %>
-    <% end %>
-
-    <div class="account-links">
-      <%= link_to profile_path, :class => "username" do %>
-        <%#= current_user.name %>
-        My profile
-      <% end %>
-      <%= link_to 'Logout', destroy_user_session_path, :class => "logout", :method => :delete %>
-    </div>
-  </div><!-- .account-box -->
-
-  <div class="search">
-    <%= text_field_tag "search", nil, :placeholder => "Search", :class => "search-input"  %>
-  </div>
-  <!-- .login-top -->
-  <nav class="<%= 'shorter_nav' unless current_user.is_admin? %>">
-    <%= link_to dashboard_path, :class => "#{'current' if current_page?(root_path)} dashboard" do %>
-      <span></span>Dashboard
-    <% end %>
-    <%= link_to projects_path, :class =>"#{'current' if current_page?(projects_path)} project #{'last_elem' unless current_user.is_admin?}" do %>
-      <span></span>Projects
-    <% end %>
-    <% if current_user.is_admin? %>
-      <%= link_to((current_user.is_admin? ? admin_root_path : "#"), :class => "#{'current' if admin_namespace?} admin last_elem") do %>
-        <span></span>Admin
-      <% end  %>
-    <% end %>
-  </nav>
-
-</header>
-<!-- eo Page Header -->
-
-<% if current_user %>
-  <%= javascript_tag do %>
-    $(function() {
-      $("#search" ).autocomplete({
-        source: <%= raw search_autocomplete_source %>,
-        select: function(event, ui) { location.href = ui.item.url }
-        });
-    });
-  <% end %>
-<% end %>
-
-<% if current_user.require_ssh_key? %>
-  <div id="no_ssh_key_defined" class="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!
-  </div>
-<% end %>
@@ -0,0 +1,36 @@
+/ Page Header
+%header
+  - if @project && !@project.new_record?
+    .project_name
+      = truncate @project.name, :length => 20
+    .git_url_wrapper
+      %input.git-url.text{:id => "", :name => "", :readonly => "", :type => "text", :value => @project.url_to_repo, :class => "one_click_select"}
+    = yield :rss_icon
+
+    - if @project.repo_exists?
+      .left{:style => "margin-left:5px;"}
+        = render :partial => "projects/refs", :locals => { :destination => controller.controller_name == "commits" ? "commits" : "tree" }
+  .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!
@@ -18,31 +18,32 @@
     = render :partial => "layouts/flash"
     #container
       = render :partial => "layouts/head_panel"
-      = render :partial => "layouts/middle_panel" if @project && !@project.new_record?
+      -#= render :partial => "layouts/middle_panel" if @project && !@project.new_record?
       .project-container
         .project-sidebar
           .fixed
             %aside
-              = link_to "Project", project_path(@project), :class => project_tab_class
+              = link_to project_path(@project), :class => project_tab_class do 
+                = image_tag "Home-UI.PNG", :width => 26
+                %span{ :class => "number" } Pr
+
               = link_to "Repository", project_repository_path(@project), :class => repository_tab_class
               = link_to "Tree", tree_project_ref_path(@project,  @project.root_ref), :class => tree_tab_class
               = link_to "Commits", project_commits_path(@project), :class => current_page?(:controller => "commits", :action => "index", :project_id => @project) ? "current" : nil
-              = link_to "Network graph", graph_project_path(@project), :class => current_page?(:controller => "projects", :action => "graph", :id => @project) ? "current" : nil
+              = link_to "Network", graph_project_path(@project), :class => current_page?(:controller => "projects", :action => "graph", :id => @project) ? "current" : nil
               = link_to  project_issues_filter_path(@project), :class => (controller.controller_name == "issues") ? "current" : nil do
                 Issues
-                - if @project.issues.open_for(current_user).count > 0
+                -#- if @project.issues.open_for(current_user).count > 0
                   %span{ :class => "number" }= @project.issues.open_for(current_user).count
               = link_to wall_project_path(@project), :class => current_page?(:controller => "projects", :action => "wall", :id => @project) ? "current" : nil do
                 Wall
                 - if @project.common_notes.today.count > 0
                   %span{ :class => "number" }= @project.common_notes.today.count
               = link_to project_merge_requests_path(@project), :class => (controller.controller_name == "merge_requests") ? "current" : nil do
-                Merge Requests
-                - if @project.merge_requests.opened.count > 0
+                Merge
+                -#- if @project.merge_requests.opened.count > 0
                   %span{ :class => "number" }= @project.merge_requests.opened.count
-            .medium-tags{:style => 'padding: 10px 0 0 10px; width: 210px;'}= tag_list @project
-
         .project-content
           = yield
	@@ -525,6 +525,7 @@ h4.dash-tabs {		@@ -525,6 +525,7 @@ h4.dash-tabs {
525	}	525	}
526	}	526	}
527		527
		528	+body header,
528	h4.middle-panel {	529	h4.middle-panel {
529	margin: 0;	530	margin: 0;
530	border-bottom: 1px solid #ccc;	531	border-bottom: 1px solid #ccc;
	@@ -1,56 +0,0 @@	@@ -1,56 +0,0 @@
1	-<!-- Page Header -->
2	-<header>
3	- <h1 class="logo">
4	- <%= link_to "GITLAB", root_url %>
5	- </h1>
6	- <div class="account-box">
7	- <%= link_to profile_path, :class => "pic" do %>
8	- <%= image_tag gravatar_icon(current_user.email) %>
9	- <% end %>
10	-
11	- <div class="account-links">
12	- <%= link_to profile_path, :class => "username" do %>
13	- <%#= current_user.name %>
14	- My profile
15	- <% end %>
16	- <%= link_to 'Logout', destroy_user_session_path, :class => "logout", :method => :delete %>
17	- </div>
18	- </div><!-- .account-box -->
19	-
20	- <div class="search">
21	- <%= text_field_tag "search", nil, :placeholder => "Search", :class => "search-input" %>
22	- </div>
23	- <!-- .login-top -->
24	- <nav class="<%= 'shorter_nav' unless current_user.is_admin? %>">
25	- <%= link_to dashboard_path, :class => "#{'current' if current_page?(root_path)} dashboard" do %>
26	- <span></span>Dashboard
27	- <% end %>
28	- <%= link_to projects_path, :class =>"#{'current' if current_page?(projects_path)} project #{'last_elem' unless current_user.is_admin?}" do %>
29	- <span></span>Projects
30	- <% end %>
31	- <% if current_user.is_admin? %>
32	- <%= link_to((current_user.is_admin? ? admin_root_path : "#"), :class => "#{'current' if admin_namespace?} admin last_elem") do %>
33	- <span></span>Admin
34	- <% end %>
35	- <% end %>
36	- </nav>
37	-
38	-</header>
39	-<!-- eo Page Header -->
40	-
41	-<% if current_user %>
42	- <%= javascript_tag do %>
43	- $(function() {
44	- $("#search" ).autocomplete({
45	- source: <%= raw search_autocomplete_source %>,
46	- select: function(event, ui) { location.href = ui.item.url }
47	- });
48	- });
49	- <% end %>
50	-<% end %>
51	-
52	-<% if current_user.require_ssh_key? %>
53	- <div id="no_ssh_key_defined" class="big-message error">
54	- <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!
55	- </div>
56	-<% end %>
@@ -0,0 +1,36 @@		@@ -0,0 +1,36 @@
	1	+/ Page Header
	2	+%header
	3	+ - if @project && !@project.new_record?
	4	+ .project_name
	5	+ = truncate @project.name, :length => 20
	6	+ .git_url_wrapper
	7	+ %input.git-url.text{:id => "", :name => "", :readonly => "", :type => "text", :value => @project.url_to_repo, :class => "one_click_select"}
	8	+ = yield :rss_icon
	9	+
	10	+ - if @project.repo_exists?
	11	+ .left{:style => "margin-left:5px;"}
	12	+ = render :partial => "projects/refs", :locals => { :destination => controller.controller_name == "commits" ? "commits" : "tree" }
	13	+ .account-box
	14	+ = link_to profile_path, :class => "pic" do
	15	+ = image_tag gravatar_icon(current_user.email)
	16	+ .account-links
	17	+ = link_to profile_path, :class => "username" do
	18	+ My profile
	19	+ = link_to 'Logout', destroy_user_session_path, :class => "logout", :method => :delete
	20	+ / .account-box
	21	+ -#.search
	22	+ = text_field_tag "search", nil, :placeholder => "Search", :class => "search-input"
	23	+ / .login-top
	24	+- if current_user
	25	+ = javascript_tag do
	26	+ $(function(){
	27	+ $("#search").autocomplete({
	28	+ source: #{raw search_autocomplete_source},
	29	+ select: function(event, ui) { location.href = ui.item.url }
	30	+ });
	31	+ });
	32	+
	33	+- if current_user.require_ssh_key?
	34	+ #no_ssh_key_defined.big-message.error
	35	+ %p
	36	+ No SSH Key is defined. You won't be able to use any Git command!. Click #{link_to( 'here', keys_path )} to add one!