Show keywords in read-only mode first

diff --git a/karmaworld/apps/notes/views.py b/karmaworld/apps/notes/views.py
index ba02345986fe1e5768ddffb0f95205e05613a0d8..da1eaa709b81c172981937fca40139507d6c2c1d 100644 (file)
--- a/karmaworld/apps/notes/views.py
+++ b/karmaworld/apps/notes/views.py
@@ -59,6 +59,7 @@ class NoteDetailView(DetailView):
 
         kwargs['keyword_prototype_form'] = KeywordForm
         kwargs['keyword_formset'] = self.keyword_formset
+        kwargs['keywords'] = Keyword.objects.filter(note=self.object)
 
         if self.object.is_pdf():
             kwargs['pdf_controls'] = True

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index 3fb63ce6baefd6f3992162c28eef36b302370883..8c522746f44b81c002f15fb975984b37e191d4fe 100644 (file)
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -98,9 +98,10 @@ button:focus,
 
 button.disabled,
 button.disabled:hover,
-button.disabled:focus
+button.disabled:focus,
+.button.disabled,
 .button.disable:hover,
-.button.disabled:focus, {
+.button.disabled:focus {
   background: #333333;
   color: #bcbdc0;
   cursor: default;
@@ -191,6 +192,10 @@ table.dataTable a {
   background-color: transparent !important;
 }
 
+td {
+  background-color: inherit !important;
+}
+
 ul.ui-autocomplete {
   z-index: 1000;
 }

diff --git a/karmaworld/assets/css/note_course_pages.css b/karmaworld/assets/css/note_course_pages.css
index 6524e1642f6ba042ba8121df3e671885462443ce..1ae6d2d5a843ae4932f4352277c05c19690c0d9b 100644 (file)
--- a/karmaworld/assets/css/note_course_pages.css
+++ b/karmaworld/assets/css/note_course_pages.css
@@ -117,4 +117,14 @@ div.header-title-row {
 
 .note-keyword-toggle {
   margin: 0 0 10px 0;
+}
+
+#keywords-data-table td {
+  padding: 10px 10px 10px 10px;
+}
+
+#edit-keywords-button {
+  font-size: inherit;
+  margin: 0;
+  padding: 5px;
 }
\ No newline at end of file

diff --git a/karmaworld/assets/js/note-detail.js b/karmaworld/assets/js/note-detail.js
index cf6358b00d2868dd373b43542607bf91085a5ad8..5531e5f92e1267d16e73ecc8f01443a2b707fa4d 100644 (file)
--- a/karmaworld/assets/js/note-detail.js
+++ b/karmaworld/assets/js/note-detail.js
@@ -256,9 +256,6 @@ $(function() {
                 }
               });
           });
-
-
-
       },
       error: function(data, textStatus, jqXHR) {
         writeNoteFrame("<h3 style='text-align: center'>Sorry, your note could not be retrieved.</h3>");
@@ -269,6 +266,17 @@ $(function() {
   $('.definition').keydown(tabHandler);
   $('#add-row-btn').click(addForm);
 
+  $('#keywords-data-table').dataTable({
+    // don't provide a option for the user to change the table page length
+    'bLengthChange': false,
+    'sDom': 't<"clear">'
+  });
+
+  $('#edit-keywords-button').click(function(event) {
+    $('#keywords-data-table').toggle();
+    $('#keyword-form').toggle();
+  });
+
 });
 
 

diff --git a/karmaworld/templates/notes/note_detail.html b/karmaworld/templates/notes/note_detail.html
index 8122061bc5bc988ed1a9d09846d064b1bd28c075..19b4b285cda2a3a0472575f92f8a6b6c1bd1dc56 100644 (file)
--- a/karmaworld/templates/notes/note_detail.html
+++ b/karmaworld/templates/notes/note_detail.html
@@ -8,6 +8,7 @@
 {% block pagestyle %}
   <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/note_course_pages.css">
   <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/annotator.min.css" />
+  <link rel="stylesheet" type="text/css" media="all" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.min.css">
 {% endblock %}
 
 {% block pagescripts %}
@@ -31,6 +32,7 @@
   <script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.1/marked.min.js" ></script>
   <script src="{{ STATIC_URL }}js/annotator-full.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script>
   <script>
     $(function() {
       $(document).foundation('joyride', 'start');
@@ -171,7 +173,7 @@
       <div id="tabs" class="small-12 columns">
         <dl class="tabs show-for-large-up" data-tab data-options="deep_linking: true; scroll_to_content: false">
           <dd class="active"><a href="#note_container">Note</a></dd>
-          <dd id="keywords-tab-button"><a href="#keywords">Keywords</a></dd>
+          <dd id="keywords-tab-button"><a href="#keywords">Key Terms & Definitions</a></dd>
         </dl>
         <div id="tabs-content" class="tabs-content">
           <div id="note_container" class="content active">
@@ -218,7 +220,25 @@
           <div id="keywords" class="content">
             <div class="row">
               <div class="small-12 columns">
-                <form id="keyword-form" action="{{ note.get_absolute_url }}#keywords" method="post">
+                <p>These key terms and definitions have been defined by KarmaNotes users.
+                You can edit them for accuracy and add more if you like.</p>
+                <p><button id="edit-keywords-button" class="museo700"><i class="fa fa-edit"></i> Edit Key Terms & Definitions</button></p>
+                <table id="keywords-data-table">
+                  <thead>
+                    <tr>
+                      <td>Key Terms</td>
+                      <td>Definitions</td>
+                    </tr>
+                  </thead>
+                  {% for keyword in keywords %}
+                    <tr>
+                      <td>{{ keyword.word }}</td>
+                      <td>{{ keyword.definition }}</td>
+                    </tr>
+                  {% endfor %}
+                </table>
+
+                <form id="keyword-form" action="{{ note.get_absolute_url }}#keywords" method="post" class="hide">
                   {% csrf_token %}
                   {{ keyword_formset.management_form }}
                   <div class="hide" id="keyword-form-prototype">