Mercurial > public > bravenewsurf

changeset 47:59dd574fcfff bands-experimental-ui

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Created a branch for band UI development. Took a first stab at a grid based approach.
author Chris Ridgway <ckridgway@gmail.com>
date Thu, 10 Nov 2011 23:09:15 -0600
parents 51c01a3cb2f2
children 12a39a6f5247
files bns_website/templates/bands/band_list.html
diffstat 1 files changed, 30 insertions(+), 17 deletions(-) [+]
line wrap: on
line diff
--- a/bns_website/templates/bands/band_list.html	Wed Nov 09 23:24:34 2011 -0600
+++ b/bns_website/templates/bands/band_list.html	Thu Nov 10 23:09:15 2011 -0600
@@ -13,28 +13,41 @@
       $("#accordion").accordion({active: false});
 	});
 </script>
+<style>
+   .hero-unit { height: 200px; }
+</style>
 {% endblock %}
 
 {% block content %}
 {% navbar 'bands' %}
-<h1>Bands</h1>
-<p>This is too &quot;wall of text-y&quot;, so maybe break it up with band photos. And/or put a javascript slideshow of all the bands up here at the top.</p>
-<dl>
-{% for band in object_list %}
-<dt><a href="{{ band.url }}">{{ band.name }}</a></dt>
-<dd>{{ band.notes|linebreaksbr }}</dd>
-{% endfor %}
-</dl>
 
-<p>And here is what it looks like as a jQuery accordion.</p>
-<div id="accordion">
-{% for band in object_list %}
-<h3><a href="#">{{ band.name }}</a></h3>
-<div>
-   {{ band.notes|linebreaksbr }}
-   <p style="margin-top:1em"><a class="btn default" href="{{ band.url }}">{{ band.name }} Website</a></p>
-</div>
-{% endfor %}
+<div class="hero-unit">
+   <h1>Band Name Here</h1>
+   <span>
+   Click on a band logo below...  TODO: Until a band is selected just cycle through the bands over time.
+   </span>
+   <p style="margin-top:1em"><a class="btn default" href="">Band Site</a></p>
 </div>
 
+<div class="row">
+   {% for band in object_list %}
+      <div class="span-one-third">
+         <div id="{{ band.name }}" class="band-logo">
+            <img src="http://placehold.it/300x100&text={{ band.name|escapejs }}">
+            <span class="band-name" hidden="hidden">{{ band.name }}</span>
+            <span class="band-notes" hidden="hidden">{{ band.notes|linebreaksbr }}</span>
+            <span class="band-url" hidden="hidden">{{ band.url }}</span>
+         </div>
+      </div>
+   {% endfor %}
+</div>
+
+<script>
+   $("div.band-logo").click(function() {
+      $("div.hero-unit").find("h1").text($(this).find("span.band-name").text());
+      $("div.hero-unit").find("span").text($(this).find("span.band-notes").text());
+      $("div.hero-unit").find("a").attr("href", $(this).find("span.band-url").text());
+   })
+</script>
+
 {% endblock %}