Merge lp:~dylanmccall/harvest/visual-tweaks into lp:harvest

[Dylan McCall]

This branch is essentially some fun adjustments related to presentation.

Most importantly, it adds helpful messages that go along with results for various queries.

The following messages are in place:

(Introduction) “To find opportunities, try changing some filters on the left”
“No matching opportunities in X selected packages”
“No packages match your query”

There are also some little style changes, which are described in the commit messages.

[Dylan McCall (dylanmccall)]

For quick reference, here are two screenshots taken with this branch as it is:

http://people.ubuntu.com/~dylanmccall/harvest/media/gsoc-week12/IntroMessage.png

http://people.ubuntu.com/~dylanmccall/harvest/media/gsoc-week12/OpportunityActionButtons.png

[lp:~dylanmccall/harvest/visual-tweaks]

240. By Dylan McCall on 2010-08-14

Font size for #content > #messages in px, same as page title.

241. By Dylan McCall on 2010-08-14

Changed .pagetitle to #pagetitle

Login and logout now always appear in the same place.

[Daniel Holbach (dholbach)]

Great work!

review: Approve

[lp:~dylanmccall/harvest/visual-tweaks]

242. By Dylan McCall on 2010-08-16

Adopting UbuntuBeta font family as preference

Some more layout tweaks.
Opportunities with notes attached fit similarly to those without.

[Dylan McCall (dylanmccall)]

Sorry, I forgot a bit. It's coming up in a second!

Brings in the UbuntuBeta font family, which looks better for some things here. (Particularly with numbers, it seems). The title inexplicably still looks better to me with Molengo, so I left it that way, though the text there should really be turned into an image some day ;)

[Daniel Holbach (dholbach)]

If UbuntuBeta is not available locally, will it just be substituted by something else? If so, should we put "Ubuntu" already in there? I guess it'll be renamed once things are good with the font.

[Daniel Holbach (dholbach)]

Apart from that it looks great.

[Dylan McCall (dylanmccall)]

I'm glad you like it :)

Yep, I'm using the font stack suggested in the Ubuntu web guidelines, over here: http://design.canonical.com/the-toolkit/guides-for-websites/

It goes for Ubuntu Beta first, then Deja Vu or Vera, then the default sans-serif font. I didn't put 'Ubuntu' in front of that, just because the web guidelines / ubuntu.com don't do it. It sounds like a fine idea to me, though! Should save us some trouble later on. Thank you!
(Although we should remember to remove 'UbuntuBeta' from the font stack at some point in the future).

I shouldn't change this particular branch (that way when I submit my code next week for the gsoc stuff it won't look like I passed the pencils down time), but I expect it won't cause any trouble. Line 5 just needs to be changed so it says:
font-family:'Ubuntu', 'UbuntuBeta', 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;

…and line 85 (for what it's worth) needs to be changed to:
font-family:'Molengo', 'Ubuntu', 'Ubuntu Beta', 'DejaVu Sans', 'Bitstream Vera Sans', Tahoma, sans-serif;

[Daniel Holbach (dholbach)]

You know what, I'll merge it as is. Maybe the font will be called something else in the end. No need to worry about that now. I just wanted to make sure that the substitution process works alright. :)

review: Approve

=== modified file 'harvest/common/utils.py'
--- harvest/common/utils.py	2010-07-14 16:44:02 +0000
+++ harvest/common/utils.py	2010-08-16 18:59:39 +0000
@@ -21,7 +21,7 @@
         except:
             pass
 
-    return "version %s (rev %s)" % (version, bzr_revno)
+    return "version %s (r%s)" % (version, bzr_revno)
 
 
 def get_harvest_version_name(version_file, debug):

=== modified file 'harvest/media/css/style.css'
--- harvest/media/css/style.css	2010-08-13 02:03:18 +0000
+++ harvest/media/css/style.css	2010-08-16 18:59:39 +0000
@@ -2,7 +2,7 @@
 	background-color:rgb(255,255,255);
 	color:rgb(51,51,51);
 	
-	font-family:'Bitstream Vera Sans', 'DejaVu Sans', sans-serif;
+	font-family:'UbuntuBeta', 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
 	font-size:14px;
 	line-height:1.2em;
 }
@@ -44,7 +44,6 @@
 }
 
 form label {
-	font-weight:bold;
 }
 form .error input, form .error textarea, form .error input#new_note  {
 	border:solid 2px rgb(140,0,0);
