Improved file browse page, prepared for downloads tab

app/assets/stylesheets/common.scss

@@ -583,13 +583,6 @@ ul.bordered-list li:last-child { border:none }
   }
 }
 
-.project-refs-form.commit-refs-form .chzn-container {
-  position: relative;
-  top: 0;
-  left: 0;
-  margin-right: 10px;
-}
-
 li.commit { 
   .avatar { 
     width:24px;

app/assets/stylesheets/highlight.scss

@@ -10,7 +10,8 @@ table.highlighttable
   margin:0px;
   padding:0px;
   font-size:12px;
-  table-layout:fixed
+  table-layout:fixed;
+  background: #F7F7F7;
 }
 
 td.code,
@@ -25,6 +26,8 @@ td.linenos{
   background:none;
   padding:10px 0px 0px 10px;
   margin-left:0px;
+  border-left: 1px solid #DEE2E3;
+  background: white;
 }
 
 .linenodiv pre,

app/assets/stylesheets/ref_select.scss

@@ -13,9 +13,10 @@
 }
 
 .project-refs-form .chzn-container { 
-  position:relative;
+  position: relative;
-  top: -5px;
+  top: 0;
-  left: -11px;
+  left: 0;
+  margin-right: 10px;
 
   .chzn-drop { 
     margin:7px 0;

app/assets/stylesheets/tree.scss

@@ -1,189 +1,178 @@
-#tree-content-holder {
+#tree-holder { 
-  float:left;
+  #tree-content-holder {
-  width:100%;
-}
-#tree-readme-holder {
-  float:left;
-  width:100%;
-  .readme {
-    @include round-borders-all(4px);
-    padding:4px 15px;
-    background: #F7F7F7;
-  }
-}
-#tree-breadcrumbs { 
-  div {
-    margin:0;
-    margin-bottom:20px;
     float:left;
-    font-size:14px;
+    width:100%;
   }
