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" |