CSS improvements & refactoring

2012-07-10 20:15:33 +03:00 · 2012-07-10 20:15:33 +03:00 · d3862c0e57
parent b58326afc6
commit d3862c0e57
10 changed files with 156 additions and 183 deletions
--- a/app/assets/stylesheets/gitlab_bootstrap.scss
+++ b/app/assets/stylesheets/gitlab_bootstrap.scss
@ -642,9 +642,7 @@ pre.logs {
 .file_holder { 
  border:1px solid #CCC;
  margin-bottom:1em;
-  -moz-box-shadow: 0 0 3px #ddd;
-  -webkit-box-shadow: 0 0 3px #ddd;
-  box-shadow: 0 0 3px #ddd;
+  @include shade;

  .file_title { 
    border-bottom: 1px solid #bbb;
@ -661,10 +659,111 @@ pre.logs {
    padding: 9px 10px;
    height:18px;

+    .options { 
+      float:right;
+      margin-top: -5px;
+    }
+
+    .file_name { 
+      color:$style_color;
+      font-size:14px;
+      text-shadow: 0 1px 1px #fff;
+      small { 
+        color:#999;
+        font-size:13px;
+      }
+    }
  }
  .file_content {
-     &.wiki { 
-       padding:20px;
-     }
+    background:#fff;
+    color:#514721;
+    font-size: 11px;
+
+    &.wiki { 
+      code { 
+        padding:0 4px;
+      }
+      padding:20px;
+      h1, h2 {  
+        line-height: 46px;  
+      }  
+      h3, h4 {  
+        line-height: 40px;  
+      }  
+    }
+
+    &.image_file { 
+      background:#eee;
+      text-align:center;
+      img {
+        padding:100px;
+        max-width:300px;
+      }
+    }
+
+    &.blob_file { 
+
+    }
+
+    /**
+     *  Blame file
+     */
+    &.blame { 
+      tr { 
+        border-bottom: 1px solid #eee;
+      }
+      td { 
+        padding:5px;
+      }
+      .author, 
+      .blame_commit { 
+        background:#f5f5f5;
+        vertical-align:top;
+      }
+      .lines { 
+        pre { 
+          padding:0;
+          margin:0;
+          background:none;
+          border:none;
+        }
+      }
+    }
+
+    /**
+     *  Code file
+     */
+    &.code { 
+      padding:0;
+      td.code {
+        width: 100%;
+        .highlight {
+          margin-left: 55px;
+          overflow:auto;
+          overflow-y:hidden;
+        }
+      }
+      .highlight pre {
+        white-space: pre;
+        word-wrap:normal;
+      }
+
+      table.highlighttable {
+        border: none;
+      }
+      body.project-page table.highlighttable td { border: none }
+      table.highlighttable tr:hover { background:none;}
+
+      table.highlighttable pre{
+        line-height:16px !important;
+        font-size:12px !important;
+      }
+
+      table.highlighttable .linenodiv pre {
+        text-align: right;
+        padding-right: 4px;
+        color:#666;
+      }
+    }
  }
 }
--- a/app/assets/stylesheets/notes.scss
+++ b/app/assets/stylesheets/notes.scss
@ -63,18 +63,22 @@ p.notify_controls span{

 tr.line_notes_row { 
  border-bottom:1px solid #DDD;
+  border-left: 7px solid #2A79A3;
+
  &.reply { 
    background:#eee;
-
+    border-left: 7px solid #2A79A3;
+    border-top:1px solid #ddd;
    td { 
      padding:7px 10px;
    }
    a.line_note_reply_link { 
      @include round-borders-all(4px);
-      border-color:#aaa;
-      background: #bbb;
-      padding: 3px 20px;
+      padding: 3px 10px;
+      margin-left:5px;
      color: white;
+      background: #2A79A3;
+      border-color: #2A79A3;
    }
  }
  ul { 
@ -95,6 +99,9 @@ tr.line_notes_row {
  td { 
    border-bottom:1px solid #ddd;
  }
+  .actions { 
+    margin:0;
+  }
 }

 td .line_note_link { 
--- a/app/assets/stylesheets/sections/tree.scss
+++ b/app/assets/stylesheets/sections/tree.scss
@ -25,103 +25,6 @@
    }
  }

-
-  /** FILE CONTENT VIEW **/
-  .view_file_content{
-    .old_line, .new_line {
-      background:#ECECEC;
-      color:#777;
-      width:15px;
-      float:left;
-      padding: 0px 10px;
-      border-right: 1px solid #ccc;
-    }
-    .old_line{
-      display:none;
-    }
-  }
-
-  .view_file .view_file_header,
-  .diff_file .diff_file_header {
-    border-bottom: 1px solid #bbb;
-    background:#eee;
-    background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
-    background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
-    background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
-    background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
-    margin: 0;
-    font-weight: normal;
-    font-weight: bold;
-    text-align: left;
-    color: #666;
-    padding: 9px 10px;
-    height:18px;
-
-    .options { 
-      float:right;
-      margin-top: -5px;
-    }
-
-    .file_name { 
-      color:$style_color;
-      font-size:14px;
-      text-shadow: 0 1px 1px #fff;
-      small { 
-        color:#999;
-        font-size:13px;
-      }
-    }
-  }
-
-  .view_file {
-    border:1px solid #CCC;
-    margin-bottom:1em;
-
-    .view_file_content {
-      background:#fff;
-      color:#514721;
-      font-size: 11px;
-    }
-    .view_file_content_image {
-      background:#eee;
-      text-align:center;
-      img {
-        padding:100px;
-        max-width:300px;
-      }
-    }
-  }
-
-  td.code {
-    width: 100%;
-    .highlight {
-      margin-left: 55px;
-      overflow:auto;
-      overflow-y:hidden;
-    }
-  }
-  .highlight pre {
-    white-space: pre;
-    word-wrap:normal;
-  }
-
-  table.highlighttable {
-    border: none;
-  }
-  body.project-page table.highlighttable td { border: none }
-  table.highlighttable tr:hover { background:none;}
-
-  table.highlighttable pre{
-    line-height:16px !important;
-    font-size:12px !important;
-  }
-
-  table.highlighttable .linenodiv pre {
-    text-align: right;
-    padding-right: 4px;
-    color:#666;
-  }
-
  #tree-slider {
    @include border-radius(0);
    .tree-item { 
@ -183,21 +86,6 @@
    color:#333;
  }

-  #tree-content-holder .view_file{ 
-    @include shade;
-  }
-
-  #tree-readme-holder .readme { 
-    @include shade;
-    margin-bottom:20px;
-    h1, h2 {  
-      line-height: 56px;  
- 	  }  
-    h3, h4 {  
- 	    line-height: 46px;  
- 	  }  
-  }
-
  a.tree-commit-link { 
    color: #666;
    &:hover { 
@ -206,27 +94,3 @@
  }

 }
-
-.blame_file { 
-  .view_file_content {
-    tr { 
-      border-bottom: 1px solid #eee;
-    }
-    td { 
-      padding:5px;
-    }
-    .author, 
-    .commit { 
-      background:#f5f5f5;
-      vertical-align:top;
-    }
-    .lines { 
-      pre { 
-        padding:0;
-        margin:0;
-        background:none;
-        border:none;
-      }
-    }
-  }
-}
--- a/app/views/help/api.html.haml
+++ b/app/views/help/api.html.haml
@ -8,9 +8,9 @@
  %li 
    %a{:href => "#README"} README
  %li 
-    %a{:href => "#Projects"} Projects
+    %a{:href => "#projects"} Projects
  %li 
-    %a{:href => "#Users"} Users
+    %a{:href => "#users"} Users

 .file_holder#README
  .file_title
--- a/app/views/keys/new.html.haml
+++ b/app/views/keys/new.html.haml
@ -1,4 +1,4 @@
-%h3 New key
+%h3.page_title New key
 %hr
 = render 'form'

@ -11,4 +11,4 @@
    if( key_mail && key_mail.length > 0 && title.val() == '' ){
      $('#key_title').val( key_mail );
    }
-  });
+  });
--- a/app/views/notes/_reply_button.html.haml
+++ b/app/views/notes/_reply_button.html.haml
@ -1,3 +1,4 @@
 %tr.line_notes_row.reply
  %td{:colspan => 3}
