Commit d3862c0e5739ed09373fea2f52673c8ca1d3cbe4

Authored by randx
1 parent b58326af

CSS improvements & refactoring

app/assets/stylesheets/gitlab_bootstrap.scss
... ... @@ -642,9 +642,7 @@ pre.logs {
642 642 .file_holder {
643 643 border:1px solid #CCC;
644 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 647 .file_title {
650 648 border-bottom: 1px solid #bbb;
... ... @@ -661,10 +659,111 @@ pre.logs {
661 659 padding: 9px 10px;
662 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 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 63  
64 64 tr.line_notes_row {
65 65 border-bottom:1px solid #DDD;
  66 + border-left: 7px solid #2A79A3;
  67 +
66 68 &.reply {
67 69 background:#eee;
68   -
  70 + border-left: 7px solid #2A79A3;
  71 + border-top:1px solid #ddd;
69 72 td {
70 73 padding:7px 10px;
71 74 }
72 75 a.line_note_reply_link {
73 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 79 color: white;
  80 + background: #2A79A3;
  81 + border-color: #2A79A3;
78 82 }
79 83 }
80 84 ul {
... ... @@ -95,6 +99,9 @@ tr.line_notes_row {
95 99 td {
96 100 border-bottom:1px solid #ddd;
97 101 }
  102 + .actions {
  103 + margin:0;
  104 + }
98 105 }
99 106  
100 107 td .line_note_link {
... ...
app/assets/stylesheets/sections/tree.scss
... ... @@ -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 28 #tree-slider {
126 29 @include border-radius(0);
127 30 .tree-item {
... ... @@ -183,21 +86,6 @@
183 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 89 a.tree-commit-link {
202 90 color: #666;
203 91 &:hover {
... ... @@ -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 8 %li
9 9 %a{:href => "#README"} README
10 10 %li
11   - %a{:href => "#Projects"} Projects
  11 + %a{:href => "#projects"} Projects
12 12 %li
13   - %a{:href => "#Users"} Users
  13 + %a{:href => "#users"} Users
14 14  
15 15 .file_holder#README
16 16 .file_title
... ...
app/views/keys/new.html.haml
1   -%h3 New key
  1 +%h3.page_title New key
2 2 %hr
3 3 = render 'form'
4 4  
... ... @@ -11,4 +11,4 @@
11 11 if( key_mail && key_mail.length > 0 && title.val() == '' ){
12 12 $('#key_title').val( key_mail );
13 13 }
14   - });
15 14 \ No newline at end of file
  15 + });
... ...
app/views/notes/_reply_button.html.haml
1 1 %tr.line_notes_row.reply
2 2 %td{:colspan => 3}
  3 + %i.icon-comment
3 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 37 = render :partial => "refs/submodule_item", :locals => { :content => content }
38 38  
39 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 45 - if content.name =~ /\.(md|markdown)$/i
44 46 = preserve do
45 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 3 %i.icon-file
4 4 %span.file_name
5 5 = name
... ... @@ -10,26 +10,28 @@
10 10 = link_to "blame", blame_file_project_ref_path(@project, @ref, :path => params[:path]), :class => "btn very_small"
11 11 - if file.text?
12 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 16 - else
18   - .view_file_content
  17 + .file_content.code
19 18 - unless file.empty?
20 19 %div{:class => current_user.dark_scheme ? "black" : "white"}
21 20 = preserve do
22 21 = raw file.colorize(options: { linenos: 'True'})
23 22 - else
24 23 %h4.nothing_here_message Empty file
  24 +
25 25 - elsif file.image?
26   - .view_file_content_image
  26 + .file_content.image_file
27 27 %img{ :src => "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
  28 +
28 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 11 %li= link
12 12 .clear
13 13  
14   - .view_file.blame_file
15   - .view_file_header
  14 + .file_holder
  15 + .file_title
16 16 %i.icon-file
17 17 %span.file_name
18 18 = @tree.name
... ... @@ -21,7 +21,7 @@
21 21 = link_to "raw", blob_project_ref_path(@project, @ref, :path => params[:path]), :class => "btn very_small", :target => "_blank"
22 22 = link_to "history", project_commits_path(@project, :path => params[:path], :ref => @ref), :class => "btn very_small"
23 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 25 %table
26 26 - @blame.each do |commit, lines|
27 27 - commit = Commit.new(commit)
... ... @@ -29,7 +29,7 @@
29 29 %td.author
30 30 = image_tag gravatar_icon(commit.author_email, 16)
31 31 = commit.author_name
32   - %td.commit
  32 + %td.blame_commit
33 33  
34 34 = link_to project_commit_path(@project, :id => commit.id) do
35 35 %code= commit.id.to_s[0..10]
... ...
app/views/snippets/show.html.haml
... ... @@ -7,16 +7,14 @@
7 7 = link_to "Edit", edit_project_snippet_path(@project, @snippet), :class => "btn small right"
8 8  
9 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 20 = render "notes/notes", :tid => @snippet.id, :tt => "snippet"
... ...