Adds CSS for desktop and mobile

4 files changed, 118 insertions, 17 deletions

diff --git a/app/assets/javascripts/commons/bootstrap.js b/app/assets/javascripts/commons/bootstrap.js
index 36bfe457be9..607d3d88df0 100644
--- a/app/assets/javascripts/commons/bootstrap.js
+++ b/app/assets/javascripts/commons/bootstrap.js
@@ -3,6 +3,7 @@ import $ from 'jquery';
 // bootstrap jQuery plugins
 import 'bootstrap-sass/assets/javascripts/bootstrap/affix';
 import 'bootstrap-sass/assets/javascripts/bootstrap/alert';
+import 'bootstrap-sass/assets/javascripts/bootstrap/button';
 import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown';
 import 'bootstrap-sass/assets/javascripts/bootstrap/modal';
 import 'bootstrap-sass/assets/javascripts/bootstrap/tab';
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 512f6b838ae..d870d8dda38 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -456,6 +456,7 @@ a.deploy-project-label {
   }
 }
 
+.project-template,
 .project-import {
   .form-group {
     margin-bottom: 5px;
@@ -470,7 +471,7 @@ a.deploy-project-label {
 
     .btn {
       padding: 8px;
-      margin-left: 10px;
+      margin-right: 10px;
     }
 
     > div {
@@ -482,23 +483,112 @@ a.deploy-project-label {
 
 .project-template {
   .project-templates-buttons {
-    i {
+    i,
+    img {
       display: block;
+      height: 24px;
       font-size: 24px;
-      margin-bottom: 4px;
+      margin: 4px auto;
     }
 
-    img {
-      display: block;
-      height: 24px;
-      margin: 0 auto 4px;
+    @media (max-width: $screen-md-max) {
+      i,
+      img {
+        display: inline-block;
+        height: 20px;
+        font-size: 14px;
+        margin: 0;
+      }
     }
   }
 
+  &:after {
+    content: "OR";
+    position: absolute;
+    color: $gray-darkest;
+    right: 13px;
+    z-index: 2;
+    top: 78px;
+  }
+
+  @media (max-width: $screen-md-max) {
     &:after {
-      content: "OR";
-      float: right;
+      top: 100%;
+      left: 49%;
+      margin-top: 10px;
+    }
+  }
+
+  @media (max-width: $screen-xs-min) {
+    &:after {
+      top: 100%;
+      left: 46%;
+      margin-top: 10px;
+    }
+  }
+
+  @media (min-width: $screen-xs-max) and (max-width: $screen-md-max) {
+    &:after {
+      top: 100%;
+      left: 49%;
+      margin-top: 10px;
     }
+  }
+
+}
+
+.new-project-first-column {
+  &:after {
+    background: $white-light;
+    content: " ";
+    position: absolute;
+    top: 66%;
+    height: 40px;
+    width: 20px;
+    right: 7px;
+    z-index: 1;
+  }
+
+  @media (min-width: $screen-xs-max) and (max-width: $screen-md-max) {
+    margin-bottom: 40px;
+    &:after {
+      top: 100%;
+      left: 47%;
+      width: 50px;
+    }
+  }
+
+  @media (max-width: $screen-xs-max) {
+    margin-bottom: 40px;
+
+    &:after {
+      top: 100%;
+      left: 42%;
+      width: 50px;
+    }
+  }
+}
+
+.new-project-second-column {
+  &:before {
+    background: $gray-darkest;
+    width: 1px;
+    height: 100%;
+    position: absolute;
+    left: -23px;
+    display: inline-block;
+    content: " ";
+  }
+
+  @media (max-width: $screen-md-max) {
+    &:before {
+      height: 1px;
+      left: 15px;
+      top: -20px;
+      right: 15px;
+      width: auto;
+    }
+  }
 }
 
 .project-stats {
diff --git a/app/views/projects/_project_templates.html.haml b/app/views/projects/_project_templates.html.haml
index 31438040ff3..8a3b5290f83 100644
--- a/app/views/projects/_project_templates.html.haml
+++ b/app/views/projects/_project_templates.html.haml
@@ -1,14 +1,24 @@
 
-.btn-group.project-templates-buttons{ data: { toggle: "buttons" }}
-  %label.btn.active
-    %input{ type: "radio",  autocomplete: "off", name: "project_templates" }
+.project-templates-buttons.import-buttons{ data: { toggle: "buttons" }}
+  %div.btn.btn-default.active
+    %input{ type: "radio",  autocomplete: "off", name: "project_templates", id: "blank", checked: "true" }
     = icon('file-o')
     Blank
   - Gitlab::ProjectTemplate.all.each do |template|
     -# The title should be the value posted to the controller, a pretty name to print would be
     -# template.name
-    %label.btn
-      %input{ type: "radio",  autocomplete: "off", name: "project_templates" }
+    %div.btn
+      %input{ type: "radio",  autocomplete: "off", name: "project_templates", id: template.name }
       = image_tag(template.logo_path)
       = template.title
 
+  %div.btn.btn-default
+    %input{ type: "radio",  autocomplete: "off", name: "project_templates", id: "blank" }
+    = icon('file-o')
+    Node Express
+
+
+  %div.btn.btn-default
+    %input{ type: "radio",  autocomplete: "off", name: "project_templates", id: "blank"}
+    = icon('file-o')
+    Java Spring
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 52041f5e38f..50013ee53b5 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -18,15 +18,15 @@
     .col-lg-9.js-toggle-container
       = form_for @project, html: { class: 'new_project' } do |f|
         .row
-          .col-lg-6.col-sm-12
+          .col-lg-6.col-sm-12.new-project-first-column
             .project-template
               .form_group.clearfix
                 = f.label :template_project, class: 'label-light' do
                   Create from template
                   = link_to icon('question-circle'), help_page_path("public_access/public_access"), aria: { label: "What's included in a template?" }, title: "What's included in a template?", class: 'has-tooltip', data: { placement: 'top'}
-                .col-sm-12.import-buttons
+                %div
                   = render 'project_templates', f: f
-          .col-lg-6.col-sm-12
+          .col-lg-6.col-sm-12.new-project-second-column
             - if import_sources_enabled?
               .project-import
                 .form-group.clearfix