first commit for integrating Joana's design

solr_import.sh

@@ -70,7 +70,7 @@ Import_recursive()
 ############################################################
 
 # Set variables
-directory="/Users/ad7588/projects/patent_site"
+directory="/Users/ad7588/projects/patent_site_python"
 
 # Get the options
 while getopts ":hlimzaespxdw" option; do

web/app/static/js/main.js

@@ -7,3 +7,12 @@
 # @purpose: JavaScript functions for various functions
 # @acknowledgements:
 */
+
+function hideShowInfo () {
+      var iDiv = document.querySelectorAll('.info'), i;
+  for (i = 0; i < iDiv.length; ++i) {
+     if ( iDiv[i].style.display == 'none') {
+        iDiv[i].style.display = 'initial'; }
+     else { iDiv[i].style.display = 'none'; }
+  }
+}

web/app/static/styles/custom.css

@@ -1,10 +1,365 @@
 /*
 # @name: custom.css
-# @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: Custom CSS to override Bootstrap 5 defaults
 # @acknowledgements:
 # Bootstrap 5.1.3: https://getbootstrap.com/
 */
+
+/* NEW STYLE by Joana Chicau */
+
+/* FONTS*/
+
+@font-face {
+     font-family: "Astloch-B";
+     src: url(fonts/Astloch-Bold.ttf) format('truetype');
+     font-weight: bold;
+}
+
+@font-face {
+     font-family: "Astloch";
+     src: url(fonts/Astloch-Regular.ttf) format('truetype');
+     font-weight: normal;
+}
+
+@font-face {
+     font-family: "Abordage";
+     src: url(fonts/Abordage-Regular.otf) format('opentype');
+     font-weight: normal;
+}
+
+@font-face {
+     font-family: "Cmunobi";
+     src: url(fonts/cmunobi.ttf) format('opentype');
+     font-weight: normal;
+}
+
+@font-face {
+     font-family: "Compagnon";
+     src: url(fonts/Compagnon-Roman.otf) format('opentype');
+     font-weight: bold;
+}
+
+@font-face {
+     font-family: "Compagnon-M";
+     src: url(fonts/Compagnon-Medium.otf) format('opentype');
+     font-weight: bold;
+}
+
+
+@font-face {
+     font-family: "Compagnon-L";
+     src: url(fonts/Compagnon-Light.otf) format('opentype');
+     font-weight: lighter;
+}
+
+@font-face {
+     font-family: "Compagnon-T";
+     src: url(fonts/Compagnon-LightItalic.otf) format('opentype');
+     font-weight: bold;
+}
+
+:root {
+    --color-dark: #0c2039;
+    --color-whitish: #fbf9ff;
+    --color-lightyellow: #ffff99;
+    --color-gray: #edecec;
+    --color-blue: #4f1dff;
+    --color-pink: #cc285f;
+    --title-font: "Cmunobi";
+    --body-font: "Compagnon";
+
+    /*@media screen and (min-width: 320px)*/
+    --title-fontsize: calc(2rem + 1.5vw) !important;
+    --body-fontsize: calc(14px + 6 * (100vw - 320px) / 1600) !important;
+    --button-fontsize: calc(16px + 6 * (100vw - 320px) / 1600) !important;
+    --body-fontsize-s: calc(11px + 6 * (100vw - 320px) / 1600) !important;
+}
+
+::selection {
+    background-color: var(--color-lightyellow);
+}
+
+body {
+    color: var(--color-dark);
+    font-family: var(--body-font) !important;
+    font-size: var(--body-fontsize) !important;
+    cursor: crosshair;
+    background-color:  var(--color-whitish) !important;
+}
+
+.background-random{
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+h1, .h1 {
+    font-family: var(--title-font) !important;
+    font-size: var(--title-fontsize) !important;
+    -webkit-text-stroke-width: 0.01rem;
+    -webkit-text-stroke-color: black;
+    font-style: italic;
+}
+
+a.h1 {
+    text-decoration: none;
+}
+
+a, a:visited {
+    cursor: cell;
+    color: var(--color-dark) !important;
+}
+
+a:hover {
+    text-shadow: 1px 1px 10px var(--color-lightyellow);
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 0rem !important;
+}
+
+.contrast {
+    color: var(--color-lightyellow) !important;
+}
+
+/* INDEX */
+
+.border, .border-dark {
+  border-color: var(--color-dark) !important;
+  border-radius: 0.25rem;
+}
+
+.border-glow, hr {
+  box-shadow: 1px 1px 4px var(--color-lightyellow);
+}
+
+input#inputsearch, select#searchopt, select#sort, input#submit {
+    background: var(--color-dark) !important;
+    color: var(--color-lightyellow) !important;
+    border: none !important;
+    border-radius: 0.25rem !important;
+    margin: 0.25rem;
+}
+
+select#searchopt{
+    padding: 0.25rem 0.5rem;
+}
+
+input#inputsearch {
+ width: 350px;
+}
+
+input#submit:hover {
+   box-shadow: 0.25rem 0.25rem 0.5rem var(--color-lightyellow)  !important;
+}
+
+.button-search  a, .button-search input, .button-search  select {
+  font-size:  var(--button-fontsize) !important;
+  text-decoration: none;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.random-interferences a {
+  color: var(--color-dark)  !important;
+  background:  var(--color-lightyellow);
+}
+
+.random-interferences  a:hover {
+  box-shadow: 0.25rem 0.25rem 0.5rem var(--color-dark)  !important;
+}
+
+.button-hidden-off a {
+  color: var(--color-dark)  !important;
+  background:  var(--color-gray);
+  text-decoration: none;
+}
+
+.button-hidden-off a:hover {
+  box-shadow: 0.25rem 0.25rem 0.5rem var(--color-dark)  !important;
+}
+
+button#notes, .action {
+    margin: 1rem 2rem;
+    z-index: 999;
+    position: fixed;
+    top: 0;
+    right: 0;
+}
+
+.action button {
+    color: var(--color-pink)  !important;
+    font-size: 2rem;
+    background-color: transparent;
+    border: none;
+ }
+
+button#notes:hover {
+    color: var(--color-dark)  !important;
+}
+
+.info {
+    font-family: var(--body-font) !important;
+    color: var(--color-pink)  !important;
+}
+
+.code {
+    line-height: 1.2rem;
+    font-size: var(--body-fontsize-s);
+    margin: 0.5rem 1rem;
+}
+
+.w-6 {
+    max-width: 75%;
+}
+
+.mb-10{
+    margin-bottom: 10rem;
+}
+
+.note-veritcal {
+    font-size: var(--body-fontsize-s);
+    position: absolute;
+    right: 0;
+    z-index: 200;
+    margin: 0.5rem;
+    border-radius: 0.25rem;
+    padding: 0.15rem 0.25rem;
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+}
+
+.note-interference span {
+    display: inline-flex;
+    background-color: var(--color-lightyellow);
+    width: 2rem;
+    height: 1rem;
+}
+
+p.about-text {
+    margin: 10% ;
+}
+
+.index-row {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    flex-direction: row;
+}
+
+/* SEARCH */
+
+.search-links {
+    font-size: var(--body-fontsize-s);
+}
+
+.emphasis {
+    border-bottom: 0.10rem var(--color-lightyellow) solid;
+}
+
+
+.search_term {
+    background: var(--color-lightyellow);
+}
+
+.ID-link-search {
+    background: var(--color-lightyellow);
+}
+
+/* PAGE —> RANDOM IMAGES */
+
+body#random-img-page{
+    background-color: var(--color-dark) !important;
+}
+
+#random-img-page .img-fluid {
+  flex-shrink: 1;
+  flex-basis: 10px;
+  height: 50vh;
+  box-shadow: 1px 1px 10px #fff6af;
+  border-radius: 100%;
+  transition: all 1s ease-in-out;
+}
+
+#random-img-page .img-fluid:hover {
+  transform: scale(2.0);
+  border-radius: 0.15rem;
+  transform-origin: top left;
+  opacity: 0.85;
+}
+
+/* PAGE —> RANDOM TITLES */
+
+body#page-titles  a, body#page-titles  span {
+    font-size: 3.5vw; /* should be converted to calc */
+}
+
+.joint {
+    padding:0rem 2.5rem ;
+}
+
+/* COMPARE —> 2 RANDOM PATENTS  */
+
+.skewY {
+    transform: skewY(-20deg);
+}
+
+.compare {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.compare > div {
+    width: 48%;
+}
+
+/* COMPARE —> 10 ABSTRACTS */
+
+
+.rdn-abstracts .container-fluid p::first-letter {
+  font-size: 5rem;
+}
+
+.rdn-abstracts .container-fluid p {
+    margin: 0% 20%;
+    line-height: 1.8rem;
+    font-size: var(--body-fontsize);
+
+}
+
+/***************** MOBILE ****************/
+
+@media screen and (min-width:0px) and (max-width: 768px) {
+
+/* INDEX SEARCH */
+
+input#inputsearch {
+ width: 250px;;
+}
+
+/* RANDOM IMAGES */
+#random-img-page .img-fluid:hover {
+  transform: none;
+  border-radius: 0.15rem;
+  opacity: 1;
+}
+
+/* COMPARE —> 2 RANDOM PATENTS  */
+
+.compare > div {
+    width: 100%;
+}
+
+.col {
+  flex: auto !important;
+}
+
+}

