annotate bns_website/templates/bands/band_list.html @ 74:e0a0ebc56afe

The 1 pixel border around hero-unit broke this page. Shrank one column to fix; not sure if that was totally right or not. Style the button to visit the band website in the Future Bugler font.
author Brian Neal <bgneal@gmail.com>
date Wed, 23 Nov 2011 20:31:17 -0600
parents c3b4884fe4ea
children e60af48feb00
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">
ckridgway@55 7 <link rel="stylesheet" href="{{ STATIC_URL }}js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
ckridgway@53 8 <link rel="stylesheet" href="{{ STATIC_URL }}css/bx_styles.css">
ckridgway@55 9 <style>
ckridgway@55 10 .hero-unit h1 { font-size: 50px; }
ckridgway@55 11 </style>
bgneal@9 12 {% endblock %}
bgneal@9 13 {% block custom_js %}
bgneal@9 14 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
bgneal@9 15 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
ckridgway@53 16 <script type="text/javascript" src="{{ STATIC_URL }}js/bxslider/jquery.bxSlider.min.js"></script>
ckridgway@55 17 <script type="text/javascript" src="{{ STATIC_URL }}js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
bgneal@9 18 <script type="text/javascript">
ckridgway@53 19 $(document).ready(function(){
ckridgway@53 20 $('#slider1').bxSlider({
ckridgway@53 21 mode: 'fade',
ckridgway@53 22 speed: 500,
ckridgway@53 23 auto: true,
ckridgway@53 24 autoControls: true,
ckridgway@53 25 autoHover: true,
ckridgway@53 26 randomStart: true,
ckridgway@53 27 pager: true,
ckridgway@53 28 pagerType: 'full',
ckridgway@53 29 nextImage: '{{ STATIC_URL }}images/icon_arrow_right.png',
ckridgway@53 30 prevImage: '{{ STATIC_URL }}images/icon_arrow_left.png',
ckridgway@53 31 wrapperClass: 'bands-slider-wrap'
ckridgway@55 32 });
ckridgway@55 33
ckridgway@55 34 $("a.band-image").fancybox({
ckridgway@55 35 'transitionIn' : 'elastic',
ckridgway@55 36 'transitionOut' : 'elastic',
ckridgway@55 37 'speedIn' : 600,
ckridgway@55 38 'speedOut' : 200,
ckridgway@55 39 'overlayShow' : false
ckridgway@55 40 });
ckridgway@55 41 });
bgneal@9 42 </script>
bgneal@9 43 {% endblock %}
bgneal@9 44
bgneal@6 45 {% block content %}
bgneal@6 46 {% navbar 'bands' %}
bgneal@9 47
ckridgway@47 48 <div class="hero-unit">
ckridgway@53 49 <div id="slider1">
ckridgway@53 50 {% for band in object_list %}
ckridgway@53 51 <div>
ckridgway@53 52 <div class="row">
ckridgway@53 53 <div class="span4">
ckridgway@55 54 {% if band.asset_prefix %}
ckridgway@55 55 <a class="band-image" href="{{ STATIC_URL }}images/bands/{{ band.asset_prefix }}_large.jpg">
ckridgway@55 56 <img src="{{ STATIC_URL }}images/bands/{{ band.asset_prefix }}_small.jpg" alt="{{ band.name }}" title="View {{ band.name }} full size" />
ckridgway@55 57 </a>
ckridgway@55 58 {% else %}
ckridgway@55 59 <img src="http://placehold.it/200x200&text={{ band.name|escapejs }}">
ckridgway@55 60 {% endif %}
ckridgway@53 61 </div>
bgneal@74 62 <div class="span9">
ckridgway@53 63 <h1>{{ band.name }}</h1>
ckridgway@53 64 <br/>
ckridgway@53 65 <span>{{ band.notes }}</span>
ckridgway@55 66 {% if band.url %}
bgneal@74 67 <p style="margin-top:1em"><a class="btn default bns" href="{{ band.url }}">Visit Website</a></p>
ckridgway@55 68 {% endif %}
ckridgway@53 69 </div>
ckridgway@53 70 </div>
ckridgway@52 71 </div>
ckridgway@53 72 {% endfor %}
ckridgway@53 73 </div>
ckridgway@47 74 </div>
ckridgway@47 75
bgneal@6 76 {% endblock %}