recordsansible
/
ara-web
Code Issues Proposed changes

Use flexbox instead of grid in playbook summary 

Remove the arguments box because the information displayed is useless

Change-Id: I62b8f607bb5fdc21152aa186849d1719a7f160e6
This commit is contained in:
Guillaume Vincent 2019-01-17 14:44:37 +01:00
parent 04a2d4a05e
commit 071038e883
1 changed files with 38 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/playbooks/PlaybookSummary.js
View File

@ -79,30 +79,41 @@ const PlaybookWrapper = styled.div`
} }
`; `;
const StatusAndName = styled.div` const PlaybookContent = styled.div`
display: flex; display: flex;
align-items: center; flex-direction: column;
width: 100%; @media (min-width: 800px) {
margin-bottom: 1em; flex-direction: row;
@media (min-width: 587px) { justify-content: space-between;
width: 25%; align-items: center;
margin-bottom: 0;
} }
`; `;
const PlaybookInfos = styled.div` const StatusAndName = styled.div`
display: grid; display: flex;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
align-items: center; align-items: center;
width: 100%; min-width: 300px;
@media (min-width: 587px) { `;
width: 50%;
const PlaybookInfos = styled.div`
margin: 2em 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
@media (min-width: 800px) {
flex-direction: row;
flex-grow: 1;
margin: 0;
align-items: center;
} }
`; `;
const PlaybookInfo = styled.div` const PlaybookInfo = styled.div`
width: 140px; flex-grow: 1;
@media (min-width: 587px) { width: 100px;
max-width: 100px;
@media (min-width: 800px) {
text-align: center; text-align: center;
} }
`; `;
@ -110,10 +121,9 @@ const PlaybookInfo = styled.div`
const Duration = styled.div` const Duration = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; min-width: 100px;
margin-top: 1em;
@media (min-width: 587px) { @media (min-width: 800px) {
width: 25%;
justify-content: flex-end; justify-content: flex-end;
margin-top: 0; margin-top: 0;
} }
@ -130,40 +140,37 @@ export default class Playbook extends Component {
> >
<div className="pf-c-card"> <div className="pf-c-card">
<div className="pf-c-card__body"> <div className="pf-c-card__body">
<div className="pf-u-display-flex pf-u-flex-direction-column pf-u-flex-direction-row-on-md"> <PlaybookContent>
<StatusAndName> <StatusAndName>
<StatusIcon status={playbook.status} /> <StatusIcon status={playbook.status} />
<h1 className="pf-c-title pf-m-xl pf-u-ml-lg"> <h1 className="pf-c-title pf-m-xl pf-u-ml-md">
{playbook.path.split("/").slice(-1)[0]} {playbook.path.split("/").slice(-1)[0]}
</h1> </h1>
</StatusAndName> </StatusAndName>
<PlaybookInfos> <PlaybookInfos>
<PlaybookInfo className="pf-u-mr-xl"> <PlaybookInfo>
<b>{Object.keys(playbook.arguments).length}</b> arguments
</PlaybookInfo>
<PlaybookInfo className="pf-u-mr-xl">
<b>{playbook.hosts.length}</b> Hosts <b>{playbook.hosts.length}</b> Hosts
</PlaybookInfo> </PlaybookInfo>
<PlaybookInfo className="pf-u-mr-xl"> <PlaybookInfo>
<b>{playbook.files.length}</b> Files <b>{playbook.files.length}</b> Files
</PlaybookInfo> </PlaybookInfo>
<PlaybookInfo className="pf-u-mr-xl"> <PlaybookInfo>
<b>{Object.keys(playbook.tasks).length}</b> tasks <b>{Object.keys(playbook.tasks).length}</b> tasks
</PlaybookInfo> </PlaybookInfo>
<PlaybookInfo className="pf-u-mr-xl"> <PlaybookInfo>
<b>{Object.keys(playbook.plays).length}</b> plays <b>{Object.keys(playbook.plays).length}</b> plays
</PlaybookInfo> </PlaybookInfo>
<PlaybookInfo className="pf-u-mr-xl"> <PlaybookInfo>
<b>{Object.keys(playbook.records).length}</b> records <b>{Object.keys(playbook.records).length}</b> records
</PlaybookInfo> </PlaybookInfo>
</PlaybookInfos> </PlaybookInfos>
<Duration> <Duration>
<i className="fa fa-clock" /> <i className="fa fa-clock" />
<span className="pf-u-ml-xs"> <span className="pf-u-ml-sm">
{Math.round(playbook.duration)} sec {Math.round(playbook.duration)} sec
</span> </span>
</Duration> </Duration>
</div> </PlaybookContent>
</div> </div>
</div> </div>
</PlaybookWrapper> </PlaybookWrapper>