Download as
Browse Code »

Commit 942c41011954e6b43ebc74340c668aa616e98e5b

Authored by Dmitriy Zaporozhets
1 parent 236584c2
Exists in master and in 4 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb, spb-stable

Implemented bootstrap 2.2.1.1. Restyled header panel

Showing 13 changed files with 134 additions and 233 deletions   Show diff stats
app/assets/stylesheets/gitlab_bootstrap/buttons.scss
  Diff comments   View file @942c410
1 1 .btn {
2 2 @include bg-gradient(#f7f7f7, #d5d5d5);
3 3 border-color:#aaa;
  4 + font-size: 13px;
  5 + line-height: 17px;
4 6 &:hover {
5 7 @include bg-gray-gradient;
6 8 border-color:#bbb;
... ... @@ -84,6 +86,7 @@
84 86  
85 87 &.small {
86 88 @extend .btn-small;
  89 + line-height: 16px;
87 90 }
88 91  
89 92 &.active {
... ... @@ -94,6 +97,7 @@
94 97 &.very_small {
95 98 font-size:11px;
96 99 padding:2px 6px;
  100 + line-height: 16px;
97 101 margin:2px;
98 102 }
99 103  
... ...
app/assets/stylesheets/gitlab_bootstrap/typography.scss
  Diff comments   View file @942c410
... ... @@ -3,10 +3,10 @@
3 3 *
4 4 */
5 5  
6   -body { font-size: 13px; }
7   -h1, h2, h3, h4, h5, h6 { margin:0 }
  6 +h1, h2, h3, h4, h5, h6 { margin: 0; }
8 7 h3, h4, h5, h6 { line-height: 36px; }
9 8 h5 { font-size:14px; }
  9 +
10 10 h3.page_title {
11 11 color:#456;
12 12 font-size:20px;
... ...
app/assets/stylesheets/main.scss
  Diff comments   View file @942c410
  1 +/** Override bootstrap variables **/
  2 +$baseFontSize: 13px !default;
  3 +$baseLineHeight: 18px !default;
  4 +
1 5 @import "bootstrap";
2 6 @import "bootstrap-responsive";
3 7 @import 'font-awesome';
... ...
app/assets/stylesheets/sections/header.scss
  Diff comments   View file @942c410
... ... @@ -3,18 +3,27 @@
3 3 *
4 4 */
5 5 header {
6   - width:100%;
7   - padding:0;
8   - margin:0;
9   - top:1px;
10   - left:0;
11   - background: #F1F1F1; /* for non-css3 browsers */
12   - border-bottom: 1px solid #ccc;
13   - box-shadow: 0 -1px 0 white inset;
14   - -moz-box-shadow: 0 -1px 0 white inset;
15   - -webkit-box-shadow: 0 -1px 0 white inset;
  6 + &.navbar-gitlab {
  7 + .navbar-inner {
  8 + height:45px;
  9 + padding: 5px;
  10 + background: #F1F1F1;
  11 +
  12 + .nav > li > a {
  13 + color: $style_color;
  14 + text-shadow: 0 1px 0 #fff;
  15 + }
  16 +
  17 + /** NAV block with links and profile **/
  18 + .nav {
  19 + float: right;
  20 + margin-right: 0;
  21 + }
  22 + }
  23 + }
  24 +
16 25 z-index:10;
17   - height:60px;
  26 + /*height:60px;*/
18 27  
19 28 /**
20 29 *
... ... @@ -22,21 +31,19 @@ header {
22 31 *
23 32 */
24 33 .app_logo {
25   - width:200px;
  34 + width:170px;
26 35 float:left;
27   - position:relative;
28   - top:-5px;
29 36 a {
30 37 float:left;
  38 + padding: 0px;
31 39  
32 40 h1 {
33   - padding-top: 5px;
34 41 width:90px;
35 42 background: url('logo_dark.png') no-repeat 0px -3px;
36 43 float:left;
37 44 margin-left:5px;
38   - font-size:36px;
39   - line-height:36px;
  45 + font-size:30px;
  46 + line-height:48px;
40 47 font-weight:normal;
41 48 color:$style_color;
42 49 text-shadow: 0 1px 1px #FFF;
... ... @@ -47,7 +54,6 @@ header {
47 54  
48 55 }
49 56 .separator {
50   - margin-left:20px;
51 57 float: left;
52 58 height: 60px;
53 59 width: 1px;
... ... @@ -56,13 +62,6 @@ header {
56 62 margin-top: -10px;
57 63 }
58 64 }
59   - .container {
60   - .top_panel_content {
61   - margin:auto;
62   - position:relative;
63   - padding:15px 0;
64   - }
65   - }
66 65  
67 66 /**
68 67 *
... ... @@ -74,33 +73,23 @@ header {
74 73 float:left;
75 74 margin:0;
76 75 margin-right:30px;
77   - font-size:36px;
78   - line-height:36px;
  76 + font-size:30px;
  77 + line-height:48px;
79 78 font-weight:normal;
80 79 color:$style_color;
81 80 text-shadow: 0 1px 1px #FFF;
82 81 font-family: 'Korolev', sans-serif;
83 82 }
84 83  
85   - .fbtn {
86   - float: right;
87   - margin-right:10px;
88   - .btn {
89   - margin-left:7px;
90   - background: #F1F1F1;
91   - border: 1px solid #CCC;
92   - }
93   - }
94   -
95   -
96 84 /**
97 85 *
98 86 * Search box
99 87 *
100 88 */
101 89 .search {
102   - float: right;
103 90 margin-right: 45px;
  91 + margin-left:10px;
  92 + margin-top: 2px;
104 93  
105 94 .search-input {
106 95 @extend .span2;
... ... @@ -108,8 +97,13 @@ header {
108 97 background-repeat: no-repeat;
109 98 background-position: 10px;
110 99 padding-left:25px;
111   - @include border-radius(5px);
112   - border:1px solid #ccc;
  100 + font-size: 13px;
  101 + @include border-radius(2px);
  102 + border:1px solid #c6c6c6;
  103 + box-shadow:none;
  104 + &:focus {
  105 + @extend .span3;
  106 + }
113 107 }
114 108 }
115 109  
... ... @@ -121,7 +115,7 @@ header {
121 115 .account-box {
122 116 position: absolute;
123 117 right: 0;
124   - top: 13px;
  118 + top: 6px;
125 119 z-index: 10000;
126 120 width: 128px;
127 121 font-size: 11px;
... ... @@ -129,13 +123,13 @@ header {
129 123 display: block;
130 124 cursor: pointer;
131 125 img {
132   - @include border-radius(4px);
  126 + @include border-radius(2px);
133 127 right: 5px;
134 128 position: absolute;
135 129 width: 28px;
136 130 height: 28px;
137 131 display: block;
138   - top: 2px;
  132 + top:1px;
139 133 &:after {
140 134 content: " ";
141 135 display: block;
... ... @@ -186,7 +180,7 @@ header {
186 180 background: #333;
187 181 display: none;
188 182 z-index: 100000;
189   - border-radius: 5px;
  183 + @include border-radius(4px);
190 184 width: 100px;
191 185 position: absolute;
192 186 right: 10px;
... ... @@ -200,6 +194,7 @@ header {
200 194 display: block;
201 195 text-shadow: none;
202 196 border-bottom: 1px solid #555;
  197 + font-size: 12px;
203 198 &:hover {
204 199 color:#eee;
205 200 background: #444;
... ...
app/assets/stylesheets/sections/projects.scss
  Diff comments   View file @942c410
... ... @@ -85,9 +85,14 @@
85 85 }
86 86  
87 87 .project_clone_holder {
  88 + .btn {
  89 + height: 27px;
  90 + }
88 91 input[type="text"] {
  92 + height: 17px;
89 93 border: 1px solid #BBB;
90 94 box-shadow: none;
  95 + padding: 4px 10px;
91 96 }
92 97 }
93 98  
... ...
app/assets/stylesheets/themes/ui_basic.scss
  Diff comments   View file @942c410
... ... @@ -15,36 +15,4 @@
15 15 color: $blue_link;
16 16 }
17 17 }
18   -
19   - header {
20   - .fbtn {
21   - .btn {
22   - background-color: #F8F8F8;
23   - background-image: -webkit-gradient(linear,left top,left bottom,from(#F8F8F8),to(#ECECEC));
24   - background-image: -webkit-linear-gradient(top,#F8F8F8,#ECECEC);
25   - background-image: -moz-linear-gradient(top,#F8F8F8,#ECECEC);
26   - background-image: -ms-linear-gradient(top,#F8F8F8,#ECECEC);
27   - background-image: -o-linear-gradient(top,#F8F8F8,#ECECEC);
28   - background-image: linear-gradient(top,#F8F8F8,#ECECEC);
29   - filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8',EndColorStr='#ececec');
30   - border-color: #C6C6C6;
31   - margin-left:7px;
32   - @include border-radius(3px);
33   - box-shadow:none;
34   - color:#666;
35   - }
36   - }
37   - .search {
38   - .search-input {
39   - @include border-radius(3px);
40   - border-color: #C6C6C6;
41   - box-shadow:none;
42   - }
43   - }
44   - .pic {
45   - img {
46   - @include border-radius(3px);
47   - }
48   - }
49   - }
50 18 }
... ...
app/assets/stylesheets/themes/ui_mars.scss
  Diff comments   View file @942c410
... ... @@ -14,42 +14,24 @@
14 14 *
15 15 */
16 16 header {
17   - background: #474D57 url('bg-header.png') repeat-x bottom;
18   - box-shadow:none;
19   - border-bottom: 1px solid #444;
20 17  
21   - .fbtn {
22   - .btn {
23   - i {
24   - position: relative;
25   - top: 1px;
26   - }
27   - margin-left:8px;
28   - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #595D63), to(#31363E));
29   - background-image: -webkit-linear-gradient(#595D63 6.6%, #31363E);
30   - background-image: -moz-linear-gradient(#595D63 6.6%, #31363E);
31   - background-image: -o-linear-gradient(#595D63 6.6%, #31363E);
32   - font-size: 12px;
33   - &:hover {
34   - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #595D63), to(#2C2F35));
35   - background-image: -webkit-linear-gradient(#595D63 6.6%, #2C2F35);
36   - background-image: -moz-linear-gradient(#595D63 6.6%, #202227);
37   - background-image: -o-linear-gradient(#595D63 6.6%, #202227);
38   - background-position:0 0;
39   - color:#fff;
40   - }
  18 + &.navbar-gitlab {
  19 + .navbar-inner {
  20 + background: #474D57 url('bg-header.png') repeat-x bottom;
  21 + border-bottom: 1px solid #444;
41 22  
42   - border: 1px solid #31363E;
43   - color:#D6DADF;
44   - text-shadow: 0 -1px 0 #000000;
  23 + .nav > li > a {
  24 + color: #eee;
  25 + text-shadow: 0 1px 0 #444;
  26 + }
45 27 }
46 28 }
  29 +
47 30 .search {
48 31 float: right;
49 32 margin-right: 45px;
50 33 .search-input {
51 34 border: 1px solid rgba(0, 0, 0, 0.7);
52   - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.4) inset;
53 35 background-color: #D2D5DA;
54 36 background-color: rgba(255, 255, 255, 0.5);
55 37  
... ... @@ -65,7 +47,7 @@
65 47 a {
66 48 h1 {
67 49 background: url('logo_white.png') no-repeat 0px -3px;
68   - color:#fff;
  50 + color:#eee;
69 51 text-shadow: 0 1px 1px #111;
70 52 }
71 53 }
... ... @@ -75,7 +57,7 @@
75 57  
76 58 }
77 59 .project_name {
78   - color:#fff;
  60 + color:#eee;
79 61 text-shadow: 0 1px 1px #111;
80 62 }
81 63 }
... ...
app/assets/stylesheets/themes/ui_modern.scss
  Diff comments   View file @942c410
... ... @@ -4,91 +4,34 @@
4 4 *
5 5 * Next items should be placed there
6 6 * - link colors
7   - * - header styles
8   - * - main menu styles
  7 + * - header restyles
9 8 *
10 9 */
11 10 .ui_modern {
  11 +
12 12 /*
13 13 * Application Header
14 14 *
15 15 */
16 16 header {
17   - height:40px;
18   - background-image: -moz-linear-gradient(top, #333, #222);
19   - background-image: -ms-linear-gradient(top, #333, #222);
20   - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#222));
21   - background-image: -webkit-linear-gradient(top, #333, #222);
22   - background-image: -o-linear-gradient(top, #333, #222);
23   - background-image: linear-gradient(top, #333, #222);
24   - background-repeat: repeat-x;
25   - background-repeat: repeat-x;
26   - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
27   - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
28   - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
29   - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
30   -
31   - .container .top_panel_content { padding: 5px 0; }
32 17  
  18 + &.navbar-gitlab {
  19 + .navbar-inner {
  20 + background: #333;
  21 + border-bottom: 1px solid #111;
33 22  
34   - /**
35   - *
36   - * Logo holder
37   - *
38   - */
39   - .app_logo {
40   - width:160px;
41   - a {
42   - h1 {
43   - background: none;
44   - color:#DDD;
45   - font-size:30px;
46   - text-shadow: 0 1px 1px #111;
47   - padding-left: 0;
  23 + .nav > li > a {
  24 + color: #eee;
  25 + text-shadow: 0 1px 0 #111;
48 26 }
49 27 }
50   - .separator {
51   - width: 1px;
52   - height: 40px;
53   - margin: 0 10px;
54   - overflow: hidden;
55   - background: #222;
56   - border-left: 1px solid #333;
57   - }
58 28 }
59 29  
60   - .fbtn {
61   - .btn {
62   - i {
63   - position: relative;
64   - top: 2px;
65   - }
66   - background:none;
67   - margin-left:8px;
68   - font-size: 13px;
69   - line-height: 19px;
70   - color:#ccc;
71   - &:hover {
72   - color:#fff;
73   - }
74   - border: none;
75   - box-shadow:none;
76   - text-shadow: 0 -1px 0 #000000;
77   - border-left: 1px solid #333;
78   - }
79   - }
80   -
81   - /**
82   - *
83   - * Search box
84   - *
85   - */
86 30 .search {
87 31 float: right;
88 32 margin-right: 45px;
89 33 .search-input {
90 34 border: 1px solid rgba(0, 0, 0, 0.7);
91   - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.4) inset;
92 35 background-color: #D2D5DA;
93 36 background-color: rgba(255, 255, 255, 0.5);
94 37  
... ... @@ -96,36 +39,30 @@
96 39 background-color: white;
97 40 }
98 41 }
99   - .search-input::-webkit-input-placeholder {
100   - color: #666;
101   - }
102 42 }
  43 + .search-input::-webkit-input-placeholder {
  44 + color: #666;
  45 + }
  46 + .app_logo {
  47 + a {
  48 + h1 {
  49 + background: url('logo_white.png') no-repeat 0px -3px;
  50 + color:#eee;
  51 + text-shadow: 0 1px 1px #111;
  52 + }
  53 + }
  54 + .separator {
  55 + display:none;
  56 + }
103 57  
104   - /**
105   - *
106   - * Project / Area name
107   - *
108   - */
  58 + }
109 59 .project_name {
110   - line-height:36px;
111   - font-size:30px;
112   - color:#DDD;
  60 + color:#eee;
113 61 text-shadow: 0 1px 1px #111;
114 62 }
115   -
116   - /**
117   - *
118   - * Account box
119   - *
120   - */
121   - .account-box {
122   - top:6px;
123   - img {
124   - top:1px;
125   - right: 5px;
126   - width: 26px;
127   - height: 26px;
128   - }
129   - }
130 63 }
  64 + /*
  65 + * End of Application Header
  66 + *
  67 + */
131 68 }
... ...
app/views/commits/_diffs.html.haml
  Diff comments   View file @942c410
... ... @@ -22,7 +22,7 @@
22 22 .diff_file_header
23 23 - if diff.deleted_file
24 24 %span= diff.old_path
25   -
  25 +
26 26 - if @commit.prev_commit
27 27 = link_to project_tree_path(@project, tree_join(@commit.prev_commit_id, diff.new_path)), {:class => 'btn right view-commit'} do
28 28 View file @
... ... @@ -31,11 +31,11 @@
31 31 %span= diff.new_path
32 32 - if diff.a_mode && diff.b_mode && diff.a_mode != diff.b_mode
33 33 %span.file-mode= "#{diff.a_mode} → #{diff.b_mode}"
34   -
35   - = link_to project_tree_path(@project, tree_join(@commit.id, diff.new_path)), {:class => 'btn right view-commit'} do
  34 +
  35 + = link_to project_tree_path(@project, tree_join(@commit.id, diff.new_path)), {:class => 'btn very_small right view-commit'} do
36 36 View file @
37 37 %span.commit-short-id= @commit.short_id(6)
38   -
  38 +
39 39 %br/
40 40 .diff_file_content
41 41 -# Skipp all non non-supported blobs
... ... @@ -51,10 +51,10 @@
51 51 %div.image-info= "#{number_to_human_size file.size}"
52 52 - else
53 53 .diff_file_content_image.img_compared
54   - .image.diff_removed
  54 + .image.diff_removed
55 55 %img{src: "data:#{file.mime_type};base64,#{Base64.encode64(old_file.data)}"}
56 56 %div.image-info= "#{number_to_human_size file.size}"
57   - .image.diff_added
  57 + .image.diff_added
58 58 %img{src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
59 59 %div.image-info= "#{number_to_human_size file.size}"
60 60 - else
... ...
app/views/layouts/_head_panel.html.haml
  Diff comments   View file @942c410
1   -/ Page Header
2   -%header.top_panel_holder
3   - .container
4   - .top_panel_content
  1 +%header.navbar.navbar-static-top.navbar-gitlab
  2 + .navbar-inner
  3 + .container
5 4 %div.app_logo
6 5 = link_to root_path, class: "home", title: "Home" do
7   - %h1
8   - GITLAB
  6 + %h1 GITLAB
9 7 %span.separator
10 8 %h1.project_name= title
11   - = render "layouts/search"
12   - .fbtn
  9 + %ul.nav
13 10 - if current_user.is_admin?
14   - = link_to admin_root_path, class: "btn small", title: "Admin area" do
15   - %i.icon-cog
16   - Admin
  11 + %li
  12 + = link_to admin_root_path, title: "Admin area" do
  13 + %i.icon-cog
  14 + Admin
17 15 - if current_user.can_create_project?
18   - = link_to new_project_path, class: "btn small", title: "Create New Project" do
19   - %i.icon-plus
20   - Project
21   - .account-box
22   - = link_to profile_path, class: "pic" do
23   - = image_tag gravatar_icon(current_user.email)
24   - .account-links
25   - = link_to profile_path, class: "username" do
26   - My profile
27   - = link_to 'Logout', destroy_user_session_path, class: "logout", method: :delete
  16 + %li
  17 + = link_to new_project_path, title: "Create New Project" do
  18 + %i.icon-plus
  19 + Project
  20 + %li
  21 + = render "layouts/search"
  22 + %li
  23 + .account-box
  24 + = link_to profile_path, class: "pic" do
  25 + = image_tag gravatar_icon(current_user.email)
  26 + .account-links
  27 + = link_to profile_path, class: "username" do
  28 + %i.icon-user.icon-white
  29 + My profile
  30 + = link_to destroy_user_session_path, class: "logout", method: :delete do
  31 + %i.icon-signout.icon-white
  32 + Logout
  33 +
28 34  
29 35 = render "layouts/init_auto_complete"
... ...
app/views/layouts/_search.html.haml
  Diff comments   View file @942c410
1 1 .search
2   - = form_tag search_path, method: :get do |f|
  2 + = form_tag search_path, method: :get, class: 'navbar-form pull-left' do |f|
3 3 = text_field_tag "search", nil, placeholder: "Search", class: "search-input"
4 4  
5 5 :javascript
... ...
app/views/projects/_clone_panel.html.haml
  Diff comments   View file @942c410
... ... @@ -6,12 +6,12 @@
6 6 .right
7 7 - unless @project.empty_repo?
8 8 - if can? current_user, :download_code, @project
9   - = link_to archive_project_repository_path(@project), class: "btn small grouped" do
  9 + = link_to archive_project_repository_path(@project), class: "btn grouped" do
10 10 %i.icon-download-alt
11 11 Download
12 12 - if @project.merge_requests_enabled && can?(current_user, :write_merge_request, @project)
13   - = link_to new_project_merge_request_path(@project), title: "New Merge Request", class: "btn small grouped" do
  13 + = link_to new_project_merge_request_path(@project), title: "New Merge Request", class: "btn grouped" do
14 14 Merge Request
15 15 - if @project.issues_enabled && can?(current_user, :write_issue, @project)
16   - = link_to new_project_issue_path(@project), title: "New Issue", class: "btn small grouped" do
  16 + = link_to new_project_issue_path(@project), title: "New Issue", class: "btn grouped" do
17 17 Issue
... ...
app/views/shared/_clone_panel.html.haml
  Diff comments   View file @942c410
1 1 .input-prepend.project_clone_holder
2   - %button{class: "btn small active", :"data-clone" => @project.ssh_url_to_repo} SSH
3   - %button{class: "btn small", :"data-clone" => @project.http_url_to_repo}= Gitlab.config.web_protocol.upcase
  2 + %button{class: "btn active", :"data-clone" => @project.ssh_url_to_repo} SSH
  3 + %button{class: "btn", :"data-clone" => @project.http_url_to_repo}= Gitlab.config.web_protocol.upcase
4 4 = text_field_tag :project_clone, @project.url_to_repo, class: "one_click_select span5"
... ...