karmaworld/templates/notes/note_detail.html

   1 {% extends "base.html" %}
   2 {% load url from future %}
   3
   4 {% block title %}
   5   {{ note.name }}
   6 {% endblock %}
   7
   8 {% block pagestyle %}
   9   <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/note_course_pages.css">
  10 {% endblock %}
  11
  12 {% block pagescripts %}
  13   <script type="text/javascript">
  14     var note_thank_url = "{% url 'thank_note' note.id %}"
  15     var note_flag_url = "{% url 'flag_note' note.id %}"
  16     var edit_note_tags_url = "{% url 'edit_note_tags' note.id %}"
  17     var note_downloaded_url = "{% url 'downloaded_note' note.id %}"
  18     var note_contents_url = "{{ S3_URL }}{{ note.get_relative_s3_path }}"
  19     {% if pdf_controls %}
  20       var pdfControls = true;
  21     {% else %}
  22       var pdfControls = false;
  23     {% endif %}
  24     var csrf_token = "{{ csrf_token }}";
  25   </script>
  26   <script src="{{ STATIC_URL }}js/setup-ajax.js"></script>
  27   <script src="{{ STATIC_URL }}js/note-detail.js" ></script>
  28   <script src="{{ STATIC_URL }}js/pxem.jQuery.js"></script>
  29 {% endblock %}
  30
  31 {% block content %}
  32   <section id="note_content">
  33
  34     <div id="note_header" class="hero_gradient_bar">
  35       <div class="row">
  36         <div class="twelve columns header_subhead">
  37           <a href="{{note.course.get_absolute_url}}">
  38             <i class="fa fa-arrow-left"></i>&nbsp;back to {{ note.course.name }}
  39           </a>
  40         </div>
  41       </div>
  42
  43       <div class="row">
  44         <div class="small-12 columns header_title">
  45           {{ note.name }}
  46         </div><!-- /note_name -->
  47       </div>
  48
  49       <div class="row">
  50         <div id="note_tags" class="twelve columns activity_details_context">
  51           <span>Tags: </span>
  52           <span class="tags">
  53             {% for tag in note.tags.all %}
  54               <span class="tag-span">{{ tag.name }}</span>
  55             {% endfor %}
  56           </span>
  57           {% if user.get_profile.can_edit_items %}
  58             <i id="edit_note_tags" class="fa fa-pencil-square-o"></i>
  59           {% endif %}
  60         </div><!-- /note_tags -->
  61       </div>
  62
  63       {% if user.get_profile.can_edit_items %}
  64         <div class="row">
  65           <div id="note_tags_form" class="twelve columns activity_details_context hide">
  66             <input id="note_tags_input" type="text" value="{% for tag in note.tags.all %}{{ tag.name }}{% if not forloop.last %}, {% endif %}{% endfor %}">
  67             <button id="save_note_tags" type=button><i class="fa fa-save"></i> Save</button>
  68           </div>
  69         </div>
  70       {% endif %}
  71
  72       <div class="row">
  73         <div id="note_status" class="twelve columns">
  74           <div class="activity_details_status">
  75             So far, <span id="thank-number" class="activity_details_status_number">{{ note.thanks }}</span> people have completely fallen in love with with these notes.
  76           </div><!-- /activity_details_status -->
  77         </div><!-- /note_status -->
  78       </div>
  79
  80       <div class="row">
  81         <div id="note_actions" class="large-3 medium-6 small-12 columns small-centered">
  82           <div class="row">
  83             {% if user.is_authenticated %}
  84               <div class="small-4 column">
  85                 {% if already_flagged %}
  86                   <img src="{{ STATIC_URL }}img/note_flag_disabled.png"
  87                        alt="note_flag"
  88                        width="25" height="35"
  89                        data-ot="You've already flagged this note"
  90                        {% include 'partial/opentip_settings.html' %}
  91                        class="opentip" />
  92                 {% else %}
  93                   <a href="#" id="flag-button">
  94                     <img src="{{ STATIC_URL }}img/note_flag.png" alt="note_flag" width="25" height="35" />
  95                   </a>
  96                 {% endif %}
  97                 <a href="#" id="flag-button-disabled" class="hide">
  98                   <img src="{{ STATIC_URL }}img/note_flag_disabled.png" alt="note_flag" width="25" height="35" />
  99                 </a>
 100               </div>
 101               <div class="small-4 column">
 102                 {% if already_thanked %}
 103                   <img src="{{ STATIC_URL }}img/note_thank_disabled.png"
 104                        alt="note_thank"
 105                        width="34" height="34"
 106                        data-ot="You've already thanked this note"
 107                        {% include 'partial/opentip_settings.html' %}
 108                        class="opentip" />
 109                 {% else %}
 110                   <a href="#" id="thank-button">
 111                     <img src="{{ STATIC_URL }}img/note_thank.png" alt="note_thank" width="34" height="34"/>
 112                   </a>
 113                 {% endif %}
 114                 <a href="#" id="thank-button-disabled" class="hide">
 115                   <img src="{{ STATIC_URL }}img/note_thank_disabled.png" alt="note_thank" width="34" height="34"/>
 116                 </a>
 117               </div>
 118               <div class="small-4 column">
 119                 <a id="note-download-button" href="{{ note.get_fp_url }}">
 120                   <img
 121                     src="{{ STATIC_URL }}img/note_download.png"
 122                     alt="note_download"
 123                     width="51" height="36"
 124                     data-ot="It costs 2 karma points to download a note"
 125                     {% include 'partial/opentip_settings.html' %}
 126                     class="opentip" />
 127                 </a>
 128               </div>
 129             {% else %}
 130               <div class="small-4 column">
 131                 <img src="{{ STATIC_URL }}img/note_flag_disabled.png"
 132                      alt="note_flag"
 133                      width="25" height="35"
 134                      data-ot="You need to log in to flag a note"
 135                      {% include 'partial/opentip_settings.html' %}
 136                      class="opentip" />
 137               </div>
 138               <div class="small-4 column">
 139                 <img src="{{ STATIC_URL }}img/note_thank_disabled.png"
 140                      alt="note_thank"
 141                      width="34" height="34"
 142                      data-ot="You need to log in to thank a note"
 143                      {% include 'partial/opentip_settings.html' %}
 144                      class="opentip" />
 145               </div>
 146               <div class="small-4 column">
 147                 <img
 148                   src="{{ STATIC_URL }}img/note_download_disabled.png"
 149                   alt="note_download"
 150                   width="51" height="36"
 151                   data-ot="You need to log in to download a note"
 152                   {% include 'partial/opentip_settings.html' %}
 153                   class="opentip" />
 154               </div>
 155               {% endif %}
 156
 157           </div>
 158         </div><!-- /note_actions -->
 159       </div>
 160
 161       {% if note.license %}
 162       <div class="row">
 163         <div id="note_pedigree" class="twelve columns activity_details_status">
 164           {{ note.license.html|safe }} {% if note.upstream_link %}<a href="{{note.upstream_link}}" target="_blank">{{ note.upstream_link|slice:":80" }}</a>{% endif %}
 165         </div><!-- /note_pedigree -->
 166       </div>
 167       {% endif %}
 168
 169       </div><!-- /course_header -->
 170
 171       {% if pdf_controls %}
 172       <div id="zoom-buttons" class="row show-for-medium-up">
 173         <div id="outline-btn-wrapper" class="small-1 columns hide show-for-medium-up">
 174           <i id="outline-btn" class="zoom-button fa fa-bars fa-2x"></i>
 175         </div>
 176         <div class="small-4 columns">
 177           <span>Jump to page:
 178           <input id="scroll-to" type="text" style="width: 3em; display: inline" /></span>
 179         </div>
 180         <div class="small-2 small-centered columns center">
 181           <i id="minus-btn" class="zoom-button fa fa-search-minus fa-2x"></i>
 182           <i id="plus-btn" class="zoom-button fa fa-search-plus fa-2x"></i>
 183         </div>
 184       </div>
 185       {% endif %}
 186
 187
 188     <div id="note_container">
 189       <div class="row">
 190         <div class="small-12 small-centered columns medium-12 large-12 body_copy">
 191           {% if note.static_html %}
 192             <div class="note-text">
 193               <iframe style="border:none; width:100%; min-height: 1000px;"
 194                       id="noteframe"> </iframe>
 195               <noscript>
 196                 {{ note.text }}
 197               </noscript>
 198             </div> <!-- .note-text -->
 199
 200           {% else %} {# note.static_html #}
 201             <div class="note-error">
 202               This document's content is currently unavailable. Please try again later.
 203             </div>
 204           {% endif %} {# note.static_html #}
 205         </div><!-- /body_copy -->
 206       </div>
 207
 208     </div><!-- /note_container -->
 209
 210
 211   </section><!--/note_content-->
 212
 213 {% endblock %}
 214
 215