src/templates/modules/graphs/box.html

   1 {% set intervals = {
   2         "hour"  : _("Hour"),
   3         "day"   : _("Day"),
   4         "week"  : _("Week"),
   5         "month" : _("Month"),
   6         "year"  : _("Year")
   7 } %}
   8
   9 <h3>{{ graph.title }}</h3>
  10
  11 <ul class="tabs" data-tabs id="graph-tabs">
  12         {% for i, interval in enumerate(intervals) %}
  13                 <li class="tabs-title {% if i == 0 %}is-active{% end %}">
  14                         <a href="#{{ interval }}" aria-selected="true">{{ intervals[interval] }}</a>
  15                 </li>
  16         {% end %}
  17 </ul>
  18
  19 <div class="tabs-content" data-tabs-content="graph-tabs">
  20         {% for i, interval in enumerate(intervals) %}
  21                 <div class="tabs-panel {% if i == 0 %}is-active{% end %}" id="{{ interval }}">
  22                         <button data-open="graph-{{ interval }}">
  23                                 <img class="graph" src="{{ graph.make_image_url(interval=interval) }}"
  24                                         alt="{{ graph.title }}">
  25                         </button>
  26
  27                         <div class="large reveal" id="graph-{{ interval }}" data-reveal>
  28                                 <img class="graph" src="{{ graph.make_image_url(interval=interval) }}"
  29                                         alt="{{ graph.title }}">
  30
  31                                 <button class="close-button" data-close aria-label="Close modal" type="button">
  32                                         <span aria-hidden="true">&times;</span>
  33                                 </button>
  34
  35                                 <a class="button small expanded"
  36                                                 href="{{ graph.make_image_url(interval=interval, format="pdf") }}">
  37                                         {{ _("Download") }}
  38                                 </a>
  39                         </div>
  40                 </div>
  41         {% end %}
  42 </div>