Commit 942c4101 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Implemented bootstrap 2.2.1.1. Restyled header panel

parent 236584c2
.btn { .btn {
@include bg-gradient(#f7f7f7, #d5d5d5); @include bg-gradient(#f7f7f7, #d5d5d5);
border-color:#aaa; border-color:#aaa;
font-size: 13px;
line-height: 17px;
&:hover { &:hover {
@include bg-gray-gradient; @include bg-gray-gradient;
border-color:#bbb; border-color:#bbb;
...@@ -84,6 +86,7 @@ ...@@ -84,6 +86,7 @@
&.small { &.small {
@extend .btn-small; @extend .btn-small;
line-height: 16px;
} }
&.active { &.active {
...@@ -94,6 +97,7 @@ ...@@ -94,6 +97,7 @@
&.very_small { &.very_small {
font-size:11px; font-size:11px;
padding:2px 6px; padding:2px 6px;
line-height: 16px;
margin:2px; margin:2px;
} }
......
...@@ -3,10 +3,10 @@ ...@@ -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; } h3, h4, h5, h6 { line-height: 36px; }
h5 { font-size:14px; } h5 { font-size:14px; }
h3.page_title { h3.page_title {
color:#456; color:#456;
font-size:20px; font-size:20px;
......
/** Override bootstrap variables **/
$baseFontSize: 13px !default;
$baseLineHeight: 18px !default;
@import "bootstrap"; @import "bootstrap";
@import "bootstrap-responsive"; @import "bootstrap-responsive";
@import 'font-awesome'; @import 'font-awesome';
......
...@@ -3,18 +3,27 @@ ...@@ -3,18 +3,27 @@
* *
*/ */
header { header {
width:100%; &.navbar-gitlab {
padding:0; .navbar-inner {
margin:0; height:45px;
top:1px; padding: 5px;
left:0; background: #F1F1F1;
background: #F1F1F1; /* for non-css3 browsers */
border-bottom: 1px solid #ccc; .nav > li > a {
box-shadow: 0 -1px 0 white inset; color: $style_color;
-moz-box-shadow: 0 -1px 0 white inset; text-shadow: 0 1px 0 #fff;
-webkit-box-shadow: 0 -1px 0 white inset; }
/** NAV block with links and profile **/
.nav {
float: right;
margin-right: 0;
}
}
}
z-index:10; z-index:10;
height:60px; /*height:60px;*/
/** /**
* *
...@@ -22,21 +31,19 @@ header { ...@@ -22,21 +31,19 @@ header {
* *
*/ */
.app_logo { .app_logo {
width:200px; width:170px;
float:left; float:left;
position:relative;
top:-5px;
a { a {
float:left; float:left;
padding: 0px;
h1 { h1 {
padding-top: 5px;
width:90px; width:90px;
background: url('logo_dark.png') no-repeat 0px -3px; background: url('logo_dark.png') no-repeat 0px -3px;
float:left; float:left;
margin-left:5px; margin-left:5px;
font-size:36px; font-size:30px;
line-height:36px; line-height:48px;
font-weight:normal; font-weight:normal;
color:$style_color; color:$style_color;
text-shadow: 0 1px 1px #FFF; text-shadow: 0 1px 1px #FFF;
...@@ -47,7 +54,6 @@ header { ...@@ -47,7 +54,6 @@ header {
} }
.separator { .separator {
margin-left:20px;
float: left; float: left;
height: 60px; height: 60px;
width: 1px; width: 1px;
...@@ -56,13 +62,6 @@ header { ...@@ -56,13 +62,6 @@ header {
margin-top: -10px; margin-top: -10px;
} }
} }
.container {
.top_panel_content {
margin:auto;
position:relative;
padding:15px 0;
}
}
/** /**
* *
...@@ -74,33 +73,23 @@ header { ...@@ -74,33 +73,23 @@ header {
float:left; float:left;
margin:0; margin:0;
margin-right:30px; margin-right:30px;
font-size:36px; font-size:30px;
line-height:36px; line-height:48px;
font-weight:normal; font-weight:normal;
color:$style_color; color:$style_color;
text-shadow: 0 1px 1px #FFF; text-shadow: 0 1px 1px #FFF;
font-family: 'Korolev', sans-serif; font-family: 'Korolev', sans-serif;
} }
.fbtn {
float: right;
margin-right:10px;
.btn {
margin-left:7px;
background: #F1F1F1;
border: 1px solid #CCC;
}
}
/** /**
* *
* Search box * Search box
* *
*/ */
.search { .search {
float: right;
margin-right: 45px; margin-right: 45px;
margin-left:10px;
margin-top: 2px;
.search-input { .search-input {
@extend .span2; @extend .span2;
...@@ -108,8 +97,13 @@ header { ...@@ -108,8 +97,13 @@ header {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 10px; background-position: 10px;
padding-left:25px; padding-left:25px;
@include border-radius(5px); font-size: 13px;
border:1px solid #ccc; @include border-radius(2px);
border:1px solid #c6c6c6;
box-shadow:none;
&:focus {
@extend .span3;
}
} }
} }
...@@ -121,7 +115,7 @@ header { ...@@ -121,7 +115,7 @@ header {
.account-box { .account-box {
position: absolute; position: absolute;
right: 0; right: 0;
top: 13px; top: 6px;
z-index: 10000; z-index: 10000;
width: 128px; width: 128px;
font-size: 11px; font-size: 11px;
...@@ -129,13 +123,13 @@ header { ...@@ -129,13 +123,13 @@ header {
display: block; display: block;
cursor: pointer; cursor: pointer;
img { img {
@include border-radius(4px); @include border-radius(2px);
right: 5px; right: 5px;
position: absolute; position: absolute;
width: 28px; width: 28px;
height: 28px; height: 28px;
display: block; display: block;
top: 2px; top:1px;
&:after { &:after {
content: " "; content: " ";
display: block; display: block;
...@@ -186,7 +180,7 @@ header { ...@@ -186,7 +180,7 @@ header {
background: #333; background: #333;
display: none; display: none;
z-index: 100000; z-index: 100000;
border-radius: 5px; @include border-radius(4px);
width: 100px; width: 100px;
position: absolute; position: absolute;
right: 10px; right: 10px;
...@@ -200,6 +194,7 @@ header { ...@@ -200,6 +194,7 @@ header {
display: block; display: block;
text-shadow: none; text-shadow: none;
border-bottom: 1px solid #555; border-bottom: 1px solid #555;
font-size: 12px;
&:hover { &:hover {
color:#eee; color:#eee;
background: #444; background: #444;
......
...@@ -85,9 +85,14 @@ ...@@ -85,9 +85,14 @@
} }
.project_clone_holder { .project_clone_holder {
.btn {
height: 27px;
}
input[type="text"] { input[type="text"] {
height: 17px;
border: 1px solid #BBB; border: 1px solid #BBB;
box-shadow: none; box-shadow: none;
padding: 4px 10px;
} }
} }
......
...@@ -15,36 +15,4 @@ ...@@ -15,36 +15,4 @@
color: $blue_link; 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);
}
}
}
} }
...@@ -14,42 +14,24 @@ ...@@ -14,42 +14,24 @@
* *
*/ */
header { header {
&.navbar-gitlab {
.navbar-inner {
background: #474D57 url('bg-header.png') repeat-x bottom; background: #474D57 url('bg-header.png') repeat-x bottom;
box-shadow:none;
border-bottom: 1px solid #444; border-bottom: 1px solid #444;
.fbtn { .nav > li > a {
.btn { color: #eee;
i { text-shadow: 0 1px 0 #444;
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;
} }
border: 1px solid #31363E;
color:#D6DADF;
text-shadow: 0 -1px 0 #000000;
} }
} }
.search { .search {
float: right; float: right;
margin-right: 45px; margin-right: 45px;
.search-input { .search-input {
border: 1px solid rgba(0, 0, 0, 0.7); 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: #D2D5DA;
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
...@@ -65,7 +47,7 @@ ...@@ -65,7 +47,7 @@
a { a {
h1 { h1 {
background: url('logo_white.png') no-repeat 0px -3px; background: url('logo_white.png') no-repeat 0px -3px;
color:#fff; color:#eee;
text-shadow: 0 1px 1px #111; text-shadow: 0 1px 1px #111;
} }
} }
...@@ -75,7 +57,7 @@ ...@@ -75,7 +57,7 @@
} }
.project_name { .project_name {
color:#fff; color:#eee;
text-shadow: 0 1px 1px #111; text-shadow: 0 1px 1px #111;
} }
} }
......
...@@ -4,91 +4,34 @@ ...@@ -4,91 +4,34 @@
* *
* Next items should be placed there * Next items should be placed there
* - link colors * - link colors
* - header styles * - header restyles
* - main menu styles
* *
*/ */
.ui_modern { .ui_modern {
/* /*
* Application Header * Application Header
* *
*/ */
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;
/** .nav > li > a {
* color: #eee;
* Logo holder text-shadow: 0 1px 0 #111;
*
*/
.app_logo {
width:160px;
a {
h1 {
background: none;
color:#DDD;
font-size:30px;
text-shadow: 0 1px 1px #111;
padding-left: 0;
} }
} }
.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 { .search {
float: right; float: right;
margin-right: 45px; margin-right: 45px;
.search-input { .search-input {
border: 1px solid rgba(0, 0, 0, 0.7); 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: #D2D5DA;
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
...@@ -96,36 +39,30 @@ ...@@ -96,36 +39,30 @@
background-color: white; background-color: white;
} }
} }
}
.search-input::-webkit-input-placeholder { .search-input::-webkit-input-placeholder {
color: #666; 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 { .project_name {
line-height:36px; color:#eee;
font-size:30px;
color:#DDD;
text-shadow: 0 1px 1px #111; text-shadow: 0 1px 1px #111;
} }
}
/** /*
* * End of Application Header
* Account box
* *
*/ */
.account-box {
top:6px;
img {
top:1px;
right: 5px;
width: 26px;
height: 26px;
}
}
}
} }
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
- if diff.a_mode && diff.b_mode && diff.a_mode != diff.b_mode - if diff.a_mode && diff.b_mode && diff.a_mode != diff.b_mode
%span.file-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 @ View file @
%span.commit-short-id= @commit.short_id(6) %span.commit-short-id= @commit.short_id(6)
......
/ Page Header %header.navbar.navbar-static-top.navbar-gitlab
%header.top_panel_holder .navbar-inner
.container .container
.top_panel_content
%div.app_logo %div.app_logo
= link_to root_path, class: "home", title: "Home" do = link_to root_path, class: "home", title: "Home" do
%h1 %h1 GITLAB
GITLAB
%span.separator %span.separator
%h1.project_name= title %h1.project_name= title
= render "layouts/search" %ul.nav
.fbtn
- if current_user.is_admin? - 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 %i.icon-cog
Admin Admin
- if current_user.can_create_project? - 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 %i.icon-plus
Project Project
%li
= render "layouts/search"
%li
.account-box .account-box
= link_to profile_path, class: "pic" do = link_to profile_path, class: "pic" do
= image_tag gravatar_icon(current_user.email) = image_tag gravatar_icon(current_user.email)
.account-links .account-links
= link_to profile_path, class: "username" do = link_to profile_path, class: "username" do
%i.icon-user.icon-white
My profile 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" = render "layouts/init_auto_complete"
.search .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" = text_field_tag "search", nil, placeholder: "Search", class: "search-input"
:javascript :javascript
......
...@@ -6,12 +6,12 @@ ...@@ -6,12 +6,12 @@
.right .right
- unless @project.empty_repo? - unless @project.empty_repo?
- if can? current_user, :download_code, @project - 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 %i.icon-download-alt
Download Download
- if @project.merge_requests_enabled && can?(current_user, :write_merge_request, @project) - 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 Merge Request
- if @project.issues_enabled && can?(current_user, :write_issue, @project) - 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 Issue
.input-prepend.project_clone_holder .input-prepend.project_clone_holder
%button{class: "btn small active", :"data-clone" => @project.ssh_url_to_repo} SSH %button{class: "btn 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", :"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" = text_field_tag :project_clone, @project.url_to_repo, class: "one_click_select span5"
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment