Merge branch 'milestone-form-redesign' into 'master'

Milestone form: rearrange input fields

See merge request gitlab-org/gitlab!65718

app/views/groups/milestones/_form.html.haml

 = form_for [@group, @milestone], html: { class: 'milestone-form common-note-form js-quick-submit js-requires-input' } do |f|
   = form_errors(@milestone)
-  .row
-    .col-md-6
-      .form-group.row
-        .col-form-label.col-sm-2
-          = f.label :title, _("Title")
-        .col-sm-10
-          = f.text_field :title, maxlength: 255, class: "form-control", data: { qa_selector: "milestone_title_field" }, required: true, autofocus: true
-      .form-group.row.milestone-description
-        .col-form-label.col-sm-2
-          = f.label :description, _("Description")
-        .col-sm-10
-          = render layout: 'shared/md_preview', locals: { url: group_preview_markdown_path } do
-            = render 'shared/zen', f: f, attr: :description,
-                                    classes: 'note-textarea',
-                                    qa_selector: 'milestone_description_field',
-                                    supports_autocomplete: true,
-                                    placeholder: _('Write milestone description...')
-          .clearfix
-          .error-alert
-    = render "shared/milestones/form_dates", f: f
+  .form-group.row
+    .col-form-label.col-sm-2
+      = f.label :title, _("Title")
+    .col-sm-10
+      = f.text_field :title, maxlength: 255, class: "form-control", data: { qa_selector: "milestone_title_field" }, required: true, autofocus: true
+  = render "shared/milestones/form_dates", f: f
+  .form-group.row.milestone-description
+    .col-form-label.col-sm-2
+      = f.label :description, _("Description")
+    .col-sm-10
+      = render layout: 'shared/md_preview', locals: { url: group_preview_markdown_path } do
+        = render 'shared/zen', f: f, attr: :description,
+                                classes: 'note-textarea',
+                                qa_selector: 'milestone_description_field',
+                                supports_autocomplete: true,
+                                placeholder: _('Write milestone description...')
+      .clearfix
+      .error-alert
 
   .form-actions
     - if @milestone.new_record?

app/views/projects/milestones/_form.html.haml

 = form_for [@project, @milestone],
            html: { class: 'milestone-form common-note-form js-quick-submit js-requires-input' } do |f|
   = form_errors(@milestone)
-  .row
-    .col-md-6
-      .form-group.row
-        .col-form-label.col-sm-2
-          = f.label :title, _('Title')
-        .col-sm-10
-          = f.text_field :title, maxlength: 255, class: 'form-control gl-form-input', data: { qa_selector: 'milestone_title_field' }, required: true, autofocus: true
-      .form-group.row.milestone-description
-        .col-form-label.col-sm-2
-          = f.label :description, _('Description')
-        .col-sm-10
-          = render layout: 'shared/md_preview', locals: { url: preview_markdown_path(@project) } do
-            = render 'shared/zen', f: f, attr: :description,
-                                    classes: 'note-textarea',
-                                    qa_selector: 'milestone_description_field',
-                                    supports_autocomplete: true,
-                                    placeholder: _('Write milestone description...')
-            = render 'shared/notes/hints'
-          .clearfix
-          .error-alert
-    = render 'shared/milestones/form_dates', f: f
+  .form-group.row
+    .col-form-label.col-sm-2
+      = f.label :title, _('Title')
+    .col-sm-10
+      = f.text_field :title, maxlength: 255, class: 'form-control gl-form-input', data: { qa_selector: 'milestone_title_field' }, required: true, autofocus: true
+  = render 'shared/milestones/form_dates', f: f
+  .form-group.row.milestone-description
+    .col-form-label.col-sm-2
+      = f.label :description, _('Description')
+    .col-sm-10
+      = render layout: 'shared/md_preview', locals: { url: preview_markdown_path(@project) } do
+        = render 'shared/zen', f: f, attr: :description,
+                                classes: 'note-textarea',
+                                qa_selector: 'milestone_description_field',
+                                supports_autocomplete: true,
+                                placeholder: _('Write milestone description...')
+        = render 'shared/notes/hints'
+      .clearfix
+      .error-alert
 
   .form-actions
     - if @milestone.new_record?

app/views/shared/milestones/_form_dates.html.haml

-.col-md-6
-  .form-group.row
-    .col-form-label.col-sm-2
-      = f.label :start_date, _('Start Date')
-    .col-sm-10
-      = f.text_field :start_date, class: "datepicker form-control gl-form-input", data: { qa_selector: "start_date_field" }, placeholder: _('Select start date'), autocomplete: 'off'
-      %a.inline.float-right.gl-mt-2.js-clear-start-date{ href: "#" }= _('Clear start date')
-  .form-group.row
-    .col-form-label.col-sm-2
-      = f.label :due_date, _('Due Date')
-    .col-sm-10
-      = f.text_field :due_date, class: "datepicker form-control gl-form-input", data: { qa_selector: "due_date_field" }, placeholder: _('Select due date'), autocomplete: 'off'
-      %a.inline.float-right.gl-mt-2.js-clear-due-date{ href: "#" }= _('Clear due date')
+.form-group.row
+  .col-form-label.col-sm-2
+    = f.label :start_date, _('Start Date')
+  .col-sm-4
+    = f.text_field :start_date, class: "datepicker form-control gl-form-input", data: { qa_selector: "start_date_field" }, placeholder: _('Select start date'), autocomplete: 'off'
+    %a.inline.float-right.gl-mt-2.js-clear-start-date{ href: "#" }= _('Clear start date')
+  .col-form-label.col-sm-2
+    = f.label :due_date, _('Due Date')
+  .col-sm-4
+    = f.text_field :due_date, class: "datepicker form-control gl-form-input", data: { qa_selector: "due_date_field" }, placeholder: _('Select due date'), autocomplete: 'off'
+    %a.inline.float-right.gl-mt-2.js-clear-due-date{ href: "#" }= _('Clear due date')