web/app/templates/base.html

@@ -29,10 +29,14 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 </head>
 
-<body class="d-flex flex-column min-vh-100">
+<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 border">
+    <div class="container-fluid p-5 my-5">
 
           {% block content %}
           {% endblock %}

web/app/templates/index.html

@@ -2,45 +2,97 @@
 
 {% block content %}
 
-<div class="row">
-  <div class="col text-center">
+<div class="index-row button-search random-interferences">
+  <div class="col text-center p-2">
+    <!-- random titles -->
+    <a href="{{ url_for('random.ten_random_titles') }}">a poetics of titles</a>
+  </div>
+
+  <div class="col text-center p-2">
+    <!-- random abstracts -->
+    <a href="{{ url_for('random.ten_random_abstracts') }}">a handful of fragments</a>
+  </div>
+
+  <div class="col text-center p-2">
+    <!-- random images -->
+    <a href="{{ url_for('random.ten_random_images') }}">a scattering of images</a>
+  </div>
+</div>
+
+<div class="info note-interference" style="display: none;">
+  <p class="code"> // Interferences: Search interferences perform data otherwise. They disrupt ordering and invite unexpected readings.</p>
+</div>
+
+<div class="index-row">
+  <div class="col text-center m-5">
     <p class="h1">Performing Patents Otherwise</p>