@@ -72,9 +71,7 @@
 	min-height:80px;
 	padding-top:12px;
 }
-#header a {
-	color:rgb(0,0,0);
-}
+
 #header #sitetitle {
 	display:inline;
 	position:static;
@@ -83,8 +80,9 @@
 	margin-bottom:10px;
 	
 	text-transform:lowercase;
+	text-decoration:none;
 	color:rgb(0,0,0);
-	font-family:'Molengo', 'Bitstream Vera Sans', 'DejaVu Sans', sans-serif;
+	font-family:'Molengo', 'Ubuntu Beta', 'DejaVu Sans', 'Bitstream Vera Sans', sans-serif;
 }
 #header #sitetitle #sitelogo {
 	width:auto; /* line up with #sitename font-size */
@@ -100,14 +98,15 @@
 	display:inline;
 	position:static;
 	
-	font-size:14px;
+	font-size:12px;
 	vertical-align:sub;
 }
+
 #header #userdata {
 	float:right;
 	margin-top:12px;
 	margin-left:40px;
-	margin-right:80px;
+	margin-right:40px;
 	
 	text-align:right;
 }
@@ -126,18 +125,18 @@
 	display:block;
 	margin:10px 0px;
 	padding:5px 10px;
-	font-size:larger;
+	font-size:18px;
 	background-color:rgb(242,151,93);
 	color:rgb(255,255,255);
 }
 
-#content > .pagetitle {
+#content > #pagetitle {
 	margin:10px 0px;
 	max-width:30em;
 	padding:0px 10px;
-	letter-spacing:-1px;
-	font-size:18px;
-	line-height:1em;
+	letter-spacing:-0.1em;
+	font-size:24px;
+	line-height:28px;
 }
 
 #content > .main {
@@ -159,8 +158,18 @@
 	line-height:1.4em;
 	color:rgb(51,51,51);
 }
-#filters a {
-	/* these are self-explanatory; they should disappear */
+#filters ul {
+	display:block;
+	margin-left:20px;
+	width:100%;
+}
+#filters ul li {
+	display:block;
+	width:100%;
+}
+
+
+#filters a.item-toggle {
 	display:inline-block;
 	height:100%;
 	
@@ -169,17 +178,6 @@
 	font-style:inherit;
 }
 
-#filters ul {
-	display:block;
-	margin-left:20px;
-	width:100%;
-}
-#filters ul li {
-	display:block;
-	width:100%;
-}
-
-
 #filters .checkbox {
 	/* checkbox element should always be the same size */
 	display:inline-block;
@@ -230,12 +228,12 @@
 }
 #filters > .filtergroup > .filter-value > ul > li {
 	padding-bottom:5px;
-	clear:both;
 }
 
 #filters > .filtergroup > .filter-value > ul > li a.help {
-	font-weight: bold;
-	text-color: rgb(110,64,84);
+	vertical-align:top;
+	margin-left:1em;
+	font-weight:bold;
 }
 
 #filters .editfilter input {
@@ -260,7 +258,6 @@
 	max-width:1000px;
 	padding:20px 20px 0px 20px;
 	overflow:auto;
-	line-height:1.6em;
 }
 
 #results-pane > #results-status {
@@ -275,6 +272,17 @@
 	min-height:30px; /* lines up height of #results-status background-image */
 }
 
+#results > .results-message {
+	margin:2em auto;
+	padding-left:20px;
+	max-width:30em;
+	
+	text-align:justify;
+	font-size:24px;
+	line-height:1.5em;
+	color:rgb(180,180,180);
+}
+
 #results > ul {
 	margin-left:20px;
 	margin-bottom:10px;
@@ -282,7 +290,8 @@
 
 .sourcepackage {
 	display:block;
-	
+	font-size:14px;
+	line-height:21px;
 }
 li.sourcepackage {
 	margin-top:5px;
@@ -352,7 +361,7 @@
 	margin-top:20px;
 	padding:2px 20px 2px 20px;
 	color:rgb(80,80,80);
-	font-size:smaller;
+	font-size:12px;
 	border-top:1px solid rgb(250,250,250);
 	/*background-color:rgb(200,200,200);*/
 }
