Aligned container progress.

src/components/ContainerHome.react.js

@@ -53,7 +53,6 @@ var ContainerHome = React.createClass({
     } else if (this.props.container && this.props.container.State.Downloading) {
       if (this.props.container.Progress !== undefined) {
 
-        let fields = [];
         let values = [];
         let sum = 0.0;
 
@@ -65,13 +64,13 @@ var ContainerHome = React.createClass({
 
         sum = sum / this.props.container.Progress.amount;
 
-        fields.push(<h2>{Math.round(sum*100)/100}%</h2>)
-        fields.push(<ContainerProgress pBar1={values[0]} pBar2={values[1]} pBar3={values[2]} pBar4={values[3]} />);
-
         body = (
           <div className="details-progress">
             <h2>Downloading Image</h2>
-              {fields}
+            <h2>{Math.round(sum*100)/100}%</h2>
+            <div className="container-progress-wrapper">
+              <ContainerProgress pBar1={values[0]} pBar2={values[1]} pBar3={values[2]} pBar4={values[3]} />
+            </div>
           </div>
         );
 

src/components/ContainerProgress.react.js

@@ -22,16 +22,16 @@ var ContainerProgress = React.createClass({
     return (
       <div className="container-progress">
         <div className="bar-1 bar-bg">
-          <div className="bar-1 bar-fg" style={pBar4Style}></div>
+          <div className="bar-fg" style={pBar4Style}></div>
         </div>
         <div className="bar-2 bar-bg">
-          <div className="bar-2 bar-fg" style={pBar3Style}></div>
+          <div className="bar-fg" style={pBar3Style}></div>
         </div>
         <div className="bar-3 bar-bg">
-          <div className="bar-3 bar-fg" style={pBar2Style}></div>
+          <div className="bar-fg" style={pBar2Style}></div>
         </div>
         <div className="bar-4 bar-bg">
-          <div className="bar-4 bar-fg" style={pBar1Style}></div>
+          <div className="bar-fg" style={pBar1Style}></div>
         </div>
       </div>
     );

src/utils/DockerUtil.js

@@ -378,7 +378,7 @@ export default {
 
           let layersToLoad = _.keys(layerProgress).length;
 
-          console.log("nbLayers:" + layersToLoad)
+          console.log("nbLayers:" + layersToLoad);
 
           // Split the loading in a few columns for more feedback
           let columns = {};
@@ -388,7 +388,7 @@ export default {
 
           for (let i = 0; i < columns.amount; i++)
           {
-            let layerAmount = Math.ceil(layersToLoad / (columns.amount - i))
+            let layerAmount = Math.ceil(layersToLoad / (columns.amount - i));
             layersToLoad -= layerAmount;
             columns.progress[i] = { layerIDs:[], nbLayers:0 , maxLayers:layerAmount , value:0.0 };
           }
@@ -414,6 +414,8 @@ export default {
 
             if (data.status === 'Already exists') {
 
+              console.log("Already exists.");
+  
               //layerProgress[data.id].current = 1;
               //layerProgress[data.id].total = 1;
 

styles/container-progress.less

@@ -1,4 +1,14 @@
+.container-progress-wrapper {
+  margin-left: 37%;
+}
+
 .container-progress {
+  display: inline-block;
+  position: relative;
+  min-width: 100px;
+  max-width: 100px;
+  min-height: 100px;
+  max-height: 100px;
   width: 100px;
   height: 100px;
   border: 4px solid @brand-primary;

styles/right-panel.less

@@ -126,10 +126,10 @@
   }
   .details-progress {
     margin: 20% auto 0;
-    text-align: center;
     width: 400px;
     h2 {
       margin-bottom: 20px;
+      text-align: center;
     }
   }
   .details-panel {