-    <p class="h2">Archival conversations with 320,000 clothing inventions</p>
   </div>
 </div>
 
-<div class="row justify-content-center p-3">
-  <div class="col-sm-6 text-center">
+<div class="row justify-content-center mt-3">
+  <div class="col-sm-10 text-center button-search">
     <form action="{{ url_for('search.basic_search') }}" method="POST">
-      <input type="text" name="search" placeholder="search for a patent record">
+      <input type="text" name="search" id="inputsearch" placeholder="search for a patent record...">
       <input type="submit" id="submit" value="search">
     </form>
   </div>
 </div>
 
+<div class="info" style="display: none;">
+  <p class="code">
+    // Main search engine sorting code:
+    $search_results = solr_search($_POST["search"], $_POST["searchopt"], $_POST["sort"]); if(is_array($search_results)): foreach($search_results as $result): ?>
+  </p>
+</div>
+
+<div class="index-row button-search random-interferences mt-5">
+  <div class="col text-center p-2">
+    <!-- random record -->
+    <a href="{{ url_for('random.random_record') }}">a random entry</a>
+  </div>
 
-<div class="row p-3">
-  <div class="col text-center">
-    <a href="{{ url_for('random.random_record') }}">show a random record</a>
+  <div class="col text-center p-2">
+    <!-- compare two random records -->
+    <a href="{{ url_for('random.two_random_records') }}">a juxtaposition of two</a>
   </div>
 
