Implemented bootstrap 2.2.1.1. Restyled header panel
This commit is contained in:
parent
236584c2f8
commit
942c410119
|
@ -1,6 +1,8 @@
|
|||
.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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
/** Override bootstrap variables **/
|
||||
$baseFontSize: 13px !default;
|
||||
$baseLineHeight: 18px !default;
|
||||
|
||||
@import "bootstrap";
|
||||
@import "bootstrap-responsive";
|
||||
@import 'font-awesome';
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
.nav > li > a {
|
||||
color: #eee;
|
||||
text-shadow: 0 1px 0 #444;
|
||||
}
|
||||
}
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* Project / Area name
|
||||
*
|
||||
*/
|
||||
.project_name {
|
||||
line-height:36px;
|
||||
font-size:30px;
|
||||
color:#DDD;
|
||||
.app_logo {
|
||||
a {
|
||||
h1 {
|
||||
background: url('logo_white.png') no-repeat 0px -3px;
|
||||
color:#eee;
|
||||
text-shadow: 0 1px 1px #111;
|
||||
}
|
||||
}
|
||||
.separator {
|
||||
display:none;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* Account box
|
||||
}
|
||||
.project_name {
|
||||
color:#eee;
|
||||
text-shadow: 0 1px 1px #111;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* End of Application Header
|
||||
*
|
||||
*/
|
||||
.account-box {
|
||||
top:6px;
|
||||
img {
|
||||
top:1px;
|
||||
right: 5px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
|
@ -1,29 +1,35 @@
|
|||
/ 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"
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
.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"
|
||||
|
|
Loading…
Reference in a new issue