From 762675eb72793421644a162d80617b33121e8ab1 Mon Sep 17 00:00:00 2001
From: Kai Reinhard <K.Reinhard@micromata.de>
Date: Sun, 06 Jan 2019 16:09:46 +0000
Subject: [PATCH] Layout...

---
 borgbutler-webapp/src/components/views/jobs/JobMonitorPanel.jsx |    1 -
 borgbutler-webapp/src/components/views/jobs/Job.jsx             |   13 +++++++++----
 borgbutler-webapp/src/components/views/jobs/JobQueue.jsx        |    2 +-
 borgbutler-webapp/src/components/views/jobs/Job.css             |    8 ++++++++
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/borgbutler-webapp/src/components/views/jobs/Job.css b/borgbutler-webapp/src/components/views/jobs/Job.css
new file mode 100644
index 0000000..dbda6c5
--- /dev/null
+++ b/borgbutler-webapp/src/components/views/jobs/Job.css
@@ -0,0 +1,8 @@
+.job-cancel {
+    margin-top: 1ex;
+    text-align: center;
+}
+
+.job-progress {
+    margin-top: -10px;
+}
\ No newline at end of file
diff --git a/borgbutler-webapp/src/components/views/jobs/Job.jsx b/borgbutler-webapp/src/components/views/jobs/Job.jsx
index f41120c..9890214 100644
--- a/borgbutler-webapp/src/components/views/jobs/Job.jsx
+++ b/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>
diff --git a/borgbutler-webapp/src/components/views/jobs/JobMonitorPanel.jsx b/borgbutler-webapp/src/components/views/jobs/JobMonitorPanel.jsx
index df5929a..7b5a5f2 100644
--- a/borgbutler-webapp/src/components/views/jobs/JobMonitorPanel.jsx
+++ b/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>
         }
diff --git a/borgbutler-webapp/src/components/views/jobs/JobQueue.jsx b/borgbutler-webapp/src/components/views/jobs/JobQueue.jsx
index e11aec0..20310ab 100644
--- a/borgbutler-webapp/src/components/views/jobs/JobQueue.jsx
+++ b/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

--
Gitblit v1.10.0