changeset 52:12a39a6f5247 bands-experimental-ui

This is a simple change to just make every band it's own hero box. Next up is to try the slider box approach.
author Chris Ridgway <ckridgway@gmail.com>
date Sun, 13 Nov 2011 21:20:13 -0600
parents 59dd574fcfff
children 98cc19041d8f
files bns_website/templates/bands/band_list.html
diffstat 1 files changed, 13 insertions(+), 27 deletions(-) [+]
line wrap: on
line diff
--- a/bns_website/templates/bands/band_list.html	Thu Nov 10 23:09:15 2011 -0600
+++ b/bns_website/templates/bands/band_list.html	Sun Nov 13 21:20:13 2011 -0600
@@ -13,41 +13,27 @@
       $("#accordion").accordion({active: false});
 	});
 </script>
-<style>
-   .hero-unit { height: 200px; }
-</style>
 {% endblock %}
 
 {% block content %}
 {% navbar 'bands' %}
 
+
+{% for band in object_list %}
 <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>
+      <h1>{{ band.name }}</h1>
+      <div class="row">
+         <div class="span10">
+            <br/>
+            <span>{{ band.notes }}</span>
+            <p style="margin-top:1em"><a class="btn default" href="">Band Site</a></p>
+         </div>
+         <div class="span4">
+            <img src="http://placehold.it/200x200&text={{ band.name|escapejs }}">
          </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>
+{% endfor %}
 
 {% endblock %}