update design of wiki git access page

2 files changed, 54 insertions, 32 deletions

diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss
index 78edff35aa7..ab9c2e2e3e1 100644
--- a/app/assets/stylesheets/pages/wiki.scss
+++ b/app/assets/stylesheets/pages/wiki.scss
@@ -8,10 +8,6 @@
 .top-area {
   position: relative;
 
-  &.sub-header-block {
-    padding-right: 40px;
-  }
-
   button.sidebar-toggle {
     position: absolute;
     right: 0;
@@ -24,10 +20,7 @@
   }
 
   @media (min-width: $screen-md-min) {
-    &,
-    &.sub-header-block {
-      padding-right: 0;
-    }
+    padding-right: 0;
 
     button.sidebar-toggle {
       display: none;
@@ -35,6 +28,37 @@
   }
 }
 
+.wiki-page-header {
+  @extend .top-area;
+
+  .git-access-header {
+    padding: 16px 0 11px;
+    line-height: 28px;
+    font-size: 18px;
+  }
+
+  .git-clone-holder {
+    width: 480px;
+    padding-bottom: 40px;
+  }
+
+  @media (max-width: $screen-xs-max) {
+    .git-clone-holder {
+      width: 100%;
+    }
+  }
+}
+
+.wiki-git-access {
+  margin: $gl-padding 0;
+
+  h3 {
+    font-size: 22px;
+    font-weight: normal;
+    margin-top: 1.4em;
+  }
+}
+
 .right-sidebar.wiki-sidebar {
   padding: $gl-padding 0;
 
diff --git a/app/views/projects/wikis/git_access.html.haml b/app/views/projects/wikis/git_access.html.haml
index 871a67b87cd..c148f65eb3e 100644
--- a/app/views/projects/wikis/git_access.html.haml
+++ b/app/views/projects/wikis/git_access.html.haml
@@ -2,37 +2,35 @@
 - page_title "Git Access", "Wiki"
 
 %div{ class: container_class }
-  .top-area.sub-header-block
+  .wiki-page-header
     %button.btn.btn-default.visible-xs.visible-sm.pull-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
       = icon('angle-double-left')
 
-    %span.oneline
-      Git access for
+    .git-access-header
+      Clone repository
       %strong= @project_wiki.path_with_namespace
 
-    .pull-right
-      = render "shared/clone_panel", project: @project_wiki
+    = render "shared/clone_panel", project: @project_wiki
 
-  .prepend-top-default
-    %fieldset
-      %legend Install Gollum:
-      %pre.dark
-        :preserve
-          gem install gollum
+  .wiki-git-access
+    %h3 Install Gollum
+    %pre.dark
+      :preserve
+        gem install gollum
 
-      %legend Clone Your Wiki:
-      %pre.dark
-        :preserve
-          git clone #{ content_tag(:span, default_url_to_repo(@project_wiki), class: 'clone')}
-          cd #{h @project_wiki.path}
+    %h3 Clone your wiki
+    %pre.dark
+      :preserve
+        git clone #{ content_tag(:span, default_url_to_repo(@project_wiki), class: 'clone')}
+        cd #{h @project_wiki.path}
 
-      %legend Start Gollum And Edit Locally:
-      %pre.dark
-        :preserve
-          gollum
-          == Sinatra/1.3.5 has taken the stage on 4567 for development with backup from Thin
-          >> Thin web server (v1.5.0 codename Knife)
-          >> Maximum connections set to 1024
-          >> Listening on 0.0.0.0:4567, CTRL+C to stop
+    %h3 Start Gollum and edit locally
+    %pre.dark
+      :preserve
+        gollum
+        == Sinatra/1.3.5 has taken the stage on 4567 for development with backup from Thin
+        >> Thin web server (v1.5.0 codename Knife)
+        >> Maximum connections set to 1024
+        >> Listening on 0.0.0.0:4567, CTRL+C to stop
 
 = render 'sidebar'