From: Kenneth Keiter <kenkeiter(a)redhat.com>
Upgraded "flash" message display. Fixed headers and
object-level controls.
---
src/app/stylesheets/layout.scss | 408 +++++++++++++----------
src/app/views/layouts/_new_notification.haml | 53 +++
src/app/views/layouts/application.haml | 5 +-
src/app/views/pools/_header_index.haml | 4 -
src/app/views/pools/_header_show.haml | 11 +-
src/app/views/pools/index.haml | 6 +-
src/public/images/flash_error_icon.png | Bin 0 -> 342 bytes
src/public/images/flash_notice_icon.png | Bin 0 -> 477 bytes
src/public/images/flash_warning_icon.png | Bin 0 -> 404 bytes
src/public/images/header_icon_section-index.png | Bin 0 -> 462 bytes
10 files changed, 295 insertions(+), 192 deletions(-)
create mode 100644 src/app/views/layouts/_new_notification.haml
create mode 100644 src/public/images/flash_error_icon.png
create mode 100644 src/public/images/flash_notice_icon.png
create mode 100644 src/public/images/flash_warning_icon.png
create mode 100644 src/public/images/header_icon_section-index.png
diff --git a/src/app/stylesheets/layout.scss b/src/app/stylesheets/layout.scss
index 2c4628d..6068db0 100644
--- a/src/app/stylesheets/layout.scss
+++ b/src/app/stylesheets/layout.scss
@@ -1,6 +1,6 @@
/* ###########################################################################
Generated SCSS for Aeolus UI [aeolus_ui]
-Compiled on Fri May 20 10:40:30 +0200 2011
+Compiled on 2011-06-05 21:07:09 -0700
########################################################################### */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -164,18 +164,9 @@ table {
border-spacing: 0;
}
-thead {
- background: #eee;
-}
-
-th {
- padding-left: 10px;
-}
-
th,
td,
caption {
- padding-left: 10px;
font-weight: normal;
vertical-align: top;
text-align: left;
@@ -188,6 +179,10 @@ svg {
overflow: hidden;
}
+form{
+ display: inline;
+}
+
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Page Layout -- v.0.0.2 [layout] (960.css)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@@ -640,14 +635,14 @@ Page Layout -- v.0.0.2 [layout] (layout.scss)
$width: 960px;
$font-family-base: "Lucida Sans Unicode", "Lucida Grande", Verdana,
Arial, Helvetica, sans-serif;
$font-family-em: "Lucida Sans", "Lucida Sans Unicode", "Lucida
Grande", Verdana, Arial, Helvetica, sans-serif;
-$font-family-primary: "Helvetica Neue", Helvetica, Arial, "Lucida
Grande", sans-serif;
+$font-family-primary: Helvetica, Arial, "Lucida Grande", sans-serif;
/* body */
html, body{ height: 100%; }
body{
- background: url('../../images/body-bg.png');
+ background: url('/../../images/body-bg.png');
font-family: $font-family-base;
font-size: 12px; /* 12px base */
color: #333;
@@ -661,30 +656,6 @@ strong, em, b, i{ font-family: $font-family-em; }
margin-bottom: -40px;
}
-/* typography */
-
-.label{
- font-family: $font-family-base;
- font-size: 12px;
-}
-
-.label.micro{ font-size: 9px; }
-.label.small{ font-size: 11px; }
-
-.label.light{
- font-weight: normal;
- color: #666;
-}
-
-.label.strong{
- font-weight: bold;
- color: #333;
-}
-
-.label.caps{
- text-transform: uppercase;
-}
-
/* Content */
$contentpadding: 7px;
@@ -703,12 +674,12 @@ div#content{
border: 1px solid #999;
position: relative;
z-index: 100;
-
+
div.header{
background-color: #ccc;
height: 60px;
}
-
+
}
@@ -725,27 +696,27 @@ Application Button Set -- v.0.0.1 [button] (button.scss)
/* ------------------------------------------
CSS3 GITHUB BUTTONS (Nicolas Gallagher)
-Licensed under Unlicense
+Licensed under Unlicense
http://github.com/necolas/css3-github-buttons
------------------------------------------ */
/*
-------------------------------------------------------------------------------------------------------------
BUTTON */
-.button {
- position: relative;
- overflow: visible;
- display: inline-block;
- padding: 0.5em 1em;
- border: 1px solid #d4d4d4;
+.button {
+ position: relative;
+ overflow: visible;
+ display: inline-block;
+ padding: 0.5em 1em;
+ border: 1px solid #d4d4d4;
margin: 0;
- text-decoration: none;
- text-shadow: 1px 1px 0 #fff;
- font:11px/normal sans-serif;
- color: #333;
- white-space: nowrap;
- cursor: pointer;
- outline: none;
+ text-decoration: none;
+ text-shadow: 1px 1px 0 #fff;
+ font:11px/normal sans-serif;
+ color: #333;
+ white-space: nowrap;
+ cursor: pointer;
+ outline: none;
background-color: #ececec;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
@@ -753,14 +724,14 @@
http://github.com/necolas/css3-github-buttons
background-image: linear-gradient(#f4f4f4, #ececec);
-webkit-background-clip: padding;
-moz-background-clip: padding;
- -o-background-clip: padding-box;
+ -o-background-clip: padding-box;
/*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
- -webkit-border-radius: 0.2em;
- -moz-border-radius: 0.2em;
- border-radius: 0.2em;
+ -webkit-border-radius: 0.2em;
+ -moz-border-radius: 0.2em;
+ border-radius: 0.2em;
/* IE hacks */
- zoom: 1;
- *display: inline;
+ zoom: 1;
+ *display: inline;
}
.button:hover,
@@ -769,9 +740,9 @@
http://github.com/necolas/css3-github-buttons
.button.active {
border-color: #3072b3;
border-bottom-color: #2a65a0;
- text-decoration: none;
- text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
- color: #fff;
+ text-decoration: none;
+ text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
+ color: #fff;
background-color: #3C8DDE;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
background-image: -moz-linear-gradient(#599bdc, #3072b3);
@@ -800,13 +771,13 @@
http://github.com/necolas/css3-github-buttons
.button.icon:before {
content: "";
- position: relative;
- top: 1px;
+ position: relative;
+ top: 1px;
float:left;
- width: 12px;
- height: 12px;
- margin: 0 0.75em 0 -0.25em;
- background: url(../../images/button-icons.png) 0 99px no-repeat;
+ width: 12px;
+ height: 12px;
+ margin: 0 0.75em 0 -0.25em;
+ background: url(/../../images/button-icons.png) 0 99px no-repeat;
}
.button.arrowup.icon:before { background-position: 0 0; }
@@ -981,10 +952,10 @@
http://github.com/necolas/css3-github-buttons
.button.danger:hover,
.button.danger:focus,
-.button.danger:active {
+.button.danger:active {
border-color: #b53f3a;
border-bottom-color: #a0302a;
- color: #fff;
+ color: #fff;
background-color: #dc5f59;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630));
background-image: -moz-linear-gradient(#dc5f59, #b33630);
@@ -993,7 +964,7 @@
http://github.com/necolas/css3-github-buttons
}
.button.danger:active,
-.button.danger.active {
+.button.danger.active {
border-color: #a0302a;
border-bottom-color: #bf4843;
background-color: #b33630;
@@ -1006,9 +977,9 @@
http://github.com/necolas/css3-github-buttons
/*
.............................................................................................................
Pill */
.button.pill {
- -webkit-border-radius: 50em;
- -moz-border-radius: 50em;
- border-radius: 50em;
+ -webkit-border-radius: 50em;
+ -moz-border-radius: 50em;
+ border-radius: 50em;
}
/*
.............................................................................................................
Disable */
@@ -1020,7 +991,7 @@
http://github.com/necolas/css3-github-buttons
/*
.............................................................................................................
Big */
.button.big {
- font-size: 14px;
+ font-size: 14px;
}
.button.big.icon:before { top: 0; }
@@ -1036,8 +1007,8 @@
http://github.com/necolas/css3-github-buttons
padding: 0;
margin: 0;
/* IE hacks */
- zoom: 1;
- *display: inline;
+ zoom: 1;
+ *display: inline;
}
.button + .button,
@@ -1055,41 +1026,41 @@
http://github.com/necolas/css3-github-buttons
.button-group .button {
float: left;
- margin-left: -1px;
+ margin-left: -1px;
}
.button-group > .button:not(:first-child):not(:last-child),
-.button-group li:not(:first-child):not(:last-child) .button {
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
+.button-group li:not(:first-child):not(:last-child) .button {
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
}
.button-group > .button:first-child,
-.button-group li:first-child .button {
- margin-left: 0;
- -webkit-border-top-right-radius: 0;
- -webkit-border-bottom-right-radius: 0;
- -moz-border-radius-topright: 0;
- -moz-border-radius-bottomright: 0;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
+.button-group li:first-child .button {
+ margin-left: 0;
+ -webkit-border-top-right-radius: 0;
+ -webkit-border-bottom-right-radius: 0;
+ -moz-border-radius-topright: 0;
+ -moz-border-radius-bottomright: 0;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
}
.button-group > .button:last-child,
-.button-group li:last-child > .button {
- -webkit-border-top-left-radius: 0;
- -webkit-border-bottom-left-radius: 0;
- -moz-border-radius-topleft: 0;
- -moz-border-radius-bottomleft: 0;
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
+.button-group li:last-child > .button {
+ -webkit-border-top-left-radius: 0;
+ -webkit-border-bottom-left-radius: 0;
+ -moz-border-radius-topleft: 0;
+ -moz-border-radius-bottomleft: 0;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
}
/*
.............................................................................................................
Minor */
.button-group.minor-group .button {
- border: 1px solid #d4d4d4;
+ border: 1px solid #d4d4d4;
text-shadow: none;
background-image: none;
background-color: #fff;
@@ -1146,15 +1117,15 @@ div.query-input input[type="text"]{
div.query-input input[type="submit"]{
display:inline;
- background: transparent url('../../images/button-search.png') no-repeat left
center;
+ background: transparent url('/../../images/button-search.png') no-repeat left
center;
color: transparent;
border: 0px;
width: 25px; height: 25px;
margin-left: -25px;
outline: none;
cursor: pointer;
- &:hover{ background: transparent url('../../images/button-search-over.png')
no-repeat left center; }
- &:active{ background: transparent
url('../../images/button-search-down.png') no-repeat left center; }
+ &:hover{ background: transparent
url('/../../images/button-search-over.png') no-repeat left center; }
+ &:active{ background: transparent
url('/../../images/button-search-down.png') no-repeat left center; }
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -1164,41 +1135,40 @@ App Masthead -- v.0.0.2 [masthead] (masthead.scss)
header#masthead{
height: 49px;
background-color: #E7E7E7;
- background: url('../../images/masthead-bg.png') repeat-x;
+ background: url('/../../images/masthead-bg.png') repeat-x;
position: relative;
- margin-bottom: 22px;
-
+
img#logo{
position: absolute;
top: 8px;
}
-
+
div.container{
margin: 0 auto;
width: 960px;
overflow: hidden;
position: relative;
}
-
+
a.user-dropdown{
border: 1px solid #ccc;
- background: url('../../images/button-userdrop.png') no-repeat center center;
- background: url('../../images/button-userdrop.png') no-repeat center center,
-moz-linear-gradient(top, rgba(239,239,239,0), rgba(204,204,204,0));
- background: url('../../images/button-userdrop.png') no-repeat center center,
-webkit-gradient(linear,left top,left bottom,color-stop(0, rgb(239,239,239)),color-stop(1,
rgb(204,204,204)));
+ background: url('/../../images/button-userdrop.png') no-repeat center
center;
+ background: url('/../../images/button-userdrop.png') no-repeat center center,
-moz-linear-gradient(top, rgba(239,239,239,0), rgba(204,204,204,0));
+ background: url('/../../images/button-userdrop.png') no-repeat center center,
-webkit-gradient(linear,left top,left bottom,color-stop(0, rgb(239,239,239)),color-stop(1,
rgb(204,204,204)));
width: 46px;
margin-left: 4px;
padding: 5px 2px 5px 2px;
color: transparent;
font-size: 12px; /* match the font-size of the query box, for proper valign */
-
+
&:active{
- background: url('../../images/button-userdrop.png') no-repeat center
center;
- background: url('../../images/button-userdrop.png') no-repeat center
center, -moz-linear-gradient(top, rgba(232,232,232,0), rgba(210,210,210,0));
- background: url('../../images/button-userdrop.png') no-repeat center
center, -webkit-gradient(linear,left top,left bottom,color-stop(0,
rgb(232,232,232)),color-stop(1, rgb(210,210,210)));
+ background: url('/../../images/button-userdrop.png') no-repeat center
center;
+ background: url('/../../images/button-userdrop.png') no-repeat center
center, -moz-linear-gradient(top, rgba(232,232,232,0), rgba(210,210,210,0));
+ background: url('/../../images/button-userdrop.png') no-repeat center
center, -webkit-gradient(linear,left top,left bottom,color-stop(0,
rgb(232,232,232)),color-stop(1, rgb(210,210,210)));
}
-
+
}
-
+
nav#system{
float:right;
margin-top: 6px;
@@ -1207,12 +1177,67 @@ header#masthead{
li{ display: inline; }
li + li{ margin-left: 10px; }
li.separator{
- background: url('../../images/masthead-nav-separator.gif') no-repeat left
top;
+ background: url('/../../images/masthead-nav-separator.gif') no-repeat
left top;
padding: 8px 1px 8px 1px;
}
}
}
-
+
+}
+
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+Alert Flash -- v.0.0.1 [flash] (flash.scss)
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+#flash-hud{
+ width: 944px;
+ margin: 0 auto;
+ background-color: #ddd;
+ -webkit-border-radius: 0px 0px 7px 7px;
+ -moz-border-radius: 0px 0px 7px 7px;
+ border-radius: 0px 0px 7px 7px;
+ border: 1px solid #999;
+ padding: 8px;
+ margin-top: -4px;
+
+ a.control{
+ float: right;
+ color: #999;
+ font-size: 11px;
+ }
+
+ .flash-group{
+ display: table;
+ }
+
+ .flash-subset{
+ display: table-row;
+
+ div.heading{
+ display: table-cell;
+ text-align: right;
+ border-right: 1px solid #ccc;
+ padding-right: 8px;
+ width: 20px;
+ }
+
+ ul{
+ display: table-cell;
+ font-size: 12px;
+ padding-left: 8px;
+ list-style: none;
+
+ li + li{
+ margin-top: 6px;
+ }
+ }
+
+ }
+
+ .flash-group + .flash-group{
+ margin-top: 10px;
+ }
+
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -1224,6 +1249,8 @@ $font-family-nav-primary: "Helvetica Neue", Helvetica,
Arial, "Lucida Grande", s
nav#primary {
+ margin-top: 22px;
+
ul.container{
width: 950px;
margin: 0 auto;
@@ -1234,13 +1261,13 @@ nav#primary {
float: left;
position: relative;
display: inline-block;
- background: url('../../images/tab-inactive-right.png') no-repeat right
top;
+ background: url('/../../images/tab-inactive-right.png') no-repeat right
top;
height: 34px;
margin-right: 6px;
z-index: 1;
- a{
+ a{
display: block;
- background:url('../../images/tab-inactive-left.png') no-repeat left top;
+ background:url('/../../images/tab-inactive-left.png') no-repeat left
top;
padding: 10px 16px 14px 16px;
margin-left: -11px;
font-family: $font-family-nav-primary;
@@ -1255,11 +1282,11 @@ nav#primary {
}
li.active{
margin-top: -5px;
- background: url('../../images/tab-active-right.png') no-repeat right top;
+ background: url('/../../images/tab-active-right.png') no-repeat right top;
z-index: 1000;
height: 43px;
- a{
- background:url('../../images/tab-active-left.png') no-repeat left top;
+ a{
+ background:url('/../../images/tab-active-left.png') no-repeat left top;
padding: 12px 20px 12px 20px;
font-size: 16px;
color: #666;
@@ -1276,10 +1303,10 @@ Breadcrumb Navigation -- v.0.0.2 [nav_hist_bar]
(nav_hist_bar.scss)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
nav#nav_history{
-
+
display: block;
margin: 6px 0px 12px 0px;
-
+
ol.nav_hist_bar{
list-style: none;
@@ -1302,7 +1329,7 @@ nav#nav_history{
}
}
-
+
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -1312,7 +1339,7 @@ Page Header -- v.0.0.1 [header] (header.scss)
$font-family-primary: "Helvetica Neue", Helvetica, Arial, "Lucida
Grande", sans-serif;
div#content .page-header{
-
+
display: block;
background: #ccc;
height: 56px;
@@ -1320,27 +1347,52 @@ div#content .page-header{
padding: 6px;
position: relative;
z-index: 900;
- background: transparent url('../../images/header_bg.png') repeat-x top center;
-
+ background: transparent url('/../../images/header_bg.png') repeat-x top
center;
+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.40);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.40);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.40);
-
+
h1{
font-family: $font-family-primary;
font-weight: 200;
font-size: 25px;
margin-top: 6px;
color: #333;
- text-shadow: 1px 1px 0 #fff;
+ text-shadow: 1px 1px 0 #fff;
display: inline-block;
+ padding: 6px 7px 7px 54px;
}
-
+
h1.pools{
- background: transparent url('../../images/header_icon_pools.png') no-repeat
8px center;
- padding: 6px 7px 7px 54px;
+ background: transparent url('/../../images/header_icon_pools.png') no-repeat
8px center;
}
-
+
+ h1.section-index{
+ background: transparent url('/../../images/header_icon_section-index.png')
no-repeat 8px center;
+ }
+
+ h1.users{
+ background: transparent url('/../../images/header_icon_users.png') no-repeat
8px center;
+ }
+
+ h1.roles{
+ background: transparent url('/../../images/header_icon_roles.png') no-repeat
8px center;
+ }
+
+ h1.providers{
+ background: transparent url('/../../images/header_icon_providers.png')
no-repeat 8px center;
+ }
+
+ h1.provider-accounts{
+ background: transparent
url('/../../images/header_icon_provider-accounts.png') no-repeat 8px center;
+ padding: 6px 7px 7px 60px;
+ }
+
+ h1.settings{
+ background: transparent url('/../../images/header_icon_settings.png')
no-repeat 8px center;
+ }
+
#obj_actions{
position: absolute;
right: 0px;
@@ -1348,9 +1400,9 @@ div#content .page-header{
display: inline-block;
margin-right: 24px;
}
-
+
.corner{
- background: transparent url('../../images/header_corner.png') no-repeat top
center;
+ background: transparent url('/../../images/header_corner.png') no-repeat top
center;
width: 10px;
height: 10px;
position: absolute;
@@ -1358,11 +1410,11 @@ div#content .page-header{
bottom: -10px;
z-index: 1;
}
-
+
.button{
border-color: #fff;
}
-
+
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -1374,30 +1426,30 @@ $dd_padding: 10px;
$dd_icon_padding_right: 4px;
#scoreboard{
-
+
background-color: #efefef;
display: inline-block;
padding: 8px $dd_padding 10px $dd_padding;
height: 40px;
-
+
/* statistic group list */
ul.groups{ list-style: none; }
- ul.groups > li{
- display: inline-block;
- text-align: center;
- margin: 0px;
+ ul.groups > li{
+ display: inline-block;
+ text-align: center;
+ margin: 0px;
}
- ul.groups > li + li{
- background: transparent url('../../images/sb_separator.png') repeat-y 0px
0px;
+ ul.groups > li + li{
+ background: transparent url('/../../images/sb_separator.png') repeat-y 0px
0px;
padding-left: 2px;
margin-left: -6px;
}
-
+
/* statistic sub-group list */
ul.subgroup{ list-style: none; }
ul.subgroup > li{ display: inline-block; text-align: center; }
ul.subgroup > li + li{ margin-left: -$dd_padding; }
-
+
dt{
text-align: center;
font-size: 11px;
@@ -1407,7 +1459,7 @@ $dd_icon_padding_right: 4px;
text-transform: uppercase;
padding: 0px $dd_padding 0px $dd_padding;
}
-
+
dd{
display: inline;
padding: 0px $dd_padding 0px $dd_padding;
@@ -1415,63 +1467,63 @@ $dd_icon_padding_right: 4px;
color: #999;
font-family: $font-family-primary;
}
-
+
dd + dd{
margin-left: -$dd_padding; /* compensate for padding-right */
}
-
+
/* icons */
-
+
dd.pool{
- background: transparent url('../../images/sb_icon_pool.png') no-repeat
$dd_padding 4px;
+ background: transparent url('/../../images/sb_icon_pool.png') no-repeat
$dd_padding 4px;
padding-left: ($dd_padding + $dd_icon_padding_right) + 15px;
}
-
+
dd.pool.partial{
- background: transparent url('../../images/sb_icon_poolsemi.png') no-repeat
$dd_padding 4px;
+ background: transparent url('/../../images/sb_icon_poolsemi.png') no-repeat
$dd_padding 4px;
padding-left: ($dd_padding + $dd_icon_padding_right) + 15px;
}
-
+
dd.provider{
- background: transparent url('../../images/sb_icon_provider.png') no-repeat
$dd_padding 4px;
+ background: transparent url('/../../images/sb_icon_provider.png') no-repeat
$dd_padding 4px;
padding-left: ($dd_padding + $dd_icon_padding_right) + 22px;
}
-
+
dd.deployment{
- background: transparent url('../../images/sb_icon_deployment.png') no-repeat
$dd_padding 4px;
+ background: transparent url('/../../images/sb_icon_deployment.png') no-repeat
$dd_padding 4px;
padding-left: ($dd_padding + $dd_icon_padding_right) + 23px;
}
-
+
dd.instance{
- background: transparent url('../../images/sb_icon_instance.png') no-repeat
$dd_padding 4px;
+ background: transparent url('/../../images/sb_icon_instance.png') no-repeat
$dd_padding 4px;
padding-left: ($dd_padding + $dd_icon_padding_right) + 14px;
}
-
+
dd.instance.pending{
- background: transparent url('../../images/sb_icon_instance_pending.png')
no-repeat $dd_padding 4px;
+ background: transparent url('/../../images/sb_icon_instance_pending.png')
no-repeat $dd_padding 4px;
padding-left: ($dd_padding + $dd_icon_padding_right) + 15px;
}
-
+
dd.instance.failure{
- background: transparent url('../../images/sb_icon_instance_failure.png')
no-repeat $dd_padding 4px;
+ background: transparent url('/../../images/sb_icon_instance_failure.png')
no-repeat $dd_padding 4px;
padding-left: ($dd_padding + $dd_icon_padding_right) + 16px;
}
-
+
dd.alert{
- background: transparent url('../../images/sb_icon_alert.png') no-repeat
$dd_padding 4px;
+ background: transparent url('/../../images/sb_icon_alert.png') no-repeat
$dd_padding 4px;
padding-left: ($dd_padding + $dd_icon_padding_right) + 29px;
}
-
+
dd.update{
- background: transparent url('../../images/sb_icon_update.png') no-repeat
$dd_padding 4px;
+ background: transparent url('/../../images/sb_icon_update.png') no-repeat
$dd_padding 4px;
padding-left: ($dd_padding + $dd_icon_padding_right) + 14px;
}
-
+
dd.quota{
- background: transparent url('../../images/sb_icon_quota.png') no-repeat
$dd_padding 4px;
+ background: transparent url('/../../images/sb_icon_quota.png') no-repeat
$dd_padding 4px;
padding-left: ($dd_padding + $dd_icon_padding_right) + 16px;
}
-
+
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -1481,14 +1533,14 @@ Page Footer -- v.0.0.1 [footer] (footer.scss)
/* Footer */
footer.standard{
-
+
background: rgba(0, 0, 0, 0.20);
position: relative;
height: 40px;
width: 100%;
font-size: 11px;
clear:both;
-
+
div.container{
margin: 0 auto;
width: 946px;
@@ -1496,16 +1548,16 @@ footer.standard{
padding: 0px 10px 0px 10px;
height: 40px;
}
-
+
img.logo{
margin-right: 14px;
}
-
+
span.copyright{
display: inline-block;
color: #666;
}
-
+
nav.footer{
display: inline-block;
padding: 14px;
@@ -1514,6 +1566,6 @@ footer.standard{
padding-right: 6px;
}
}
-
+
}
diff --git a/src/app/views/layouts/_new_notification.haml
b/src/app/views/layouts/_new_notification.haml
new file mode 100644
index 0000000..3cc2b68
--- /dev/null
+++ b/src/app/views/layouts/_new_notification.haml
@@ -0,0 +1,53 @@
+#flash-hud
+ %a.control{:href => '#'} Close
+ -if flash[:success]
+ .notice.flash-group
+ .flash-subset
+ %div.heading
+ =image_tag 'flash_notice_icon.png', :alt => 'Notices'
+ %ul.flashes
+ %li= flash[:success]
+
+ -if flash[:notice]
+ .notice.flash-group
+ .flash-subset
+ %div.heading
+ =image_tag 'flash_notice_icon.png', :alt => 'Notices'
+ %ul.flashes
+ %li= flash[:notice]
+
+ -if flash[:warning]
+ .warning.flash-group
+ .flash-subset
+ %div.heading
+ =image_tag 'flash_warning_icon.png', :alt => 'Warnings'
+ %ul.flashes
+ %li= flash[:warning]
+
+ -if flash[:error]
+ -if !flash[:error][:successes].nil? && !flash[:error][:successes].empty?
+ .notice.flash-group
+ .flash-subset
+ %div.heading
+ =image_tag 'flash_notice_icon.png', :alt => 'Notices'
+ %ul.flashes
+ - flash[:error][:successes].each do |k, v|
+ %li= "#{k}: #{v}"
+ .error.flash-group
+ .flash-subset
+ %div.heading
+ =image_tag 'flash_warning_icon.png', :alt => 'Warnings'
+ %ul.flashes
+ %li= flash[:error][:summary]
+ .flash-subset
+ %div.heading
+ =image_tag 'flash_error_icon.png', :alt => 'Errors'
+ %ul.flashes
+ -if flash[:error].kind_of?(String)
+ %li= flash[:error]
+ -elsif !flash[:error][:failures].nil? &&
!flash[:error][:failures].empty?
+ -flash[:error][:failures].each do |k, v|
+ %li= [k, ': ', v]
+ -else
+ -flash[:error].each do |e|
+ %li= e
diff --git a/src/app/views/layouts/application.haml
b/src/app/views/layouts/application.haml
index 4f3cf1b..1549d54 100644
--- a/src/app/views/layouts/application.haml
+++ b/src/app/views/layouts/application.haml
@@ -9,7 +9,7 @@
= stylesheet_link_tag '/stylesheets/compiled/layout.css'
= stylesheet_link_tag 'jquery.ui-1.8.1/jquery-ui-1.8.1.custom.css'
/[if lt IE 9]
- = stylesheet_link_tag 'http://html5shiv.googlecode.com/svn/trunk/html5.js'
+ = javascript_include_tag
'http://html5shiv.googlecode.com/svn/trunk/html5.js'
= stylesheet_link_tag '/stylesheets/layout_ie.css'
= stylesheet_link_tag '/stylesheets/compiled/custom.css'
@@ -26,6 +26,8 @@
%header#masthead
= render :partial => 'layouts/masthead'
+ = render :partial => '/layouts/new_notification' unless flash.empty?
+
%nav#primary
%ul.container
- # NOTE this is a hack to implement switching between the top-level
@@ -41,7 +43,6 @@
#content
-# works with any 960 container (.container_16 or .container_24)
= render :partial => 'layouts/nav_history'
- = render :partial => '/layouts/notification'
= yield
%footer.standard
diff --git a/src/app/views/pools/_header_index.haml
b/src/app/views/pools/_header_index.haml
index d2a1b1b..e69de29 100644
--- a/src/app/views/pools/_header_index.haml
+++ b/src/app/views/pools/_header_index.haml
@@ -1,4 +0,0 @@
-%header.page-header
- %h1.pools Overview
- -# Insert appropriate controls here, or ommit %ul.controls
- .corner
\ No newline at end of file
diff --git a/src/app/views/pools/_header_show.haml
b/src/app/views/pools/_header_show.haml
index a59f7d7..038ca29 100644
--- a/src/app/views/pools/_header_show.haml
+++ b/src/app/views/pools/_header_show.haml
@@ -1,13 +1,10 @@
%header.page-header
%h1.pools
- = @pool.name
- Pool
- -# Insert appropriate controls here, or ommit %ul.controls
+ = [@pool.name, "Pool"].join(' ')
#obj_actions.button-container
= link_to 'New Deployment', launch_new_deployments_path(:pool_id =>
@pool.id), :class => 'button primary', :id =>
'new_deployment_button'
- .button-group
+ -# ditch form_for since it doesn't allow specification of a CSS class.
+ %form.button-group{:action => pool_url(@pool), :method => 'POST'}
= link_to 'Edit', edit_pool_path(@pool), :class => 'button
pill', :id => 'edit_pool_button'
- - form_tag do
- = hidden_field(@pool, :id)
- = restful_submit_tag('Delete', 'destroy', pool_url(@pool),
'DELETE', :class => "button pill danger")
+ = restful_submit_tag('Delete', 'destroy', pool_url(@pool),
'DELETE', :class => "button pill danger")
.corner
diff --git a/src/app/views/pools/index.haml b/src/app/views/pools/index.haml
index 99cb71d..a89b180 100644
--- a/src/app/views/pools/index.haml
+++ b/src/app/views/pools/index.haml
@@ -1,4 +1,8 @@
-= render :partial => 'header_index'
+%header.page-header
+ %h1.section-index Overview
+ -# Insert appropriate controls here, or ommit %ul.controls
+ .corner
+
= render :partial => 'scoreboard_index'
= render :partial => 'alerts_index'
= pretty_filter_toggle(pools_path(:view => 'pretty'), pools_path(:view =>
'filter'))
diff --git a/src/public/images/flash_error_icon.png
b/src/public/images/flash_error_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2667d5fb1a0a6a54eeea02efb6ef2590ef85b53
GIT binary patch
literal 342
zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1|-AI^@Rf|mSQK*5Dp-y;YjHK@;M7UB8wRq
zxPc0}g%~g0t@{HMlqqqIC<)F_D=AMbN@Z|N$xljEaLX)8Ezd8?E>>_3HZ9!x*bJyn
z1f<TnC^fMpGe1uuBr`Xa!A##w-_X#zK*kj)zroYRF~p*G?UjqXhZICwAId*s$a~~0
z$)J8Pu!O~YgS15x^M^~myAFO`IzviOukrJhg4z1)PT4n94+&N<s(+d(8}p4@iK!vi
zfx)T8Jug9ef>N6H3E3T)2GN<HN(!!;Y-V+tyrI1<MWSTInOc_hjXo?dGmSbWR^-2Z
zb0EWk`;2Vsv@Zz^+kOlD+Z*ffM`hD8w;cH-@6D_q_^xgFV7Zv>4g1fgDG_3f1~2O`
e%}zA`&AY18kdw!I-fW=T89ZJ6T-G@yGywqBMt92q
literal 0
HcmV?d00001
diff --git a/src/public/images/flash_notice_icon.png
b/src/public/images/flash_notice_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0b17db9b834aabb024831be36194e0f839f4088
GIT binary patch
literal 477
zcmV<30V4j1P)<h;3K|Lk000e1NJLTq000sI000vR1^@s6oswPh00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|9CSrkbW?9;ba!ELWdK2BZ(?O2Mrm?o
zcW-iQb09-gHF34$HUIzs6m&&cbVG7wVRUJ4ZXi@?ZDjy9FE%eRF-ve9MF0Q+H%UZ6
zR5*>5l)ZU_Fc5}c@~96RgbgUH-fR%OfoW)yOc0L%rByKknIH^6;Sm@?8<2v-mO=dF
zYjm9M-se8)K|$a5j0%E)y~<lcpavo!Rl7Uqx&TLsKLephz<Eb=VKg>xNq}D`e^Q?0
zl1hPuK;`7?>!Gg|P>c!Swg!^50^TIHKn9?I7{F*wTO;KyDe&&3vg@I@054n34rFG@
zXzKApd5SMGa$z*q*{*<BiSL$1O(!}7AHX-z2-s^$4nAE1bxs@$ESgv<ji#PjeFBMR
zcjVY;I>%DSU>%;V&JWvYDi@Zw^v-tXoSSRae``~is5F|!SHB4Iz-~M&dA0h}3anbI
z*_`OVQa}SFc}pYl9woBg>lN_D@b@2iyf1rXr5AwlJqj7FGujF1fFGl=;|u!--^yZT
TXV2Oy00000NkvXXu0mjfC7!&Q
literal 0
HcmV?d00001
diff --git a/src/public/images/flash_warning_icon.png
b/src/public/images/flash_warning_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..4dc710819d051fbd0a8e796e5b2cadb5d4cb17f2
GIT binary patch
literal 404
zcmeAS@N?(olHy`uVBq!ia0vp^f<P?5!3HEh7*2@?QY^(zo*^7SP{WbZ0pxQQctjR6
zFmMZjFyp1Wb$@_@G9|7NCBgY=CFO}lsSJ)O`AMk?Zka`?<@rU~#R|^BriEJ{n*r5{
zfYdn`r6!hS=I1GdWag$anCYA88yb2S$hZRK-+8(?hFJ72opdnpuz`T<{i+@9d`VUb
zZmbqB6=Yi`pL@q}kx}NN=1LV!g;|`U4x9^{o*uAz%&9GO!v5y!yU*1lom8a`Get16
zCn)ZGbJs3(7T1Go48jRqHrMUgeh4fuKQO^BxnhSzlGxtMv;QScaud@(Fxl4Ml#Rb{
zPQ;c2zgL({kJ%>GeCxOR1uwn!$34XxLQ_w(q_1}GI99-~bKZfW%J?7W!!!9d8$BO4
z%{a<)!-DznLOZMM@=2%LR~03<J~6r4*1o1e(jj^Jiq$6PRK-`WDc#0AD_%#>lWD?5
q*&p$7<(C-p!xgUGSF4)KaX?(n*!iJT=x$IjGkCiCxvX<aXaWG2%9BR`
literal 0
HcmV?d00001
diff --git a/src/public/images/header_icon_section-index.png
b/src/public/images/header_icon_section-index.png
new file mode 100644
index 0000000000000000000000000000000000000000..de3c1fc5ed501735f7273ce2bdc7cf5d88462682
GIT binary patch
literal 462
zcmeAS@N?(olHy`uVBq!ia0vp^azL!c!3HEROKK+pDVAa<&kznEsNqQI0P;BtJR*x3
z7`TN%nDNrxx<5ccnG)BClHmNblJdl&R0hYC{G?O`x6Go{^8BLgVg=`5)55Kf&4B7e
zK<b=}QWHxu^Yau!GILWI%=FFl4Gp~uWLy~-7&Say977^n-(I_z+iW0k>|_0^ebad_
z<vEyT>|nekc#HQCThD~N3pp29`7EU`@V;Ps$MS{I-IY(#i)9)AKNb5QI$x|6lQ#!k
zZQH-b^@u^@tYuH%Epuu6l>cDuDz)MR(hI__o|KNLn7w+o{DaH9%1UKCA9n0)OR&H1
z@b+qt`FaNK2*H)dn)1(1&px(eCu0uB4*lPjcIw<Y&l^7LoX*L(krMfhG0|U-dylNT
z;=^*mmClE!c8J_{(y;i>z3@Sa-j0B)$1NYQCz!K5-@^V^<mQT3r!98~O%(lb>ZPxV
zTUlzPTCD+t(kAhV>ItsDyUuug5Yl+?C2G%)=`YPrZc5i=6*3Q6|17<>K6HPBb?vKp
zOAqf%w>m2)UAa$cpX%H+{*U{u4hi-Zv?$jY?tk|!U32<|Mb^MDW$<+Mb6Mw<&;$VG
C{I%}@
literal 0
HcmV?d00001
--
1.7.4.2