Frontend review changeszj-mattermost-command-help-message

4 files changed, 90 insertions, 84 deletions

diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index be2d87197bf..e83a1f7ad68 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -68,41 +68,42 @@ label {
   }
 }
 
-.help-form {
-  .form-group {
-    .control-label {
-      font-weight: bold;
-      padding-top: 4px;
-    }
+.help-form .form-group {
+  margin-left: 0;
+  margin-right: 0;
 
-    .form-control {
-      height: 29px;
-      background: $white-light;
-      font-family: $monospace_font;
-    }
+  .control-label {
+    font-weight: bold;
+    padding-top: 4px;
+  }
 
-    .input-group-btn .btn {
-      padding: 3px $gl-btn-padding;
-      background-color: $gray-light;
-      border: 1px solid $border-color;
-    }
+  .form-control {
+    height: 29px;
+    background: $white-light;
+    font-family: $monospace_font;
+  }
 
-    .text-block {
-      line-height: 0.8;
-      padding-top: 9px;
+  .input-group-btn .btn {
+    padding: 3px $gl-btn-padding;
+    background-color: $gray-light;
+    border: 1px solid $border-color;
+  }
+
+  .text-block {
+    line-height: 0.8;
+    padding-top: 9px;
 
-      code {
-        line-height: 1.8;
-      }
+    code {
+      line-height: 1.8;
     }
+  }
 
-    @media(max-width: $screen-sm-min) {
-      padding: 0 $gl-padding;
+  @media(max-width: $screen-sm-min) {
+    padding: 0 $gl-padding;
 
-      .control-label,
-      .text-block {
-        padding-left: 0;
-      }
+    .control-label,
+    .text-block {
+      padding-left: 0;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 2e8f356298d..51c926608f9 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -20,3 +20,7 @@
 .danger-title {
   color: $gl-danger;
 }
+
+.service-settings .control-label {
+  padding-top: 0;
+}
diff --git a/app/views/projects/services/mattermost_slash_commands/_help.html.haml b/app/views/projects/services/mattermost_slash_commands/_help.html.haml
index 15aa2006c02..a676c0290a0 100644
--- a/app/views/projects/services/mattermost_slash_commands/_help.html.haml
+++ b/app/views/projects/services/mattermost_slash_commands/_help.html.haml
@@ -2,24 +2,24 @@
 - run_actions_text = "Perform common operations on this project: #{pretty_path_with_namespace}"
 
 .well
-  %p
-    This service allows GitLab users to perform common operations on this
-    project by entering slash commands in Mattermost.
-  %p
-    See list of available commands in Mattermost after setting up this service,
-    by entering
-    %code /<command_trigger_word> help
-  %p
-    To setup this service:
-    %ul.list-unstyled
-      %li
-        1.
-        = link_to 'Enable custom slash commands', 'https://docs.mattermost.com/developer/slash-commands.html#enabling-custom-commands'
-        on your Mattermost installation
-      %li
-        2.
-        = link_to 'Add a slash command', 'https://docs.mattermost.com/developer/slash-commands.html#set-up-a-custom-command'
-        in Mattermost with these options:
+  This service allows GitLab users to perform common operations on this
+  project by entering slash commands in Mattermost.
+  %br
+  See list of available commands in Mattermost after setting up this service,
+  by entering
+  %code /<command_trigger_word> help
+  %br
+  %br
+  To setup this service:
+  %ul.list-unstyled
+    %li
+      1.
+      = link_to 'Enable custom slash commands', 'https://docs.mattermost.com/developer/slash-commands.html#enabling-custom-commands'
+      on your Mattermost installation
+    %li
+      2.
+      = link_to 'Add a slash command', 'https://docs.mattermost.com/developer/slash-commands.html#set-up-a-custom-command'
+      in Mattermost with these options:
 
   %hr
 
diff --git a/app/views/shared/_service_settings.html.haml b/app/views/shared/_service_settings.html.haml
index 755d6acc777..9c5053dace5 100644
--- a/app/views/shared/_service_settings.html.haml
+++ b/app/views/shared/_service_settings.html.haml
@@ -7,43 +7,44 @@
     = preserve do
       = markdown @service.help
 
-.form-group
-  = form.label :active, "Active", class: "control-label"
-  .col-sm-10
-    = form.check_box :active
-
-- if @service.supported_events.present?
+.service-settings
   .form-group
-    = form.label :url, "Trigger", class: 'control-label'
-
+    = form.label :active, "Active", class: "control-label"
     .col-sm-10
-      - @service.supported_events.each do |event|
-        %div
-          = form.check_box service_event_field_name(event), class: 'pull-left'
-          .prepend-left-20
-            = form.label service_event_field_name(event), class: 'list-label' do
-              %strong
-                = event.humanize
-
-        - field = @service.event_field(event)
-
-        - if field
-          %p
-            = form.text_field field[:name], class: "form-control", placeholder: field[:placeholder]
-
-        %p.light
-          = service_event_description(event)
-
-- @service.global_fields.each do |field|
-  - type = field[:type]
-
-  - if type == 'fieldset'
-    - fields = field[:fields]
-    - legend = field[:legend]
-
-    %fieldset
-      %legend= legend
-      - fields.each do |subfield|
-        = render 'shared/field', form: form, field: subfield
-  - else
-    = render 'shared/field', form: form, field: field
+      = form.check_box :active
+
+  - if @service.supported_events.present?
+    .form-group
+      = form.label :url, "Trigger", class: 'control-label'
+
+      .col-sm-10
+        - @service.supported_events.each do |event|
+          %div
+            = form.check_box service_event_field_name(event), class: 'pull-left'
+            .prepend-left-20
+              = form.label service_event_field_name(event), class: 'list-label' do
+                %strong
+                  = event.humanize
+
+          - field = @service.event_field(event)
+
+          - if field
+            %p
+              = form.text_field field[:name], class: "form-control", placeholder: field[:placeholder]
+
+          %p.light
+            = service_event_description(event)
+
+  - @service.global_fields.each do |field|
+    - type = field[:type]
+
+    - if type == 'fieldset'
+      - fields = field[:fields]
+      - legend = field[:legend]
+
+      %fieldset
+        %legend= legend
+        - fields.each do |subfield|
+          = render 'shared/field', form: form, field: subfield
+    - else
+      = render 'shared/field', form: form, field: field