Merge branch 'jivl-update-form-horizontal-usage' into 'master'

Remove form-horizontal class where applicable

Closes #46744

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

7 files changed, 28 insertions, 30 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
index 705953c86e3..e2b42ab2642 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
@@ -126,7 +126,6 @@ export default {
       </div>
       <form
         v-if="!isCompact"
-        class="form-horizontal"
         @submit.prevent.stop="commitChanges"
         ref="formEl"
       >
diff --git a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
index df21e2f8771..5765eed4d45 100644
--- a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
+++ b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
@@ -59,7 +59,7 @@ export default {
       ref="form"
       :action="deleteWikiUrl"
       method="post"
-      class="form-horizontal js-requires-input"
+      class="js-requires-input"
     >
       <input
         ref="method"
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 89b61530ddb..946223cfff0 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -373,6 +373,7 @@ $dropdown-chevron-size: 10px;
 $dropdown-toggle-active-border-color: darken($border-color, 14%);
 $dropdown-item-hover-bg: $gray-darker;
 $dropdown-fade-mask-height: 32px;
+$dropdown-member-form-control-width: 163px;
 
 /*
 * Filtered Search
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index de2b5701e2d..9914555d309 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -36,13 +36,12 @@
     }
   }
 
-  .form-horizontal {
-    margin-top: 20px;
+  .form-group {
+    margin-bottom: 0;
 
-    @include media-breakpoint-up(sm) {
-      display: -webkit-flex;
-      display: flex;
-      margin-top: 3px;
+    @include media-breakpoint-down(sm) {
+      display: block;
+      margin-left: 5px;
     }
   }
 
@@ -62,10 +61,15 @@
 }
 
 .member-form-control {
-  @include media-breakpoint-down(xs) {
-    padding-bottom: 5px;
+  @include media-breakpoint-down(sm) {
+    width: $dropdown-member-form-control-width;
     margin-left: 0;
+    padding-bottom: 5px;
+  }
+
+  @include media-breakpoint-down(xs) {
     margin-right: 0;
+    width: auto;
   }
 }
 
@@ -207,10 +211,6 @@
     align-self: flex-start;
   }
 
-  .form-horizontal ~ .btn {
-    margin-right: 0;
-  }
-
   @include media-breakpoint-down(xs) {
     display: block;
 
@@ -220,6 +220,12 @@
       display: block;
     }
 
+    .controls > .btn:last-child {
+      margin-left: 5px;
+      margin-right: 5px;
+      width: auto;
+    }
+
     .form-control {
       width: 100%;
     }
@@ -232,10 +238,6 @@
     .member-controls {
       margin-top: 5px;
     }
-
-    .form-horizontal {
-      margin-top: 10px;
-    }
   }
 }
 
@@ -259,10 +261,6 @@
       margin-top: 0;
     }
 
-    .form-horizontal {
-      display: block;
-    }
-
     .member-form-control {
       margin: 5px 0;
     }
diff --git a/app/views/admin/application_settings/_repository_mirrors_form.html.haml b/app/views/admin/application_settings/_repository_mirrors_form.html.haml
index 1fa793e2ace..187c6c28bb1 100644
--- a/app/views/admin/application_settings/_repository_mirrors_form.html.haml
+++ b/app/views/admin/application_settings/_repository_mirrors_form.html.haml
@@ -1,10 +1,10 @@
-= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+= form_for @application_setting, url: admin_application_settings_path do |f|
   = form_errors(@application_setting)
 
   %fieldset
-    .form-group
-      = f.label :mirror_available, 'Enable mirror configuration', class: 'control-label col-sm-2'
-      .col-sm-10
+    .form-group.row
+      = f.label :mirror_available, 'Enable mirror configuration', class: 'control-label col-sm-4'
+      .col-sm-8
         .form-check
           = f.check_box :mirror_available, class: 'form-check-input'
           = f.label :mirror_available, class: 'form-check-label' do
diff --git a/app/views/admin/application_settings/_terms.html.haml b/app/views/admin/application_settings/_terms.html.haml
index 325ca1ac003..257565ce193 100644
--- a/app/views/admin/application_settings/_terms.html.haml
+++ b/app/views/admin/application_settings/_terms.html.haml
@@ -1,8 +1,8 @@
-= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+= form_for @application_setting, url: admin_application_settings_path do |f|
   = form_errors(@application_setting)
 
   %fieldset
-    .form-group
+    .form-group.row
       .col-sm-12
         .form-check
           = f.check_box :enforce_terms, class: 'form-check-input'
@@ -10,7 +10,7 @@
             = _("Require all users to accept Terms of Service when they access GitLab.")
           .form-text.text-muted
             = _("When enabled, users cannot use GitLab until the terms have been accepted.")
-    .form-group
+    .form-group.row
       .col-sm-12
         = f.label :terms do
           = _("Terms of Service Agreement")
diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml
index 42b2d27c44a..46debe1f2b9 100644
--- a/app/views/shared/members/_member.html.haml
+++ b/app/views/shared/members/_member.html.haml
@@ -61,7 +61,7 @@
                     title: 'Resend invite'
 
         - if user != current_user && member.can_update?
-          = form_for member, remote: true, html: { class: 'js-edit-member-form form-horizontal' } do |f|
+          = form_for member, remote: true, html: { class: 'js-edit-member-form form-group row append-right-5' } do |f|
             = f.hidden_field :access_level
             .member-form-control.dropdown.append-right-5
               %button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",