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   <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/annotator.min.css" />
  11 {% endblock %}
  12
  13 {% block pagescripts %}
  14   <script type="text/javascript">
  15     var note_id = {{ note.id }};
  16     var note_thank_url = "{% url 'thank_note' note.id %}"
  17     var note_flag_url = "{% url 'flag_note' note.id %}"
  18     var edit_note_tags_url = "{% url 'edit_note_tags' note.id %}"
  19     var note_downloaded_url = "{% url 'downloaded_note' note.id %}"
  20     var note_contents_url = "{{ S3_URL }}{{ note.get_relative_s3_path }}"
  21     var pdfControls = {% if pdf_controls %} true {% else %} false {% endif %};
  22     var csrf_token = "{{ csrf_token }}";
  23     var annotator_js_url = "{{ STATIC_URL }}js/annotator-full.min.js";
  24     var annotator_css_url = "{{ STATIC_URL }}css/annotator.min.css";
  25     var setup_ajax_url = "{{ STATIC_URL }}js/setup-ajax.js";
  26     var empty_js = "{{ STATIC_URL }}js/empty.js";
  27   </script>
  28   <script src="{{ STATIC_URL }}js/setup-ajax.js"></script>
  29 {% endblock %}
  30
  31 {% block bodyscripts %}
  32   <script src="{{ STATIC_URL }}js/note-detail.js" ></script>
  33   <script src="{{ STATIC_URL }}js/pxem.jQuery.js"></script>
  34   <script src="{{ STATIC_URL }}js/marked.js" ></script>
  35   <script src="{{ STATIC_URL }}js/annotator-full.min.js"></script>
  36   <script src="{{ STATIC_URL }}js/jquery.cookie.js"></script>
  37   <script>
  38     $(function() {
  39       $(document).foundation('joyride', 'start');
  40     });
  41   </script>
  42 {% endblock %}
  43
  44 {% block raw_content %}
  45   <section id="note_content">
  46
  47     <div class="return-to-course show-for-large-up">
  48       <div class="row">
  49         <div class="small-12 columns">
  50           <a href="{{ note.course.get_absolute_url }}">
  51             <i class="fa fa-angle-double-left"></i> See all notes for {{ note.course.name }}
  52           </a>
  53         </div>
  54       </div>
  55     </div>
  56
  57     <div id="note_header">
  58
  59       <div class="row header-byline">
  60         <div class="small-12 columns">
  61           <strong>Lecture note for {{ note.course.name }} </strong>
  62           at
  63           {% if note.course.department.school %}
  64             {{ note.course.department.school.name }}
  65           {% else %}
  66             {{ note.course.school.name }}
  67           {% endif %}
  68           &nbsp;&nbsp;
  69           <span style="display: inline;"><span class="show-for-large-up"><i class="fa fa-thumbs-up"></i> <span id="thank-number">{{ note.thanks }}</span> Thanks</span></span>
  70         </div>
  71       </div>
  72
  73       <div class="row museo700">
  74         <div class="small-12 columns header-title-row">
  75           <span class="header-title">{{ note.name }} </span>
  76           <span style="display: inline;">
  77             <span class="show-for-large-up">
  78               {% if user.is_authenticated %}
  79                 {% if already_thanked %}
  80                   <button id="thank-button-disabled" class="modify-button disabled opentip"
  81                           data-ot="You've already thanked this note"
  82                            {% include 'partial/opentip_settings.html' %}>
  83                     <i class="fa fa-thumbs-up"></i> Thank Note</button>
  84                 {% else %}
  85                   <button id="thank-button" class="modify-button"><i class="fa fa-thumbs-up"></i> Thank Note</button>
  86                   <button id="thank-button-disabled" class="modify-button disabled opentip hide"
  87                           data-ot="You've already thanked this note"
  88                            {% include 'partial/opentip_settings.html' %}>
  89                     <i class="fa fa-thumbs-up"></i> Thank Note</button>
  90                 {% endif %}
  91               {% else %}
  92                 <button id="thank-button-disabled" class="modify-button disabled opentip"
  93                           data-ot="Log in to thank this note"
  94                            {% include 'partial/opentip_settings.html' %}>
  95                     <i class="fa fa-thumbs-up"></i> Thank Note</button>
  96               {% endif %}
  97
  98               {% if user.is_authenticated %}
  99                 {% if already_flagged %}
 100                   <button id="flag-button-disabled" class="modify-button disabled opentip"
 101                           data-ot="You've already reported this note"
 102                            {% include 'partial/opentip_settings.html' %}>
 103                     <i class="fa fa-thumbs-up"></i> Report Note</button>
 104                 {% else %}
 105                   <button id="flag-button" class="modify-button"><i class="fa fa-thumbs-up"></i> Report Note</button>
 106                   <button id="flag-button-disabled" class="modify-button disabled opentip hide"
 107                           data-ot="You've already reported this note"
 108                            {% include 'partial/opentip_settings.html' %}>
 109                     <i class="fa fa-thumbs-up"></i> Report Note</button>
 110                 {% endif %}
 111               {% else %}
 112                 <button id="flag-button-disabled" class="modify-button disabled opentip"
 113                           data-ot="Log in to report this note"
 114                            {% include 'partial/opentip_settings.html' %}>
 115                     <i class="fa fa-thumbs-up"></i> Report Note</button>
 116               {% endif %}
 117
 118               {% if user.is_authenticated %}
 119                 <a href="{{ note.get_fp_url }}">
 120                   <button id="note-download-button" class="modify-button opentip"
 121                           data-ot="It costs 2 karma points to download a note"
 122                           {% include 'partial/opentip_settings.html' %}>
 123                     <i class="fa fa-download"></i> Download Note</button></a>
 124               {% else %}
 125                 <button id="note-download-button-disabled" class="modify-button disabled opentip"
 126                           data-ot="Log in to download this note"
 127                            {% include 'partial/opentip_settings.html' %}>
 128                   <i class="fa fa-download"></i> Download Note</button>
 129               {% endif %}
 130
 131               {% if user.get_profile.can_edit_items %}
 132                 <button id="edit-note-tags" class="modify-button" data-reveal-id="note-tag-dialog">
 133                   <i class="fa fa-pencil-square-o"></i> Edit Tags
 134                 </button>
 135               {% endif %}
 136             </span>
 137           </span>
 138         </div>
 139       </div>
 140
 141       <div id="note-tags" class="row show-for-large-up">
 142         <div class="small-12 columns">
 143           <strong>Tags: </strong>
 144           <span class="tags">
 145             {% for tag in note.tags.all %}
 146               <span class="tag-span">{{ tag.name }}</span>
 147             {% endfor %}
 148           </span>
 149         </div><!-- /note_tags -->
 150       </div>
 151
 152       <div id="note-tag-dialog" class="reveal-modal" data-reveal>
 153         <a class="close-reveal-modal">&#215;</a>
 154         <div class="row">
 155           <div class="small-12 columns">
 156             <p>Edit this note's tags:
 157             <input id="note_tags_input" type="text" value="{% for tag in note.tags.all %}{{ tag.name }}{% if not forloop.last %}, {% endif %}{% endfor %}"></p>
 158             <button id="save_note_tags" type="submit" value="tags-form"><i class="fa fa-save"></i> Save</button>
 159           </div>
 160         </div>
 161       </div>
 162
 163       {% if note.license %}
 164         <div class="row">
 165           <div id="note_pedigree" class="twelve columns activity_details_status">
 166             {{ note.license.html|safe }} {% if note.upstream_link %}<a href="{{ note.upstream_link }}" target="_blank">{{ note.upstream_link|slice:":80" }}</a>{% endif %}
 167           </div><!-- /note_pedigree -->
 168         </div>
 169       {% endif %}
 170
 171     </div><!-- /note header -->
 172
 173     <div class="row">
 174       <div id="tabs" class="small-12 columns">
 175         <dl class="tabs show-for-large-up" data-tab data-options="deep_linking: true; scroll_to_content: false">
 176           <dd class="active"><a href="#note_container">Note</a></dd>
 177           <dd id="keywords-tab-button"><a href="#keywords">Keywords</a></dd>
 178         </dl>
 179         <div id="tabs-content" class="tabs-content">
 180           <div id="note_container" class="content active">
 181             {% if pdf_controls %}
 182               <div id="zoom-buttons" class="row show-for-medium-up">
 183                 <div id="outline-btn-wrapper" class="small-1 columns hide show-for-medium-up">
 184                   <i id="outline-btn" class="zoom-button fa fa-bars fa-2x"></i>
 185                 </div>
 186                 <div class="small-4 columns">
 187                   <span>Jump to page:
 188                   <input id="scroll-to" type="text" style="width: 3em; display: inline" /></span>
 189                 </div>
 190                 <div class="small-2 small-centered columns center">
 191                   <i id="minus-btn" class="zoom-button fa fa-search-minus fa-2x"></i>
 192                   <i id="plus-btn" class="zoom-button fa fa-search-plus fa-2x"></i>
 193                 </div>
 194               </div>
 195             {% endif %}
 196
 197             <div class="row">
 198               <div class="small-12 small-centered columns medium-12 large-12 body_copy">
 199                 {% if note.static_html %}
 200                   <div id="note-content-wrapper" class="note-text">
 201                     {% if note.has_markdown %}
 202                       <span id="note-markdown" data-markdown="{{note.notemarkdown.markdown}}"></span>
 203                     {% else %}
 204                       <iframe style="border:none; width:100%; min-height: 1000px;"
 205                             id="noteframe"></iframe>
 206                       <noscript>
 207                         {{ note.text }}
 208                       </noscript>
 209                     {% endif %}
 210                   </div> <!-- .note-text -->
 211
 212                 {% else %} {# note.static_html #}
 213                   <div class="note-error">
 214                     This document's content is currently unavailable. Please try again later.
 215                   </div>
 216                 {% endif %} {# note.static_html #}
 217               </div><!-- /body_copy -->
 218             </div>
 219           </div><!-- /note_container -->
 220
 221           <div id="keywords" class="content">
 222             <div class="row">
 223               <div class="small-12 columns">
 224                 <form id="keyword-form" action="{{ note.get_absolute_url }}#keywords" method="post">
 225                   {% csrf_token %}
 226                   {{ keyword_formset.management_form }}
 227                   <div class="hide" id="keyword-form-prototype">
 228                     <div class="row keyword-form-row">
 229                       <div class="small-12 large-4 columns">
 230                         {{ keyword_prototype_form.keyword }}
 231                       </div>
 232                       <div class="small-12 large-8 columns">
 233                         {{ keyword_prototype_form.definition }}
 234                         {{ keyword_prototype_form.id }}
 235                       </div>
 236                     </div>
 237                     <hr class="hide-for-large-up" />
 238                   </div>
 239                   <div id="keyword-form-rows">
 240                     {% for form_row in keyword_formset %}
 241                       <div class="row keyword-form-row" data-index="{{ forloop.counter0 }}">
 242                         <div class="small-12 large-4 columns">
 243                           {{ form_row.keyword }}
 244                         </div>
 245                         <div class="small-12 large-8 columns">
 246                           {{ form_row.definition }}
 247                           {{ form_row.id }}
 248                         </div>
 249                       </div>
 250                       <hr class="hide-for-large-up" />
 251                     {% endfor %}
 252                   </div>
 253                   <div class="row hide-for-medium-down">
 254                     <div class="small-12 columns">
 255                       <p class="keywords-hint">(Click <i class="fa fa-plus"></i> or press TAB in the last definition for another row)</p>
 256                     </div>
 257                   </div>
 258                   <div class="row">
 259                     <div class="small-2 columns">
 260                       <button type="submit" name="action" value="keyword-form">Save</button>
 261                     </div>
 262                     <div class="small-9 large-10 columns center">
 263                       <i id="add-row-btn" class="fa fa-plus fa-2x"></i>
 264                     </div>
 265                   </div>
 266                 </form>
 267               </div>
 268             </div>
 269           </div>
 270         </div>
 271       </div>
 272     </div>
 273
 274   </section><!--/note_content-->
 275
 276   <ol class="joyride-list" data-joyride
 277         data-options="cookie_monster: true; cookie_name: note_detail_joyride">
 278     <li data-id="note-content-wrapper" data-text="Awesome!" data-options="tip_location: top">
 279       <p>You can highlight important words or phrases in this note to add definitions for them.</p>
 280     </li>
 281     <li data-id="keywords-tab-button" data-text="Awesome!" data-options="tip_location: top">
 282       <p>Keywords you define will appear here, and you can define new ones here too.</p>
 283     </li>
 284   </ol>
 285
 286 {% endblock %}
 287
 288