+    %i.icon-comment
    = link_to "Reply", "#", :class => "line_note_reply_link", "line_code" => line_code, :title => "Add note for this line"
--- a/app/views/refs/_tree.html.haml
+++ b/app/views/refs/_tree.html.haml
@ -37,9 +37,11 @@
        = render :partial => "refs/submodule_item", :locals => { :content => content }

    - if content = contents.select{ |c| c.is_a?(Grit::Blob) and c.name =~ /^readme/i }.first
-      #tree-readme-holder
-        %h3= content.name
-        .readme
+      .file_holder#README
+        .file_title
+          %i.icon-file
+          = content.name
+        .file_content.wiki
          - if content.name =~ /\.(md|markdown)$/i
            = preserve do
              = markdown(content.data)
--- a/app/views/refs/_tree_file.html.haml
+++ b/app/views/refs/_tree_file.html.haml
@ -1,5 +1,5 @@
-.view_file
-  .view_file_header
+.file_holder
+  .file_title
    %i.icon-file
    %span.file_name
      = name
@ -10,26 +10,28 @@
      = link_to "blame", blame_file_project_ref_path(@project, @ref, :path => params[:path]), :class => "btn very_small"
  - if file.text?
    - if name =~ /\.(md|markdown)$/i
-      #tree-readme-holder
-        .readme
-          = preserve do
-            = markdown(file.data)
+      .file_content.wiki
+        = preserve do
+          = markdown(file.data)
    - else
