Enhance metadata view and analysis/result viewer interface

web/app/static/css/nopaque.css

@@ -22,7 +22,7 @@ main {
 /* preloader circle in the size of a button icon */
 .button-icon-spinner {
   bottom: -5px !important;
-  right: 0px !important;
+  right: 55px !important;
   margin-right: 12px !important;
   width: 19.5px !important;
   height: 19.5px !important;
@@ -31,11 +31,14 @@ main {
 /* flat-interaction addition to show background color */
 
 .flat-interaction {
-  background-color: #DCDCDC !important;
+  background-color: #DCDCDC;
+  width: 100%;
+  margin-bottom: 3px;
+  text-transform: capitalize;
 }
 
 .flat-interaction:hover {
-  background-color: #FFFFFF !important;
+  background-color: #E6E6FA !important;
 }
 
 /* CSS for clickable th elements in tables. Needed for sortable table data with

web/app/static/js/nopaque.lists.js

@@ -1018,7 +1018,7 @@ class ResultsList extends List {
 
   // creates the HTML table code for the metadata vie in the corpus analysis interface
   createMetaDataForModal(metaDataObject) {
-    let table = `<div class="col s12">
+    let html = `<div class="col s12">
                       <table class="highlight">
                         <thead>
                           <tr>
@@ -1028,74 +1028,58 @@ class ResultsList extends List {
                         </thead>
                         <tbody>`
     for (let [outerKey, outerValue] of Object.entries(metaDataObject)) {
-      table += `<tr>
+      html += `<tr>
-                  <td>${outerKey}</td>`
+                  <td style="text-transform: uppercase;">${outerKey.replace(/_/g, " ")}</td>`
       if (outerKey === "corpus_all_texts" || outerKey === "text_lookup") {
-        table += `<td>
+        html += `<td>
-                  <table>`
+                  <ul class="collapsible">`
         for (let [innerKey, innerValue] of Object.entries(outerValue)) {
-          table += `<tr style="border-bottom: none;">
+          html += `<li class="text-metadata"
-                      <td>
+                        data-metadata-key="${outerKey}"
-                        <i>${innerValue.title}</i> written
+                        data-text-key="${innerKey}">
-                        by <i>${innerValue.author}</i>
+                      <div class="collapsible-header"
-                        in <i>${innerValue.publishing_year}</i>
-                        <a class="waves-effect
-                                  waves-light
-                                  btn
-                                  right
-                                  more-text-detials"
                            data-metadata-key="${outerKey}"
-                           data-text-key="${innerKey}"
+                           data-text-key="${innerKey}">
-                           href="#modal-text-details">More
+                        <i class="material-icons"
-                            <i class="material-icons right"
+                           data-metadata-key="${outerKey}"
-                               data-metadata-key="${outerKey}"
+                           data-text-key="${innerKey}">info_outline</i>
-                               data-text-key="${innerKey}">
+                           ${innerValue['author']} - ${innerValue['publishing_year']} -
-                               info_outline
+                           ${innerValue['title']}
-                            </i>
+                      </div>
-                        </a>
+                      <div class="collapsible-body">
-                      </td>
+                        <span>
-                    </tr>`
+                          <ul id="bibliographic-data-${outerKey}-${innerKey}"
+                              style="column-count: 2;">
+                          </ul>
+                        </span>
+                      </div>
+                    </li>`
         }
-        table += `</td>
+        html += `</ul>
-                  </table>`
+                  </td>`
       } else {
-        table += `<td>${outerValue}</td>`
+        html += `<td>${outerValue}</td>`
       }
-      table += `</tr>`
+      html += `</tr>`
     }
-    table += `</tbody>
+    html += `</tbody>
               </table>`
-    return table
+    return html
   }
 
   // Creates the text details for the texts shown in the corpus analysis metadata modal.
   createTextDetails(metaDataObject) {
-    let modal = document.getElementById("modal-text-details");
-    modal = M.Modal.init(modal, {"dismissible": true});
-    modal.open();
     let metadataKey = event.target.dataset.metadataKey;
     let textKey = event.target.dataset.textKey;
     let textData = metaDataObject[metadataKey][textKey];
-    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>
+      <li><span style="text-transform: capitalize;">${key}:</span> ${value}</li>
-          <td>${key}</td>
-          <td>${value}</td>
-        </tr>
       `);
     }
-    table.insertAdjacentHTML("afterbegin",
-      `
-        <thead>
-          <th>Description</th>
-          <th>Value</th>
-        </thead>
-      `)
-    bibliographicData.appendChild(table);
   }
 
 }

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;
+      let collapsibles = document.getElementsByClassName("text-metadata");
-      moreTextDetailsButtons = document.getElementsByClassName("more-text-detials");
+      for (let collapsible of collapsibles) {
-      for (var btn of moreTextDetailsButtons) {
+        collapsible.onclick = () => {
-        btn.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 style="width: 33%">Metadata Description</th>
-        <th>Value</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>
+            <ul class="collapsible">
-          {% for key, value  in pair[1].items()  %}
+            {% for key, value  in pair[1].items()  %}
-              <tr style="border-bottom: none;">
+              <li class="text-metadata"
-                <td>
+                  data-metadata-key="{{ pair[0] }}"
-                  <i>{{ value['title'] }}</i> written
+                  data-text-key="{{ key }}">
-                  by <i>{{ value['author'] }}</i>
+                <div class="collapsible-header"
-                  in <i>{{ value['publishing_year'] }}</i>
-                  <a class="waves-effect
-                            waves-light
-                            btn
-                            right
-                            more-text-detials"
                      data-metadata-key="{{ pair[0] }}"
-                     data-text-key="{{ key }}"
+                     data-text-key="{{ key }}">
-                     href="#modal-text-details">More
+                  <i class="material-icons"
-                      <i class="material-icons right"
+                     data-metadata-key="{{ pair[0] }}"
-                         data-metadata-key="{{ pair[0] }}"
+                     data-text-key="{{ key }}">info_outline</i>
-                         data-text-key="{{ key }}">
+                  {{ value['author'] }} - {{ value['publishing_year'] }}
-                         info_outline
+                  - {{ value['title'] }}
-                      </i>
+                </div>
-                  </a>
+                <div class="collapsible-body">
-                </td>
+                  <span>
-              </tr>
+                    <ul id="bibliographic-data-{{ pair[0] }}-{{ key }}"
-          {% endfor %}
+                        style="column-count: 2;">
-          </table>
+                    </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;
+document.addEventListener('DOMContentLoaded', function() {
-moreTextDetailsButtons = document.getElementsByClassName("more-text-detials");
+    let elems = document.querySelectorAll('.collapsible');
-for (var btn of moreTextDetailsButtons) {
+    let instances = M.Collapsible.init(elems, {accordion: false});
-  btn.onclick = () => {
+  });
-    let modal = document.getElementById("modal-text-details");
+let collapsibles = document.getElementsByClassName("text-metadata");
-    modal = M.Modal.init(modal, {"dismissible": true});
+for (let collapsible of collapsibles) {
-    modal.open();
+  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-${metadataKey}-${textKey}`);
-    let bibliographicData = document.getElementById("bibliographic-data");
     bibliographicData.innerHTML = "";
-    let table = document.createElement("table");
     for (let [key, value] of Object.entries(textData)) {
-      table.insertAdjacentHTML("afterbegin",
+      bibliographicData.insertAdjacentHTML("afterbegin",
       `
-        <tr>
+      <li><span style="text-transform: capitalize;">${key}:</span> ${value}</li>
-          <td>${key}</td>
-          <td>${value}</td>
-        </tr>
       `);
     }
-    table.insertAdjacentHTML("afterbegin",
-      `
-        <thead>
-          <th>Description</th>
-          <th>Value</th>
-        </thead>
-      `)
-    bibliographicData.appendChild(table);
   }
 }
 </script>