Layout...

Kai Reinhard

06.09.2019 762675eb72793421644a162d80617b33121e8ab1

Layout...

 borgbutler-webapp/src/components/views/jobs/Job.css

New file
@@ -0,0 +1,8 @@
.job-cancel {
    margin-top: 1ex;
    text-align: center;
}

.job-progress {
    margin-top: -10px;
}

 borgbutler-webapp/src/components/views/jobs/Job.jsx

@@ -4,6 +4,7 @@
import {IconCancel} from '../../general/IconComponents'
import {getRestServiceUrl} from "../../../utilities/global";
import PropTypes from "prop-types";
import './Job.css';

class Job extends React.Component {
    constructor(props) {
@@ -58,10 +59,14 @@
        return (
            <ListGroupItem>
                {this.renderRedirect()}
                <Button color="link" onClick={this.toggle}>{job.description}</Button>
                <div>{content}
                    <Button color={'danger'} onClick={() => this.cancelJob(job.uniqueJobNumber)}
                            disabled={cancelDisabled}><IconCancel/></Button>
                <div class="row">
                    <div class="col col-11 job-progress">
                        <Button color="link" onClick={this.toggle}>{job.description}</Button>
                        {content}
                    </div>
                    <div class="col col-1 job-cancel"><Button color={'danger'} onClick={() => this.cancelJob(job.uniqueJobNumber)}
                                             disabled={cancelDisabled}><IconCancel/></Button>
                    </div>
                </div>
                <Collapse isOpen={this.state.collapse}>
                    <Card>

 borgbutler-webapp/src/components/views/jobs/JobMonitorPanel.jsx

@@ -102,7 +102,6 @@
                            <br/>Es wäre
                            auch OK, wenn genau nur ein Job aufgeklappt wäre.
                        </li>
                        <li>Cancel-Button soll rechts neben die Progressbar.</li>
                    </ol>
                </code></React.Fragment>
        }

 borgbutler-webapp/src/components/views/jobs/JobQueue.jsx

@@ -6,7 +6,7 @@
    return (
        <div>
            <Card>
                <CardHeader>{queue.repo}</CardHeader>
                <CardHeader>Job queue: {queue.repo}</CardHeader>
                <CardBody>
                    <ListGroup>
                        {queue.jobs