-}
+  #tree-readme-holder {
-
-.tree_progress { 
-  display:none;
-  margin:20px;
-  &.loading { 
-    display:block;
-  }
-}
-
-
-/** FILE CONTENT VIEW **/
-.view_file_content{
-  .old_line, .new_line {
-    background:#ECECEC;
-    color:#777;
-    width:15px;
     float:left;
-    padding: 0px 10px;
+    width:100%;
-    border-right: 1px solid #ccc;
+    .readme {
+      @include round-borders-all(4px);
+      padding:4px 15px;
+      background: #F7F7F7;
+    }
   }
-  .old_line{
+
+  .tree_progress { 
     display:none;
+    margin:20px;
+    &.loading { 
+      display:block;
+    }
   }
-}
 
-.view_file .view_file_header,
+
-.diff_file .diff_file_header {
+  /** FILE CONTENT VIEW **/
-    background-image: -webkit-gradient(linear, 0 0, 0 26, color-stop(0.076, #fefefe), to(#F6F7F8));
+  .view_file_content{
-    background-image: -webkit-linear-gradient(#fefefe 7.6%, #F6F7F8);
+    .old_line, .new_line {
-    background-image: -moz-linear-gradient(#fefefe 7.6%, #F6F7F8);
+      background:#ECECEC;
-    background-image: -o-linear-gradient(#fefefe 7.6%, #F6F7F8);
+      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 {
+    background:#f5f5f5;
     margin: 0;
     font-weight: normal;
     font-weight: bold;
     text-align: left;
     color: #666;
-    border-bottom: 1px solid #DEE2E3;
+    border-bottom: 1px solid #ccc;
     padding: 7px 10px;
 
     .mode_text,
     .file_icon { 
-      margin-right:15px;
-      padding-right:15px;
-      border-right:1px solid $lite_border_color;
-      float:left;
       color:#aaa;
     }
-
-    .file_icon { 
-      padding-left:15px;
-    }
-}
-
-.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;
+  .view_file {
-    text-align:center;
+    border:1px solid #CCC;
-    img {
+    margin-bottom:1em;
-      padding:100px;
+
-      max-width:300px;
+    .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 {
+  td.code {
-  width: 100%;
+    width: 100%;
-  .highlight {
+    .highlight {
-    margin-left: 55px;
+      margin-left: 55px;
-    overflow:auto;
+      overflow:auto;
-    overflow-y:hidden;
+      overflow-y:hidden;
-    border-left: 1px solid #DEE2E3;
+    }
-    background: white;
   }
-}
+  .highlight pre {
-.highlight pre {
+    white-space: pre;
-  white-space: pre;
+    word-wrap:normal;
-  word-wrap:normal;
-}
-
-table.highlighttable {
-  border: none;
-  background: #F7F7F7;
-}
-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:#888;
-}
-
-.tree-item { 
-  &:hover { 
-    background: $hover;
-    cursor:pointer;
   }
 
+  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:#888;
+  }
+
+  .tree-item { 
+    &:hover { 
+      background: $hover;
+      cursor:pointer;
+    }
+
+
+    .tree-item-file-name { 
+      font-weight:bold;
+      a { 
+        color:$style_color;
+      }
+
+      img { 
+        position: relative;
+        top: 2px;
+      }
+    }
+  }
+
+  ul.breadcrumb {
+    background:white;
+    border:none;
 
-  .tree-item-file-name { 
-    font-weight:bold;
     a { 
-      color:$style_color;
+      color:#666;
-    }
+      font-weight:bold;
-
+      font-size:14px;
-    img { 
-      position: relative;
-      top: 2px;
     }
   }
-}
 
-.breadcrumb {
+  #tree-slider { 
-  background:white;
+    @include shade;
-  border:none;
 
-  a { 
+    td { 
-    color:$link_color;
+      padding:7px;
-    font-weight:bold;
+      border-color:#f1f1f1;
-    font-size:13px;
+    }
-  }
-}
 
-#tree-slider { 
+    th { 
-  @include shade;
+      background:#f5f5f5;
-
+    }
-  td { 
-    padding:7px;
-    border-color:#f1f1f1;
   }
 
-  th { 
+  .tree-commit-link { 
-    background:#f5f5f5;
+    color:#333;
-  }
+  }
-}
+
-
+  #tree-content-holder .view_file{ 
-.tree-commit-link { 
+    @include shade;
-  color:#333;
+  }
-}
+
-
+  #tree-readme-holder .readme { 
-#tree-content-holder .view_file{ 
+    @include shade;
-  @include shade;
+    margin-bottom:20px;
-}
+  }
-
+
-#tree-readme-holder .readme { 
+  a.tree-commit-link { 
-  @include shade;
+    color: #666;
-  margin-bottom:20px;
+    &:hover { 
-}
+      text-decoration: underline;
-
+    }
-a.tree-commit-link { 
+  }
-  color: #666;
+
-  &:hover { 
+  .arrow { 
-    text-decoration: underline;
+    background: url("images.png") no-repeat -85px -77px;
+    width: 19px;
+    height: 16px;
+    float: left;
+    position: relative;
+    left: -10px;
   }
 }

app/views/commits/_head.html.haml

@@ -1,6 +1,6 @@
 %ul.tabs
   %li
-    = form_tag switch_project_refs_path(@project), :method => :get, :class => "project-refs-form commit-refs-form" do
+    = form_tag switch_project_refs_path(@project), :method => :get, :class => "project-refs-form" do
       = select_tag "ref", grouped_options_refs, :onchange => "$(this.form).trigger('submit');", :class => "project-refs-select"
       = hidden_field_tag :destination, "commits"
 

app/views/refs/_tree.html.haml

@@ -1,13 +1,8 @@
 %ul.breadcrumb
   %li
-    = form_tag switch_project_refs_path(@project), :method => :get, :class => "project-refs-form left", :remote => true do
+    %span.arrow
-      = select_tag "ref", grouped_options_refs, :onchange => "$(this.form).trigger('submit');", :class => "project-refs-select"
-      = hidden_field_tag :destination, "tree"
-      = hidden_field_tag :path, params[:path]
-
-  %li
     = link_to tree_project_ref_path(@project, @ref, :path => nil), :remote => true do
-      = @project.code
+      = @project.name
   - tree.breadcrumbs(6) do |link|
     \/
     %li= link

app/views/refs/_tree_file.html.haml

@@ -1,13 +1,13 @@
 :css
 .view_file
   .view_file_header
-    %strong
+    .row
-      %span.file_icon= image_tag "txt.png"
+      .span1.file_icon= image_tag "txt.png"
-      %span.mode_text= file.mode
+      .span2.mode_text= file.mode
-      %span.file_name= name
+      .span7.file_name= name
-      = link_to "raw", blob_project_ref_path(@project, @ref, :path => params[:path] ), :class => "right", :target => "_blank"
+      .span4.right
-      = link_to "history", project_commits_path(@project, :path => params[:path], :ref => @ref ), :class => "right", :style => "margin-right:10px;"
+        = link_to "raw", blob_project_ref_path(@project, @ref, :path => params[:path] ), :class => "right", :target => "_blank"
-      %br/
+        = link_to "history", project_commits_path(@project, :path => params[:path], :ref => @ref ), :class => "right", :style => "margin-right:10px;"
   - if file.text?
     .view_file_content
       - unless file.empty?

app/views/refs/tree.html.haml

@@ -1,3 +1,13 @@
+%ul.tabs
+  %li
+    = form_tag switch_project_refs_path(@project), :method => :get, :class => "project-refs-form", :remote => true do
+      = select_tag "ref", grouped_options_refs, :onchange => "$(this.form).trigger('submit');", :class => "project-refs-select"
+      = hidden_field_tag :destination, "tree"
+      = hidden_field_tag :path, params[:path]
+  %li{:class => "#{'active' if (controller.controller_name == "refs") }"}
+    = link_to tree_project_ref_path(@project, @ref) do 
+      Code
+
 #tree-holder= render :partial => "tree", :locals => {:repo => @repo, :commit => @commit, :tree => @tree}
 
 :javascript