Enhance metadata view and analysis/result viewer interface

web/app/templates/corpora/analyse_corpus.html.j2

@@ -325,10 +325,11 @@
       let table = results.jsList.createMetaDataForModal(metaDataObject);
       metaDataModalContent.insertAdjacentHTML("afterbegin", table);
       metaDataModal.open();
-      var moreTextDetailsButtons;
-      moreTextDetailsButtons = document.getElementsByClassName("more-text-detials");
-      for (var btn of moreTextDetailsButtons) {
-        btn.onclick = () => {
+      let collapsibles = document.getElementsByClassName("text-metadata");
+      for (let collapsible of collapsibles) {
+        collapsible.onclick = () => {
+          let elems = document.querySelectorAll('.collapsible');
+          let instances = M.Collapsible.init(elems, {accordion: false});
           results.jsList.createTextDetails(metaDataObject);
         }
       }

web/app/templates/interactions/cite.html.j2

@@ -9,7 +9,8 @@
               class="waves-effect
               waves-light
               btn-flat
-              disabled"
+              disabled
+              flat-interaction"
               type="submit">Action One
         <i class="material-icons left">cloud</i>
       </button>
@@ -19,7 +20,8 @@
               class="waves-effect
               waves-light
               btn-flat
-              disabled"
+              disabled
+              flat-interaction"
               type="submit">Action Two
         <i class="material-icons left">add</i>
       </button>

web/app/templates/macros/query_result_macro.html.j2

@@ -4,42 +4,41 @@
   <table class="highlight">
     <thead>
       <tr>
-        <th>Metadata Description</th>
-        <th>Value</th>
+        <th style="width: 33%">Metadata Description</th>
+        <th style="width: 66%">Value</th>
       </tr>
     </thead>
     <tbody>
       {% for pair in query_metadata|dictsort %}
       <tr>
-        <td>{{ pair[0] }}</td>
+        <td>{{ pair[0]|replace("_", " ")|upper() }}</td>
         {% if pair[0] == "corpus_all_texts"
            or pair[0] == "text_lookup"  %}
           <td>
-          <table>
-          {% for key, value  in pair[1].items()  %}
-              <tr style="border-bottom: none;">
-                <td>
-                  <i>{{ value['title'] }}</i> written
-                  by <i>{{ value['author'] }}</i>
-                  in <i>{{ value['publishing_year'] }}</i>
-                  <a class="waves-effect
-                            waves-light
-                            btn
-                            right
-                            more-text-detials"
+            <ul class="collapsible">
+            {% for key, value  in pair[1].items()  %}
+              <li class="text-metadata"
+                  data-metadata-key="{{ pair[0] }}"
+                  data-text-key="{{ key }}">
+                <div class="collapsible-header"
                      data-metadata-key="{{ pair[0] }}"
-                     data-text-key="{{ key }}"
-                     href="#modal-text-details">More
-                      <i class="material-icons right"
-                         data-metadata-key="{{ pair[0] }}"
-                         data-text-key="{{ key }}">
-                         info_outline
-                      </i>
-                  </a>
-                </td>
-              </tr>
-          {% endfor %}
-          </table>
+                     data-text-key="{{ key }}">
+                  <i class="material-icons"
+                     data-metadata-key="{{ pair[0] }}"
+                     data-text-key="{{ key }}">info_outline</i>
+                  {{ value['author'] }} - {{ value['publishing_year'] }}
+                  - {{ value['title'] }}
+                </div>
+                <div class="collapsible-body">
+                  <span>
+                    <ul id="bibliographic-data-{{ pair[0] }}-{{ key }}"
+                        style="column-count: 2;">
+                    </ul>
+                  </span>
+                </div>
+              </li>
+            {% endfor %}
+          </ul>
           </td>
         {% else %}
           <td>{{ pair[1] }}</td>
@@ -50,49 +49,25 @@
   </table>
 </div>
 
-<!-- Modal Structure -->
-<div id="modal-text-details" class="modal modal-fixed-footer">
-  <div class="modal-content">
-    <h4>Bibliographic data</h4>
-    <p id="bibliographic-data"></p>
-  </div>
-  <div class="modal-footer">
-    <a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
-  </div>
-</div>
-
 <script>
-var moreTextDetailsButtons;
-moreTextDetailsButtons = document.getElementsByClassName("more-text-detials");
-for (var btn of moreTextDetailsButtons) {
-  btn.onclick = () => {
-    let modal = document.getElementById("modal-text-details");
-    modal = M.Modal.init(modal, {"dismissible": true});
-    modal.open();
+document.addEventListener('DOMContentLoaded', function() {
+    let elems = document.querySelectorAll('.collapsible');
+    let instances = M.Collapsible.init(elems, {accordion: false});
+  });
+let collapsibles = document.getElementsByClassName("text-metadata");
+for (let collapsible of collapsibles) {
+  collapsible.onclick = () => {
     let metadataKey = event.target.dataset.metadataKey;
     let textKey = event.target.dataset.textKey;
     let textData = {{ query_metadata|tojson|safe }}[metadataKey][textKey];
-    console.log(textData);
-    let bibliographicData = document.getElementById("bibliographic-data");
+    let bibliographicData = document.getElementById(`bibliographic-data-${metadataKey}-${textKey}`);
     bibliographicData.innerHTML = "";
-    let table = document.createElement("table");
     for (let [key, value] of Object.entries(textData)) {
-      table.insertAdjacentHTML("afterbegin",
+      bibliographicData.insertAdjacentHTML("afterbegin",
       `
-        <tr>
-          <td>${key}</td>
-          <td>${value}</td>
-        </tr>
+      <li><span style="text-transform: capitalize;">${key}:</span> ${value}</li>
       `);
     }
-    table.insertAdjacentHTML("afterbegin",
-      `
-        <thead>
-          <th>Description</th>
-          <th>Value</th>
-        </thead>
-      `)
-    bibliographicData.appendChild(table);
   }
 }
 </script>