x/tuskar-ui
Code Issues Proposed changes

Overall styling of pages

Browse Source 
Change-Id: I6eb7b083a587c6980c9db12094d58fca67dedc91
This commit is contained in:
Jaromir Coufal 2013-07-29 11:05:42 +02:00 committed by Tomas Sedovic
parent 2f2c22bf5d
commit 1642e34441
9 changed files with 162 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
horizon/static/horizon/js/horizon.capacity.js
View File

@ -68,7 +68,7 @@ horizon.Capacity = {
.attr("rx", lvl_curve)
.attr("ry", lvl_curve)
.style("fill", bkgrnd)
.style("stroke", "#000000")
.style("stroke", "#bebebe")
.style("stroke-width", 1);
// used resources
@ -82,7 +82,7 @@ horizon.Capacity = {
.attr("rx", lvl_curve)
.attr("ry", lvl_curve)
.style("fill", usage_color(used_perc))
.style("stroke", "#000000")
.style("stroke", "#a0a0a0")
.style("stroke-width", 1)
.attr("d", used_perc)
.transition()

2
horizon/static/horizon/js/horizon.d3circleschart.js
View File

@ -170,7 +170,7 @@ horizon.d3_circles_chart = {
.attr("r", round)//function(d) { return d.r; })// can be sent form server
.attr("cx", center_x)
.attr("cy", center_y)
.attr("stroke", "grey")
.attr("stroke", "#cecece")
.attr("stroke-width", function(d) {
return 1;
})

2
horizon/static/horizon/js/horizon.d3linechart.js
View File

@ -85,7 +85,7 @@ horizon.d3_line_chart = {
self.margin = {top: 20, right: 80, bottom: 30, left: 50};
self.width = 550 - self.margin.left - self.margin.right;
self.height = 400 - self.margin.top - self.margin.bottom;
self.height = 300 - self.margin.top - self.margin.bottom;
self.svg = d3.select(chart_div)
.append("svg")

12
horizon/static/horizon/js/horizon.d3singlebarchart.js
View File

@ -257,7 +257,7 @@ horizon.d3_single_bar_chart = {
//.attr("rx", base_component.lvl_curve)
//.attr("ry", base_component.lvl_curve)
.style("fill", base_component.usage_color(base_component.percentage_used_value()))
.style("stroke", "#000000")
.style("stroke", "#bebebe")
.style("stroke-width", 0)
.attr("d", base_component.percentage_used_value())
.attr("popup-used", base_component.tooltip_used_value())
@ -291,7 +291,7 @@ horizon.d3_single_bar_chart = {
self.y = 0;
self.x = 0;
self.width = base_component.w;
self.height = 3;
self.height = 1;
self.trasition_attr = "y";
self.trasition_value = 100 - base_component.percentage_average + "%";
}
@ -342,7 +342,7 @@ horizon.d3_single_bar_chart = {
.attr("rx", base_component.lvl_curve)
.attr("ry", base_component.lvl_curve)
.style("fill", base_component.bkgrnd)
.style("stroke", "#000000")
.style("stroke", "#e0e0e0")
.style("stroke-width", 1)
.on("mouseover", function(d){tooltip_free.style("visibility", "visible");})
.on("mousemove", function(d){tooltip_free.style("top",
@ -356,7 +356,7 @@ horizon.d3_single_bar_chart = {
.attr("y", base_component.h/2)
.attr("x", 3)
.attr("dominant-baseline", "middle")
.attr("font-size", 15)
.attr("font-size", 13)
.on("mouseover", function(d){tooltip.style("visibility", "visible");})
.on("mousemove", function(d){tooltip.style("top",
(event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
@ -379,9 +379,9 @@ horizon.d3_single_bar_chart = {
.attr("y", 0)
.attr("height", '100%')
.attr("width", '100%')
.style("stroke", "black")
.style("stroke", "#bebebe")
.style("fill", "none")
.style("stroke-width", 2);
.style("stroke-width", 1);
},
// INIT
init: function() {

2
openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/_detail_overview.html
View File

@ -237,7 +237,7 @@
data-size="22">
</div>
</div>
<div class="communication_chart_connection">-->BG-IMG--></div>
<div class="communication_chart_connection"></div>
<div class="communication_chart_wrapper">
<h5>The most contacted</h5>
<div id="most_contacted_racks"

19
openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/_detail_overview.html
View File

@ -108,7 +108,7 @@
<div class="flavor_usage_bar"
data-popup-free='{{ rack|remaining_capacity_by_flavors }}'
data-single-bar-orientation="horizontal"
data-single-bar-height="50"
data-single-bar-height="35"
data-single-bar-width="100%"
data-single-bar-used="{{ rack|all_used_instances }}"
data-single-bar-auto-scale-selector=".flavors_scale_selector"
@ -131,7 +131,7 @@
<p>{{ flavor.used_instances }}%, <strong>{{ flavor.used_instances }} instances</strong></p>'
data-single-bar-orientation="vertical"
data-single-bar-height="100%"
data-single-bar-width="40"
data-single-bar-width="30"
data-single-bar-used="{{ flavor.used_instances }}"
data-single-bar-average-used="{{ 50 }}"
data-single-bar-auto-scale-selector=".flavors_scale_selector"
@ -179,6 +179,7 @@
<div class="row-fluid">
<div class="span6">
<!-- FIXME Will be added later
<div class="circles_chart_time_picker">
<select data-circles-chart-command="change_time"
data-receiver="#most_contacting_racks, #most_contacted_racks">
@ -188,6 +189,8 @@
<option value="last_month">Last Month</option>
</select>
</div>
-->
<h4>Top Communicating Racks</h4>
<hr class="header_rule">
<div class="clear"></div>
@ -203,7 +206,7 @@
data-size="22">
</div>
</div>
<div class="communication_chart_connection">-->BG-IMG--></div>
<div class="communication_chart_connection"></div>
<div class="communication_chart_wrapper">
<h5>The most contacted</h5>
<div id="most_contacted_racks"
@ -220,6 +223,7 @@
{% endif %}
</div>
<div class="span6">
<!-- FIXME Will be added later
<div class="circles_chart_time_picker">
<select data-circles-chart-command="change_time"
data-receiver="#rack_health_chart">
@ -229,10 +233,10 @@
<option value="last_month">Last Month</option>
</select>
</div>
-->
<h4>Node health</h4>
{% if rack.nodes_count and rack.is_provisioned %}
<hr class="header_rule">
<div class="clear"></div>
<ul class="nav nav-tabs"
data-circles-chart-command="change_url"
@ -262,7 +266,10 @@
data-size="22">
</div>
{% else %}
<p>No data available yet.</p>
<hr class="header_rule">
<div class="clear"></div>
<p>No data available yet.</p>
{% endif %}
</div>
</div>

9
openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/_detail_overview.html
View File

@ -98,7 +98,7 @@
<div class="flavor_usage_bar"
data-popup-free='{{resource_class|remaining_capacity_by_flavors}}'
data-single-bar-orientation="horizontal"
data-single-bar-height="50"
data-single-bar-height="35"
data-single-bar-width="100%"
data-single-bar-used="{{ resource_class|all_used_instances }}"
data-single-bar-auto-scale-selector=".flavors_scale_selector"
@ -125,7 +125,7 @@
'
data-single-bar-orientation="vertical"
data-single-bar-height="100%"
data-single-bar-width="40"
data-single-bar-width="30"
data-single-bar-used="{{ flavor.used_instances }}"
data-single-bar-average-used="{{ 50 }}"
data-single-bar-auto-scale-selector=".flavors_scale_selector"
@ -150,6 +150,7 @@
</div>
<div class="span6">
<!-- FIXME Will be added later
<div class="circles_chart_time_picker">
<select data-circles-chart-command="change_time"
data-receiver=".rack_health_chart">
@ -159,9 +160,9 @@
<option value="last_month">Last Month</option>
</select>
</div>
-->
<h4>Rack health</h4>
<hr class="header_rule">
<div class="clear"></div>
<ul class="nav nav-tabs"
data-circles-chart-command="change_url"

170
openstack_dashboard/dashboards/infrastructure/static/infrastructure/less/infrastructure.less
View File

@ -9,6 +9,7 @@ body {
// sidebar
.sidebar {
font-size: 95%;
position: fixed;
top: 0;
left: 0;
@ -17,12 +18,27 @@ body {
border-right: 1px solid rgb(210,210,210);
background: rgb(235,235,235);
h1.brand {
text-align: center;
a {
display: inline-block;
width: 80px;
height: 85px;
background-size: 80px 85px;
float: none;
margin: 20px 0;
}
}
.nav-tabs {
margin-top: -30px;
border-bottom: 1px solid rgb(200,200,200);
a {
position: relative;
top: 1px;
padding: 7px 10px;
}
li.active a,
@ -56,24 +72,35 @@ body {
// right part
#main_content {
padding: 0;
padding: 15px 0 25px 0;
margin-left: 240px;
// topbar
.topbar {
padding: 5px 30px;
margin: 0 0 10px 0;
background: rgb(244,244,244);
padding: 0 30px 0 30px;
margin: 0;
background: white;
color: rgb(180, 180, 180);
border: 0 none;
.page-header {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2 {
font-weight: normal;
font-size: 22px;
color: rgb(190,190,190);
font-weight: lighter;
font-size: 19px;
color: rgb(180, 180, 180);
line-height: 24px;
}
#user_info {
position: relative;
top: 10px;
color: inherit;
a {
color: rgb(130, 190, 245);
}
}
}
@ -97,21 +124,24 @@ body {
border-top: 1px solid rgb(230,230,230);
li a {
position: relative;
top: -1px;
border-radius: 0 0 2px 2px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
border-top-width: 0;
}
li.active a {
border: 1px solid rgb(220, 220, 220);
border-top-width: 0;
background: linear-gradient(rgb(249, 249, 249), rgb(235,235,235));
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
background: rgb(110, 110, 110);
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
li:not(.active) a:hover {
border: 1px solid rgb(240, 240, 240);
border-top-width: 0;
background: rgb(249, 249, 249);
background: rgb(244, 244, 244);
}
}
@ -126,14 +156,18 @@ body {
#resource_management_tabs {
font-size: 130%;
border: 0 none;
border-bottom: 1px solid rgb(200, 200, 200);
font-weight: lighter;
a {
padding: 13px 18px;
border-top-width: 1px;
border-bottom-width: 0;
border-radius: 2px 2px 0 0;
}
li.active a,
li:not(.active) a:hover {
border-top-width: 1px;
}
}
}
@ -146,7 +180,7 @@ table.table {
}
th {
background: linear-gradient(rgb(249,249,249), rgb(230,230,230));
background: linear-gradient(rgb(244,244,244), rgb(235,235,235));
font-size: 85%;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
@ -156,8 +190,9 @@ table.table {
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
tr td {
background: linear-gradient(rgb(244,244,244), rgb(230,230,230));
padding: 7px 15px;
background: linear-gradient(rgb(244,244,244), rgb(235,235,235));
padding: 7px 12px;
height: auto;
}
}
@ -175,7 +210,18 @@ table.table {
}
tr td {
padding: 5px;
padding: 0px 10px;
line-height: 1;
height: 40px;
vertical-align: middle;
&.anchor {
padding: 0;
a {
padding: 4px 10px;
}
}
}
.table_search input {
@ -203,8 +249,8 @@ table.table {
#main_content {
h3 {
font-weight: lighter;
font-size: 24px;
color: rgb(120,120,120);
font-size: 26px;
color: rgb(80,80,80);
margin-bottom: 3px;
margin: 0 0 3px 0;
}
@ -239,47 +285,63 @@ table.table {
// capacities
table.capacities{
&.overall_usage{
table.capacities {
&.overall_usage {
margin-top: 5px;
}
td{
td {
padding: 3px;
&.capacity_label{
&.capacity_label {
width: 60px;
padding-right: 5px;
color: rgb(160,160,160);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& div.capacity_bar{
& div.capacity_bar {
line-height: 0;
width: 120px;
}
}
}
table.flavor_usages{
// flavor usages
div.flavor_usage_bar {
max-width: 550px;
}
table.flavor_usages {
width: 100%;
td{
max-width: 550px;
td {
text-align: center;
padding: 3px;
&.flavor_usage_label{
font-size: 17px;
&.flavor_usage_label {
width: 60px;
text-align: center;
}
&.flavor_usage_text{
&.flavor_usage_text {
width: 60px;
text-align: center;
line-height: 1;
}
& div.flavor_usage_bar{
& div.flavor_usage_bar {
width: auto;
text-align: center;
line-height: 0;
height: 150px;
height: 120px;
}
}
}
#interval_selector {
position: absolute;
right: 15px;
@ -322,11 +384,11 @@ svg {
.communication_chart_connection {
display:inline-block;
/*min-width: 100px;
max-width: 400px;*/
width: 18%;
width: 60px;
height: 30px;
vertical-align: middle;
background: url('/static/dashboard/img/communication_flow.png') no-repeat 50% 50%;
background-size: 40px 20px;
}
.circles_chart_time_picker {
@ -341,10 +403,10 @@ svg {
.breadcrumbs {
font-size: 85%;
margin: 0 0 20px 0;
margin: 0 0 25px 0;
a {
color: rgb(180, 180, 180);
color: rgb(170, 170, 170);
text-decoration: underline;
&:hover {
@ -375,10 +437,44 @@ input {
border-radius: 2px;
}
.btn-group .btn:first-child {
border-radius: 2px 0 0 2px;
}
.btn-group .btn:last-child {
border-radius: 0 2px 2px 0;
}
.btn {
background: rgb(243, 243, 243);
&:hover {
background: rgb( 235, 235, 235);
}
&.btn-primary {
background: #0088cc;
&:hover {
background: #006Dcc;
}
}
}
.btn-toolbar.pull-right {
margin: 0;
}
.alerts .icon-warning-sign {
padding-right: 5px;
}
.well {
background: rgb(249, 249, 249);
border-width: 1px;
box-shadow: none;
}
// forms
.modal {
.help_text,

BIN
openstack_dashboard/static/dashboard/img/communication_flow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB