From d042e4f31d5b511c73b01daa5bab78755c3b44d1 Mon Sep 17 00:00:00 2001 From: Stephan Porada Date: Wed, 22 Jul 2020 13:15:55 +0200 Subject: [PATCH] Enhance metadata view and analysis/result viewer interface --- web/app/static/css/nopaque.css | 9 +- web/app/static/js/nopaque.lists.js | 82 +++++++--------- .../templates/corpora/analyse_corpus.html.j2 | 9 +- web/app/templates/interactions/cite.html.j2 | 6 +- .../macros/query_result_macro.html.j2 | 97 +++++++------------ 5 files changed, 84 insertions(+), 119 deletions(-) diff --git a/web/app/static/css/nopaque.css b/web/app/static/css/nopaque.css index e2886bd3..f1e6f5e0 100644 --- a/web/app/static/css/nopaque.css +++ b/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 diff --git a/web/app/static/js/nopaque.lists.js b/web/app/static/js/nopaque.lists.js index c461ed26..b0c10aae 100644 --- a/web/app/static/js/nopaque.lists.js +++ b/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 = `
+ let html = `
@@ -1028,74 +1028,58 @@ class ResultsList extends List { ` for (let [outerKey, outerValue] of Object.entries(metaDataObject)) { - table += ` - ` + html += ` + ` if (outerKey === "corpus_all_texts" || outerKey === "text_lookup") { - table += `` } else { - table += `` + html += `` } - table += `` + html += `` } - table += ` + html += `
${outerKey}
${outerKey.replace(/_/g, " ")} - ` + html += ` - - ` + data-text-key="${innerKey}"> + info_outline + ${innerValue['author']} - ${innerValue['publishing_year']} - + ${innerValue['title']} + +
+ +
    +
+ +
+ ` } - table += ` -
+
    ` for (let [innerKey, innerValue] of Object.entries(outerValue)) { - table += `
- ${innerValue.title} written - by ${innerValue.author} - in ${innerValue.publishing_year} - +
More - - info_outline - - -
` + html += ` + 		${outerValue}${outerValue}
` - 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", ` - - ${key} - ${value} - +
  • ${key}: ${value}
    • `); } - table.insertAdjacentHTML("afterbegin", - ` - - Description - Value - - `) - bibliographicData.appendChild(table); } } diff --git a/web/app/templates/corpora/analyse_corpus.html.j2 b/web/app/templates/corpora/analyse_corpus.html.j2 index a6c272a7..97e2cd2d 100644 --- a/web/app/templates/corpora/analyse_corpus.html.j2 +++ b/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); } } diff --git a/web/app/templates/interactions/cite.html.j2 b/web/app/templates/interactions/cite.html.j2 index 31274310..c6d96b6c 100644 --- a/web/app/templates/interactions/cite.html.j2 +++ b/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 cloud @@ -19,7 +20,8 @@ class="waves-effect waves-light btn-flat - disabled" + disabled + flat-interaction" type="submit">Action Two add diff --git a/web/app/templates/macros/query_result_macro.html.j2 b/web/app/templates/macros/query_result_macro.html.j2 index 49eb06b4..68bf0903 100644 --- a/web/app/templates/macros/query_result_macro.html.j2 +++ b/web/app/templates/macros/query_result_macro.html.j2 @@ -4,42 +4,41 @@ - - + + {% for pair in query_metadata|dictsort %} - + {% if pair[0] == "corpus_all_texts" or pair[0] == "text_lookup" %} {% else %} @@ -50,49 +49,25 @@
    Metadata DescriptionValueMetadata DescriptionValue
    {{ pair[0] }}{{ pair[0]|replace("_", " ")|upper() }} - - {% for key, value in pair[1].items() %} - - - - {% endfor %} -
    - {{ value['title'] }} written - by {{ value['author'] }} - in {{ value['publishing_year'] }} - + {% for key, value in pair[1].items() %} +
  • +
    More - - info_outline - - -
    • + data-text-key="{{ key }}"> + info_outline + {{ value['author'] }} - {{ value['publishing_year'] }} + - {{ value['title'] }} + +
    + +
      +
    +     +
    + + {% endfor %} +     		{{ pair[1] }}
    - -
    -
    -

    Bibliographic data

    -

    -
    -
    - Close -
    -
    -