@@ -371,8 +380,8 @@
 .opportunity-list > .opportunity-list-title {
 	display:block;
 	color:rgb(80, 80, 80);
-	font-size:smaller;
-	letter-spacing:-1px;
+	font-size:12px;
+	letter-spacing:-0.1em;
 }
 .opportunity-list > .opportunity-list-title > .opportunity-list-summary {
 	margin-left:5px;
@@ -384,7 +393,7 @@
 	list-style-image:url('opportunity-normal.png');
 }
 li.opportunity {
-	padding:2px 20px 2px 5px;
+	padding:2px 20px 8px 5px;
 }
 li.opportunity:hover {
 	background-color:rgb(250,250,250);
@@ -401,6 +410,7 @@
 
 .opportunity > .opportunity-header {
 	display:block;
+	line-height:1em;
 }
 .opportunity[data-opportunity-irrelevant] > .opportunity-header > .opportunity-description,
 .opportunity[data-opportunity-applied] > .opportunity-header > .opportunity-description {
@@ -410,17 +420,23 @@
 	color:rgb(0,0,0);
 	font-size:16px;
 }
-.opportunity-header > a.opportunity-edit-button {
-	margin-left:5px;
-	vertical-align:super;
-	font-size:smaller;
+.opportunity-header > .actions {
+	float:right;
+	text-align:right;
+	font-size:12px;
+	text-transform:lowercase;
+}
+li.opportunity > .opportunity-header > .actions {
+	opacity:0.1; /* color:rgb(241,236,238) */
+}
+li.opportunity:hover > .opportunity-header > .actions {
+	opacity:1;
 }
 .opportunity-header > .opportunity-summary {
-	display:inline-block;
-	float:right;
+	margin-left:10px;
+	color:rgb(180,180,180);
+	font-size:12px;
 	text-transform:lowercase;
-	color:rgb(120,120,120);
-	font-size:smaller;
 }
 
 li.opportunity > .opportunity-details {
@@ -436,8 +452,9 @@
 	width:100%;
 	max-width:35em;
 	border-left:dashed 1px rgb(180,180,180);
-	padding:0px 5px 0px 5px;
+	padding:0px 5px;
 	font-size:12px;
+	line-height:1em;
 }
 .opportunity-notes input#new_note {
 	width:100%;
@@ -454,15 +471,18 @@
 	max-height:10em;
 }
 .opportunity-notes > ul > li {
-	line-height:1.2em;
-	margin-bottom:0.5em;
+	margin-bottom:1em;
+}
+.opportunity-notes > ul > li:last-child {
+	margin-bottom:0em;
 }
 .opportunity-notes > ul > li > .signature {
+	display:inline-block;
 	margin-left:1em;
 	vertical-align:sub;
-	color:rgb(180,180,180);
+	color:rgb(80,80,80);
 	font-style:italic;
-	font-size:smaller;
+	font-size:10px;
 }
 
 
@@ -507,9 +527,6 @@
 	padding-left:32px;
 	padding-right:32px;
 }
-#footer a {
-	color:rgb(0,0,0);
-}
 #footnav {
 	display:block;
 	height:20px;
@@ -522,6 +539,7 @@
 #footnav a {
 	margin-left:1em;
 	margin-right:1em;
+	color:rgb(0,0,0);
 }
 #footnav a:last-child {
 }

=== modified file 'harvest/opportunities/filters.py'
--- harvest/opportunities/filters.py	2010-08-05 14:36:14 +0000
+++ harvest/opportunities/filters.py	2010-08-16 18:59:39 +0000
@@ -26,7 +26,8 @@
     def default_choices_dict(self):
         choices_dict = OrderedDict()
         for l in models.OpportunityList.objects.all(): #TODO: find a way to sort these
-            choices_dict[l.name] = l
+            if l.active:
+                choices_dict[l.name] = l
         return choices_dict
     
     def process_queryset(self, queryset):
@@ -42,7 +43,7 @@
             title_attribute = 'title="%s"' % self.choices_dict[item_id].description
         if hasattr(self.choices_dict[item_id], 'explanation') and \
             self.choices_dict[item_id].explanation:
-            help_html = '<a class="help" href="%s">?</a>' % \
+            help_html = '<a class="help" href="%s" target="_blank">?</a>' % \
                             self.choices_dict[item_id].explanation
         return '<a class="item-toggle" href="%s" %s>%s</a> %s' % (item_href, title_attribute, item_id, help_html)
 
