further integration of Joana's design

solr_import.sh

@@ -1,6 +1,5 @@
 #!/bin/bash
 # @name: solr_import.sh
-# @version: 0.1
 # @creation_date: 2022-03-11
 # @license: The MIT License <https://opensource.org/licenses/MIT>
 # @author: Simon Bowie <ad7588@coventry.ac.uk>

web/app/static/js/main.js

@@ -1,14 +1,14 @@
 /*
 # @name: main.js
-# @version: 0.1
 # @creation_date: 2022-09-07
 # @license: The MIT License <https://opensource.org/licenses/MIT>
 # @author: Simon Bowie <ad7588@coventry.ac.uk>
+# @author: Joana Chicau
 # @purpose: JavaScript functions for various functions
 # @acknowledgements:
 */
 
-function hideShowInfo () {
+function hideShowInfo(){
       var iDiv = document.querySelectorAll('.info'), i;
   for (i = 0; i < iDiv.length; ++i) {
      if ( iDiv[i].style.display == 'none') {
@@ -16,3 +16,34 @@ function hideShowInfo () {
      else { iDiv[i].style.display = 'none'; }
   }
 }
+
+function refresh(){
+      window.location.reload("Refresh")
+}
+
+function highlightSearchTerms(search){
+  let search_string = search;
+  const search_array = search_string.split(" ");
+  for (const term of search_array){
+    $("span[class=result-entry]:contains('" + term + "')").html(function(_, html) {
+      var replace = "(" + term + ")";
+      var re = new RegExp(replace, "g");
+      return html.replace(re, '<span style="color:orange">$1</span>');
+    });
+  }
+}
+
+function removeRandomTitle() {
+  var elts = document.getElementsByClassName("title");
+  var RandomSpan = elts[Math.floor(Math.random() * elts.length)];
+  RandomSpan.innerHTML = "";
+  RandomSpan.style.width = "16rem";
+  RandomSpan.style.display = "inline-block";
+}
+
+function readingTime(text) {
+  const wpm = 200;
+  const words = text.trim().split(/\s+/).length;
+  const time = Math.ceil(words / wpm);
+  document.getElementById("time").innerText = time;
+}

web/app/static/styles/custom.css

@@ -263,7 +263,6 @@ p.about-text {
     border-bottom: 0.10rem var(--color-lightyellow) solid;
 }
 
-
 .search_term {
     background: var(--color-lightyellow);
 }
@@ -296,7 +295,7 @@ body#random-img-page{
 
 /* PAGE —> RANDOM TITLES */
 
-body#page-titles  a, body#page-titles  span {
+#page-titles  a, #page-titles  span {
     font-size: 3.5vw; /* should be converted to calc */
 }
 
@@ -323,12 +322,11 @@ body#page-titles  a, body#page-titles  span {
 
 /* COMPARE —> 10 ABSTRACTS */
 
-
-.rdn-abstracts .container-fluid p::first-letter {
+#rdn-abstracts #alltext p::first-letter {
   font-size: 5rem;
 }
 
-.rdn-abstracts .container-fluid p {
+#rdn-abstracts #alltext p {
     margin: 0% 20%;
     line-height: 1.8rem;
     font-size: var(--body-fontsize);

web/app/templates/abstracts.html

@@ -2,14 +2,35 @@
 
 {% block content %}
 
-  {% for abstract in abstracts %}
+<div class="action">
+  <button onClick="refresh(this)" type="button" value="Refresh" title="new iteration">↻</button>
+</div>
 
-    {{ abstract['abstract'] }}
+<div id="rdn-abstracts">
+  <div class="row">
+    <div class="col m-5">
+      <p class="h1 text-center">Reading Fragments</p>
+      <p class="mt-2 text-center">a <span id="time"></span> minute read out of 6375081 minutes reading time</p>
+      <a href="{{ url_for('main.index') }}" class="h1 text-left"> ⇽ </a>
+    </div>
 
-    <br><br>
+  </div>
 
-    <hr>
+  <div id="alltext">
+  {% for abstract in abstracts %}
+    <p>
+      {{ abstract['abstract'] }}
+    </p>
+    <span class="joint">&</span>
 
   {% endfor %}
+  </div>
+</div>
+
+<script type="text/javascript">
+  // code adapted from w3collective
+  const text = document.getElementById("alltext").innerText;
+  readingTime(text);
+</script>
 
 {% endblock %}

web/app/templates/base.html

@@ -1,9 +1,9 @@
 <!--
 # @name: base.html
-# @version: 0.1
 # @creation_date: 2022-09-07
 # @license: The MIT License <https://opensource.org/licenses/MIT>
 # @author: Simon Bowie <ad7588@coventry.ac.uk>
+# @author: Joana Chicau
 # @purpose: Basic layout for all pages
 # @acknowledgements:
 # https://www.digitalocean.com/community/tutorials/how-to-make-a-web-application-using-flask-in-python-3
@@ -31,10 +31,6 @@
 
 <body class="d-flex flex-column min-vh-100" id="main">
 
-  <div class="action">
-    <button id="notes" onclick="hideShowInfo()">ⓘ</button>
-  </div>
-
   <main class="flex-shrink-0">
     <div class="container-fluid p-5 my-5">
 

web/app/templates/compare.html

@@ -2,39 +2,31 @@
 
 {% block content %}
 
-  <div class="row">
-  {% for result in results %}
-    <div class="col-6 text-center">
-
-    Application ID:
-
-    <a href="{{ url_for('search.id_search', id=result['id'], core='all') }}">
-      {{ result['application_id'] }}
-    </a>
-
-    <br><br>
+<div class="action">
+  <button onClick="refresh(this)" type="button" value="Refresh" title="new iteration">↻</button>
+</div>
 
-    Year:
+<a href="{{ url_for('main.index') }}" class="h1 text-left"> ⇽ </a>
 
-    {{ result['year'] }}
+<div class="compare mt-5">
 
-    <br><br>
-
-    EPO publication:
-
-    <a href="{{ result['epo_publication_url'] }}">
-      {{ result['epo_publication_url'] }}
-    </a>
-
-    <br><br>
-
-    IPC publication:
+  {% for result in results %}
+    <div class="mt-5 text-center skewY">
 
-    <a href="{{ result['ipc_publication_url'] }}">
-      {{ result['ipc_publication_url'] }}
-    </a>
+    {% if result['title'] is defined %}
+    <p class="h1 mb-2">
+      Title:
+      {{ result['title'] }}
+    </p>
+    <br>
+    {% endif %}
 
-    <br><br>
+    {% if result['year'] is defined %}
+    <p class="mb-2">
+      Year:
+      {{ result['year'] }}
+    </p>
+    {% endif %}
 
     {% if result['title'] is defined %}
       Title:
@@ -49,23 +41,37 @@
     {% endif %}
 
     {% if result['abstract'] is defined %}
+    <p>
       Abstract:
       {{ result['abstract'] }}
       <br><br>
+    </p>
     {% endif %}
 
     {% if result['original_abstract'] is defined %}
+    <p>
       Original language abstract:
       {{ result['original_abstract'] }}
       <br><br>
+    </p>
     {% endif %}
 
+    European Patent Office PDF:
+    <a href="{{ url_for('search.id_search', id=result['id'], core='all') }}">
+      <span class="result-entry">
+        {{ result['application_id'] }}
+      </span>
+    </a>
+
     {% if result['image'] is defined %}
-      <img class="img-fluid" src="data:image/jpg;base64,{{ result['image'] }}" alt="Drawing of patent" />'
+    <div class="col text-center">
+      <img class="img-fluid" src="data:image/jpg;base64,{{ result['image'] }}" alt="Drawing accompanying patent for{{ result['title'] }}" />
+    </div>
     {% endif %}
 
     </div>
   {% endfor %}
-  </div>
+
+</div>
 
 {% endblock %}

web/app/templates/index.html

@@ -2,6 +2,10 @@
 
 {% block content %}
 
+<div class="action">
+  <button id="notes" onclick="hideShowInfo()">ⓘ</button>
+</div>
+
 <div class="index-row button-search random-interferences">
   <div class="col text-center p-2">
     <!-- random titles -->

web/app/templates/record.html

@@ -2,65 +2,61 @@
 
 {% block content %}
 
-  {% for result in results %}
-  <div id="result">
-
-    Application ID:
-
-    <a href="{{ url_for('search.id_search', id=result['id'], core='all') }}">
-      {{ result['application_id'] }}
-    </a>
-
-    <br><br>
+<div class="action">
+  <button onClick="refresh(this)" type="button" value="Refresh" title="new iteration">↻</button>
+</div>
 
-    Year:
+<a href="{{ url_for('main.index') }}" class="h1 text-left"> ⇽ </a>
 
-    {{ result['year'] }}
-
-    <br><br>
-
-    EPO publication:
-
-    <a href="{{ result['epo_publication_url'] }}">
-      {{ result['epo_publication_url'] }}
-    </a>
-
-    <br><br>
-
-    IPC publication:
-
-    <a href="{{ result['ipc_publication_url'] }}">
-      {{ result['ipc_publication_url'] }}
-    </a>
-
-    <br><br>
+  {% for result in results %}
+  <div class="col text-center mt-2" id="result">
 
     {% if result['title'] is defined %}
+    <p class="h1 mb-2">
       Title:
       {{ result['title'] }}
-      <br><br>
+    </p>
+    {% endif %}
+
+    {% if result['year'] is defined %}
+    <p class="mb-2">
+      Year:
+      {{ result['year'] }}
+    </p>
     {% endif %}
 
     {% if result['original_title'] is defined %}
       Original language title:
       {{ result['original_title'] }}
-      <br><br>
+    <br><br>
     {% endif %}
 
     {% if result['abstract'] is defined %}
+    <p>
       Abstract:
       {{ result['abstract'] }}
-      <br><br>
+    </p>
     {% endif %}
 
     {% if result['original_abstract'] is defined %}
+    <p>
       Original language abstract:
       {{ result['original_abstract'] }}
-      <br><br>
+    </p>
+    <br><br>
     {% endif %}
 
+    European Patent Office PDF:
+    <a href="{{ url_for('search.id_search', id=result['id'], core='all') }}">
+      <span class="result-entry">
+        {{ result['application_id'] }}
+      </span>
+    </a>
+
     {% if result['image'] is defined %}
-      <img class="img-fluid" src="data:image/jpg;base64,{{ result['image'] }}" alt="Drawing of patent" />'
+    <div class="col text-center">
+      <img class="img-fluid" src="data:image/jpg;base64,{{ result['image'] }}" alt="Drawing accompanying patent for{{ result['title'] }}" />
+    </div>
     {% endif %}
 
   </div>

web/app/templates/search.html

@@ -2,6 +2,13 @@
 
 {% block content %}
 
+<div class="row">
+  <div class="col m-5">
+    <a href="{{ url_for('main.index') }}" class="h1 text-left"> ⇽ </a>
+    <p class="h1 text-center">a timeline of inventions</p>
+  </div>
+</div>
+
 <div class="row p-3">
   <form action="{{ url_for('search.basic_search') }}" method="POST">
     <input type="hidden" name="search" value="{{ search }}">
@@ -67,16 +74,8 @@
 
 {% endif %}
 
-<script>
-  let search_string = "{{ search }}";
-  const search_array = search_string.split(" ");
-  for (const term of search_array){
-    $("span[class=result-entry]:contains('" + term + "')").html(function(_, html) {
-      var replace = "(" + term + ")";
-      var re = new RegExp(replace, "g");
-      return html.replace(re, '<span style="color:orange">$1</span>');
-    });
-  }
+<script type="text/javascript">
+  highlightSearchTerms({{ search|tojson}})
 </script>
 
 {% endblock %}

web/app/templates/titles.html

@@ -2,9 +2,20 @@
 
 {% block content %}
 
-  <button class="float-end btn btn-danger" onclick="removeRandomTitle()">-</button>
-  <button class="float-end btn btn-danger" onclick="addRandomTitle()">+</button>
-
+<div class="action">
+  <button onClick="refresh(this)" type="button" value="Refresh" title="new iteration">↻</button>
+  <button  onclick="addRandomTitle()" title="add one">+</button>
+  <button  onclick="removeRandomTitle()"  title="remove one">-</button>
+</div>
+
+<div class="row">
+  <div class="col m-5">
+    <a href="{{ url_for('main.index') }}" class="h1 text-left"> ⇽ </a>
+    <p class="h1 text-center">Poetics of Titles</p>
+  </div>
+</div>
+
+<div id="page-titles">
   {% for title in titles %}
 
     <span class="title">
@@ -13,29 +24,21 @@
       </a>
     </span>
 
-    <br><br>
-
-    <hr>
+    <span class="joint">&</span>
 
   {% endfor %}
+</div>
 
-<script>
+<script type="text/javascript">
   var titles = {{ additional_titles|tojson }};
 
   x = 0;
 
   function addRandomTitle(){
     var record_array = titles[x];
-    document.querySelector('.container-fluid').innerHTML += "<a href='/search/id?id=" + record_array['id'] + "&core=all'><span class='title'>" + record_array['title'] + "</span></a><br><br><hr>";
+    document.querySelector('#page-titles').innerHTML += "<a href='/search/id?id=" + record_array['id'] + "&core=all'><span class='title'>" + record_array['title'] + "</span></a><span class='joint'>&</span>";
     x++;
-  }
-
-  function removeRandomTitle() {
-    var elts = document.getElementsByClassName("title");
-    var RandomSpan = elts[Math.floor(Math.random() * elts.length)];
-    var TextReplacement = RandomSpan.textContent.replace(/\w/g,"-");
-    RandomSpan.removeAttribute("href");
-    RandomSpan.innerHTML = TextReplacement;
+    window.scrollTo(0, document.body.scrollHeight);
   }
 </script>