Css changes

Add active class to selected item
Add vertical border
Remove panel class

backup-list.html

@@ -41,12 +41,17 @@
                     .attr("id", "backup_list")
                     .attr("class", "side-nav");
                 $.each(backups, function(i, backup) {
-                    var li = $("<li></li>");
+                    var li = $("<li></li>")
+                        .attr("class", "clearfix")
+                        .attr("id", "li_" + backup.name);
                     var a = $("<a>" + backup.name + "</a>")
                         .attr("href", "#")
                         .attr("id", backup.name)
                         .attr("class", "left")
-                        .click(function() { load_backup(backup) });
+                        .click(function() {
+                            load_backup(backup);
+                            activate_li("li_" + backup.name);
+                        });
                     li.append(a);
 
                     var a_del = $("<a><i class='fa fa-times-circle delete_icon'></i></a>")
@@ -65,6 +70,16 @@
                 });
             }
 
+            function activate_li(id) {
+                $("li").each(function(i, li) {
+                    if($(this).is("#" + id)) {
+                        $(this).addClass("active-li");
+                    } else {
+                        $(this).removeClass("active-li");
+                    }
+                });
+            }
+
             function load_backup(backup) {
                 $(".tabs").show();
                 $(".tabs-content").show();
@@ -396,9 +411,9 @@
             </div>
         </div>
         <div class="row">
-            <div class="small-3 columns panel" id="sidebar">
+            <div class="small-3 columns vertical-border" id="sidebar">
                 <a href="#" onclick="load_backup();" class="button radius small">
-                    <i class="fa fa-plus-circle">&nbsp;New Backup Set</i>
+                    <i class="fa fa-plus-circle">&nbsp;Add Backup</i>
                 </a>
             </div>
             <div class="small-9 columns">

cloud-list.html

@@ -23,12 +23,16 @@
                     .attr("class", "side-nav");
                 $.each(clouds, function(i, cloud) {
                     var li = $("<li></li>")
-                        .attr("class", "clearfix");
+                        .attr("class", "clearfix")
+                        .attr("id", "li_" + cloud.name);
                     var a = $("<a>" + cloud.name + "</a>")
                         .attr("href", "#")
                         .attr("id", cloud.name)
                         .attr("class", "left")
-                        .click(function() { load_cloud(cloud) });
+                        .click(function() {
+                            load_cloud(cloud);
+                            activate_li("li_" + cloud.name);
+                        });
                     li.append(a);
 
                     var a_del = $("<a><i class='fa fa-times-circle delete_icon'></i></a>")
@@ -46,6 +50,16 @@
                 });
             }
 
+            function activate_li(id) {
+                $("li").each(function(i, li) {
+                    if($(this).is("#" + id)) {
+                        $(this).addClass("active-li");
+                    } else {
+                        $(this).removeClass("active-li");
+                    }
+                });
+            }
+
             var errors = {
                 cloud_url_empty: 'Provide a Cloud Authentication URL',
                 cloud_inaccessible: 'Cloud URL did not respond as expected',
@@ -241,13 +255,13 @@
             </div>
         </div>
         <div class="row">
-            <div class="small-3 columns panel" id="sidebar">
+            <div class="small-3 columns vertical-border" id="sidebar">
                 <a href="#" onclick="load_cloud();" class="button small radius">
                     <i class="fa fa-plus-circle">&nbsp;Add Cloud</i>
                 </a>
             </div>
             <div class="small-9 columns">
-                <div id="cloud_details" class="panel hide">
+                <div id="cloud_details" class="hide">
                     <form>
                         <div class="clearfix">
                             <div class="small-3 columns">
@@ -281,7 +295,7 @@
                         </div>
                         <div class="clearfix">
                             <div class="small-8 columns"></div>
-                            <a id="save_button" class="button radius right"
+                            <a id="save_button" class="button radius right small"
                                 onclick="if(check_fields()) edit_add_cloud();">Save</a>
                         </div>
                 </form>

static/stylesheets/custom.css

@@ -10,3 +10,9 @@
 .gray-spin {
     color: #6e6e6e;
 }
+.vertical-border {
+    border-right: thick solid #E4E2E2;
+}
+.active-li {
+    background-color: gainsboro;
+}