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 csrf_token = "{{ csrf_token }}";
  17   </script>
  18   <script src="{{ STATIC_URL }}js/setup-ajax.js"></script>
  19   <script src="{{ STATIC_URL }}js/note-detail.js" ></script>
  20   <script src="{{ STATIC_URL }}js/pxem.jQuery.js"></script>
  21 {% endblock %}
  22
  23 {% block content %}
  24   <section id="note_content">
  25
  26     <div id="note_header" class="hero_gradient_bar">
  27       <div class="row">
  28         <div class="twelve columns header_subhead">
  29           <a href="{{note.course.get_absolute_url}}">
  30             <i class="fa fa-arrow-left"></i>&nbsp;back to {{ note.course.name }}
  31           </a>
  32         </div>
  33       </div>
  34
  35       <div class="row">
  36         <div class="small-12 columns header_title">
  37           {{ note.name }}
  38         </div><!-- /note_name -->
  39       </div>
  40
  41       <div class="row">
  42         <div id="note_status" class="twelve columns">
  43           <div class="activity_details_status">
  44             So far, <span id="thank-number" class="activity_details_status_number">{{ note.thanks }}</span> people have completely fallen in love with with these notes.
  45           </div><!-- /activity_details_status -->
  46         </div><!-- /note_status -->
  47       </div>
  48
  49       <div class="row">
  50         <div id="note_actions" class="large-3 medium-6 small-12 columns small-centered">
  51           <div class="row">
  52             <div class="small-4 column">
  53               <a href="#" id="flag-button" {% if already_flagged %} class="hide" {% endif %}><img src="{{ STATIC_URL }}img/note_flag.png" alt="note_flag" width="25" height="35"/></a>
  54               <a href="#" id="flag-button-disabled" {% if not already_flagged %} class="hide" {% endif %}><img src="{{ STATIC_URL }}img/note_flag_disabled.png" alt="note_flag" width="25" height="35"/></a>
  55             </div>
  56             <div class="small-4 column">
  57               <a href="#" id="thank-button" {% if already_thanked %} class="hide" {% endif %}><img src="{{ STATIC_URL }}img/note_thank.png" alt="note_thank" width="34" height="34"/></a>
  58               <a href="#" id="thank-button-disabled" {% if not already_thanked %} class="hide" {% endif %}><img src="{{ STATIC_URL }}img/note_thank_disabled.png" alt="note_thank" width="34" height="34"/></a>
  59             </div>
  60             <div class="small-4 column">
  61               <a href="{{ note.fp_file }}">
  62                 <img src="{{ STATIC_URL }}img/note_download.png" alt="note_download" width="51" height="36" />
  63               </a>
  64             </div>
  65           </div>
  66         </div><!-- /note_actions -->
  67       </div>
  68
  69       {% if note.license %}
  70       <div class="row">
  71         <div id="note_pedigree" class="twelve columns activity_details_status">
  72           {{ note.license.html|safe }} {% if note.upstream_link %}<a href="{{note.upstream_link}}" target="_blank">{{ note.upstream_link|slice:":80" }}</a>{% endif %}
  73         </div><!-- /note_pedigree -->
  74       </div>
  75       {% endif %}
  76
  77       </div><!-- /course_header -->
  78
  79       {% if pdf_controls %}
  80       <div id="zoom-buttons" class="row show-for-medium-up">
  81         <div id="outline-btn-wrapper" class="small-1 columns hide show-for-medium-up">
  82           <i id="outline-btn" class="zoom-button fa fa-bars fa-2x"></i>
  83         </div>
  84         <div class="small-4 columns">
  85           <span>Jump to page:
  86           <input id="scroll-to" type="text" style="width: 3em; display: inline" /></span>
  87         </div>
  88         <div class="small-2 small-centered columns center">
  89           <i id="minus-btn" class="zoom-button fa fa-search-minus fa-2x"></i>
  90           <i id="plus-btn" class="zoom-button fa fa-search-plus fa-2x"></i>
  91         </div>
  92       </div>
  93       {% endif %}
  94
  95
  96     <div id="note_container">
  97       {% if pdf or ppt %}
  98         <!-- Add pdf.js -->
  99         <div class="row">
 100           <div class="small-12 columns">
 101             <iframe
 102                 style="border:none; width:100%; min-height: 700px; margins: auto;"
 103                 id="noteframe"
 104                 src="/pdfview/{{ note.id }}"
 105                 onload="autoResize('noteframe')"> </iframe>
 106           </div>
 107         </div> <!-- .row -->
 108
 109         {% comment %}
 110         # TODO: embed and pass the url with this included when we fix the css integration issues
 111         {% include 'partial/pdfembed.html' %}
 112         {% endcomment %}
 113
 114       {% else %} {# if pdf #}
 115
 116       <div class="row">
 117         <div class="small-12 small-centered columns medium-12 large-12 body_copy">
 118           {% if note.html %}
 119             <div class="note-text">
 120               <iframe style="border:none; width:100%; min-height: 1000px;" id="noteframe" src="/raw/{{ note.id }}"
 121                       onload="autoResize('noteframe'); {% if pdf_controls %} setupPdfViewer(); {% endif %}"> </iframe>
 122             </div> <!-- .note-text -->
 123
 124           {% else %} {# note.html #}
 125             <div class="note-error">
 126               This document's content is currently unavailable. Please try again later.
 127             </div>
 128           {% endif %} {# note.html #}
 129
 130       {% endif %} {# note.filetype == 'pdf' #}
 131
 132         </div><!-- /body_copy -->
 133       </div>
 134
 135     </div><!-- /note_container -->
 136
 137
 138   </section><!--/note_content-->
 139
 140 {% endblock %}
 141