-      .view_file_content
+      .file_content.code
        - unless file.empty?
          %div{:class => current_user.dark_scheme ? "black" : "white"}
            = preserve do
              = raw file.colorize(options: { linenos: 'True'})
        - else
          %h4.nothing_here_message Empty file
+
  - elsif file.image?
-    .view_file_content_image
+    .file_content.image_file
      %img{ :src => "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
+
  - else
-    %center
-      = link_to blob_project_ref_path(@project, @ref, :path => params[:path]) do
-        %div.padded
-          %br
-          = image_tag "download.png", :width => 64
-          %h3
-            Download (#{file.mb_size})
+    .file_content.blob_file
+      %center
+        = link_to blob_project_ref_path(@project, @ref, :path => params[:path]) do
+          %div.padded
+            %br
+            = image_tag "download.png", :width => 64
+            %h3
+              Download (#{file.mb_size})
--- a/app/views/refs/blame.html.haml
+++ b/app/views/refs/blame.html.haml
@ -11,8 +11,8 @@
      %li= link
  .clear

-  .view_file.blame_file
-    .view_file_header
+  .file_holder
+    .file_title
      %i.icon-file
      %span.file_name
        = @tree.name
@ -21,7 +21,7 @@
        = link_to "raw", blob_project_ref_path(@project, @ref, :path => params[:path]), :class => "btn very_small", :target => "_blank"
        = link_to "history", project_commits_path(@project, :path => params[:path], :ref => @ref), :class => "btn very_small"
        = link_to "source", tree_file_project_ref_path(@project, @ref, :path => params[:path]), :class => "btn very_small"
-    .view_file_content
+    .file_content.blame
      %table
        - @blame.each do |commit, lines|
          - commit = Commit.new(commit)
@ -29,7 +29,7 @@
            %td.author
              = image_tag gravatar_icon(commit.author_email, 16)
              = commit.author_name
-            %td.commit
+            %td.blame_commit
              &nbsp;
              = link_to project_commit_path(@project, :id => commit.id) do
                %code= commit.id.to_s[0..10]
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@ -7,16 +7,14 @@
    = link_to "Edit", edit_project_snippet_path(@project, @snippet), :class => "btn small right"

 %br
-#tree-holder
-  #tree-content-holder
-    .view_file
-      .view_file_header
-        %i.icon-file
-        %strong= @snippet.file_name
-        %span.options
-          = link_to "raw", raw_project_snippet_path(@project, @snippet), :class => "btn very_small", :target => "_blank"
-      .view_file_content
-        %div{:class => current_user.dark_scheme ? "black" : ""}
-          = raw @snippet.colorize(options: { linenos: 'True'})
+.file_holder
+  .file_title
+    %i.icon-file
+    %strong= @snippet.file_name
+    %span.options
+      = link_to "raw", raw_project_snippet_path(@project, @snippet), :class => "btn very_small", :target => "_blank"
+  .file_content.code
+    %div{:class => current_user.dark_scheme ? "black" : ""}
+      = raw @snippet.colorize(options: { linenos: 'True'})

 = render "notes/notes", :tid => @snippet.id, :tt => "snippet"