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 | 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
app/views/keys/new.html.haml
app/views/notes/_reply_button.html.haml
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" | ... | ... |