Change activity tab appearance

baas/activity.html

@@ -93,8 +93,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             .attr("class", "small-block-grid-4")
             .attr("id", "backup_list");
         $.each(backups, function(i, backup) {
-            var li = $("<li></li>")
-                .attr("class", "clearfix backup-box")
+            var li = $("<div></div>")
+                .attr("class", "backup-box")
                 .attr("id", "box_" + backup.name);
             var a = $("<a>" + backup.cloud + "/" + backup.name + "</a>")
                 .attr("href", "#")
@@ -129,8 +129,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             if(typeof backup.last_status != 'undefined') {
                 li.append("<br>");
                 li.append("<br>");
-                var status_p = $("<span>Status : " +
-                        backup.last_status + "&nbsp;&nbsp;</span>");
+                var status_class = (backup.last_status == "Failed") ?
+                    "fail-span" : "succeed-span";
+                var status_p = $("<span>Status : <i class='" + status_class
+                        + "'> " + backup.last_status +
+                        "</i>&nbsp;&nbsp;</span>");
                 li.append(status_p);
                 var loader = $("<i></i>")
                     .attr("class", "fa fa-spinner fa-pulse");
@@ -139,7 +142,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     loader.hide();
                 }
             }
-            ul.append(li);
+            var extLi = $("<li></li>");
+            extLi.append(li);
+            ul.append(extLi);
             $("#backup-table").append(ul);
         });
 

baas/static/stylesheets/custom.css

@@ -60,12 +60,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     background: #146A84;
 }
 .backup-box {
-    border: 1px dotted #6e6e6e;
     border-radius: 4px;
-    min-height: 170px;
-    margin: 5px;
+    min-height: 180px;
     font-size: 14px;
     word-break: break-all;
+    background: aliceblue;
+    padding: 10px;
 }
 .selected-bar {
     background: #2BA6CB;
@@ -129,3 +129,9 @@ body fieldset {
     margin: 5px;
     padding: 5px;
 }
+.fail-span {
+    color: orangered;
+}
+.succeed-span {
+    color: forestgreen;
+}