-  <div class="col text-center">
-    <a href="{{ url_for('random.two_random_records') }}">compare two random records</a>
+  <div class="col text-center p-2">
+    <!-- timeline of search term -->
+    <a href="{{ url_for('random.two_random_records') }}">a timeline of inventions</a>
   </div>
 </div>
 
-<div class="row p-3">
-  <div class="col text-center">
-    <a href="{{ url_for('random.ten_random_titles') }}">ten random titles</a>
+<div class="index-row justify-content-center mt-5">
+  <div class="col text-center button-search button-hidden-off p-2">
+    <a href="">Hidden in plain sight</a>
+
+      <div class="info" style="display: none;">
+        <p class="code">// Searching for a history of women’s clothing inventors, that is in the archive, but hidden in plain sight.... </p>
+      </div>
   </div>
 
-  <div class="col text-center">
-    <a href="{{ url_for('random.ten_random_abstracts') }}">ten random abstracts</a>
+   <div class="col text-center button-search button-hidden-off p-2">
+    <a href="">Search as a book</a>
+
+      <div class="info" style="display: none;">
+        <p class="code">// Find here a table of contents for this digital archive... </p>
+      </div>
   </div>
 
-  <div class="col text-center">
-    <a href="{{ url_for('random.ten_random_images') }}">ten random images (takes a long time to load)</a>
+
+  <div class="col text-center button-search button-hidden-off p-2">
+    <a href="">Off the record</a>
+
+      <div class="info" style="display: none;">
+        <p class="code">// Some things are all over the patent archive but never made explicit. Off the record presents three artistic works that render these absent-present realities visible... </p>
+      </div>
   </div>
 </div>
 
+<div>
+  <p class="about-text">Performing Patents Otherwise is a search engine, a dataset and a series of interferences in searching 320.000 clothing patents. Searching is a creative act. Search engines expose some parts of the archive, obscure others, and can even render visible what’s not in the archive. Performing Patents Otherwise queries patent data, and the search categories and techniques that make this data sort-, relate- and knowable.
+  <a href="about">Continue reading...</a>
+  </p>
+</div>
+
 {% endblock %}

web/app/templates/search.html

@@ -26,55 +26,42 @@
 
   {% for result in results %}
 
-    Application ID:
-
-    <a href="{{ url_for('search.id_search', id=result['id'], core='all') }}">
-      <span class="result-entry">
-        {{ result['application_id'] }}
-      </span>
-    </a>
-
-    <br><br>
+    <p class="h1">
 
     Year:
 
     {{ 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>
+    </p>
 
     {% if result['title'] is defined %}
-      Title:
+    <p class="mb-2 mt-5">
+      <span class="emphasis">Title:</span>
       <span class="result-entry">
         {{ result['title'] }}
       </span>
-      <br><br>
+    </p>
     {% endif %}
 
     {% if result['abstract'] is defined %}
-      Abstract:
+    <p class="mb-2">
+      <span class="emphasis">Abstract:</span>
       <span class="result-entry">
         {{ result['abstract'] }}
       </span>
-      <br><br>
+    </p>
     {% endif %}
 
-      <hr>
+    <div class="mt-2 mb-5 search-links">
+      <p>
+        <span class="emphasis">European Patent Office PDF:</span>
+        <a href="{{ url_for('search.id_search', id=result['id'], core='all') }}">
+          <span class="result-entry">
+            {{ result['application_id'] }}
+          </span>
+        </a>
+      </p>
+    </div>
 
   {% endfor %}