launchpad-reviewers team mailing list archive
-
launchpad-reviewers team
-
Mailing list archive
-
Message #06421
[Merge] lp:~huwshimi/maas/design-improvements into lp:maas
Huw Wilkins has proposed merging lp:~huwshimi/maas/design-improvements into lp:maas.
Requested reviews:
Launchpad code reviewers (launchpad-reviewers)
For more details, see:
https://code.launchpad.net/~huwshimi/maas/design-improvements/+merge/93766
This branch brings a lot of the main design inline with the latest mockups.
I added a context processor for the site title so we can access it via a template. If there's another preferred way of doing that I'm happy to change it. I also moved the site title to an include file so that the title will always be used in the format "User edited title" + " MaaS" .
In this branch the user nav doesn't look right as I need to create an overlay menu for the user options.
--
https://code.launchpad.net/~huwshimi/maas/design-improvements/+merge/93766
Your team Launchpad code reviewers is requested to review the proposed merge of lp:~huwshimi/maas/design-improvements into lp:maas.
=== modified file 'src/maas/development.py'
--- src/maas/development.py 2012-02-16 10:05:36 +0000
+++ src/maas/development.py 2012-02-20 06:23:17 +0000
@@ -128,6 +128,7 @@
#"django.core.context_processors.tz",
"django.contrib.messages.context_processors.messages",
"maasserver.context_processors.yui",
+ "maasserver.context_processors.site",
)
MIDDLEWARE_CLASSES = (
=== modified file 'src/maas/settings.py'
--- src/maas/settings.py 2012-02-15 23:38:49 +0000
+++ src/maas/settings.py 2012-02-20 06:23:17 +0000
@@ -146,6 +146,7 @@
#"django.core.context_processors.tz",
"django.contrib.messages.context_processors.messages",
"maasserver.context_processors.yui",
+ "maasserver.context_processors.site",
)
MIDDLEWARE_CLASSES = (
=== modified file 'src/maasserver/context_processors.py'
--- src/maasserver/context_processors.py 2012-01-24 12:44:48 +0000
+++ src/maasserver/context_processors.py 2012-02-20 06:23:17 +0000
@@ -14,6 +14,7 @@
]
from django.conf import settings
+from django.contrib.sites.models import Site
def yui(context):
@@ -21,3 +22,6 @@
'YUI_DEBUG': settings.YUI_DEBUG,
'YUI_VERSION': settings.YUI_VERSION,
}
+
+def site(context):
+ return {'site': Site.objects.get_current()}
=== modified file 'src/maasserver/static/css/base.css'
--- src/maasserver/static/css/base.css 2012-02-09 00:42:27 +0000
+++ src/maasserver/static/css/base.css 2012-02-20 06:23:17 +0000
@@ -3,5 +3,5 @@
padding: 0;
}
body {
- background: #2C001E url(../img/bg_dots.png) repeat top left;
+ background: #2C001E url(../img/bg_dots.png) repeat top center;
}
=== modified file 'src/maasserver/static/css/components/flash_messages.css'
--- src/maasserver/static/css/components/flash_messages.css 2012-02-09 00:42:27 +0000
+++ src/maasserver/static/css/components/flash_messages.css 2012-02-20 06:23:17 +0000
@@ -12,14 +12,22 @@
color: #FFF;
}
#flash-messages li:first-child {
- -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);
+ margin-top: 10px;
+ -webkit-border-top-left-radius: 4px;
+ -webkit-border-top-right-radius: 4px;
+ -moz-border-radius-topleft: 4px;
+ -moz-border-radius-topright: 4px;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
}
#flash-messages li:last-child {
margin-bottom: 5px;
- -moz-border-radius: 0 0 6px 6px;
- -webkit-border-radius: 0 0 6px 6px;
- border-radius: 0 0 6px 6px;
+ -webkit-border-bottom-right-radius: 4px;
+ -webkit-border-bottom-left-radius: 4px;
+ -moz-border-radius-bottomright: 4px;
+ -moz-border-radius-bottomleft: 4px;
+ border-bottom-right-radius: 4px;
+ border-bottom-left-radius: 4px;
}
#flash-messages li.info {
background-color: #19B6EE;
=== modified file 'src/maasserver/static/css/forms.css'
--- src/maasserver/static/css/forms.css 2012-02-10 05:49:17 +0000
+++ src/maasserver/static/css/forms.css 2012-02-20 06:23:17 +0000
@@ -62,12 +62,3 @@
background-image: -webkit-linear-gradient(bottom, rgb(199,66,18) 0%, rgb(236,94,43) 100%);
background-image: -ms-linear-gradient(bottom, rgb(199,66,18) 0%, rgb(236,94,43) 100%);
}
-.yui3-button.link-button {
- color: #dd4814;
- border: none;
- background: none;
- text-shadow: none;
- -webkit-box-shadow: none;
- box-shadow: none;
- font-size: 13px;
- }
=== modified file 'src/maasserver/static/css/layout.css'
--- src/maasserver/static/css/layout.css 2012-02-10 06:24:48 +0000
+++ src/maasserver/static/css/layout.css 2012-02-20 06:23:17 +0000
@@ -14,46 +14,60 @@
/******************************************************************************
Header
*/
-#header-wrapper {
- /* Need to set relative so the box shadow appears over content divs */
- position: relative;
- z-index: 3;
+#global-header {
+ background-color: #2c001e;
+ padding: 6px 8px;
+ }
+#user-nav {
+ float: right;
+ }
+#user-nav li {
+ padding: 0;
+ }
+#header {
min-height: 64px;
- background-color: #dd4814;
- -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
- box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
+ background: #dd4814 url(../img/header_stripes.png) repeat-x top left;
+ -moz-border-radius: 0 0 4px 4px;
+ -webkit-border-radius: 0 0 4px 4px;
+ border-radius: 0 0 4px 4px;
}
+#global-header,
+#global-header a,
#header a,
#header {
color: #fff;
text-decoration: none;
}
-#header h1 {
- float: left;
- font-size: 18px;
- margin: 15px 30px 0 20px;
- }
-#header h1 img {
- margin-right: 7px;
- }
#main-nav {
- float: right;
- margin-right: 20px;
+ margin-left: 10px;
font-size: 14px;
}
-#main-nav li {
- float: left;
- padding: 23px 15px;
- }
-#main-nav li.active {
- background-color: #B83A11;
- }
-#user-nav {
- float: left;
- }
-#user-nav li {
- float: left;
- padding: 25px 15px 0 15px;
+#right-nav li a,
+#main-nav li a {
+ display: block;
+ height: 41px;
+ padding: 23px 15px 0 15px;
+ }
+#right-nav li.icon a,
+#main-nav li.icon a {
+ padding-top: 18px;
+ height: 46px;
+ }
+#right-nav li.active a,
+#main-nav li.active a {
+ background: rgba(0,0,0,0.2) url(../img/header_tail.png) no-repeat bottom center;
+ }
+#right-nav {
+ float: right;
+ margin-right: 5px;
+ }
+#right-nav li.active a {
+ background-color: transparent;
+ }
+#right-nav li.divider {
+ height: 30px;
+ margin-top: 17px;
+ border-left: 1px solid #c53f11;
}
@@ -61,8 +75,7 @@
Header search
*/
#header-search {
- float: right;
- margin: 24px 20px 0 0;
+ margin: 18px 15px 0 0;
}
#header-search input {
margin: 0;
@@ -72,17 +85,17 @@
padding: 6px 15px;
border: none;
color: #aea79f;
- -moz-border-radius: 14px 0 0 14px;
- -webkit-border-radius: 14px 0 0 14px;
- border-radius: 14px 0 0 14px;
+ -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 14px 14px 0;
- -webkit-border-radius: 0 14px 14px 0;
- border-radius: 0 14px 14px 0;
+ -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;
@@ -108,15 +121,18 @@
#body {
background-color: #2C001E;
clear: both;
+ margin: 0;
+ padding-top: 1px;
}
#page-title {
font-size: 36px;
color: #fff;
margin: 0 20px;
- padding: 20px 0;
+ padding: 14px 0 20px 0;
+ background: transparent url(../img/content_tail.png) no-repeat 50px bottom;
}
#content {
- padding: 20px;
+ padding: 20px 20px 40px 20px;
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
@@ -153,3 +169,16 @@
margin: 0 0 20px 0;
}
+
+/******************************************************************************
+ Footer
+*/
+#footer {
+ padding: 12px 20px;
+ color: #aea79f;
+ font-size: 12px;
+ }
+#footer img {
+ float: right;
+ }
+
=== modified file 'src/maasserver/static/css/modifiers.css'
--- src/maasserver/static/css/modifiers.css 2012-02-15 12:18:02 +0000
+++ src/maasserver/static/css/modifiers.css 2012-02-20 06:23:17 +0000
@@ -3,6 +3,9 @@
margin: 0;
padding: 0;
}
+.nav li {
+ float: left;
+ }
.clear {
clear: both;
}
@@ -16,7 +19,7 @@
}
.yui3-panel {
background-color: #FFF;
- padding: 104px 80px 50px 80px;
+ 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;
@@ -28,8 +31,23 @@
font-size: 24px;
}
.yui3-widget-ft {
- margin-top: 30px;
+ margin-top: 50px;
+ }
+.yui3-widget-button-wrapper {
+ width: 100%;
}
.yui3-panel .yui3-button {
- margin-right: 20px;
+ 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;
}
=== added file 'src/maasserver/static/img/content_tail.png'
Binary files src/maasserver/static/img/content_tail.png 1970-01-01 00:00:00 +0000 and src/maasserver/static/img/content_tail.png 2012-02-20 06:23:17 +0000 differ
=== added file 'src/maasserver/static/img/down_arrow_light.png'
Binary files src/maasserver/static/img/down_arrow_light.png 1970-01-01 00:00:00 +0000 and src/maasserver/static/img/down_arrow_light.png 2012-02-20 06:23:17 +0000 differ
=== added file 'src/maasserver/static/img/header_stripes.png'
Binary files src/maasserver/static/img/header_stripes.png 1970-01-01 00:00:00 +0000 and src/maasserver/static/img/header_stripes.png 2012-02-20 06:23:17 +0000 differ
=== added file 'src/maasserver/static/img/header_tail.png'
Binary files src/maasserver/static/img/header_tail.png 1970-01-01 00:00:00 +0000 and src/maasserver/static/img/header_tail.png 2012-02-20 06:23:17 +0000 differ
=== added file 'src/maasserver/static/img/home.png'
Binary files src/maasserver/static/img/home.png 1970-01-01 00:00:00 +0000 and src/maasserver/static/img/home.png 2012-02-20 06:23:17 +0000 differ
=== added file 'src/maasserver/static/img/settings.png'
Binary files src/maasserver/static/img/settings.png 1970-01-01 00:00:00 +0000 and src/maasserver/static/img/settings.png 2012-02-20 06:23:17 +0000 differ
=== added file 'src/maasserver/static/img/ubuntu_logo_footer.png'
Binary files src/maasserver/static/img/ubuntu_logo_footer.png 1970-01-01 00:00:00 +0000 and src/maasserver/static/img/ubuntu_logo_footer.png 2012-02-20 06:23:17 +0000 differ
=== removed file 'src/maasserver/static/img/ubuntu_logo_header.png'
Binary files src/maasserver/static/img/ubuntu_logo_header.png 2012-02-10 06:21:21 +0000 and src/maasserver/static/img/ubuntu_logo_header.png 1970-01-01 00:00:00 +0000 differ
=== modified file 'src/maasserver/templates/maasserver/base.html'
--- src/maasserver/templates/maasserver/base.html 2012-02-15 12:08:42 +0000
+++ src/maasserver/templates/maasserver/base.html 2012-02-20 06:23:17 +0000
@@ -5,64 +5,82 @@
<meta http-equiv="Content-Language" content="en-us" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/import.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/ubuntu-webfonts.css" />
- <title>{% block title %}{% endblock %} | MaaS Cluster</title>
+ <title>{% block title %}{% endblock %} | {% include "maasserver/site_title.html" %}</title>
{% block js-conf %}{% include "maasserver/js-conf.html" %}{% endblock %}
{% block head %}{% endblock %}
</head>
<body class="{% block layout-modifiers %}{% endblock %}">
{% block html_includes %}{% endblock %}
- <div id="header-wrapper">
- <div class="center-page-wrapper">
- <div id="header" class="center-page-content">
- {% block header %}
- <h1>
- <a href="{% url 'index' %}" title="Return to dashboard">
- <img src="{{ STATIC_URL }}img/ubuntu_logo_header.png" alt="Ubuntu logo" />
- MaaS Cluster</a>
- </h1>
- {% if user.is_authenticated %}
- <ul id="user-nav" class="nav">
- <li class="{% block nav-active-prefs %}{% endblock %}">
- <a href="{% url 'prefs' %}">{{ user.username }}</a></li>
- <li><a href="{% url 'logout' %}">Logout</a></li>
- </ul>
- <ul id="main-nav" class="nav">
- <li class="{% block nav-active-index %}{% endblock %}">
- <a href="{% url 'index' %}">Dashboard</a>
- </li>
- <li class="{% block nav-active-node-list %}{% endblock %}">
- <a href="{% url 'node-list' %}">Nodes</a>
- </li>
- {% if user.is_superuser %}
- <li class="{% block nav-active-settings %}{% endblock %}">
- <a href="{% url 'settings' %}">Settings</a>
- </li>
- {% endif %}
- </ul>
- {% endif %}
- {% endblock %}
- <div class="clear"></div>
- </div>
- </div>
- </div>
<div class="center-page-wrapper">
<div class="center-page-content">
- <div id="body">
- <ul id="flash-messages">
- {% if messages %}
- {% for message in messages %}
- <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
- {{ message }}</li>
- {% endfor %}
+ {% if user.is_authenticated %}
+ <div class="center-page-wrapper">
+ <div id="global-header" class="center-page-content">
+ <ul id="user-nav" class="nav">
+ <li class="{% block nav-active-prefs %}{% endblock %}">
+ <a href="{% url 'prefs' %}">{{ user.username }}</a></li>
+ <li><a href="{% url 'logout' %}">Logout</a></li>
+ </ul>
+ {% block site-switcher %}
+ <a href="{% url 'index' %}" title="Return to dashboard">
+ {% include "maasserver/site_title.html" %}
+ </a>
+ {% endblock %}
+ <div class="clear"></div>
+ </div>
+ <div id="header" class="center-page-content">
+ <ul id="right-nav" class="nav">
+ <li class="search">
+ {% block header-search %}
+ <form action="" method="get" id="header-search">
+ <input type="text" name="query" value="Search nodes"><input type="submit" value="">
+ </form>
+ {% endblock %}
+ </li>
+ {% if user.is_superuser %}
+ <li class="divider"></li>
+ <li class="icon {% block nav-active-settings %}{% endblock %}">
+ <a href="{% url 'settings' %}">
+ <img src="{{ STATIC_URL }}img/settings.png" alt="Settings" />
+ </a>
+ </li>
+ {% endif %}
+ </ul>
+ <ul id="main-nav" class="nav">
+ <li class="icon {% block nav-active-index %}{% endblock %}">
+ <a href="{% url 'index' %}">
+ <img src="{{ STATIC_URL }}img/home.png" alt="MaaS home" />
+ </a>
+ </li>
+ <li class="{% block nav-active-node-list %}{% endblock %}">
+ <a href="{% url 'node-list' %}">Nodes</a>
+ </li>
+ </ul>
+ <div class="clear"></div>
+ </div>
+ </div>
+ {% endif %}
+ <div id="body">
+ <ul id="flash-messages">
+ {% if messages %}
+ {% for message in messages %}
+ <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
+ {{ message }}</li>
+ {% endfor %}
+ {% endif %}
+ </ul>
+ {% if user.is_authenticated %}
+ <h1 id="page-title">{% block page-title %}{% endblock %}</h1>
{% endif %}
- </ul>
- {% if user.is_authenticated %}
- <form action="" method="get" id="header-search">
- <input type="text" name="query" value="Search nodes"><input type="submit" value="">
- </form>
- <h1 id="page-title">{% block page-title %}{% endblock %}</h1>
- {% endif %}
- <div id="content">{% block content %}{% endblock %}</div>
+ <div id="content">{% block content %}{% endblock %}</div>
+ </div>
+ <div id="footer">
+ <img src="{{ STATIC_URL }}img/ubuntu_logo_footer.png" alt="Ubuntu">
+ {% block footer-copyright %}
+ © 2012 Canonical Ltd. Ubuntu and Canonical are registered
+ trademarks of Canonical Ltd.
+ {% endblock %}
+ </div>
</div>
</div>
</body>
=== modified file 'src/maasserver/templates/maasserver/node_list.html'
--- src/maasserver/templates/maasserver/node_list.html 2012-02-15 12:18:02 +0000
+++ src/maasserver/templates/maasserver/node_list.html 2012-02-20 06:23:17 +0000
@@ -2,7 +2,8 @@
{% block nav-active-node-list %}active{% endblock %}
{% block title %}Nodes{% endblock %}
-{% block page-title %}Nodes{% endblock %}
+{% block page-title %}{{ node_list|length }} nodes in {% include "maasserver/site_title.html" %}{% endblock %}
+{% block site-switcher %}{% endblock %}
{% block html_includes %}{% include "maasserver/snippets.html" %}
{% endblock %}
=== added file 'src/maasserver/templates/maasserver/site_title.html'
--- src/maasserver/templates/maasserver/site_title.html 1970-01-01 00:00:00 +0000
+++ src/maasserver/templates/maasserver/site_title.html 2012-02-20 06:23:17 +0000
@@ -0,0 +1,1 @@
+{{ site.name }} MaaS
=== modified file 'src/maasserver/templates/registration/login.html'
--- src/maasserver/templates/registration/login.html 2012-02-10 06:21:21 +0000
+++ src/maasserver/templates/registration/login.html 2012-02-20 06:23:17 +0000
@@ -29,3 +29,5 @@
</ul>
</form>
{% endblock %}
+
+{% block footer-copyright %}{% endblock %}
