fix(ui): fix produce to topic layout

tchiotludo · Oct 21, 2020 · 43370f4 · 43370f4
1 parent 922f55a
commit 43370f4
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 69 deletions.
diff --git a/client/src/containers/Topic/TopicProduce/TopicProduce.jsx b/client/src/containers/Topic/TopicProduce/TopicProduce.jsx
@@ -151,28 +151,30 @@ class TopicProduce extends Form {
       <div className="row header-wrapper">
         <label className="col-sm-2 col-form-label">{position === 0 ? 'Header' : ''}</label>
 
-        <div className="row col-sm-10 khq-multiple header-row">
-          {this.renderInput(
-            `hKey${position}`,
-            '',
-            'Key',
-            'text',
-            undefined,
-            true,
-            'wrapper-class col-sm-6 col-5 key',
-            'input-class'
-          )}
+        <div className="row col-sm-10 khq-multiple">
+          <div>
+            {this.renderInput(
+              `hKey${position}`,
+              '',
+              'Key',
+              'text',
+              undefined,
+              true,
+              'col-sm-6',
+              'input-class'
+            )}
 
-          {this.renderInput(
-            `hValue${position}`,
-            '',
-            'Value',
-            'text',
-            undefined,
-            true,
-            'wrapper-class col-sm-6 col-5',
-            'input-class'
-          )}
+            {this.renderInput(
+              `hValue${position}`,
+              '',
+              'Value',
+              'text',
+              undefined,
+              true,
+              'col-sm-6',
+              'input-class'
+            )}
+          </div>
           <div className="add-button">
             <button
               type="button"

diff --git a/client/src/containers/Topic/TopicProduce/styles.scss b/client/src/containers/Topic/TopicProduce/styles.scss
@@ -1,40 +0,0 @@
-.wrapper-class{
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.input-class{
-  width: 100%;
-}
-
-.add-button {
-  height: 80%;
-}
-
-.header-wrapper {
-  display: flex;
-  direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.header-row {
-  min-width: 80%;
-  justify-content: space-between;
-  padding: 0 !important;
-  padding-right: 2% !important;
-}
-
-@media (max-width: 575px) {
-  .wrapper-class.key{
-    margin-left: 15px;
-  }
-
-  .wrapper-class{
-    padding-right: 0px;
-  }
-
-  .header-row{
-    width: 102%;
-  }
-}

diff --git a/client/src/css/forms/multiple.scss b/client/src/css/forms/multiple.scss
@@ -1,19 +1,24 @@
 .khq-multiple {
+    margin-left: 0;
     > div {
-        display: flex;
-        flex-direction: row;
+       display: flex;
         margin-bottom:  $form-group-margin-bottom;
 
-        &:last-child {
-            margin-bottom: 0;
+        &:first-child {
+            flex-grow: 1;
         }
 
-        > * {
-            margin-right:  $form-group-margin-bottom;
-
+        .row {
+            margin-bottom:  0;
             &:last-child {
+                margin-left: 0;
                 margin-right: 0;
+                padding-right: 0;
             }
         }
+
+        .input-class {
+            width: 100%;
+        }
     }
-}
+}