@@ -65,6 +66,5 @@
                                    'pkg.set' : ['ubuntu-desktop'],
                                    'opp' : 'list',
                                    'opp.list' : ['bitesize'] }
-            #TODO: change to no defaults, detect that case in view and templates and provide helpful instructions in the results pane.
         )
 

=== modified file 'harvest/opportunities/forms.py'
--- harvest/opportunities/forms.py	2010-08-13 01:38:12 +0000
+++ harvest/opportunities/forms.py	2010-08-16 18:59:39 +0000
@@ -3,7 +3,7 @@
 from django.utils.translation import ugettext as _
 
 class OpportunityForm(forms.ModelForm):
-    new_note = forms.CharField(label=_("Enter a new note here"),
+    new_note = forms.CharField(label=_("Enter a new note"),
                                required=False,
                                max_length=250) #from models.Note.text
     

=== modified file 'harvest/opportunities/models.py'
--- harvest/opportunities/models.py	2010-08-12 03:30:02 +0000
+++ harvest/opportunities/models.py	2010-08-16 18:59:39 +0000
@@ -31,19 +31,6 @@
     def __unicode__(self):
         return self.name
 
-    @property
-    def valid_opportunities(self):
-        return self.opportunity_set.filter(valid=True)
-
-    @property
-    def opportunity_class(self):
-        if self.valid_opportunities.count() <= PACKAGE_GREEN_THRESHOLD:
-            return 'GREEN'
-        if self.valid_opportunities.count() >= PACKAGE_RED_THRESHOLD:
-            return 'RED'
-        else:
-            return 'YELLOW'
-
 
 class OpportunityList(models.Model):
     name = models.SlugField(_("Name"), max_length=70)
@@ -67,12 +54,6 @@
     def __unicode__(self):
         return self.name
 
-    @property
-    def opportunity_urgency(self):
-        if self.featured:
-            return 'YES'
-        return 'NO'
-
 
 class Opportunity(models.Model):
     description = models.TextField(_("Description"), max_length=350)

=== modified file 'harvest/opportunities/views.py'
--- harvest/opportunities/views.py	2010-08-12 05:42:46 +0000
+++ harvest/opportunities/views.py	2010-08-16 18:59:39 +0000
@@ -45,14 +45,18 @@
     filters_pkg = filters.find('pkg')
     filters_opp = filters.find('opp')
     
-    pkg_list_wrapper = _create_packages_list(request, filters_pkg, filters_opp) 
+    pkg_list_wrapper = _create_packages_list(request, filters_pkg, filters_opp)
     
     context = {
-        'packages_list': pkg_list_wrapper,
+        'packages_list' : pkg_list_wrapper,
         'filters_pkg' : filters_pkg,
         'filters_opp' : filters_opp
     }
-
+    
+    if len(request.GET) == 0:
+        #an empty querystring indicates this has been opened for the first time
+        context['show_intro_message'] = True
+    
     return render(
         'opportunities/filter.html',
         context,

=== modified file 'harvest/templates/base.html'
--- harvest/templates/base.html	2010-08-06 03:52:07 +0000
+++ harvest/templates/base.html	2010-08-16 18:59:39 +0000
@@ -26,17 +26,18 @@
 <div id="container">
 
 <div id="header">
-	<span id="sitetitle">
+	<a id="sitetitle" href="{% url home %}" class="quiet">
 		<img id="sitelogo" src="{{ MEDIA_URL }}img/logo_humanity-search-icon.png" />
 		<h1 id="sitename">{% trans "Harvest" %}</h1>
 		{% if harvest_version_name %}<span id="releasename">{{harvest_version_name}}</span>{% endif %}
-	</span>
+	</a>
 	
 	<span id="userdata">
 		{% if user.is_authenticated %}
-			<span class="username">{{ user.username }}</span>
-			<br /><a class="loginbutton" href="/logout" tabindex="1">Log out</a>
+			<span class="username">{{ user.username }}</span><br />
+			<a class="loginbutton" href="/logout" tabindex="1">Log out</a>
 		{% else %}
+			<span class="username"></span><br />
 			<a class="loginbutton" href="/openid/login">Log in</a>
 		{% endif %}
 	</span>
@@ -51,9 +52,6 @@
 		</ul></div>
 	{% endif %}
 	{% block content %}
-	
-	
-	
 	{% endblock %}
 </div>
 

=== modified file 'harvest/templates/one_column.html'
--- harvest/templates/one_column.html	2010-08-06 03:34:17 +0000
+++ harvest/templates/one_column.html	2010-08-16 18:59:39 +0000
@@ -2,8 +2,9 @@
 {% load i18n %}
 
 {% block content %}
-<h2 class="pagetitle">{% block pagetitle %}{% endblock %}</h2>
+<h2 id="pagetitle">{% block pagetitle %}{% endblock %}</h2>
 <div class="main">
 	{% block content_main %}{% endblock %}
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
+

=== modified file 'harvest/templates/opportunities/include/filter_results.html'
--- harvest/templates/opportunities/include/filter_results.html	2010-08-11 23:36:17 +0000
+++ harvest/templates/opportunities/include/filter_results.html	2010-08-16 18:59:39 +0000
@@ -1,6 +1,16 @@
 {% load i18n %}
 
-{% if packages_list %}
+{% if show_intro_message %}
+{# Quirky special case: the view function makes this happen when the user hasn't selected any filters #}
+<div class="results-message">
+	{% blocktrans %}
+	To find opportunities, try changing some filters on the left
+	{% endblocktrans %}
+</div>
+{% endif %}
+
+{% if packages_list.get_visible_packages %}
+
 <ul>
 	{% for package in packages_list.get_visible_packages %}
 	<li data-package-id="{{ package.real.id }}" class="sourcepackage {% if package.expanded %}expanded{% else %}collapsed{% endif %}">
@@ -19,13 +29,39 @@
 	{% endfor %}
 	
 	{% with packages_list.get_hidden_packages|length as hidden_count %}
-	{% ifnotequal hidden_count 0 %}
-		<li><small>{% blocktrans count hidden_count as counter %}{{ counter }} package has no matching opportunities{% plural %}{{ counter }} packages have no matching opportunities{% endblocktrans %}</small></li>
-	{% endifnotequal %}
+	{% if hidden_count %}
+	<li><small>
+		{% blocktrans count hidden_count as counter %}
+		{{ counter }} package has no matching opportunities
+		{% plural %}
+		{{ counter }} packages have no matching opportunities
+		{% endblocktrans %}
+	</small></li>
+	{% endif %}
 	{% endwith %}
 </ul>
 
 {% else %}
-<p>{% trans "There are currently no opportunities in Harvest. :(" %}</p>
+
+<div class="results-message">
+	{% with packages_list.get_hidden_packages|length as hidden_count %}
+	{% if hidden_count %}
+	
+	{% blocktrans count hidden_count as counter %}
+	No matching opportunities in the selected package
+	{% plural %}
+	No matching opportunities in {{ counter }} selected packages
+	{% endblocktrans %}
+	
+	{% else %}
+	
+	{% blocktrans %}
+	No packages match your query
+	{% endblocktrans %}
+	
+	{% endif %}
+	{% endwith %}
+</div>
+
 {% endif %}
 

=== modified file 'harvest/templates/opportunities/include/opportunity.html'
--- harvest/templates/opportunities/include/opportunity.html	2010-08-12 05:42:46 +0000
+++ harvest/templates/opportunities/include/opportunity.html	2010-08-16 18:59:39 +0000
@@ -3,7 +3,9 @@
 <div class="opportunity-header">
 	<a href="{{opportunity.url}}" class="opportunity-description" target="_blank">{{ opportunity.description }}</a>
 	{% if user.is_authenticated %}
-	<a href="{% url opportunity_edit opportunity.id %}?next={{request.get_full_path}}" target="_blank" class="opportunity-edit-button">edit</a>
+	<span class="actions">
+		<a href="{% url opportunity_edit opportunity.id %}?next={{request.get_full_path}}" target="_blank" class="opportunity-edit-button">edit</a>
+	</span>
 	{% endif %}
 	<span class="opportunity-summary">
 		{{ opportunity.summary|join:', ' }}

=== modified file 'harvest/templates/opportunities/opportunity_edit.html'
--- harvest/templates/opportunities/opportunity_edit.html	2010-08-06 03:52:07 +0000
+++ harvest/templates/opportunities/opportunity_edit.html	2010-08-16 18:59:39 +0000
@@ -12,3 +12,4 @@
 	{% include "opportunities/include/opportunity_details_edit.html" %}
 </div>
 {% endblock %}
+