x/tuskar-ui
Code Issues Proposed changes

styling the status and message boxes, as well as tweaking some of the html class names

Browse Source
This commit is contained in:
Jake Dahn 2011-07-14 21:43:44 -07:00
parent 0608cd55e3
commit ee5872dad8
10 changed files with 267 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
openstack-dashboard/dashboard/templates/_messages.html
View File

@ -1,24 +1,24 @@
{% for message in messages %}
{% if message.tags == "info" %}
<div class="status_box info">
<div class="message_box info">
<h2>Info</h2>
<p>{{ message }}</p>
</div>
{% endif %}
{% if message.tags == "warning" %}
<div class="status_box medium">
<div class="message_box medium">
<h2>Warning</h2>
<p>{{ message }}</p>
</div>
{% endif %}
{% if message.tags == "success" %}
<div class="status_box success">
<div class="message_box success">
<h2>Success</h2>
<p>{{ message }}</p>
</div>
{% endif %}
{% if message.tags == "error" %}
<div class="status_box error">
<div class="message_box error">
<h2>Error</h2>
<p>{{ message }}</p>
</div>

2
openstack-dashboard/dashboard/templates/dash_instances.html
View File

@ -16,7 +16,7 @@
{% if instances %}
{% include '_instance_list.html' %}
{% else %}
<div class="status_box info">
<div class="message_box info">
<h2>Info</h2>
<p>There are currently no instances. You can launch an instance from the <a href='{% url dash_images request.user.tenant %}'>Images Page.</a></p>
</div>

2
openstack-dashboard/dashboard/templates/dash_keypairs.html
View File

@ -17,7 +17,7 @@
{% include '_keypair_list.html' %}
<a id="keypairs_create_link" class="action_link large-rounded" href="{% url dash_keypairs_create request.user.tenant %}">Create New Keypair</a>
{% else %}
<div class="status_box info">
<div class="message_box info">
<h2>Info</h2>
<p>There are currently no keypairs. <a href='{% url dash_keypairs_create request.user.tenant %}'>Create A Keypair &gt;&gt;</a></p>
</div>

2
openstack-dashboard/dashboard/templates/dash_usage.html
View File

@ -90,7 +90,7 @@
</tbody>
</table>
{% else %}
<div class="status_box info">
<div class="message_box info">
<h2>Info</h2>
<p>There are currently no instances.<br/><br/>You can launch an instance from the <a href='{% url dash_images request.user.tenant %}'>Images Page.</a></p>
</div>

3
openstack-dashboard/dashboard/templates/syspanel_base.html
View File

@ -14,9 +14,8 @@
{% block page_header %}
{% endblock %}
{% include "_messages.html" %}
<div class="main_content">
{% include "_messages.html" %}
{% block syspanel_main %}{% endblock %}
</div>

2
openstack-dashboard/dashboard/templates/syspanel_create_flavor.html
View File

@ -13,7 +13,7 @@
{% block syspanel_main %}
<div class="dash_block wide form">
<div class="left">
<ul class='stat_box info small'>
<ul class='status_box info small'>
<li class='block'>
<p class='overview'>{{global_summary.max_vcpus|floatformat}}<span> Cores</span></p>
<p class='avail'>{{available_cores}} <span class='unit'>vcpu</span> <span class='label'>Available</span></p>

2
openstack-dashboard/dashboard/templates/syspanel_instances.html
View File

@ -16,7 +16,7 @@
{% if instances %}
{% include '_syspanel_instance_list.html' %}
{% else %}
<div class="status_box info">
<div class="message_box info">
<h2>Info</h2>
<p>There are currently no instances. You can launch an instance from the <a href='{% url dash_images request.user.tenant %}'>Images Page.</a></p>
</div>

2
openstack-dashboard/dashboard/templates/syspanel_tenant_users.html
View File

@ -37,7 +37,7 @@
</tbody>
</table>
{% else %}
<div class="status_box info">
<div class="message_box info">
<h2>Info</h2>
<p>There are currently no users for this tenant</p>
</div>

98
openstack-dashboard/dashboard/templates/syspanel_usage.html
View File

