Commit d3862c0e5739ed09373fea2f52673c8ca1d3cbe4
1 parent
b58326af
Exists in
master
and in
4 other branches
CSS improvements & refactoring
Showing
10 changed files
with
156 additions
and
183 deletions
Show diff stats
app/assets/stylesheets/gitlab_bootstrap.scss
@@ -642,9 +642,7 @@ pre.logs { | @@ -642,9 +642,7 @@ pre.logs { | ||
642 | .file_holder { | 642 | .file_holder { |
643 | border:1px solid #CCC; | 643 | border:1px solid #CCC; |
644 | margin-bottom:1em; | 644 | margin-bottom:1em; |
645 | - -moz-box-shadow: 0 0 3px #ddd; | ||
646 | - -webkit-box-shadow: 0 0 3px #ddd; | ||
647 | - box-shadow: 0 0 3px #ddd; | 645 | + @include shade; |
648 | 646 | ||
649 | .file_title { | 647 | .file_title { |
650 | border-bottom: 1px solid #bbb; | 648 | border-bottom: 1px solid #bbb; |
@@ -661,10 +659,111 @@ pre.logs { | @@ -661,10 +659,111 @@ pre.logs { | ||
661 | padding: 9px 10px; | 659 | padding: 9px 10px; |
662 | height:18px; | 660 | height:18px; |
663 | 661 | ||
662 | + .options { | ||
663 | + float:right; | ||
664 | + margin-top: -5px; | ||
665 | + } | ||
666 | + | ||
667 | + .file_name { | ||
668 | + color:$style_color; | ||
669 | + font-size:14px; | ||
670 | + text-shadow: 0 1px 1px #fff; | ||
671 | + small { | ||
672 | + color:#999; | ||
673 | + font-size:13px; | ||
674 | + } | ||
675 | + } | ||
664 | } | 676 | } |
665 | .file_content { | 677 | .file_content { |
666 | - &.wiki { | ||
667 | - padding:20px; | ||
668 | - } | 678 | + background:#fff; |
679 | + color:#514721; | ||
680 | + font-size: 11px; | ||
681 | + | ||
682 | + &.wiki { | ||
683 | + code { | ||
684 | + padding:0 4px; | ||
685 | + } | ||
686 | + padding:20px; | ||
687 | + h1, h2 { | ||
688 | + line-height: 46px; | ||
689 | + } | ||
690 | + h3, h4 { | ||
691 | + line-height: 40px; | ||
692 | + } | ||
693 | + } | ||
694 | + | ||
695 | + &.image_file { | ||
696 | + background:#eee; | ||
697 | + text-align:center; | ||
698 | + img { | ||
699 | + padding:100px; | ||
700 | + max-width:300px; | ||
701 | + } | ||
702 | + } | ||
703 | + | ||
704 | + &.blob_file { | ||
705 | + | ||
706 | + } | ||
707 | + | ||
708 | + /** | ||
709 | + * Blame file | ||
710 | + */ | ||
711 | + &.blame { | ||
712 | + tr { | ||
713 | + border-bottom: 1px solid #eee; | ||
714 | + } | ||
715 | + td { | ||
716 | + padding:5px; | ||
717 | + } | ||
718 | + .author, | ||
719 | + .blame_commit { | ||
720 | + background:#f5f5f5; | ||
721 | + vertical-align:top; | ||
722 | + } | ||
723 | + .lines { | ||
724 | + pre { | ||
725 | + padding:0; | ||
726 | + margin:0; | ||
727 | + background:none; | ||
728 | + border:none; | ||
729 | + } | ||
730 | + } | ||
731 | + } | ||
732 | + | ||
733 | + /** | ||
734 | + * Code file | ||
735 | + */ | ||
736 | + &.code { | ||
737 | + padding:0; | ||
738 | + td.code { | ||
739 | + width: 100%; | ||
740 | + .highlight { | ||
741 | + margin-left: 55px; | ||
742 | + overflow:auto; | ||
743 | + overflow-y:hidden; | ||
744 | + } | ||
745 | + } | ||
746 | + .highlight pre { | ||
747 | + white-space: pre; | ||
748 | + word-wrap:normal; | ||
749 | + } | ||
750 | + | ||
751 | + table.highlighttable { | ||
752 | + border: none; | ||
753 | + } | ||
754 | + body.project-page table.highlighttable td { border: none } | ||
755 | + table.highlighttable tr:hover { background:none;} | ||
756 | + | ||
757 | + table.highlighttable pre{ | ||
758 | + line-height:16px !important; | ||
759 | + font-size:12px !important; | ||
760 | + } | ||
761 | + | ||
762 | + table.highlighttable .linenodiv pre { | ||
763 | + text-align: right; | ||
764 | + padding-right: 4px; | ||
765 | + color:#666; | ||
766 | + } | ||
767 | + } | ||
669 | } | 768 | } |
670 | } | 769 | } |
app/assets/stylesheets/notes.scss
@@ -63,18 +63,22 @@ p.notify_controls span{ | @@ -63,18 +63,22 @@ p.notify_controls span{ | ||
63 | 63 | ||
64 | tr.line_notes_row { | 64 | tr.line_notes_row { |
65 | border-bottom:1px solid #DDD; | 65 | border-bottom:1px solid #DDD; |
66 | + border-left: 7px solid #2A79A3; | ||
67 | + | ||
66 | &.reply { | 68 | &.reply { |
67 | background:#eee; | 69 | background:#eee; |
68 | - | 70 | + border-left: 7px solid #2A79A3; |
71 | + border-top:1px solid #ddd; | ||
69 | td { | 72 | td { |
70 | padding:7px 10px; | 73 | padding:7px 10px; |
71 | } | 74 | } |
72 | a.line_note_reply_link { | 75 | a.line_note_reply_link { |
73 | @include round-borders-all(4px); | 76 | @include round-borders-all(4px); |
74 | - border-color:#aaa; | ||
75 | - background: #bbb; | ||
76 | - padding: 3px 20px; | 77 | + padding: 3px 10px; |
78 | + margin-left:5px; | ||
77 | color: white; | 79 | color: white; |
80 | + background: #2A79A3; | ||
81 | + border-color: #2A79A3; | ||
78 | } | 82 | } |
79 | } | 83 | } |
80 | ul { | 84 | ul { |
@@ -95,6 +99,9 @@ tr.line_notes_row { | @@ -95,6 +99,9 @@ tr.line_notes_row { | ||
95 | td { | 99 | td { |
96 | border-bottom:1px solid #ddd; | 100 | border-bottom:1px solid #ddd; |
97 | } | 101 | } |
102 | + .actions { | ||
103 | + margin:0; | ||
104 | + } | ||
98 | } | 105 | } |
99 | 106 | ||
100 | td .line_note_link { | 107 | td .line_note_link { |
app/assets/stylesheets/sections/tree.scss
@@ -25,103 +25,6 @@ | @@ -25,103 +25,6 @@ | ||
25 | } | 25 | } |
26 | } | 26 | } |
27 | 27 | ||
28 | - | ||
29 | - /** FILE CONTENT VIEW **/ | ||
30 | - .view_file_content{ | ||
31 | - .old_line, .new_line { | ||
32 | - background:#ECECEC; | ||
33 | - color:#777; | ||
34 | - width:15px; | ||
35 | - float:left; | ||
36 | - padding: 0px 10px; | ||
37 | - border-right: 1px solid #ccc; | ||
38 | - } | ||
39 | - .old_line{ | ||
40 | - display:none; | ||
41 | - } | ||
42 | - } | ||
43 | - | ||
44 | - .view_file .view_file_header, | ||
45 | - .diff_file .diff_file_header { | ||
46 | - border-bottom: 1px solid #bbb; | ||
47 | - background:#eee; | ||
48 | - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); | ||
49 | - background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); | ||
50 | - background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); | ||
51 | - background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); | ||
52 | - margin: 0; | ||
53 | - font-weight: normal; | ||
54 | - font-weight: bold; | ||
55 | - text-align: left; | ||
56 | - color: #666; | ||
57 | - padding: 9px 10px; | ||
58 | - height:18px; | ||
59 | - | ||
60 | - .options { | ||
61 | - float:right; | ||
62 | - margin-top: -5px; | ||
63 | - } | ||
64 | - | ||
65 | - .file_name { | ||
66 | - color:$style_color; | ||
67 | - font-size:14px; | ||
68 | - text-shadow: 0 1px 1px #fff; | ||
69 | - small { | ||
70 | - color:#999; | ||
71 | - font-size:13px; | ||
72 | - } | ||
73 | - } | ||
74 | - } | ||
75 | - | ||
76 | - .view_file { | ||
77 | - border:1px solid #CCC; | ||
78 | - margin-bottom:1em; | ||
79 | - | ||
80 | - .view_file_content { | ||
81 | - background:#fff; | ||
82 | - color:#514721; | ||
83 | - font-size: 11px; | ||
84 | - } | ||
85 | - .view_file_content_image { | ||
86 | - background:#eee; | ||
87 | - text-align:center; | ||
88 | - img { | ||
89 | - padding:100px; | ||
90 | - max-width:300px; | ||
91 | - } | ||
92 | - } | ||
93 | - } | ||
94 | - | ||
95 | - td.code { | ||
96 | - width: 100%; | ||
97 | - .highlight { | ||
98 | - margin-left: 55px; | ||
99 | - overflow:auto; | ||
100 | - overflow-y:hidden; | ||
101 | - } | ||
102 | - } | ||
103 | - .highlight pre { | ||
104 | - white-space: pre; | ||
105 | - word-wrap:normal; | ||
106 | - } | ||
107 | - | ||
108 | - table.highlighttable { | ||
109 | - border: none; | ||
110 | - } | ||
111 | - body.project-page table.highlighttable td { border: none } | ||
112 | - table.highlighttable tr:hover { background:none;} | ||
113 | - | ||
114 | - table.highlighttable pre{ | ||
115 | - line-height:16px !important; | ||
116 | - font-size:12px !important; | ||
117 | - } | ||
118 | - | ||
119 | - table.highlighttable .linenodiv pre { | ||
120 | - text-align: right; | ||
121 | - padding-right: 4px; | ||
122 | - color:#666; | ||
123 | - } | ||
124 | - | ||
125 | #tree-slider { | 28 | #tree-slider { |
126 | @include border-radius(0); | 29 | @include border-radius(0); |
127 | .tree-item { | 30 | .tree-item { |
@@ -183,21 +86,6 @@ | @@ -183,21 +86,6 @@ | ||
183 | color:#333; | 86 | color:#333; |
184 | } | 87 | } |
185 | 88 | ||
186 | - #tree-content-holder .view_file{ | ||
187 | - @include shade; | ||
188 | - } | ||
189 | - | ||
190 | - #tree-readme-holder .readme { | ||
191 | - @include shade; | ||
192 | - margin-bottom:20px; | ||
193 | - h1, h2 { | ||
194 | - line-height: 56px; | ||
195 | - } | ||
196 | - h3, h4 { | ||
197 | - line-height: 46px; | ||
198 | - } | ||
199 | - } | ||
200 | - | ||
201 | a.tree-commit-link { | 89 | a.tree-commit-link { |
202 | color: #666; | 90 | color: #666; |
203 | &:hover { | 91 | &:hover { |
@@ -206,27 +94,3 @@ | @@ -206,27 +94,3 @@ | ||
206 | } | 94 | } |
207 | 95 | ||
208 | } | 96 | } |
209 | - | ||
210 | -.blame_file { | ||
211 | - .view_file_content { | ||
212 | - tr { | ||
213 | - border-bottom: 1px solid #eee; | ||
214 | - } | ||
215 | - td { | ||
216 | - padding:5px; | ||
217 | - } | ||
218 | - .author, | ||
219 | - .commit { | ||
220 | - background:#f5f5f5; | ||
221 | - vertical-align:top; | ||
222 | - } | ||
223 | - .lines { | ||
224 | - pre { | ||
225 | - padding:0; | ||
226 | - margin:0; | ||
227 | - background:none; | ||
228 | - border:none; | ||
229 | - } | ||
230 | - } | ||
231 | - } | ||
232 | -} |
app/views/help/api.html.haml
@@ -8,9 +8,9 @@ | @@ -8,9 +8,9 @@ | ||
8 | %li | 8 | %li |
9 | %a{:href => "#README"} README | 9 | %a{:href => "#README"} README |
10 | %li | 10 | %li |
11 | - %a{:href => "#Projects"} Projects | 11 | + %a{:href => "#projects"} Projects |
12 | %li | 12 | %li |
13 | - %a{:href => "#Users"} Users | 13 | + %a{:href => "#users"} Users |
14 | 14 | ||
15 | .file_holder#README | 15 | .file_holder#README |
16 | .file_title | 16 | .file_title |
app/views/keys/new.html.haml
1 | -%h3 New key | 1 | +%h3.page_title New key |
2 | %hr | 2 | %hr |
3 | = render 'form' | 3 | = render 'form' |
4 | 4 | ||
@@ -11,4 +11,4 @@ | @@ -11,4 +11,4 @@ | ||
11 | if( key_mail && key_mail.length > 0 && title.val() == '' ){ | 11 | if( key_mail && key_mail.length > 0 && title.val() == '' ){ |
12 | $('#key_title').val( key_mail ); | 12 | $('#key_title').val( key_mail ); |
13 | } | 13 | } |
14 | - }); | ||
15 | \ No newline at end of file | 14 | \ No newline at end of file |
15 | + }); |
app/views/notes/_reply_button.html.haml
1 | %tr.line_notes_row.reply | 1 | %tr.line_notes_row.reply |
2 | %td{:colspan => 3} | 2 | %td{:colspan => 3} |
3 | + %i.icon-comment | ||
3 | = link_to "Reply", "#", :class => "line_note_reply_link", "line_code" => line_code, :title => "Add note for this line" | 4 | = link_to "Reply", "#", :class => "line_note_reply_link", "line_code" => line_code, :title => "Add note for this line" |
app/views/refs/_tree.html.haml
@@ -37,9 +37,11 @@ | @@ -37,9 +37,11 @@ | ||
37 | = render :partial => "refs/submodule_item", :locals => { :content => content } | 37 | = render :partial => "refs/submodule_item", :locals => { :content => content } |
38 | 38 | ||
39 | - if content = contents.select{ |c| c.is_a?(Grit::Blob) and c.name =~ /^readme/i }.first | 39 | - if content = contents.select{ |c| c.is_a?(Grit::Blob) and c.name =~ /^readme/i }.first |
40 | - #tree-readme-holder | ||
41 | - %h3= content.name | ||
42 | - .readme | 40 | + .file_holder#README |
41 | + .file_title | ||
42 | + %i.icon-file | ||
43 | + = content.name | ||
44 | + .file_content.wiki | ||
43 | - if content.name =~ /\.(md|markdown)$/i | 45 | - if content.name =~ /\.(md|markdown)$/i |
44 | = preserve do | 46 | = preserve do |
45 | = markdown(content.data) | 47 | = markdown(content.data) |
app/views/refs/_tree_file.html.haml
1 | -.view_file | ||
2 | - .view_file_header | 1 | +.file_holder |
2 | + .file_title | ||
3 | %i.icon-file | 3 | %i.icon-file |
4 | %span.file_name | 4 | %span.file_name |
5 | = name | 5 | = name |
@@ -10,26 +10,28 @@ | @@ -10,26 +10,28 @@ | ||
10 | = link_to "blame", blame_file_project_ref_path(@project, @ref, :path => params[:path]), :class => "btn very_small" | 10 | = link_to "blame", blame_file_project_ref_path(@project, @ref, :path => params[:path]), :class => "btn very_small" |
11 | - if file.text? | 11 | - if file.text? |
12 | - if name =~ /\.(md|markdown)$/i | 12 | - if name =~ /\.(md|markdown)$/i |
13 | - #tree-readme-holder | ||
14 | - .readme | ||
15 | - = preserve do | ||
16 | - = markdown(file.data) | 13 | + .file_content.wiki |
14 | + = preserve do | ||
15 | + = markdown(file.data) | ||
17 | - else | 16 | - else |
18 | - .view_file_content | 17 | + .file_content.code |
19 | - unless file.empty? | 18 | - unless file.empty? |
20 | %div{:class => current_user.dark_scheme ? "black" : "white"} | 19 | %div{:class => current_user.dark_scheme ? "black" : "white"} |
21 | = preserve do | 20 | = preserve do |
22 | = raw file.colorize(options: { linenos: 'True'}) | 21 | = raw file.colorize(options: { linenos: 'True'}) |
23 | - else | 22 | - else |
24 | %h4.nothing_here_message Empty file | 23 | %h4.nothing_here_message Empty file |
24 | + | ||
25 | - elsif file.image? | 25 | - elsif file.image? |
26 | - .view_file_content_image | 26 | + .file_content.image_file |
27 | %img{ :src => "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"} | 27 | %img{ :src => "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"} |
28 | + | ||
28 | - else | 29 | - else |
29 | - %center | ||
30 | - = link_to blob_project_ref_path(@project, @ref, :path => params[:path]) do | ||
31 | - %div.padded | ||
32 | - %br | ||
33 | - = image_tag "download.png", :width => 64 | ||
34 | - %h3 | ||
35 | - Download (#{file.mb_size}) | 30 | + .file_content.blob_file |
31 | + %center | ||
32 | + = link_to blob_project_ref_path(@project, @ref, :path => params[:path]) do | ||
33 | + %div.padded | ||
34 | + %br | ||
35 | + = image_tag "download.png", :width => 64 | ||
36 | + %h3 | ||
37 | + Download (#{file.mb_size}) |
app/views/refs/blame.html.haml
@@ -11,8 +11,8 @@ | @@ -11,8 +11,8 @@ | ||
11 | %li= link | 11 | %li= link |
12 | .clear | 12 | .clear |
13 | 13 | ||
14 | - .view_file.blame_file | ||
15 | - .view_file_header | 14 | + .file_holder |
15 | + .file_title | ||
16 | %i.icon-file | 16 | %i.icon-file |
17 | %span.file_name | 17 | %span.file_name |
18 | = @tree.name | 18 | = @tree.name |
@@ -21,7 +21,7 @@ | @@ -21,7 +21,7 @@ | ||
21 | = link_to "raw", blob_project_ref_path(@project, @ref, :path => params[:path]), :class => "btn very_small", :target => "_blank" | 21 | = link_to "raw", blob_project_ref_path(@project, @ref, :path => params[:path]), :class => "btn very_small", :target => "_blank" |
22 | = link_to "history", project_commits_path(@project, :path => params[:path], :ref => @ref), :class => "btn very_small" | 22 | = link_to "history", project_commits_path(@project, :path => params[:path], :ref => @ref), :class => "btn very_small" |
23 | = link_to "source", tree_file_project_ref_path(@project, @ref, :path => params[:path]), :class => "btn very_small" | 23 | = link_to "source", tree_file_project_ref_path(@project, @ref, :path => params[:path]), :class => "btn very_small" |
24 | - .view_file_content | 24 | + .file_content.blame |
25 | %table | 25 | %table |
26 | - @blame.each do |commit, lines| | 26 | - @blame.each do |commit, lines| |
27 | - commit = Commit.new(commit) | 27 | - commit = Commit.new(commit) |
@@ -29,7 +29,7 @@ | @@ -29,7 +29,7 @@ | ||
29 | %td.author | 29 | %td.author |
30 | = image_tag gravatar_icon(commit.author_email, 16) | 30 | = image_tag gravatar_icon(commit.author_email, 16) |
31 | = commit.author_name | 31 | = commit.author_name |
32 | - %td.commit | 32 | + %td.blame_commit |
33 | | 33 | |
34 | = link_to project_commit_path(@project, :id => commit.id) do | 34 | = link_to project_commit_path(@project, :id => commit.id) do |
35 | %code= commit.id.to_s[0..10] | 35 | %code= commit.id.to_s[0..10] |
app/views/snippets/show.html.haml
@@ -7,16 +7,14 @@ | @@ -7,16 +7,14 @@ | ||
7 | = link_to "Edit", edit_project_snippet_path(@project, @snippet), :class => "btn small right" | 7 | = link_to "Edit", edit_project_snippet_path(@project, @snippet), :class => "btn small right" |
8 | 8 | ||
9 | %br | 9 | %br |
10 | -#tree-holder | ||
11 | - #tree-content-holder | ||
12 | - .view_file | ||
13 | - .view_file_header | ||
14 | - %i.icon-file | ||
15 | - %strong= @snippet.file_name | ||
16 | - %span.options | ||
17 | - = link_to "raw", raw_project_snippet_path(@project, @snippet), :class => "btn very_small", :target => "_blank" | ||
18 | - .view_file_content | ||
19 | - %div{:class => current_user.dark_scheme ? "black" : ""} | ||
20 | - = raw @snippet.colorize(options: { linenos: 'True'}) | 10 | +.file_holder |
11 | + .file_title | ||
12 | + %i.icon-file | ||
13 | + %strong= @snippet.file_name | ||
14 | + %span.options | ||
15 | + = link_to "raw", raw_project_snippet_path(@project, @snippet), :class => "btn very_small", :target => "_blank" | ||
16 | + .file_content.code | ||
17 | + %div{:class => current_user.dark_scheme ? "black" : ""} | ||
18 | + = raw @snippet.colorize(options: { linenos: 'True'}) | ||
21 | 19 | ||
22 | = render "notes/notes", :tid => @snippet.id, :tt => "snippet" | 20 | = render "notes/notes", :tid => @snippet.id, :tt => "snippet" |