Minor UI fixes

app/static/app/css/main.scss

@@ -266,6 +266,6 @@ footer{
     padding-bottom: 12px;
 }
 
-.clearfix{
+.floatfix{
     clear: both;
 }

app/static/app/js/Console.jsx

@@ -158,8 +158,7 @@ class Console extends React.Component {
             onMouseOver={this.handleMouseOver}
             onMouseOut={this.handleMouseOut}
             ref={this.setRef}
-            >
-            {lines.map(line => {
+            >{lines.map(line => {
             if (this.props.lang) return (<div key={i++} dangerouslySetInnerHTML={prettyLine(line)}></div>);
             else return line + "\n";
             })}

app/static/app/js/components/BasicTaskView.jsx

@@ -24,7 +24,8 @@ class BasicTaskView extends React.Component {
         this.state = {
             lines: [],
             currentRf: 0,
-            rf: PipelineSteps.get()
+            rf: PipelineSteps.get(),
+            loaded: false
         };
 
         this.imageUpload = {
@@ -74,6 +75,7 @@ class BasicTaskView extends React.Component {
                     if (textStatus !== "abort" && this.props.refreshInterval !== undefined){
                         this.sourceTimeout = setTimeout(updateFromSource, this.props.refreshInterval);
                     }
+                    if (!this.state.loaded) this.setState({loaded: true});
                 });
         };
 
@@ -110,7 +112,7 @@ class BasicTaskView extends React.Component {
         }
 
         this.tearDownDynamicSource();
-        this.setState({lines: [], currentRf: 0});
+        this.setState({lines: [], currentRf: 0, loaded: false});
         this.setupDynamicSource();
     }
 
@@ -195,18 +197,20 @@ class BasicTaskView extends React.Component {
     }
 
     render() {
-        const { rf } = this.state;
+        const { rf, loaded } = this.state;
         const imageUploadState = this.props.taskStatus === null 
                                 ? 'running' 
                                 : 'completed';
 
-        return (<div className="basic-task-view">
+        return (<div className={"basic-task-view " + (loaded ? 'loaded' : '')}>
             <div className={imageUploadState + " processing-step"}>
                 <i className={this.imageUpload.icon + " fa-fw"}></i> {this.imageUpload.label} {this.suffixFor(imageUploadState)}
             </div>
             {rf.map(p => {
-                return (<div key={p.action} className={p.state + " processing-step"}>
-                    <i className={p.icon + " fa-fw"}></i> {p.label} {this.suffixFor(p.state)}
+                const state = loaded ? p.state : 'queued';
+
+                return (<div key={p.action} className={state + " processing-step"}>
+                    <i className={p.icon + " fa-fw"}></i> {p.label} {this.suffixFor(state)}
                 </div>);
             })}
         </div>);

app/static/app/js/components/TaskListItem.jsx

@@ -457,7 +457,7 @@ class TaskListItem extends React.Component {
       expanded = (
         <div className="expanded-panel">
           <div className="row">
-            <div className="col-md-4 no-padding">
+            <div className="col-md-3 no-padding">
               <div className="labels">
                 <strong>Created on: </strong> {(new Date(task.created_at)).toLocaleString()}<br/>
               </div>
@@ -479,7 +479,7 @@ class TaskListItem extends React.Component {
               <div className="task-warning"><i className="fa fa-warning"></i> <span>An orthophoto could not be generated. To generate one, make sure GPS information is embedded in the EXIF tags of your images, or use a Ground Control Points (GCP) file.</span></div> : ""}
 
             </div>
-            <div className="col-md-8">
+            <div className="col-md-9">
               <div className="switch-view text-right pull-right">
                     <i className="fa fa-list-ul"></i> <a href="javascript:void(0);" onClick={this.setView("basic")}
                             className={this.state.view === 'basic' ? "selected" : ""}>Basic</a>
@@ -490,7 +490,7 @@ class TaskListItem extends React.Component {
             
               {this.state.view === 'console' ?
                 <Console
-                    className="clearfix"
+                    className="floatfix"
                     source={this.consoleOutputUrl}
                     refreshInterval={this.shouldRefresh() ? 3000 : undefined}
                     autoscroll={true}

app/static/app/js/css/BasicTaskView.scss

@@ -1,6 +1,10 @@
 .basic-task-view{
     margin-bottom: 8px;
-    
+    opacity: 0.7;
+    &.loaded{
+        opacity: 1;
+    }
+
     .processing-step{
         opacity: 0.7;