@ -16,56 +16,58 @@
{% endblock page_header %}
{% block syspanel_main %}
{% if external_links %}
<div id="monitoring">
<h3>Monitoring: </h3>
<ul id="external_links">
{% for link in external_links %}
<li><a target="_blank" href="{{ link.1 }}">{{ link.0 }}</a></li>
{% endfor %}
<div id="status_top">
{% if external_links %}
<div id="monitoring">
<h3>Monitoring: </h3>
<ul id="external_links">
{% for link in external_links %}
<li><a target="_blank" href="{{ link.1 }}">{{ link.0 }}</a></li>
{% endfor %}
</ul>
</div>
{% endif %}
<form action="" method="get" id="date_form">
<!-- {% csrf_token %} -->
<h3> Select a month to query its usage: </h3>
<div class="form-row">
{{ dateform.date }}
<input class="submit" type="submit"/>
</div>
</form>
<ul class='status_box good'>
<li class='status block'><span>Status:</span> Good</li>
<li class='block'>
<p class='overview'>{{global_summary.max_vcpus|floatformat}}<span> Cores</span></p>
<p class='used'>{{global_summary.total_active_vcpus}}<span class='unit'></span><span class='label'> Used</span></p>
<!--
<p class='avail'>{{available_cores}}<span class='label'> Avail</span></p>
-->
</li>
<li class='block'>
<p class='overview'>{{total_ram}}<span> {{ram_unit}} Ram</span></p>
<p class='used'>{{used_ram|floatformat}}<span class='unit'>{{ram_unit}}</span><span class='label'> Used</span></p>
<!--
<p class='avail'>{{avail_ram|floatformat}}<span class='unit'>{{ram_unit}}</span><span class='label'>Avail</span></p>
-->
</li>
<li class='block last'>
<p class='overview'>{{max_disk_tb}}<span>TB Disk</span></p>
<p class='used'>{{used_disk_tb}}<span class='unit'>TB</span><span class='label'>Used</span></p>
<!--
<p class='avail'>{{available_disk_tb}}<span class='unit'>TB</span><span class='label'>Avail</span></p>
-->
</li>
</ul>
</div>
{% endif %}
<form action="" method="get" id="date_form">
<!-- {% csrf_token %} -->
<h3> Select a month to query its usage: </h3>
<div class="form-row">
{{ dateform.date }}
<input class="submit" type="submit"/>
</div>
</form>
<ul class='stat_box good'>
<li class='status block'><span>Status:</span> Good</li>
<li class='block'>
<p class='overview'>{{global_summary.max_vcpus|floatformat}}<span> Cores</span></p>
<p class='used'>{{global_summary.total_active_vcpus}}<span class='unit'></span><span class='label'> Used</span></p>
<!--
<p class='avail'>{{available_cores}}<span class='label'> Avail</span></p>
-->
</li>
<li class='block'>
<p class='overview'>{{total_ram}}<span> {{ram_unit}} Ram</span></p>
<p class='used'>{{used_ram|floatformat}}<span class='unit'>{{ram_unit}}</span><span class='label'> Used</span></p>
<!--
<p class='avail'>{{avail_ram|floatformat}}<span class='unit'>{{ram_unit}}</span><span class='label'>Avail</span></p>
-->
</li>
<li class='block last'>
<p class='overview'>{{max_disk_tb}}<span>TB Disk</span></p>
<p class='used'>{{used_disk_tb}}<span class='unit'>TB</span><span class='label'>Used</span></p>
<!--
<p class='avail'>{{available_disk_tb}}<span class='unit'>TB</span><span class='label'>Avail</span></p>
-->
</li>
</ul>
<p id="activity">
<span><strong>Active Instances:</strong> {{global_summary.total_active_instances|default:'-'}}</span>
<span><strong>This month's VCPU-Hours:</strong> {{global_summary.total_cpu_usage|floatformat|default:'-'}}</span>
<span><strong>This month's GB-Hours:</strong> {{global_summary.total_disk_usage|floatformat|default:'-'}}</span>
</p>
<p id="activity">
<span><strong>Active Instances:</strong> {{global_summary.total_active_instances|default:'-'}}</span>
<span><strong>This month's VCPU-Hours:</strong> {{global_summary.total_cpu_usage|floatformat|default:'-'}}</span>
<span><strong>This month's GB-Hours:</strong> {{global_summary.total_disk_usage|floatformat|default:'-'}}</span>
</p>
</div>
{% if usage_list %}

211
openstack-dashboard/media/dashboard/css/style.css
View File

