mygpo/directory/templates/carousel.html

   1 {% extends "base.html" %}
   2
   3 {% load i18n %}
   4 {% load podcasts %}
   5 {% load charts %}
   6 {% load math %}
   7 {% load utils %}
   8 {% load cache %}
   9
  10 {% load menu %}
  11 {% block mainmenu %}{{ "/directory/"|main_menu }}{% endblock %}
  12 {% block sectionmenu %}{{ "/directory/"|section_menu }}{% endblock %}
  13
  14 {% block head %}
  15
  16 <style language="text/css">
  17 .carousel a,
  18 .carousel
  19 {
  20     color: white;
  21 }
  22
  23 .carousel div.logo
  24 {
  25     height: 65px;
  26     width: 65px;
  27 }
  28
  29 .carousel div.logo img
  30 {
  31     height: 64px;
  32     width: 64px;
  33     display: block;
  34     position: relative;
  35     top: 50%;
  36     left: 50%;
  37 }
  38 </style>
  39
  40
  41     {% endblock %}
  42
  43 {% block title %}{% trans "Explore" %}{% endblock %}
  44
  45 {% block header %}
  46    <h1>{% trans "Explore" %}</h1>
  47 {% endblock %}
  48
  49
  50 {% block content %}
  51
  52  {% cache 3600 carousel %}
  53
  54     <div id="myCarousel" class="carousel slide">
  55     <!-- Carousel items -->
  56     <div class="carousel-inner">
  57
  58      {% for c in topics.categories %}
  59
  60       <div class="item {% if forloop.first %}active{% endif %}" >
  61
  62        <div style="height: 290px; overflow: hidden">
  63         {% for podcast in c.get_podcasts_more %}
  64
  65          <div class="logo" style="float: left;">
  66           <a data-original-title="{{ podcast.title }}" href="{% podcast_link_target podcast %}" rel="tooltip" data-placement="bottom">
  67            {{ podcast|podcast_logo_medium }}
  68           </a>
  69          </div>
  70
  71        {% endfor %}
  72       </div>
  73
  74         <br style="clear: both;" />
  75
  76         <div class="carousel-caption">
  77           <h4>{{ c.label }}</h4>
  78           {% for podcast in c.get_podcasts|slice:":5" %}
  79            {% podcast_group_link podcast %},
  80           {% endfor %}
  81           <a href="{% url "directory" c.label %}">{% trans "..." %}</a>
  82         </div>
  83       </div>
  84
  85      {% endfor %}
  86
  87     </div>
  88     <!-- Carousel nav -->
  89     <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  90     <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
  91     </div>
  92
  93  {% endcache %}
  94
  95
  96 {% endblock %}
  97
  98
  99
 100 {% block javascript %}
 101
 102     <script type="text/javascript">
 103
 104 $(document).ready(function () {
 105     if ($("[rel=tooltip]").length) {
 106         $("[rel=tooltip]").tooltip();
 107     }
 108 });
 109
 110 </script>
 111
 112 {% endblock %}