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
--- a/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.jsx
+++ b/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.jsx
@@ -68,11 +68,12 @@
<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
--- 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;