@ -47,6 +47,8 @@ ul, li {
list-style: none;
}
li.last { border-right: none !important; }
/* Header */
@ -261,6 +263,17 @@ a.refresh {
}
a.refresh:hover { background-position: left -19px; }
#monitoring {
background: #f8f8f8;
font-size: 14px;
height: 20px;
margin: -21px 0 25px;
padding: 10px;
border: 1px solid #e1e1e1;
}
#monitoring h3, #external_links, #external_links li { float: left; }
#external_links li { margin: 0 0 0 15px; }
/* Main Content */
@ -282,6 +295,7 @@ a.refresh:hover { background-position: left -19px; }
height: 20px;
padding: 15px 20px 15px 20px;
border: 1px solid #e1e1e1;
clear: both;
}
.table_title h3 {
@ -324,6 +338,18 @@ table tr.even.bad td { border: 1px solid #fba7a9; }
table tr.odd.medium td { border: 1px solid #f8e400; }
table tr.even.medium td { border: 1px solid #f0dd00; }
.odd.good { background: #e1ffd9; }
.odd.medium { background: #fffabf; }
.odd.bad { background: #ffd9d9; }
.even.good { background: #c2ffb2; }
.even.medium { background: #fff690; }
.even.bad { background: #ffb7b8; }
.odd.good:hover, .even.good:hover { background: #98ff7e; }
.odd.medium:hover, .even.medium:hover { background: #fff376; }
.odd.bad:hover, .even.bad:hover { background: #ff9899; }
tr {
transition: background 0.2s;
-webkit-transition: background 0.2s;
@ -352,11 +378,186 @@ td#actions form input[type="submit"] {
td#actions input[type="submit"]:hover { text-decoration: underline; }
/* Status Messages */
.message_box {
font-size: 24px;
width: 100%;
min-width: 758px;
margin: 0 0 25px 0;
padding: 0 0 0 0;
float: left;
border: 1px solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.message_box, .status_box.info {
background-color: #e8f8ff;
color: #7ab6c5;
border-color: #9ac7dc;
}
.message_box.success {
background-color: #e9ffe8;
color: #7ec67b;
border-color: #9edd9b;
}
.message_box.warning {
background-color: #ffffe8;
color: #d1b12d;
border-color: #ffe37b;
}
.message_box.error {
background-color: #ffdbdc;
color: #ff8080;
border-color: #ff9a99;
}
.message_box h2 {
float: left;
min-width: 120px;
padding: 20px 20px 20px 20px;
}
.message_box.info h2 { color: #2a7380; border-color: #9ac7dc; }
.message_box.good h2 { color: #2e802b; border-color: #9edd9b; }
.message_box.medium h2 { color: #d1b100; border-color: #ffe37b; }
.message_box.bad h2 { color: #ea4031; border-color: #ff8080; }
.message_box p {
font-size: 14px;
width: 500px;
padding: 20px;
float: left;
border-left: 1px solid;
}
/* Status Box */
.status_box {
font-size: 24px;
width: 100%;
min-width: 750px;
float: left;
border: 1px solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.status_box.good {
background-color: #e9ffe8;
color: #7ec67b;
border-color: #9edd9b;
}
.status_box.medium {
background-color: #ffffe8;
color: #eada83;
border-color: #ffe37b;
}
.status_box.bad {
background-color: #ffdbdc;
color: #ff8080;
border-color: #ff9a99;
}
.status_box.medium .status span, .status_box.medium .overview { color: #d1b100; }
.status_box.bad .status span, .status_box.bad .overview { color: #eb1400; }
.status_box.good .status { background: url(../images/status_sprite.png) 6px 8px no-repeat; }
.status_box.medium .status { background: url(../images/status_sprite.png) no-repeat 6px -90px; }
.status_box.bad .status { background: url(../images/status_sprite.png) no-repeat 6px -186px; }
.status_box.small {
width: 359px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.status_box.small p {
text-align: center;
margin: 0;
}
.status_box.small p.overview {
color: #2a7380;
margin: -10px 0 5px 0;
}
.status_box.small p.avail {
width: 69px;
margin: 0 auto;
}
.status_box.small li.block { width: 69px; }
.status_box .status span, .status_box .overview { color: #2e802b; }
.status_box p.avail { margin-right: 0; }
.status_box .overview span {
text-transform: uppercase;
font-size: 11px;
}
.status_box p.avail, .status_box p.used {
margin: 0 30px 0 0;
float: left;
}
.status_box p.avail span, .status_box p.used span {
font-size: 11px;
text-transform: uppercase;
}
.status_box li.block {
width: 17%;
height: 61px;
float: left;
padding: 15px 25px 15px 25px;
border-right: 1px solid;
}
.status_box .good .block { border-color: #c3eec1; }
.status_box .medium .block { border-color: #fbf665; }
.status_box .bad .block { border-color: #faa; }
.status_box li.status {
height: 44px;
min-height: 29px;
padding-top: 32px;
padding-left: 37px;
padding-right: 37px;
}
.status_box span.label {
margin: 2px 0 0 0;
display: block;
}
#activity {
background: #fbfbfb;
text-align: center;
min-width: 735px;
margin: 0 10px 0 10px;
padding: 5px 0 5px 0;
border: 1px solid #e6e6e6;
}
#activity span { margin: 0 0 0 10px; }
#activity strong {
color: #afafaf;
font-weight: normal;
font-size: 11px;
}
#date_form { margin: 18px 0 25px 22px; }
#date_form h3 {
margin: 0 20px 0 0;
float: left;
}