launchpad-reviewers team mailing list archive
-
launchpad-reviewers team
-
Mailing list archive
-
Message #06552
[Merge] lp:~huwshimi/maas/further-design-integration into lp:maas
Huw Wilkins has proposed merging lp:~huwshimi/maas/further-design-integration into lp:maas.
Requested reviews:
Launchpad code reviewers (launchpad-reviewers)
Related bugs:
Bug #942505 in MaaS: "Dummy content on the node listing page should be removed."
https://bugs.launchpad.net/maas/+bug/942505
For more details, see:
https://code.launchpad.net/~huwshimi/maas/further-design-integration/+merge/95314
This branch integrates a lot more of the design changes. The changes include:
- Fixed login footer position
- Added additional space to bottom of page
- Added hover background colour to user options
- Removed site switcher from dashoboard (the MaaS title is already in the heading)
- Added MaaS title to login screen
- Improved styling of dashboard input field
- Moved yui overlay and panel css into individual component files
- Added a grid system (possibly temporary in favour of 960.gs, but we need to figure out license issues with that first)
- Improved layout of view user page
- Removed dummy content from node listings page
- Added new search box style for both node listing and header
- Improved layout of node listing to match designs
- Added hover to table rows
--
https://code.launchpad.net/~huwshimi/maas/further-design-integration/+merge/95314
Your team Launchpad code reviewers is requested to review the proposed merge of lp:~huwshimi/maas/further-design-integration into lp:maas.
=== modified file 'src/maasserver/static/css/components/blocks.css'
--- src/maasserver/static/css/components/blocks.css 2012-02-22 06:34:23 +0000
+++ src/maasserver/static/css/components/blocks.css 2012-03-01 06:29:17 +0000
@@ -1,9 +1,56 @@
.block {
border: 0 solid #e5e2e0;
- padding-bottom: 15px;
- margin-bottom: 15px;
+ margin: 0 10px 10px 10px;
+ float: left;
+ }
+.block.first {
+ clear: left;
+ margin-left: 0;
+ }
+.block.last {
+ clear: right;
+ margin-right: 0;
}
.block.full-width {
width: 100%;
+ margin-left: 0;
+ margin-right: 0;
+ padding-bottom: 10px;
border-bottom-width: 1px;
}
+.size1 {
+ width: 60px;
+ }
+.size2 {
+ width: 120px;
+ }
+.size3 {
+ width: 180px;
+ }
+.size4 {
+ width: 240px;
+ }
+.size5 {
+ width: 300px;
+ }
+.size6 {
+ width: 360px;
+ }
+.size7 {
+ width: 420px;
+ }
+.size8 {
+ width: 480px;
+ }
+.size9 {
+ width: 540px;
+ }
+.size10 {
+ width: 600px;
+ }
+.size11 {
+ width: 660px;
+ }
+.size12 {
+ width: 720px;
+ }
=== added file 'src/maasserver/static/css/components/data_list.css'
--- src/maasserver/static/css/components/data_list.css 1970-01-01 00:00:00 +0000
+++ src/maasserver/static/css/components/data_list.css 2012-03-01 06:29:17 +0000
@@ -0,0 +1,11 @@
+.data-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+.data-list h4 {
+ margin-bottom: 5px;
+ }
+.data-list span {
+ font-size: 16px;
+ }
=== added file 'src/maasserver/static/css/components/search_box.css'
--- src/maasserver/static/css/components/search_box.css 1970-01-01 00:00:00 +0000
+++ src/maasserver/static/css/components/search_box.css 2012-03-01 06:29:17 +0000
@@ -0,0 +1,5 @@
+input.search-box {
+ padding-left: 22px;
+ color: #aea79f;
+ background: #fff url(../../img/search_icon.png) no-repeat 5px center;
+ }
=== modified file 'src/maasserver/static/css/components/table_list.css'
--- src/maasserver/static/css/components/table_list.css 2012-02-22 06:34:23 +0000
+++ src/maasserver/static/css/components/table_list.css 2012-03-01 06:29:17 +0000
@@ -1,20 +1,32 @@
-table.list tr {
- border-width: 0 0 1px 0;
- border-style: solid;
- border-color: #e5e2e0;
+table.list {
+ border-collapse: separate;
+ margin-bottom: 10px;
}
table.list th {
padding: 5px;
}
-table.list tr.actions {
+table.list tr.odd {
background-color: #f2f2f2;
}
-table.list tr.actions td {
- padding: 5px 10px;
- }
-table.list tr.actions input[type="submit"] {
- padding: 2px 10px;
- }
table.list td {
- padding: 10px 5px;
+ padding: 7px 5px;
+ border-width: 1px 0;
+ border-style: solid;
+ border-color: transparent;
+ }
+table.list td:first-child {
+ border-left-width: 1px;
+ -moz-border-radius: 4px 0 0 4px;
+ -webkit-border-radius: 4px 0 0 4px;
+ border-radius: 4px 0 0 4px;
+ }
+table.list td:last-child {
+ border-right-width: 1px;
+ -moz-border-radius: 0 4px 4px 0;
+ -webkit-border-radius: 0 4px 4px 0;
+ border-radius: 0 4px 4px 0;
+ }
+table.list tr:hover td {
+ border-color: #dd4814;
+ cursor: pointer;
}
=== modified file 'src/maasserver/static/css/components/title_form.css'
--- src/maasserver/static/css/components/title_form.css 2012-02-22 05:11:10 +0000
+++ src/maasserver/static/css/components/title_form.css 2012-03-01 06:29:17 +0000
@@ -10,6 +10,9 @@
margin: 6px 10px;
padding: 4px;
width: 97%;
+ -moz-border-radius: 6px;
+ -webkit-border-radius: 6px;
+ border-radius: 6px;
}
.page-title-form input:focus,
.page-title-form input:hover {
=== added file 'src/maasserver/static/css/components/yui_overlay.css'
--- src/maasserver/static/css/components/yui_overlay.css 1970-01-01 00:00:00 +0000
+++ src/maasserver/static/css/components/yui_overlay.css 2012-03-01 06:29:17 +0000
@@ -0,0 +1,32 @@
+.yui3-overlay {
+ background-color: #fff;
+ -moz-border-radius: 0 0 6px 6px;
+ -webkit-border-radius: 0 0 6px 6px;
+ border-radius: 0 0 6px 6px;
+ -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
+ box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
+ }
+.yui3-overlay ul {
+ padding: 5px 0;
+ -webkit-box-shadow: inset 0 2px 2px 0 rgba(0,0,0,0.4);
+ box-shadow: inset 0 2px 2px 0 rgba(0,0,0,0.4);
+ }
+.yui3-overlay li {
+ float: none;
+ }
+.yui3-overlay a {
+ display: block;
+ padding: 6px 20px;
+ color: #dd4814 !important;
+ border-bottom: 1px solid #e5e2e0;
+ }
+.yui3-overlay li:last-child a {
+ border-bottom: none;
+ }
+.yui3-overlay a:focus,
+.yui3-overlay a:hover {
+ background-color: #f2f2f2;
+ }
+.yui3-overlay-hidden{
+ display: none;
+ }
=== added file 'src/maasserver/static/css/components/yui_panel.css'
--- src/maasserver/static/css/components/yui_panel.css 1970-01-01 00:00:00 +0000
+++ src/maasserver/static/css/components/yui_panel.css 2012-03-01 06:29:17 +0000
@@ -0,0 +1,41 @@
+.yui3-widget-mask {
+ background-color: #000;
+ opacity: 0.3;
+ }
+.yui3-panel {
+ background-color: #FFF;
+ padding: 50px 80px 50px 80px;
+ -moz-border-radius: 0 0 6px 6px;
+ -webkit-border-radius: 0 0 6px 6px;
+ border-radius: 0 0 6px 6px;
+ -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,1);
+ box-shadow: 0 0 15px 0 rgba(0,0,0,1);
+ }
+.yui3-widget-hd {
+ margin-bottom: 30px;
+ font-size: 24px;
+ }
+.yui3-widget-ft {
+ margin-top: 50px;
+ }
+.yui3-widget-button-wrapper {
+ width: 100%;
+ }
+.yui3-widget-button-wrapper .spinner {
+ float: right;
+ margin: 8px 10px 0 0;
+ }
+.yui3-panel .yui3-button {
+ float: right;
+ }
+.yui3-panel .yui3-button.link-button {
+ float: left;
+ padding-left: 0;
+ padding-right: 0;
+ color: #dd4814;
+ border: none;
+ background: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ font-size: 13px;
+ }
=== modified file 'src/maasserver/static/css/forms.css'
--- src/maasserver/static/css/forms.css 2012-02-27 10:20:20 +0000
+++ src/maasserver/static/css/forms.css 2012-03-01 06:29:17 +0000
@@ -53,6 +53,7 @@
input[type="submit"] {
padding: 4px 30px;
color: #fff;
+ font-size: 14px;
border: 1px solid #ab370f;
background-color: #DD4814;
background-image: linear-gradient(bottom, rgb(199,66,18) 0%, rgb(221,74,20) 100%);
@@ -65,7 +66,6 @@
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
- text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
.yui3-button:hover,
.button:hover,
=== modified file 'src/maasserver/static/css/import.css'
--- src/maasserver/static/css/import.css 2012-02-22 06:34:23 +0000
+++ src/maasserver/static/css/import.css 2012-03-01 06:29:17 +0000
@@ -9,3 +9,7 @@
@import url("components/table_list.css");
@import url("components/title_form.css");
@import url("components/blocks.css");
+@import url("components/yui_panel.css");
+@import url("components/yui_overlay.css");
+@import url("components/data_list.css");
+@import url("components/search_box.css");
=== modified file 'src/maasserver/static/css/layout.css'
--- src/maasserver/static/css/layout.css 2012-02-22 04:16:32 +0000
+++ src/maasserver/static/css/layout.css 2012-03-01 06:29:17 +0000
@@ -77,40 +77,12 @@
#header-search {
margin: 18px 15px 0 0;
}
-#header-search input {
- margin: 0;
- }
+
#header-search input[type="text"] {
- width: 240px;
- padding: 6px 15px;
- border: none;
- color: #aea79f;
- -moz-border-radius: 6px 0 0 16px;
- -webkit-border-radius: 6px 0 0 6px;
- border-radius: 6px 0 0 6px;
- }
-#header-search input[type="submit"] {
- padding: 5px 20px 6px 20px;
- border-left: 1px solid #481e3d;
- border-top-color: #743062;
- -moz-border-radius: 0 6px 6px 0;
- -webkit-border-radius: 0 6px 6px 0;
- border-radius: 0 6px 6px 0;
- -webkit-box-shadow: none;
- box-shadow: none;
- background: #5E2750 url(../img/header_search_icon.png) no-repeat center center;
- background-image: url(../img/header_search_icon.png), linear-gradient(bottom, rgb(80,33,68) 0%, rgb(94,39,80) 100%);
- background-image: url(../img/header_search_icon.png), -o-linear-gradient(bottom, rgb(80,33,68) 0%, rgb(94,39,80) 100%);
- background-image: url(../img/header_search_icon.png), -moz-linear-gradient(bottom, rgb(80,33,68) 0%, rgb(94,39,80) 100%);
- background-image: url(../img/header_search_icon.png), -webkit-linear-gradient(bottom, rgb(80,33,68) 0%, rgb(94,39,80) 100%);
- background-image: url(../img/header_search_icon.png), -ms-linear-gradient(bottom, rgb(80,33,68) 0%, rgb(94,39,80) 100%);
- }
-#header-search input[type="submit"]:hover {
- background-image: url(../img/header_search_icon.png), linear-gradient(bottom, rgb(80,33,68) 0%, rgb(117,49,100) 100%);
- background-image: url(../img/header_search_icon.png), -o-linear-gradient(bottom, rgb(80,33,68) 0%, rgb(117,49,100) 100%);
- background-image: url(../img/header_search_icon.png), -moz-linear-gradient(bottom, rgb(80,33,68) 0%, rgb(117,49,100) 100%);
- background-image: url(../img/header_search_icon.png), -webkit-linear-gradient(bottom, rgb(80,33,68) 0%, rgb(117,49,100) 100%);
- background-image: url(../img/header_search_icon.png), -ms-linear-gradient(bottom, rgb(80,33,68) 0%, rgb(117,49,100) 100%);
+ width: 200px;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
}
@@ -138,10 +110,6 @@
-webkit-border-radius: 4px;
border-radius: 4px;
}
-#login-logout {
- width: 300px;
- margin:0px auto;
- }
/******************************************************************************
@@ -161,13 +129,20 @@
.login #content {
padding: 30px 40px;
width: 360px;
- margin: 100px auto;
+ margin: 100px auto 0 auto;
-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,1);
box-shadow: 0 0 15px 0 rgba(0,0,0,1);
}
.login #content h2:first-child {
margin: 0 0 20px 0;
}
+.login h2 {
+ margin-bottom: 20px;
+ }
+.login #footer {
+ width: 440px;
+ margin: 0 auto;
+ }
/******************************************************************************
@@ -194,6 +169,7 @@
Footer
*/
#footer {
+ margin-bottom: 20px;
padding: 12px 20px;
color: #aea79f;
font-size: 12px;
=== modified file 'src/maasserver/static/css/modifiers.css'
--- src/maasserver/static/css/modifiers.css 2012-02-22 04:16:32 +0000
+++ src/maasserver/static/css/modifiers.css 2012-03-01 06:29:17 +0000
@@ -18,76 +18,3 @@
.right {
float: right;
}
-/* XXX: move this yui stuff somewhere more sensible */
-/* panel */
-.yui3-widget-mask {
- background-color: #000;
- opacity: 0.3;
- }
-.yui3-panel {
- background-color: #FFF;
- padding: 50px 80px 50px 80px;
- -moz-border-radius: 0 0 6px 6px;
- -webkit-border-radius: 0 0 6px 6px;
- border-radius: 0 0 6px 6px;
- -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,1);
- box-shadow: 0 0 15px 0 rgba(0,0,0,1);
- }
-.yui3-widget-hd {
- margin-bottom: 30px;
- font-size: 24px;
- }
-.yui3-widget-ft {
- margin-top: 50px;
- }
-.yui3-widget-button-wrapper {
- width: 100%;
- }
-.yui3-widget-button-wrapper .spinner {
- float: right;
- margin: 8px 10px 0 0;
- }
-.yui3-panel .yui3-button {
- float: right;
- }
-.yui3-panel .yui3-button.link-button {
- float: left;
- padding-left: 0;
- padding-right: 0;
- color: #dd4814;
- border: none;
- background: none;
- text-shadow: none;
- -webkit-box-shadow: none;
- box-shadow: none;
- font-size: 13px;
- }
-/* overlay */
-.yui3-overlay {
- background-color: #fff;
- -moz-border-radius: 0 0 6px 6px;
- -webkit-border-radius: 0 0 6px 6px;
- border-radius: 0 0 6px 6px;
- -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
- box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
- }
-.yui3-overlay ul {
- padding: 5px 0;
- -webkit-box-shadow: inset 0 2px 2px 0 rgba(0,0,0,0.4);
- box-shadow: inset 0 2px 2px 0 rgba(0,0,0,0.4);
- }
-.yui3-overlay li {
- float: none;
- }
-.yui3-overlay a {
- display: block;
- padding: 6px 20px;
- color: #dd4814 !important;
- border-bottom: 1px solid #e5e2e0;
- }
-.yui3-overlay li:last-child a {
- border-bottom: none;
- }
-.yui3-overlay-hidden{
- display: none;
- }
=== removed file 'src/maasserver/static/img/header_search_icon.png'
Binary files src/maasserver/static/img/header_search_icon.png 2012-02-09 00:35:05 +0000 and src/maasserver/static/img/header_search_icon.png 1970-01-01 00:00:00 +0000 differ
=== modified file 'src/maasserver/static/img/home.png'
Binary files src/maasserver/static/img/home.png 2012-02-20 06:06:01 +0000 and src/maasserver/static/img/home.png 2012-03-01 06:29:17 +0000 differ
=== added file 'src/maasserver/static/img/search_icon.png'
Binary files src/maasserver/static/img/search_icon.png 1970-01-01 00:00:00 +0000 and src/maasserver/static/img/search_icon.png 2012-03-01 06:29:17 +0000 differ
=== modified file 'src/maasserver/templates/maasserver/base.html'
--- src/maasserver/templates/maasserver/base.html 2012-02-27 04:22:43 +0000
+++ src/maasserver/templates/maasserver/base.html 2012-03-01 06:29:17 +0000
@@ -49,7 +49,7 @@
<li class="search">
{% block header-search %}
<form action="{% url 'node-list' %}" method="get" id="header-search">
- <input type="text" name="query" value="Search nodes" /><input type="submit" value="" />
+ <input type="text" name="query" value="Search nodes" class="search-box" />
</form>
{% endblock %}
</li>
@@ -102,6 +102,7 @@
© 2012 Canonical Ltd. Ubuntu and Canonical are registered
trademarks of Canonical Ltd.
{% endblock %}
+ <div class="clear"></div>
</div>
</div>
</div>
=== modified file 'src/maasserver/templates/maasserver/index.html'
--- src/maasserver/templates/maasserver/index.html 2012-02-27 04:22:43 +0000
+++ src/maasserver/templates/maasserver/index.html 2012-03-01 06:29:17 +0000
@@ -2,6 +2,7 @@
{% block nav-active-index %}active{% endblock %}
{% block title %}Dashboard{% endblock %}
+{% block site-switcher %}{% endblock %}
{% block html_includes %}{% include "maasserver/snippets.html" %}
{% endblock %}
=== modified file 'src/maasserver/templates/maasserver/node_list.html'
--- src/maasserver/templates/maasserver/node_list.html 2012-02-27 04:22:43 +0000
+++ src/maasserver/templates/maasserver/node_list.html 2012-03-01 06:29:17 +0000
@@ -4,7 +4,6 @@
{% block title %}Nodes{% endblock %}
{% block page-title %}{{ node_list|length }} node{{ node_list|length|pluralize }} in {% include "maasserver/site_title.html" %}{% endblock %}
{% block site-switcher %}{% endblock %}
-{% block layout-modifiers %}sidebar{% endblock %}
{% block header-search %}{% endblock %}
{% block html_includes %}{% include "maasserver/snippets.html" %}
@@ -22,60 +21,32 @@
</script>
{% endblock %}
-
-{% block sidebar %}
- <h3>Filters</h3>
- <form action="" method="get">
- <ul>
- <li><label for=""><input type="checkbox" checked="checked" id="" /> Pooled</label></li>
- <li><label for=""><input type="checkbox" checked="checked" id="" /> Reserved</label></li>
- <li><label for=""><input type="checkbox" checked="checked" id="" /> Allocated</label></li>
- <li><label for=""><input type="checkbox" checked="checked" id="" /> Declared</label></li>
- <li><label for=""><input type="checkbox" checked="checked" id="" /> Retired</label></li>
- </ul>
- </form>
-{% endblock %}
-
{% block content %}
<form action="" method="get" class="block full-width inline-form">
- <label for="list-search">Search nodes</label> <input type="text" name="query" id="list-search" value="" /><input type="submit" value="Search" />
+ <label for="list-search">Search nodes</label> <input type="text" name="query" id="list-search" class="search-box" value="Search nodes" />
</form>
{% if node_list|length %}
- <form action="{% url 'node-list' %}" method="post">
<table class="list">
<thead>
<tr>
- <th></th>
<th>Hostname</th>
<th>MAC</th>
<th>Status</th>
</tr>
</thead>
- <tr class="actions">
- <td colspan="4">
- Action
- <select>
- <option>Lorem ipsum</option>
- </select>
- <input type="submit" value="Go" />
- </td>
- </tr>
{% for node in node_list %}
<tr class="node {% cycle 'even' 'odd' %}">
- <td><input type="checkbox" />
- <td><a href="{{ node.get_absolute_url }}">{{ node.hostname }}</a></td>
+ <td>{{ node.hostname }}</td>
<td>
{{ node.macaddress_set.reverse|first }}
{% if node.macaddress_set.count > 1 %}
({{ node.macaddress_set.count|add:"-1" }} more MAC Address{{ node.macaddress_set.count|add:"-1"|pluralize }})
{% endif %}
</td>
- <td><a href="">{{ node.display_status }}</a></td>
+ <td>{{ node.display_status }}</td>
</tr>
{% endfor %}
</table>
- </form>
{% endif%}
- {% include "maasserver/pagination.html" %}
<a id="addnode" href="#" class="button right">Add node</a>
{% endblock %}
=== modified file 'src/maasserver/templates/maasserver/user_view.html'
--- src/maasserver/templates/maasserver/user_view.html 2012-02-17 08:30:48 +0000
+++ src/maasserver/templates/maasserver/user_view.html 2012-03-01 06:29:17 +0000
@@ -2,17 +2,33 @@
{% block nav-active-settings %}active{% endblock %}
{% block title %}View user{% endblock %}
-{% block page-title %}View user{% endblock %}
+{% block page-title %}View user: {{ view_user.username }}{% endblock %}
{% block content %}
- <p>
- Username: {{ view_user.username }}
- </p>
- <p>
- Email address: {{ view_user.email }}
- </p>
- <p>
- MaaS Administrator: {{ view_user.is_superuser }}
- </p>
+ <ul class="data-list">
+ <li class="block size2 first">
+ <h4>Username</h4>
+ <span>{{ view_user.username }}</span>
+ </li>
+ <li class="block size3">
+ <h4>Full name</h4>
+ <span>{{ view_user.first_name }} {{ view_user.last_name }}</span>
+ </li>
+ <li class="block size3">
+ <h4>Email address</h4>
+ <span>{{ view_user.email }}</span>
+ </li>
+ <li class="block size2 first">
+ <h4>MaaS Keys</h4>
+ <span>
+ {{ user.get_profile.get_authorisation_tokens.count }}
+ key{{ user.get_profile.get_authorisation_tokens.count|pluralize }}
+ </span>
+ </li>
+ <li class="block size3">
+ <h4>MaaS Administrator</h4>
+ <span>{{ view_user.is_superuser }}</span>
+ </li>
+ </ul>
{% endblock %}
=== modified file 'src/maasserver/templates/registration/login.html'
--- src/maasserver/templates/registration/login.html 2012-02-22 07:03:13 +0000
+++ src/maasserver/templates/registration/login.html 2012-03-01 06:29:17 +0000
@@ -16,7 +16,7 @@
{% endblock %}
{% block content %}
- <h2>Login</h2>
+ <h2>Login to {% include "maasserver/site_title.html" %}</h2>
{% if form.errors %}
<p class="form-errors">Your username and password didn't match. Please try again.</p>
{% endif %}
