Styles html according to mockup

2 files changed, 69 insertions, 56 deletions

diff --git a/app/views/projects/_project_templates.html.haml b/app/views/projects/_project_templates.html.haml
index bef64ca7433..31438040ff3 100644
--- a/app/views/projects/_project_templates.html.haml
+++ b/app/views/projects/_project_templates.html.haml
@@ -1,8 +1,14 @@
-.col-sm-12.template-buttons
+
+.btn-group.project-templates-buttons{ data: { toggle: "buttons" }}
+  %label.btn.active
+    %input{ type: "radio",  autocomplete: "off", name: "project_templates" }
+    = 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
-    = template.title
-    = image_tag(template.logo_path)
+    %label.btn
+      %input{ type: "radio",  autocomplete: "off", name: "project_templates" }
+      = image_tag(template.logo_path)
+      = template.title
 
-  = f.text_field :template_title, placeholder: "rails", class: "form-control", tabindex: 2, autofocus: true, required: true
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index c01645e2ec9..7bcdea3b59e 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -15,61 +15,68 @@
       - if import_sources_enabled?
         %p
           Create or Import your project from popular Git services
-    .col-lg-9
+    .col-lg-9.js-toggle-container
       = form_for @project, html: { class: 'new_project' } do |f|
-        .project-template.js-toggle-container
-          .form_group.clearfix
-            = f.label :template_project, class: 'label-light' do
-              Start from template
-            .col-sm-12.import-buttons
-              = render 'project_templates', f: f
-
-        - if import_sources_enabled?
-          .project-import.js-toggle-container
-            .form-group.clearfix
-              = f.label :visibility_level, class: 'label-light' do #the label here seems wrong
-                Import project from
-              .col-sm-12.import-buttons
-                %div
-                  - if github_import_enabled?
-                    = link_to new_import_github_path, class: 'btn import_github' do
-                      = icon('github', text: 'GitHub')
-                %div
-                  - if bitbucket_import_enabled?
-                    = link_to status_import_bitbucket_path, class: "btn import_bitbucket #{'how_to_import_link' unless bitbucket_import_configured?}" do
-                      = icon('bitbucket', text: 'Bitbucket')
-                    - unless bitbucket_import_configured?
-                      = render 'bitbucket_import_modal'
-                %div
-                  - if gitlab_import_enabled?
-                    = link_to status_import_gitlab_path, class: "btn import_gitlab #{'how_to_import_link' unless gitlab_import_configured?}" do
-                      = icon('gitlab', text: 'GitLab.com')
-                    - unless gitlab_import_configured?
-                      = render 'gitlab_import_modal'
-                %div
-                  - if google_code_import_enabled?
-                    = link_to new_import_google_code_path, class: 'btn import_google_code' do
-                      = icon('google', text: 'Google Code')
-                %div
-                  - if fogbugz_import_enabled?
-                    = link_to new_import_fogbugz_path, class: 'btn import_fogbugz' do
-                      = icon('bug', text: 'Fogbugz')
-                %div
-                  - if gitea_import_enabled?
-                    = link_to new_import_gitea_url, class: 'btn import_gitea' do
-                      = custom_icon('go_logo')
-                      Gitea
-                %div
-                  - if git_import_enabled?
-                    %button.btn.js-toggle-button.import_git{ type: "button" }
-                      = icon('git', text: 'Repo by URL')
-                .import_gitlab_project.has-tooltip{ data: { container: 'body' } }
-                  - if gitlab_project_import_enabled?
-                    = link_to new_import_gitlab_project_path, class: 'btn btn_import_gitlab_project project-submit' do
-                      = icon('gitlab', text: 'GitLab export')
+        .row
+          .col-lg-6
+            .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
+                  = render 'project_templates', f: f
+          .col-lg-6
+            - if import_sources_enabled?
+              .project-import
+                .form-group.clearfix
+                  = f.label :visibility_level, class: 'label-light' do #the label here seems wrong
+                    Import project from
+                  .col-sm-12.import-buttons
+                    %div
+                      - if github_import_enabled?
+                        = link_to new_import_github_path, class: 'btn import_github' do
+                          = icon('github', text: 'GitHub')
+                    %div
+                      - if bitbucket_import_enabled?
+                        = link_to status_import_bitbucket_path, class: "btn import_bitbucket #{'how_to_import_link' unless bitbucket_import_configured?}" do
+                          = icon('bitbucket', text: 'Bitbucket')
+                        - unless bitbucket_import_configured?
+                          = render 'bitbucket_import_modal'
+                    %div
+                      - if gitlab_import_enabled?
+                        = link_to status_import_gitlab_path, class: "btn import_gitlab #{'how_to_import_link' unless gitlab_import_configured?}" do
+                          = icon('gitlab', text: 'GitLab.com')
+                        - unless gitlab_import_configured?
+                          = render 'gitlab_import_modal'
+                    %div
+                      - if google_code_import_enabled?
+                        = link_to new_import_google_code_path, class: 'btn import_google_code' do
+                          = icon('google', text: 'Google Code')
+                    %div
+                      - if fogbugz_import_enabled?
+                        = link_to new_import_fogbugz_path, class: 'btn import_fogbugz' do
+                          = icon('bug', text: 'Fogbugz')
+                    %div
+                      - if gitea_import_enabled?
+                        = link_to new_import_gitea_url, class: 'btn import_gitea' do
+                          = custom_icon('go_logo')
+                          Gitea
+                    %div
+                      - if git_import_enabled?
+                        %button.btn.js-toggle-button.import_git{ type: "button" }
+                          = icon('git', text: 'Repo by URL')
+                    .import_gitlab_project.has-tooltip{ data: { container: 'body' } }
+                      - if gitlab_project_import_enabled?
+                        = link_to new_import_gitlab_project_path, class: 'btn btn_import_gitlab_project project-submit' do
+                          = icon('gitlab', text: 'GitLab export')
 
+        .row
+          .col-lg-12
             .js-toggle-content.hide
-              = render "shared/import_form", f: f
+              %hr
+                = render "shared/import_form", f: f
+        %hr.js-toggle-content.hide
 
         .row
           .form-group.col-xs-12.col-sm-6