Commit c7aa39f4 authored by Efthymia Bika's avatar Efthymia Bika
Browse files

Css changes

Add active class to selected item
Add vertical border
Remove panel class
parent cc2844bd
......@@ -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">
......
......@@ -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>
......
......@@ -10,3 +10,9 @@
.gray-spin {
color: #6e6e6e;
}
.vertical-border {
border-right: thick solid #E4E2E2;
}
.active-li {
background-color: gainsboro;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment