CSS improvements & refactoring

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;
+  @include shade;
-  -webkit-box-shadow: 0 0 3px #ddd;
-  box-shadow: 0 0 3px #ddd;
 
   .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 { 
+    background:#fff;
-       padding:20px;
+    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;
+      }
+    }
   }
 }

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;
+      padding: 3px 10px;
-      background: #bbb;
+      margin-left:5px;
-      padding: 3px 20px;
       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 { 

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;
-      }
-    }
-  }
-}

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

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 );
     }
-  });
+  });

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"

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
+      .file_holder#README
-        %h3= content.name
+        .file_title
-        .readme
+          %i.icon-file
+          = content.name
+        .file_content.wiki
           - if content.name =~ /\.(md|markdown)$/i
             = preserve do
               = markdown(content.data)

app/views/refs/_tree_file.html.haml

@@ -1,5 +1,5 @@
-.view_file
+.file_holder
-  .view_file_header
+  .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
+      .file_content.wiki
-        .readme
+        = preserve do
-          = preserve do
+          = markdown(file.data)
-            = 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
+    .file_content.blob_file
-      = link_to blob_project_ref_path(@project, @ref, :path => params[:path]) do
+      %center
-        %div.padded
+        = link_to blob_project_ref_path(@project, @ref, :path => params[:path]) do
-          %br
+          %div.padded
-          = image_tag "download.png", :width => 64
+            %br
-          %h3
+            = image_tag "download.png", :width => 64
-            Download (#{file.mb_size})
+            %h3
+              Download (#{file.mb_size})

app/views/refs/blame.html.haml

@@ -11,8 +11,8 @@
       %li= link
   .clear
 
-  .view_file.blame_file
+  .file_holder
-    .view_file_header
+    .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
                
               = link_to project_commit_path(@project, :id => commit.id) do
                 %code= commit.id.to_s[0..10]

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
+.file_holder
-  #tree-content-holder
+  .file_title
-    .view_file
+    %i.icon-file
-      .view_file_header
+    %strong= @snippet.file_name
-        %i.icon-file
+    %span.options
-        %strong= @snippet.file_name
+      = link_to "raw", raw_project_snippet_path(@project, @snippet), :class => "btn very_small", :target => "_blank"
-        %span.options
+  .file_content.code
-          = link_to "raw", raw_project_snippet_path(@project, @snippet), :class => "btn very_small", :target => "_blank"
+    %div{:class => current_user.dark_scheme ? "black" : ""}
-      .view_file_content
+      = raw @snippet.colorize(options: { linenos: 'True'})
-        %div{:class => current_user.dark_scheme ? "black" : ""}
-          = raw @snippet.colorize(options: { linenos: 'True'})
 
 = render "notes/notes", :tid => @snippet.id, :tt => "snippet"