Merge branch 'jivl-fix-create-project-template-buttons' into 'master'

Fix use template buttons for creating a new project

Closes #47580

See merge request gitlab-org/gitlab-ce!19654

4 files changed, 33 insertions, 36 deletions

diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
index 888b1d6ce33..002edb4663c 100644
--- a/app/assets/javascripts/projects/project_new.js
+++ b/app/assets/javascripts/projects/project_new.js
@@ -90,7 +90,7 @@ const bindEvents = () => {
   function chooseTemplate() {
     $('.template-option').hide();
     $projectFieldsForm.addClass('selected');
-    $selectedIcon.removeClass('active');
+    $selectedIcon.removeClass('d-block');
     const value = $(this).val();
     const templates = {
       rails: {
@@ -109,7 +109,7 @@ const bindEvents = () => {
 
     const selectedTemplate = templates[value];
     $selectedTemplateText.text(selectedTemplate.text);
-    $(selectedTemplate.icon).addClass('active');
+    $(selectedTemplate.icon).addClass('d-block');
     $templateProjectNameInput.focus();
   }
 
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index 810ed5bb0a6..5da0e672288 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -293,3 +293,9 @@ input[type=color].form-control {
     color: $gl-text-color-secondary;
   }
 }
+
+.project-templates-buttons {
+  .btn {
+    vertical-align: unset;
+  }
+}
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index caafda5fb05..7ac0eaec645 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -497,6 +497,12 @@
     &:not(:first-child) {
       border-top: 1px solid $border-color;
     }
+
+    .btn-template-icon {
+      position: absolute;
+      left: $gl-padding;
+      top: $gl-padding;
+    }
   }
 
   .template-title {
@@ -514,12 +520,6 @@
     }
   }
 
-  svg {
-    position: absolute;
-    left: $gl-padding;
-    top: $gl-padding;
-  }
-
   .project-fields-form {
     display: none;
 
@@ -530,34 +530,23 @@
   }
 
   .template-input-group {
-    position: relative;
-
-    @include media-breakpoint-up(sm) {
-      display: flex;
-    }
-
-    .input-group-prepend,
-    .input-group-append {
+    .input-group-prepend {
       flex: 1;
-      text-align: left;
-      padding-left: ($gl-padding * 3);
-      background-color: $white-light;
     }
 
-    .selected-template {
-      line-height: 20px;
+    .input-group-text {
+      width: 100%;
+      background-color: $white-light;
     }
 
     .selected-icon {
+      padding-right: $gl-padding;
+
       svg {
         display: none;
         top: 7px;
         height: 20px;
         width: 20px;
-
-        &.active {
-          display: block;
-        }
       }
     }
   }
diff --git a/app/views/projects/_project_templates.html.haml b/app/views/projects/_project_templates.html.haml
index 9d27f51926e..d08807b5135 100644
--- a/app/views/projects/_project_templates.html.haml
+++ b/app/views/projects/_project_templates.html.haml
@@ -10,16 +10,18 @@
       %a.btn.btn-default{ href: template.preview, rel: 'noopener noreferrer', target: '_blank' } Preview
 
   .project-fields-form
-    .form-group
-      %label.label-light
-        Template
-      .input-group.template-input-group
-        .input-group-prepend
-          .input-group-text
-            .selected-icon
-              - Gitlab::ProjectTemplate.all.each do |template|
-                = custom_icon(template.logo)
-            .selected-template
-        %button.btn.btn-default.change-template{ type: "button" } Change template
+    .row
+      .form-group.col-sm-12
+        %label.label-light
+          Template
+        .input-group.template-input-group
+          .input-group-prepend
+            .input-group-text
+              .selected-icon
+                - Gitlab::ProjectTemplate.all.each do |template|
+                  = custom_icon(template.logo)
+              .selected-template
+          .input-group-append
+            %button.btn.btn-default.change-template{ type: "button" } Change template
 
     = render 'new_project_fields', f: f, project_name_id: "template-project-name"