Update variable rows to be full width with extra button

See https://gitlab.slack.com/archives/C5XGWBRJA/p1499355359953774

4 files changed, 47 insertions, 25 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index a1a09b20548..cf6593fac58 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -153,6 +153,7 @@ $code_line_height: 1.6;
  * Padding
  */
 $gl-padding: 16px;
+$gl-col-padding: 15px;
 $gl-btn-padding: 10px;
 $gl-input-padding: 10px;
 $gl-vert-padding: 6px;
@@ -443,6 +444,7 @@ $logs-p-color: #333;
 /*
 * Forms
 */
+$input-height: 34px;
 $input-danger-bg: #f2dede;
 $input-danger-border: $red-400;
 $input-group-addon-bg: #f7f8fa;
diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss
index b3743a7c88d..dc719a6ba94 100644
--- a/app/assets/stylesheets/pages/pipeline_schedules.scss
+++ b/app/assets/stylesheets/pages/pipeline_schedules.scss
@@ -79,42 +79,60 @@
   margin-left: 0;
   margin-bottom: 0;
   padding-left: 0;
+  list-style: none;
+  clear: both;
 }
 
 .pipeline-variable-row {
   display: flex;
+  align-items: flex-end;
 
   &:not(:last-child) {
     margin-bottom: $gl-btn-padding;
   }
 
-  @media (max-width: $screen-xs-max) {
-    flex-wrap: wrap;
+  @media (max-width: $screen-sm-max) {
+    padding-right: $gl-col-padding;
   }
 
   &:last-child {
-    & > .pipeline-variable-row-remove-button {
+    & .pipeline-variable-row-remove-button {
       display: none;
     }
 
-    & > .pipeline-variable-value-input {
-      margin-right: $pipeline-variable-remove-button-width;
+    @media (max-width: $screen-sm-max) {
+      & .pipeline-variable-value-input {
+        margin-right: $pipeline-variable-remove-button-width;
+      }
+    }
+
+    @media (max-width: $screen-xs-max) {
+      .pipeline-variable-row-body {
+        margin-right: $pipeline-variable-remove-button-width;
+      }
     }
   }
 }
 
-.pipeline-variable-key-input {
-  margin-right: $gl-btn-padding;
+.pipeline-variable-row-body {
+  display: flex;
+  width: calc(75% - #{$gl-col-padding});
+  padding-left: $gl-col-padding;
+
+  @media (max-width: $screen-sm-max) {
+    width: 100%;
+  }
 
   @media (max-width: $screen-xs-max) {
-    margin-right: $pipeline-variable-remove-button-width;
-    margin-bottom: $gl-btn-padding;
+    display: block;
   }
 }
 
-.pipeline-variable-value-input {
+.pipeline-variable-key-input {
+  margin-right: $gl-btn-padding;
+
   @media (max-width: $screen-xs-max) {
-    flex: 1;
+    margin-bottom: $gl-btn-padding;
   }
 }
 
@@ -124,6 +142,7 @@
   justify-content: center;
   align-items: center;
   width: $pipeline-variable-remove-button-width;
+  height: $input-height;
   padding: 0;
   background: transparent;
   border: 0;
diff --git a/app/views/projects/pipeline_schedules/_form.html.haml b/app/views/projects/pipeline_schedules/_form.html.haml
index bafb0013f91..857ae00d0ab 100644
--- a/app/views/projects/pipeline_schedules/_form.html.haml
+++ b/app/views/projects/pipeline_schedules/_form.html.haml
@@ -26,10 +26,10 @@
     .col-md-9
       %label.label-light
         #{ s_('PipelineSchedules|Variables') }
-      %ul.js-pipeline-variable-list.pipeline-variable-list
-        - @schedule.variables.each do |variable|
-          = render 'variable_row', id: variable.id, key: variable.key, value: variable.value
-        = render 'variable_row'
+    %ul.js-pipeline-variable-list.pipeline-variable-list
+      - @schedule.variables.each do |variable|
+        = render 'variable_row', id: variable.id, key: variable.key, value: variable.value
+      = render 'variable_row'
   .form-group
     .col-md-9
       = f.label  :active, s_('PipelineSchedules|Activated'), class: 'label-light'
diff --git a/app/views/projects/pipeline_schedules/_variable_row.html.haml b/app/views/projects/pipeline_schedules/_variable_row.html.haml
index 68713561f25..564cb5d1ca9 100644
--- a/app/views/projects/pipeline_schedules/_variable_row.html.haml
+++ b/app/views/projects/pipeline_schedules/_variable_row.html.haml
@@ -2,15 +2,16 @@
 - key = local_assigns.fetch(:key, "")
 - value = local_assigns.fetch(:value, "")
 %li.js-row.pipeline-variable-row{ data: { is_persisted: "#{!id.nil?}" } }
-  %input{ type: "hidden", name: "schedule[variables_attributes][][id]", value: id }
-  %input.js-destroy-input{ type: "hidden", name: "schedule[variables_attributes][][_destroy]" }
-  %input.js-user-input.pipeline-variable-key-input.form-control{ type: "text",
-    name: "schedule[variables_attributes][][key]",
-    value: key,
-    placeholder: s_('PipelineSchedules|Input variable key') }
-  %textarea.js-user-input.pipeline-variable-value-input.form-control{ rows: 1,
-    name: "schedule[variables_attributes][][value]",
-    placeholder: s_('PipelineSchedules|Input variable value') }
-    = value
+  .pipeline-variable-row-body
+    %input{ type: "hidden", name: "schedule[variables_attributes][][id]", value: id }
+    %input.js-destroy-input{ type: "hidden", name: "schedule[variables_attributes][][_destroy]" }
+    %input.js-user-input.pipeline-variable-key-input.form-control{ type: "text",
+      name: "schedule[variables_attributes][][key]",
+      value: key,
+      placeholder: s_('PipelineSchedules|Input variable key') }
+    %textarea.js-user-input.pipeline-variable-value-input.form-control{ rows: 1,
+      name: "schedule[variables_attributes][][value]",
+      placeholder: s_('PipelineSchedules|Input variable value') }
+      = value
   %button.js-row-remove-button.pipeline-variable-row-remove-button{ 'aria-label': s_('PipelineSchedules|Remove variable row') }
     %i.fa.fa-minus-circle{ 'aria-hidden': "true" }