Updated Branches: refs/heads/ui-restyle 00d1af144 -> 6b32178a1
Style infrastructure home page Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/6b32178a Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/6b32178a Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/6b32178a Branch: refs/heads/ui-restyle Commit: 6b32178a1861edc25eb2928f14ba26a05f1d8078 Parents: 00d1af1 Author: Brian Federle <brian.fede...@citrix.com> Authored: Tue Oct 15 14:42:05 2013 -0700 Committer: Brian Federle <brian.fede...@citrix.com> Committed: Tue Oct 15 14:55:03 2013 -0700 ---------------------------------------------------------------------- ui/index.jsp | 3 - ui/stylesheets/cloudstack.css | 116 +++++++++++++++++++++++++++++++- ui/stylesheets/cloudstack.scss | 1 + ui/stylesheets/csui/_button.scss | 2 +- ui/stylesheets/csui/_toolbar.scss | 3 +- ui/stylesheets/infrastructure.scss | 72 ++++++++++++++++++++ 6 files changed, 189 insertions(+), 8 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cloudstack/blob/6b32178a/ui/index.jsp ---------------------------------------------------------------------- diff --git a/ui/index.jsp b/ui/index.jsp index 8599849..58d0cca 100644 --- a/ui/index.jsp +++ b/ui/index.jsp @@ -1031,9 +1031,6 @@ under the License. <!-- Zone dashboard --> <div class="system-dashboard zone"> - <div class="head"> - <span><fmt:message key="label.menu.infrastructure"/></span> - </div> <ul class="status_box good"> <li class="block zones"> <span class="header"><fmt:message key="label.zones"/></span> http://git-wip-us.apache.org/repos/asf/cloudstack/blob/6b32178a/ui/stylesheets/cloudstack.css ---------------------------------------------------------------------- diff --git a/ui/stylesheets/cloudstack.css b/ui/stylesheets/cloudstack.css index f0d109a..1f67bdb 100644 --- a/ui/stylesheets/cloudstack.css +++ b/ui/stylesheets/cloudstack.css @@ -5419,7 +5419,7 @@ ul.ui-tabs-nav { cursor: pointer; text-align: center; background: none; - border-color: white; + border-color: transparent; background-color: white; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gray)); background-image: -webkit-linear-gradient(white, gray); @@ -5499,6 +5499,116 @@ ul.ui-tabs-nav { .dashboard.admin .zone-stats ul li .info .value { font-size: 18px; } +.system-dashboard ul { + padding: 0; + margin: auto; } + .system-dashboard ul li { + list-style: none; + border: 1px solid #ccc; + float: left; + width: 200px; + height: 200px; + margin: 20px; + background-color: #ededed; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #ededed), color-stop(100%, white)); + background-image: -webkit-linear-gradient(#ededed 25%, white); + background-image: linear-gradient(#ededed 25%, white); } + .system-dashboard ul li .header { + *zoom: 1; + display: block; + background: #ededed; + padding: 10px; + padding-left: 20px; + font-weight: bold; + color: #6d6d6d; } + .system-dashboard ul li .header:before, .system-dashboard ul li .header:after { + content: " "; + display: table; } + .system-dashboard ul li .header:after { + clear: both; } + .system-dashboard ul li .header .button.action { + background-color: white; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gray)); + background-image: -webkit-linear-gradient(white, gray); + background-image: linear-gradient(white, gray); + display: block; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 12px; + padding-right: 12px; + min-width: 92px; + font-size: 12px; + border-radius: 3px; + border: 1px solid black; + cursor: pointer; + text-align: center; + float: right; + margin-left: 10px; } + .system-dashboard ul li .header .button.action:hover { + box-shadow: inset 0 0 10px black; } + .system-dashboard ul li .header input, .system-dashboard ul li .header label, .system-dashboard ul li .header select { + float: left; + margin: 0 10px 0 10px; + padding-top: 6px; + padding-bottom: 6px; + font-size: 12px; + height: 35px; } + .system-dashboard ul li .header label { + margin-right: 0px; } + .system-dashboard ul li .header .search-bar { + float: right; } + .system-dashboard ul li .icon { + display: none; } + .system-dashboard ul li .total { + *zoom: 1; + display: block; + font-size: 48px; + color: black; + margin-left: 20px; + text-shadow: 0px 1px 1px white; } + .system-dashboard ul li .total:before, .system-dashboard ul li .total:after { + content: " "; + display: table; } + .system-dashboard ul li .total:after { + clear: both; } + .system-dashboard ul li .view-all { + background-color: white; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gray)); + background-image: -webkit-linear-gradient(white, gray); + background-image: linear-gradient(white, gray); + display: block; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 12px; + padding-right: 12px; + min-width: 92px; + font-size: 12px; + border-radius: 3px; + border: 1px solid black; + cursor: pointer; + text-align: center; + background: none; + border-color: transparent; + margin: 60px auto; + border-radius: 0px; } + .system-dashboard ul li .view-all:hover { + box-shadow: inset 0 0 10px black; } + .system-dashboard ul li .view-all:hover { + box-shadow: none; + border-color: #ccc; } + .system-dashboard ul li .view-all:hover { + box-shadow: inset 0px 0px 10px #a6a6a6; + background: #e0e0e0; } + .system-dashboard ul li .view-all:after { + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + text-decoration: inherit; + -webkit-font-smoothing: antialiased; + *margin-right: .3em; + content: "\f054"; + margin-left: 10px; } + .action.edit .icon { background-position: 1px -1px; } @@ -6417,7 +6527,7 @@ ul.ui-tabs-nav { cursor: pointer; text-align: center; background: none; - border-color: white; + border-color: transparent; width: 150px; height: 50px; border: none; @@ -7028,7 +7138,7 @@ body { cursor: pointer; text-align: center; background: none; - border-color: white; + border-color: transparent; float: right; } .toolbar .button.refresh:hover { box-shadow: inset 0 0 10px black; } http://git-wip-us.apache.org/repos/asf/cloudstack/blob/6b32178a/ui/stylesheets/cloudstack.scss ---------------------------------------------------------------------- diff --git a/ui/stylesheets/cloudstack.scss b/ui/stylesheets/cloudstack.scss index a0fc661..8516e36 100644 --- a/ui/stylesheets/cloudstack.scss +++ b/ui/stylesheets/cloudstack.scss @@ -17,6 +17,7 @@ @import "csui/csui"; @import "browser"; @import "dashboard"; +@import "infrastructure"; @import "icons"; @import "instance-wizard"; @import "list-view"; http://git-wip-us.apache.org/repos/asf/cloudstack/blob/6b32178a/ui/stylesheets/csui/_button.scss ---------------------------------------------------------------------- diff --git a/ui/stylesheets/csui/_button.scss b/ui/stylesheets/csui/_button.scss index 754ec3a..fa00d0c 100644 --- a/ui/stylesheets/csui/_button.scss +++ b/ui/stylesheets/csui/_button.scss @@ -38,7 +38,7 @@ @include csui-button; background: none; - border-color: white; + border-color: transparent; &:hover { box-shadow: none; http://git-wip-us.apache.org/repos/asf/cloudstack/blob/6b32178a/ui/stylesheets/csui/_toolbar.scss ---------------------------------------------------------------------- diff --git a/ui/stylesheets/csui/_toolbar.scss b/ui/stylesheets/csui/_toolbar.scss index 1a3b948..02ab9aa 100644 --- a/ui/stylesheets/csui/_toolbar.scss +++ b/ui/stylesheets/csui/_toolbar.scss @@ -1,9 +1,10 @@ $csui-toolbar-field-height: 35px; +$csui-toolbar-color: lighten(#e0e0e0, 5%); @mixin csui-toolbar { @include row; - background: lighten(#e0e0e0, 5%); + background: $csui-toolbar-color; padding: 10px; .button.action { http://git-wip-us.apache.org/repos/asf/cloudstack/blob/6b32178a/ui/stylesheets/infrastructure.scss ---------------------------------------------------------------------- diff --git a/ui/stylesheets/infrastructure.scss b/ui/stylesheets/infrastructure.scss new file mode 100644 index 0000000..cf5c9ab --- /dev/null +++ b/ui/stylesheets/infrastructure.scss @@ -0,0 +1,72 @@ +// Licensed to the Apache Software Foundation (ASF) under one +// or more contributor license agreements. See the NOTICE file +// distributed with this work for additional information +// regarding copyright ownership. The ASF licenses this file +// to you under the Apache License, Version 2.0 (the +// "License"); you may not use this file except in compliance +// with the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, +// software distributed under the License is distributed on an +// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +// KIND, either express or implied. See the License for the +// specific language governing permissions and limitations +// under the License. + +// Infra. home dashboard +.system-dashboard { + ul { + padding: 0; + margin: auto; + + li { + list-style: none; + border: 1px solid #ccc; + float: left; + width: 200px; + height: 200px; + margin: 20px; + @include linear-gradient($csui-toolbar-color 25%, white); + + .header { + @include csui-toolbar; + + padding-left: 20px; + font-weight: bold; + color: darken($csui-toolbar-color, 50%); + } + + .icon { + display: none; + } + + .total { + @include row; + + font-size: 48px; + color: black; + margin-left: 20px; + text-shadow: 0px 1px 1px white; + } + + .view-all { + @include csui-button-simple; + + margin: 60px auto; + border-radius: 0px; + + &:hover { + box-shadow: inset 0px 0px 10px darken(#ccc, 15%); + background: darken($csui-toolbar-color, 5%); + } + + &:after { + @include icon($chevron-right); + margin-left: 10px; + } + } + } + } +} \ No newline at end of file
