Skip to content

Commit f1eaa97

Browse files
bfederlebfederle
committed
Dashboard UI: Clean up layout
-Remove borders from dashboard items to enhance clarity -Fix layout of events/alerts
1 parent 7695fff commit f1eaa97

1 file changed

Lines changed: 43 additions & 53 deletions

File tree

‎ui/css/cloudstack3.css‎

Lines changed: 43 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -4093,7 +4093,7 @@ Dialogs*/
40934093
/**** Head*/
40944094
.dashboard.admin .dashboard-container.head {
40954095
width: 766px;
4096-
height: 290px;
4096+
height: 331px;
40974097
margin: 9px 0 0;
40984098
float: left;
40994099
}
@@ -4103,7 +4103,7 @@ Dialogs*/
41034103
padding: 4px 4px 8px;
41044104
width: 100%;
41054105
float: left;
4106-
margin: 0 0 9px;
4106+
margin: 0;
41074107
color: #FFFFFF;
41084108
}
41094109

@@ -4153,7 +4153,7 @@ Dialogs*/
41534153
/**** Charts / stats*/
41544154
.dashboard.admin .zone-stats {
41554155
width: 774px;
4156-
height: 274px;
4156+
height: 348px;
41574157
overflow: auto;
41584158
overflow-x: hidden;
41594159
/*+placement:shift 0px -11px;*/
@@ -4164,20 +4164,16 @@ Dialogs*/
41644164

41654165
.dashboard.admin .zone-stats ul {
41664166
width: 796px;
4167-
/*+placement:shift -1px 0px;*/
4167+
/*+placement:shift -2px 11px;*/
41684168
position: relative;
4169-
left: -1px;
4170-
top: 0px;
4169+
left: -2px;
4170+
top: 11px;
41714171
}
41724172

41734173
.dashboard.admin .zone-stats ul li {
4174-
background: #FFFFFF url(../images/bg-gradients.png) repeat-x 0px -1244px;
4175-
width: 387px;
4176-
font-size: 11px;
4177-
border: 1px solid #BDBDBD;
4178-
border-left: none;
4179-
border-top: none;
4180-
height: 73px;
4174+
width: 388px;
4175+
font-size: 14px;
4176+
height: 79px;
41814177
float: left;
41824178
position: absolute;
41834179
position: relative;
@@ -4195,28 +4191,41 @@ Dialogs*/
41954191
}
41964192

41974193
.dashboard.admin .zone-stats ul li .label {
4198-
width: 138px;
4194+
width: 111px;
41994195
float: left;
4200-
padding: 22px 0px 0 10px;
4196+
font-weight: 100;
4197+
border-bottom: 1px solid #E2E2E2;
4198+
margin: 5px 0 0 22px;
4199+
padding: 22px 0 7px;
42014200
}
42024201

42034202
.dashboard.admin .zone-stats ul li .info {
42044203
float: left;
4205-
width: 120px;
4204+
width: 151px;
4205+
white-space: nowrap;
42064206
margin: 12px 0 0;
42074207
color: #636363;
42084208
}
42094209

42104210
.dashboard.admin .zone-stats ul li .info .name {
42114211
font-weight: bold;
4212+
margin-top: 8px;
4213+
margin-bottom: 9px;
4214+
font-size: 12px;
4215+
font-weight: 100;
4216+
/*[empty]color:;*/
42124217
}
42134218

42144219
.dashboard.admin .zone-stats ul li .pie-chart-container {
4215-
width: 95px;
4220+
width: 91px;
42164221
height: 69px;
42174222
overflow: hidden;
42184223
float: left;
42194224
position: relative;
4225+
/*+placement:shift -8px 7px;*/
4226+
position: relative;
4227+
left: -8px;
4228+
top: 7px;
42204229
}
42214230

42224231
.dashboard.admin .zone-stats ul li .pie-chart-container .percent-label {
@@ -4343,7 +4352,7 @@ Dialogs*/
43434352
.dashboard.admin .dashboard-container.sub.alerts {
43444353
float: left;
43454354
margin: 0 12px 0 0;
4346-
height: 313px;
4355+
height: 270px;
43474356
overflow: hidden;
43484357
position: relative;
43494358
}
@@ -4354,50 +4363,38 @@ Dialogs*/
43544363

43554364
.dashboard.admin .dashboard-container.sub.alerts ul {
43564365
width: 368px;
4357-
height: 274px;
4366+
height: 234px;
43584367
overflow: auto;
43594368
overflow-x: hidden;
43604369
position: relative;
43614370
margin: 0px 0 0 8px;
43624371
}
43634372

43644373
.dashboard.admin .dashboard-container.sub.alerts ul li {
4365-
display: block;
4366-
width: 358px;
4367-
height: 42px;
4368-
color: #000000;
4369-
background: url(../images/bg-gradients.png) 0px -48px;
4374+
background: #F0F0F0;
4375+
float: left;
43704376
border: 1px solid #D4D0D0;
4371-
clear: both;
4372-
/*+placement:shift 0px 15px;*/
4373-
position: relative;
4374-
left: 0px;
4375-
top: 15px;
4376-
/*+border-radius:5px;*/
4377-
-moz-border-radius: 5px;
4378-
-webkit-border-radius: 5px;
4379-
-khtml-border-radius: 5px;
4380-
border-radius: 5px;
4381-
border-radius: 5px 5px 5px 5px;
4382-
margin: 0px 0 12px;
4383-
/*[empty]color:;*/
4384-
padding: 0;
4377+
/*+border-radius:3px;*/
4378+
-moz-border-radius: 3px;
4379+
-webkit-border-radius: 3px;
4380+
-khtml-border-radius: 3px;
4381+
border-radius: 3px;
4382+
margin: 9px;
4383+
padding: 8px;
43854384
}
43864385

43874386
.dashboard.admin .dashboard-container.sub.alerts ul li .content {
4388-
height: 43px;
4389-
padding: 0 0px 0 63px;
4390-
margin: 0;
4391-
background: url(../images/icons.png) no-repeat -601px -428px;
43924387
}
43934388

43944389
.dashboard.admin .dashboard-container.sub.alerts ul li {
43954390
}
43964391

43974392
.dashboard.admin .dashboard-container.sub.alerts ul li span.title {
43984393
font-weight: bold;
4399-
font-size: 11px;
4400-
margin: 7px 0 0;
4394+
font-size: 14px;
4395+
font-weight: 100;
4396+
color: #266E9A;
4397+
margin: 3px 0 5px;
44014398
/*+text-shadow:0px 1px #FFFFFF;*/
44024399
-moz-text-shadow: 0px 1px #FFFFFF;
44034400
-webkit-text-shadow: 0px 1px #FFFFFF;
@@ -4407,16 +4404,9 @@ Dialogs*/
44074404
}
44084405

44094406
.dashboard.admin .dashboard-container.sub.alerts ul li p {
4410-
display: block;
4411-
clear: both;
4412-
font-size: 11px;
44134407
float: left;
4414-
height: 10px;
4415-
max-width: 287px;
4416-
margin-top: 1px;
4417-
overflow: hidden;
4418-
text-overflow: ellipsis;
4419-
white-space: nowrap;
4408+
margin: 4px 0px 0px;
4409+
color: #252525;
44204410
}
44214411

44224412
.dashboard.admin .dashboard-container.sub.alerts ul li p br {

0 commit comments

Comments
 (0)