Mercurial > public > bravenewsurf
annotate bns_website/templates/bands/band_list.html @ 47:59dd574fcfff bands-experimental-ui
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 | f2cb9b2ec552 |
| children | 12a39a6f5247 |
| rev | line source |
|---|---|
| bgneal@6 | 1 {% extends 'base.html' %} |
| bgneal@6 | 2 {% load core_tags %} |
| bgneal@6 | 3 {% block title %}Bands{% endblock %} |
| bgneal@9 | 4 |
| bgneal@9 | 5 {% block custom_css %} |
| bgneal@9 | 6 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css"> |
| bgneal@9 | 7 {% endblock %} |
| bgneal@9 | 8 {% block custom_js %} |
| bgneal@9 | 9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> |
| bgneal@9 | 10 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> |
| bgneal@9 | 11 <script type="text/javascript"> |
| bgneal@9 | 12 $(function() { |
| bgneal@9 | 13 $("#accordion").accordion({active: false}); |
| bgneal@9 | 14 }); |
| bgneal@9 | 15 </script> |
| ckridgway@47 | 16 <style> |
| ckridgway@47 | 17 .hero-unit { height: 200px; } |
| ckridgway@47 | 18 </style> |
| bgneal@9 | 19 {% endblock %} |
| bgneal@9 | 20 |
| bgneal@6 | 21 {% block content %} |
| bgneal@6 | 22 {% navbar 'bands' %} |
| bgneal@9 | 23 |
| ckridgway@47 | 24 <div class="hero-unit"> |
| ckridgway@47 | 25 <h1>Band Name Here</h1> |
| ckridgway@47 | 26 <span> |
| ckridgway@47 | 27 Click on a band logo below... TODO: Until a band is selected just cycle through the bands over time. |
| ckridgway@47 | 28 </span> |
| ckridgway@47 | 29 <p style="margin-top:1em"><a class="btn default" href="">Band Site</a></p> |
| bgneal@9 | 30 </div> |
| bgneal@9 | 31 |
| ckridgway@47 | 32 <div class="row"> |
| ckridgway@47 | 33 {% for band in object_list %} |
| ckridgway@47 | 34 <div class="span-one-third"> |
| ckridgway@47 | 35 <div id="{{ band.name }}" class="band-logo"> |
| ckridgway@47 | 36 <img src="http://placehold.it/300x100&text={{ band.name|escapejs }}"> |
| ckridgway@47 | 37 <span class="band-name" hidden="hidden">{{ band.name }}</span> |
| ckridgway@47 | 38 <span class="band-notes" hidden="hidden">{{ band.notes|linebreaksbr }}</span> |
| ckridgway@47 | 39 <span class="band-url" hidden="hidden">{{ band.url }}</span> |
| ckridgway@47 | 40 </div> |
| ckridgway@47 | 41 </div> |
| ckridgway@47 | 42 {% endfor %} |
| ckridgway@47 | 43 </div> |
| ckridgway@47 | 44 |
| ckridgway@47 | 45 <script> |
| ckridgway@47 | 46 $("div.band-logo").click(function() { |
| ckridgway@47 | 47 $("div.hero-unit").find("h1").text($(this).find("span.band-name").text()); |
| ckridgway@47 | 48 $("div.hero-unit").find("span").text($(this).find("span.band-notes").text()); |
| ckridgway@47 | 49 $("div.hero-unit").find("a").attr("href", $(this).find("span.band-url").text()); |
| ckridgway@47 | 50 }) |
| ckridgway@47 | 51 </script> |
| ckridgway@47 | 52 |
| bgneal@6 | 53 {% endblock %} |