Merge branch 'ui-improvements' into 'master'

UI improvements

* Convert forked from button to text
* Refactor md variables
* Improve project fork page
* Style blob show page
* Style syntax highlight area for white theme

See merge request !1273

app/assets/stylesheets/base/mixins.scss

@@ -55,10 +55,10 @@
 }
 
 @mixin md-typography {
-  color: #444;
+  color: $md-text-color;
 
   a {
-    color: #3084bb;
+    color: $md-link-color;
   }
 
   img {

app/assets/stylesheets/base/variables.scss

@@ -2,6 +2,8 @@ $hover: #FFFAF1;
 $gl-text-color: #54565b;
 $gl-header-color: #4c4e54;
 $gl-link-color: #333c48;
+$md-text-color: #444;
+$md-link-color: #3084bb;
 $nprogress-color: #c0392b;
 $gl-font-size: 15px;
 $list-font-size: 15px;

app/assets/stylesheets/generic/files.scss

@@ -3,7 +3,11 @@
  *
  */
 .file-holder {
-  border: 1px solid $border-color;
+  margin-left: -$gl-padding;
+  margin-right: -$gl-padding;
+  border: none;
+  border-top: 1px solid #E7E9EE;
+  border-bottom: 1px solid #E7E9EE;
   margin-bottom: 1em;
 
   table {
@@ -49,7 +53,7 @@
     }
 
     &.wiki {
-      padding: 25px;
+      padding: $gl-padding;
 
       .highlight {
         margin-bottom: 9px;
@@ -90,7 +94,7 @@
           border-right: none;
         }
         background: #fff;
-        padding: 8px;
+        padding: 10px $gl-padding;
       }
       .lines {
         pre {
@@ -100,6 +104,33 @@
           border: none;
         }
       }
+      img.avatar {
+        border: 0 none;
+        float: none;
+        margin: 0;
+        padding: 0;
+      }
+      td.blame-commit {
+        background: #f9f9f9;
+        min-width: 350px;
+
+        .commit-author-link {
+          color: #888;
+        }
+      }
+      td.blame-numbers {
+        pre {
+          color: #AAA;
+          white-space: pre;
+        }
+        background: #f1f1f1;
+        border-left: 1px solid #DDD;
+      }
+      td.lines {
+        code {
+          font-family: $monospace_font;
+        }
+      }
     }
 
     &.logs {

app/assets/stylesheets/highlight/white.scss

@@ -5,15 +5,19 @@ pre.code.highlight.white,
   background-color: #fff;
   color: #333;
 
-  pre.highlight,
   .line-numbers,
   .line-numbers a {
+    background-color: $background-color !important;
+    color: $gl-gray !important;
+  }
+
+  pre.highlight {
     background-color: #fff !important;
     color: #333 !important;
   }
 
   pre.code {
-    border-left: 1px solid #bbb;
+    border-left: 1px solid $border-color;
   }
 
   // highlight line via anchor

app/assets/stylesheets/pages/diff.scss

 .diff-file {
-  margin-left: -16px;
-  margin-right: -16px;
+  margin-left: -$gl-padding;
+  margin-right: -$gl-padding;
   border: none;
   border-bottom: 1px solid #E7E9EE;
 
@@ -8,7 +8,7 @@
     position: relative;
     background: $background-color;
     border-bottom: 1px solid $border-color;
-    padding: 10px 15px;
+    padding: 10px 16px;
     color: #555;
     z-index: 10;
 

app/assets/stylesheets/pages/projects.scss

@@ -48,7 +48,6 @@
 
     p {
       color: #7f8fa4;
-      display: inline;
     }
   }
 
@@ -204,26 +203,18 @@ ul.nav.nav-projects-tabs {
 }
 
 .fork-namespaces {
-  .thumbnail {
+  .fork-thumbnail {
+    text-align: center;
+    margin-bottom: $gl-padding;
 
-    &.fork-exists-thumbnail {
-      border-color: #EEE;
-
-      .caption {
-        color: #999;
-      }
-    }
-
-    &.fork-thumbnail {
-      border-color: #AAA;
-
-      &:hover {
-        background-color: $hover;
-      }
+    .caption {
+      padding: $gl-padding 0;
+      min-height: 30px;
     }
 
-    a {
-      text-decoration: none;
+    img {
+      @include border-radius(50%);
+      max-width: 100px;
     }
   }
 }

app/assets/stylesheets/pages/tree.scss

@@ -78,36 +78,6 @@
       }
     }
   }
-
-  .blame {
-    img.avatar {
-      border: 0 none;
-      float: none;
-      margin: 0;
-      padding: 0;
-    }
-    td.blame-commit {
-      background: #f9f9f9;
-      min-width: 350px;
-
-      .commit-author-link {
-        color: #888;
-      }
-    }
-    td.blame-numbers {
-      pre {
-        color: #AAA;
-        white-space: pre;
-      }
-      background: #f1f1f1;
-      border-left: 1px solid #DDD;
-    }
-    td.lines {
-      code {
-        font-family: $monospace_font;
-      }
-    }
-  }
 }
 
 .tree-ref-holder {
@@ -132,17 +102,14 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
 
   .commit {
-    padding: 10px 15px;
+    padding: $gl-padding 0;
 
     .commit-row-title {
-      font-size: 13px;
-
       .commit-row-message {
         font-weight: normal;
-        color: #555;
       }
     }
   }

app/views/projects/_home_panel.html.haml

@@ -7,6 +7,13 @@
     - if @project.description.present?
       = markdown(@project.description, pipeline: :description)
 
+    - if forked_from_project = @project.forked_from_project
+      %p
+        Forked from
+        = link_to project_path(forked_from_project) do
+          = forked_from_project.namespace.try(:name)
+
+
 
   .project-repo-buttons
     = render 'projects/buttons/star'
@@ -14,12 +21,6 @@
     - unless empty_repo
       = render 'projects/buttons/fork'
 
-      - if forked_from_project = @project.forked_from_project
-        = link_to project_path(forked_from_project), class: 'btn' do
-          = icon("code-fork fw")
-          Forked from
-          = forked_from_project.namespace.try(:name)
-
       - if can? current_user, :download_code, @project
         = link_to archive_namespace_project_repository_path(@project.namespace, @project, ref: @ref, format: 'zip'), class: 'btn', rel: 'nofollow' do
           = icon('download fw')

app/views/projects/blob/_blob.html.haml

@@ -15,7 +15,7 @@
       - else
         = link_to title, '#'
 
-%ul.blob-commit-info.well.hidden-xs
+%ul.blob-commit-info.hidden-xs
   - blob_commit = @repository.last_commit_for_path(@commit.id, blob.path)
   = render blob_commit, project: @project
 

app/views/projects/forks/new.html.haml

@@ -10,21 +10,22 @@
       - group.each do |namespace|
         .col-md-2.col-sm-3
           - if fork = namespace.find_fork_of(@project)
-            .thumbnail.fork-exists-thumbnail
+            .fork-thumbnail
               = link_to project_path(fork), title: "Visit project fork", class: 'has_tooltip' do
-                = image_tag namespace_icon(namespace, 200)
+                = image_tag namespace_icon(namespace, 100)
                 .caption
-                  %h4=namespace.human_name
-                  %p
-                    = namespace.path
+                  %strong
+                    = namespace.human_name
+                  %div.text-primary
+                    Already forked
+
           - else
-            .thumbnail.fork-thumbnail
+            .fork-thumbnail
               = link_to namespace_project_fork_path(@project.namespace, @project, namespace_key: namespace.id), title: "Fork here", method: "POST", class: 'has_tooltip' do
-                = image_tag namespace_icon(namespace, 200)
+                = image_tag namespace_icon(namespace, 100)
                 .caption
-                  %h4=namespace.human_name
-                  %p
-                    = namespace.path
+                  %strong
+                    = namespace.human_name
 
   %p.light
     Fork is a copy of a project repository.