prototype styled. home button added

Dmitriy Zaporozhets
1 parent 74632d6a
Showing 5 changed files with 90 additions and 15 deletions Show diff stats
app/assets/images/Gear-UI.PNG
app/assets/stylesheets/projects.css.scss
app/assets/stylesheets/style.scss
app/views/layouts/_head_panel.html.haml
app/views/layouts/project.html.haml
@@ -548,7 +548,7 @@ h4.middle-panel {
     font-size:16px;
     font-weight:bold;
     padding:5px 7px;
-    color:#777;
+    color:#333;
   }
   .git_url_wrapper {
@@ -560,12 +560,50 @@ h4.middle-panel {
       padding:0px;
       margin:0px;
       font-size: 12px;
-      border-radius: 5px;
+
+      border-radius: 0px;
+      -moz-border-radius: 0px;
+
+      -moz-border-radius-bottomleft: 4px;
+      -moz-border-radius-topleft: 4px;
+
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+
       color: #666; 
-      box-shadow: 0 1px 2px rgba(0,0,0,.2) inset;
-      padding:  7px 0 5px 30px;
-      background: white url('images.png') no-repeat 8px -40px; 
-      width: 250px;
+      border: 1px solid #AAA;
+      padding:  0 0 0 30px;
+      background: white url('images.png') no-repeat 8px -42px; 
+      width: 160px;
+      height:26px;
+    }
+  }
+}
+
+.top_panel_holder .chzn-container { 
+  position:relative;
+
+  .chzn-drop { 
+    margin:7px 0;
+    border: 1px solid #CCC;
+    min-width: 300px;
+
+    .chzn-results { 
+      max-height:300px;
+    }
+  }
+
+  .chzn-single { 
+    background:white;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    -moz-border-radius-bottomright: 4px;
+    -moz-border-radius-topright: 4px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+
+    div { 
+      background:white;
     }
   }
 }
@@ -762,3 +800,32 @@ tr.line_notes_row {
     }
   }
 }
+.top_links_holder {
+  width:124px;
+  float:left;
+
+  .top_link {
+    position: relative;
+    float:left;
+
+    &.home { 
+      width:28px;  
+      height:27px;
+      top: -12px;
+      border: 1px solid #474D57;
+      border-radius: 3px;
+      background: #fff;
+
+      margin-right:15px;
+      padding: 6px 7px;
+    }
+
+    &.admin { 
+      top: -3px;
+      padding: 3px;
+      width: 21px;
+      height: 21px;
+    }
+  }
+}
+
@@ -611,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: 110px;  left: 0; top: 0; height: 100%; bottom: 0;  position: absolute; background-color: #eee; float: left; display: inline-block; background: #eee; 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: #eee; float: left; display: inline-block; background: #eee; padding: 20px 0 20px 2%; 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 }
@@ -621,13 +621,14 @@ body.projects-page input.text.git-url {margin:10px 0 0 }
 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;
+  display: block; position: relative; background: #F5F5F5; padding: 15px 10px; 
+  border: 1px solid #ccc; 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{border: 2px solid #79c3e0; }
-body.project-page .project-content{ padding: 20px; display: block; margin-left: 125px; min-height: 600px}
+body.project-page .project-sidebar aside a.current{border: 2px solid #79c3e0; background:white; }
+body.project-page .project-content{ padding: 20px; display: block; margin-left: 130px; 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}}
 / Page Header
-%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
+
+
   - 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" }
+    = yield :rss_icon
+
   .account-box
     = link_to profile_path, :class => "pic" do
       = image_tag gravatar_icon(current_user.email)
@@ -24,8 +24,7 @@
           .fixed
             %aside
               = link_to project_path(@project), :class => project_tab_class do 
-                = image_tag "Home-UI.PNG", :width => 26
-                %span{ :class => "number" } Pr
+                Project
               = 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
	@@ -548,7 +548,7 @@ h4.middle-panel {		@@ -548,7 +548,7 @@ h4.middle-panel {
548	font-size:16px;	548	font-size:16px;
549	font-weight:bold;	549	font-weight:bold;
550	padding:5px 7px;	550	padding:5px 7px;
551	- color:#777;	551	+ color:#333;
552	}	552	}
553		553
554	.git_url_wrapper {	554	.git_url_wrapper {
	@@ -560,12 +560,50 @@ h4.middle-panel {		@@ -560,12 +560,50 @@ h4.middle-panel {
560	padding:0px;	560	padding:0px;
561	margin:0px;	561	margin:0px;
562	font-size: 12px;	562	font-size: 12px;
563	- border-radius: 5px;	563	+
		564	+ border-radius: 0px;
		565	+ -moz-border-radius: 0px;
		566	+
		567	+ -moz-border-radius-bottomleft: 4px;
		568	+ -moz-border-radius-topleft: 4px;
		569	+
		570	+ border-top-left-radius: 4px;
		571	+ border-bottom-left-radius: 4px;
		572	+
564	color: #666;	573	color: #666;
565	- box-shadow: 0 1px 2px rgba(0,0,0,.2) inset;
566	- padding: 7px 0 5px 30px;
567	- background: white url('images.png') no-repeat 8px -40px;
568	- width: 250px;	574	+ border: 1px solid #AAA;
		575	+ padding: 0 0 0 30px;
		576	+ background: white url('images.png') no-repeat 8px -42px;
		577	+ width: 160px;
		578	+ height:26px;
		579	+ }
		580	+ }
		581	+}
		582	+
		583	+.top_panel_holder .chzn-container {
		584	+ position:relative;
		585	+
		586	+ .chzn-drop {
		587	+ margin:7px 0;
		588	+ border: 1px solid #CCC;
		589	+ min-width: 300px;
		590	+
		591	+ .chzn-results {
		592	+ max-height:300px;
		593	+ }
		594	+ }
		595	+
		596	+ .chzn-single {
		597	+ background:white;
		598	+ -moz-border-radius: 0;
		599	+ border-radius: 0;
		600	+ -moz-border-radius-bottomright: 4px;
		601	+ -moz-border-radius-topright: 4px;
		602	+ border-top-right-radius: 4px;
		603	+ border-bottom-right-radius: 4px;
		604	+
		605	+ div {
		606	+ background:white;
569	}	607	}
570	}	608	}
571	}	609	}
	@@ -762,3 +800,32 @@ tr.line_notes_row {		@@ -762,3 +800,32 @@ tr.line_notes_row {
762	}	800	}
763	}	801	}
764	}	802	}
		803	+.top_links_holder {
		804	+ width:124px;
		805	+ float:left;
		806	+
		807	+ .top_link {
		808	+ position: relative;
		809	+ float:left;
		810	+
		811	+ &.home {
		812	+ width:28px;
		813	+ height:27px;
		814	+ top: -12px;
		815	+ border: 1px solid #474D57;
		816	+ border-radius: 3px;
		817	+ background: #fff;
		818	+
		819	+ margin-right:15px;
		820	+ padding: 6px 7px;
		821	+ }
		822	+
		823	+ &.admin {
		824	+ top: -3px;
		825	+ padding: 3px;
		826	+ width: 21px;
		827	+ height: 21px;
		828	+ }
		829	+ }
		830	+}
		831	+