Skip to content

GitLab

Commit 788a5ce7 authored by Olga Brani's avatar Olga Brani
Browse files

Helpdesk style+ui update

parent 39c13348
Hide whitespace changes
Inline Side-by-side
snf-cyclades-app/synnefo/helpdesk/static/css/extra.css
View file @ 788a5ce7
/*body { background: url(../img/roughcloth.png);}*/
.container-fluid { margin-top: 20px; }
h1 { margin-bottom: 20px; }
......@@ -83,9 +85,9 @@ h1 { margin-bottom: 20px; }
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
}
.subnav-fixed .nav {
width: 938px;
/*width: 938px; εαν το ξε-σχολιάσω θα κεντραριστεί*/
margin: 0 auto;
padding: 0 1px;
padding: 0 20px;
}
.subnav .nav > li:first-child > a,
.subnav .nav > li:first-child > a:hover {
......@@ -102,7 +104,7 @@ h1 { margin-bottom: 20px; }
.account-form { float: right; margin-top: 2px; margin-bottom: 0}
.info-block { margin-top: 30px; background-color: #fff}
.info-block h3 .badge { float: right; font-size: 0.8em; padding: 5px 8px; background-color:#659CEF;}
.info-block h3 .badge { font-size: 0.8em; padding: 5px 8px; background-color:#659CEF;}
.info-block table { margin-bottom: 0 }
.object-details h5 { float: right; margin-top: 10px; margin-right: 10px; font-size: 1em; color: #D9397E }
.object-anchor { margin-bottom: 70px }
......@@ -112,13 +114,15 @@ h1 { margin-bottom: 20px; }
/* new styles olga */
.search-query { border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
a { color:#659CEF; }
a:hover { color:#2956B2 }
h3 { color:#D61153; font-size:21px;}
h4 { font-size:18px; margin-bottom:1em; color:#F46906; }
h1 a:hover { text-decoration:none; }
.search-query { border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
a { color:#659CEF; }
a:hover { color:#2956B2 }
h3 { font-size:21px; cursor:pointer;}
h4 { font-size:18px; margin-bottom:1em; }
input:focus,
textarea:focus {
textarea:focus {
border-color: #659CEF;
outline: 0;
outline: thin dotted \9;
......@@ -129,7 +133,13 @@ textarea:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #659CEF;
}
.object-details-content { margin:1em 0; }
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover { background-color: #d5d5d5; }
.object-details-content { margin:1em 0; display:none; }
.account .object-details-content{ display:block; }
.nav-tabs { margin:0; border:0 none; }
.tab-content .dl-horizontal { margin:0; }
.nav-tabs > .active > a,
......@@ -140,4 +150,25 @@ textarea:focus {
.label-success,
.badge-success { background-color:#8BBA00 }
.badge-important { background-color: #F81A23; }
.badge-info { background-color:#659CEF }
.badge-info { background-color:#659CEF }
.show-hide-tabs { margin:2em 0; }
.show-hide-all { float:right; margin:0; line-height:27px;}
.toggle .badge { font-size:14px; padding:5px 9px; }
.toggle .badge:hover { cursor:pointer; }
.show-hide-tabs .badge { background-color:#8BBA00; }
.show-hide-tabs .badge:hover { background-color:#789B0F }
.show-hide-all .badge { background-color:#8BBA00; }
.show-hide-all .badge:hover { background-color:#789B0F }
/*.show-hide-all .badge { background-color:#D61153; }
.show-hide-all .badge:hover { background-color:#9F0C3E }*/
.vms h3,
.vms h4 { color:#D61153 }
.vms h3:hover { color:#9F0C3E }
.networks h3,
.networks h4 { color:#F46906 }
.networks h3:hover { color:#D65C04 }
.account h3,
.account h4 { color:#2956B2 }
.account h3:hover { color:#213D75 }
\ No newline at end of file
snf-cyclades-app/synnefo/helpdesk/static/js/common.js
View file @ 788a5ce7
......@@ -27,8 +27,69 @@ $(document).ready(function(){
$win.on('scroll', processScroll)
// hide/show expand/collapse
$('.subnav a').click(function(){
$('.info-block-content, .show-hide-all').show();
})
function checkBadgeExpanded(el){
if (el.hasClass('expanded')){
el.html( txt_tab[1]);
} else {
el.html( txt_tab[0]);
}
}
var txt_tab = ['+ Show Info','- Hide Info'];
var txt_all = ['+ Expand all','- Collapse all'];
$('.show-hide-tabs span').html(txt_tab[0]);
$('.show-hide-all span').html(txt_all[0]);
$('.show-hide-all').click(function(){
var badgeAll = $(this).children('span');
var tabs = $(this).parents('.info-block').find('.show-hide-tabs');
badgeAll.toggleClass('open');
if (badgeAll.hasClass('open')){
badgeAll.html( txt_all[1]);
tabs.each(function() {
$(this).next().show('slow');
$(this).children('span').addClass('expanded');
checkBadgeExpanded($(this).children('span'));
});
} else {
badgeAll.html( txt_all[0]);
tabs.each(function() {
$(this).next().hide('slow');
$(this).children('span').removeClass('expanded');
checkBadgeExpanded($(this).children('span'));
});
}
});
$('.show-hide-tabs').click(function(){
$(this).next().toggle('slow');
var badge = $(this).children('span');
badge.toggleClass('expanded');
checkBadgeExpanded(badge);
});
$('.info-block h3').click(function(){
$(this).next('.info-block-content').toggle();
$(this).prev('.show-hide-all').toggle();
})
})
snf-cyclades-app/synnefo/helpdesk/templates/helpdesk/account.html
View file @ 788a5ce7
......@@ -7,7 +7,7 @@
{% block content %}
<div class="subnav">
<ul class="nav nav-pills">
<li><h2>{{ account }}</h2></li>
<li><a href="#account">Account</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Virtual machines <b class="caret"></b></a>
......@@ -33,46 +33,59 @@
</li>
</ul>
</li>
<li><h2>{{ account }}</h2></li>
</ul>
</div>
<div class="row-fluid">
<div class="object-anchor" id="account"></div>
<div class="account info-block well">
<h3>Account</h3>
<div class="object-details">
<div class="vm-details-content object-details-content">
<ul class="nav nav-tabs">
<li class="active"><a href="#details{{ account }}" data-toggle="tab">Details</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="details{{ account }}">
<dl class="dl-horizontal well">
<dt>Username</dt><dd>{{ account }}</dd>
<dt>Virtual machines</dt><dd>{{ vms|length }}</dd>
<dt>Networks</dt><dd>{{ networks|length }}</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="info-block-content">
<div class="object-details">
<div class="vm-details-content object-details-content">
<ul class="nav nav-tabs">
<li class="active"><a href="#details{{ account }}" data-toggle="tab">Details</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="details{{ account }}">
<dl class="dl-horizontal well">
<dt>Username</dt><dd>{{ account }}</dd>
<dt>Virtual machines</dt><dd>{{ vms|length }}</dd>
<dt>Networks</dt><dd>{{ networks|length }}</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="object-anchor" id="vms"></div>
<div class="vms info-block well">
<div class="show-hide-all toggle">
<span class="badge">+ Show Info</span>
</div>
<h3>Virtual machines <span class="badge badge-info">Total: {{ vms|length }}</span></h3>
{% for vm in vms %}
{% include "helpdesk/vms_list.html" %}
{% empty %}
<p>No virtual machines available for this account</p>
{% endfor %}
<div class="info-block-content">
{% for vm in vms %}
{% include "helpdesk/vms_list.html" %}
{% empty %}
<p>No virtual machines available for this account</p>
{% endfor %}
</div>
</div>
<div class="object-anchor" id="networks"></div>
<div class="networks info-block well">
<h3>Networks <span class="badge badge-info">Total: {{ vms|length }}</span></h3>
{% for network in networks %}
{% include "helpdesk/networks_list.html" %}
{% empty %}
<p>No networks available for this account</p>
{% endfor %}
<div class="show-hide-all toggle">
<span class="badge">+ Show Info</span>
</div>
<h3>Networks <span class="badge badge-info">Total: {{ networks|length }}</span></h3>
<div class="info-block-content">
{% for network in networks %}
{% include "helpdesk/networks_list.html" %}
{% empty %}
<p>No networks available for this account</p>
{% endfor %}
</div>
</div>
</div>
{% endblock %}
snf-cyclades-app/synnefo/helpdesk/templates/helpdesk/networks_list.html
View file @ 788a5ce7
......@@ -4,6 +4,9 @@
<h4>{{ network.name }}</h4>
<span class="badge badge-info">ID: {{ network.pk }}</span>
{{ network|network_deleted_badge|safe }}
<div class="show-hide-tabs toggle">
<span class="badge">&nbsp;</span>
</div>
<div class="network-details-content object-details-content">
<ul class="nav nav-tabs">
<li class="active"><a href="#details{{ network.pk }}" data-toggle="tab">Details</a></li>
......@@ -15,8 +18,8 @@
<dt>Name</dt><dd>{{ network.name }}</dd>
<dt>Public</dt><dd>{{ network.public }}</dd>
<dt>User ID</dt><dd>{{ network.userid }}</dd>
<dt>Created</dt><dd>{{ network.created }}</dd>
<dt>Updated</dt><dd>{{ network.updated }}</dd>
<dt>Created</dt><dd>{{ network.created }}( {{ network.created|timesince }} <strong>ago</strong>)</dd>
<dt>Updated</dt><dd>{{ network.updated }}( {{ network.created|timesince }} <strong>ago</strong>)</dd>
<dt>State</dt><dd>{{ network.get_state_display }} ({{ network.state }})</dd>
</dl>
</div>
......
snf-cyclades-app/synnefo/helpdesk/templates/helpdesk/vms_list.html
View file @ 788a5ce7
......@@ -10,6 +10,9 @@
<span class="ram">{{ vm.flavor.ram}}MB</span>
<span class="disk">{{ vm.flavor.disk }}GB</span>
</span>
<div class="show-hide-tabs toggle">
<span class="badge">&nbsp;</span>
</div>
<div class="vm-details-content object-details-content">
<ul class="nav nav-tabs">
......@@ -24,8 +27,8 @@
<dt>ID</dt><dd>{{ vm.pk }}</dd>
<dt>Name</dt><dd>{{ vm.name }}</dd>
<dt>User id</dt><dd>{{ vm.userid }}</dd>
<dt>Created</dt><dd>{{ vm.created }}</dd>
<dt>Updated</dt><dd>{{ vm.updated }}</dd>
<dt>Created</dt><dd>{{ vm.created }}( {{ vm.created|timesince }} <strong>ago</strong>)</dd>
<dt>Updated</dt><dd>{{ vm.updated }} ( {{ vm.updated|timesince }} <strong>ago</strong>)</dd>
<dt>Suspended</dt><dd>{{ vm.suspended }}</dd>
<dt>Deleted</dt><dd>{{ vm.deleted }}</dd>
<dt>Image id</dt><dd>{{ vm.imageid }}</dd>
......
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