Styling of job list card for loads of data

Signed-off-by: KIRAN KASHALKAR <kiran.kashalkar@riftio.com>

diff --git a/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.jsx b/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.jsx
index 0f345ea..5cdcb85 100644 (file)
--- a/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.jsx
+++ b/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.jsx
@@ -68,11 +68,12 @@ class JobListCard extends React.Component {
                 <section className='jobListCard--details'>
                     <h4 onClick={this.openModal.bind(this)}>Job Details</h4>
                     <Modal
+                        className='jobListCard--details--modal'
                         visible={this.state.modalVisible}
                         width="600"
                         height="400"
                         effect="fadeInUp">
-                        <div>
+                        <div className='jobListCard--details--tree'>
                             <TreeView nodeLabel={<span>Job Details</span>} key={'job-details'} defaultCollapsed={false}>
                                 <p>{jobDetailsText}</p>
                             </TreeView>

diff --git a/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.scss b/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.scss
index 8551abb..0ea403f 100644 (file)
--- a/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.scss
+++ b/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.scss
@@ -67,6 +67,26 @@
     }
     &--details {
         font-size:0.75rem;
+
+        >div {
+            display: flex;
+            >div {
+                display: flex;
+                padding: 1em 0 0 1em;
+            }
+        }
+
+        &--tree {
+                display: flex;
+                flex-direction: column;
+
+                .tree-view {
+                    min-height: 300px;
+                    min-width: 580px;
+                    overflow-y: scroll;
+                }
+            }
+
         h4 {
             padding-bottom:0.5rem;
             text-decoration:underline;