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>
-                  <td>${outerKey}</td>`
+      html += `<tr>
+                  <td style="text-transform: uppercase;">${outerKey.replace(/_/g, " ")}</td>`
       if (outerKey === "corpus_all_texts" || outerKey === "text_lookup") {
-        table += `<td>
-                  <table>`
+        html += `<td>
+                  <ul class="collapsible">`
         for (let [innerKey, innerValue] of Object.entries(outerValue)) {
-          table += `<tr style="border-bottom: none;">
-                      <td>
-                        <i>${innerValue.title}</i> written
-                        by <i>${innerValue.author}</i>
-                        in <i>${innerValue.publishing_year}</i>
-                        <a class="waves-effect
-                                  waves-light
-                                  btn
-                                  right
-                                  more-text-detials"
+          html += `<li class="text-metadata"
+                        data-metadata-key="${outerKey}"
+                        data-text-key="${innerKey}">
+                      <div class="collapsible-header"
                            data-metadata-key="${outerKey}"
-                           data-text-key="${innerKey}"
-                           href="#modal-text-details">More
-                            <i class="material-icons right"
-                               data-metadata-key="${outerKey}"
-                               data-text-key="${innerKey}">
-                               info_outline
-                            </i>
-                        </a>
-                      </td>
-                    </tr>`
+                           data-text-key="${innerKey}">
+                        <i class="material-icons"
+                           data-metadata-key="${outerKey}"
+                           data-text-key="${innerKey}">info_outline</i>
+                           ${innerValue['author']} - ${innerValue['publishing_year']} -
+                           ${innerValue['title']}
+                      </div>
+                      <div class="collapsible-body">
+                        <span>
+                          <ul id="bibliographic-data-${outerKey}-${innerKey}"
+                              style="column-count: 2;">
+                          </ul>
+                        </span>
+                      </div>
+                    </li>`
         }
-        table += `</td>
-                  </table>`
+        html += `</ul>
+                  </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>
-          <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);
   }
 
 }