Browse Source

WIP: integrating design for random images page

solr_update
Simon Bowie 2 years ago
parent
commit
e00f2d31d2
5 changed files with 34 additions and 6 deletions
  1. +2
    -1
      web/app/static/js/main.js
  2. +1
    -1
      web/app/static/styles/custom.css
  3. +2
    -2
      web/app/templates/base.html
  4. +23
    -1
      web/app/templates/images.html
  5. +6
    -1
      web/app/templates/index.html

+ 2
- 1
web/app/static/js/main.js View File

@@ -28,7 +28,7 @@ function highlightSearchTerms(search){
$("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>');
return html.replace(re, '<span class="search_term">$1</span>');
});
}
}
@@ -41,6 +41,7 @@ function removeRandomTitle() {
RandomSpan.style.display = "inline-block";
}

// code adapted from w3collective
function readingTime(text) {
const wpm = 200;
const words = text.trim().split(/\s+/).length;

+ 1
- 1
web/app/static/styles/custom.css View File

@@ -273,7 +273,7 @@ p.about-text {

/* PAGE —> RANDOM IMAGES */

body#random-img-page{
#random-img-page{
background-color: var(--color-dark) !important;
}


+ 2
- 2
web/app/templates/base.html View File

@@ -25,14 +25,14 @@
<link href="{{ url_for('static',filename='styles/custom.css') }}" rel="stylesheet">
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="{{ url_for('static',filename='js/main.js') }}"></script>
<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>
<script src="{{ url_for('static',filename='js/main.js') }}"></script>
</head>

<body class="d-flex flex-column min-vh-100" id="main">

<main class="flex-shrink-0">
<div class="container-fluid p-5 my-5">
<div class="container-fluid p-5 mb-5">

{% block content %}
{% endblock %}

+ 23
- 1
web/app/templates/images.html View File

@@ -2,10 +2,32 @@

{% block content %}

<div id="random-img-page">

<div class="action">
<button onClick="refresh(this)" type="button" value="Refresh" title="new iteration">↻</button>
<button onclick="" title="add one">+</button>
<button onclick="" title="remove">-</button>
</div>

<a href="{{ url_for('main.index') }}" class="h1 text-left contrast" style="color: var(--color-lightyellow) !important;"> ⇽ </a>

<div class="row">
<div class="col m-5">
<p class="h1 text-center contrast">Layering of Images</p>
</div>
</div>

<div class="container-fluid compare">

{% for result in results %}

<img class="img-fluid" src="data:image/jpg;base64,{{ result['image'] }}" alt="Drawing accompanying patent for{{ result['title'] }}" />'
<img class="img-fluid" src="data:image/jpg;base64,{{ result['image'] }}" alt="Drawing accompanying patent for{{ result['title'] }}" />

{% endfor %}

</div>

</div>

{% endblock %}

+ 6
- 1
web/app/templates/index.html View File

@@ -30,6 +30,11 @@
<div class="index-row">
<div class="col text-center m-5">
<p class="h1">Performing Patents Otherwise</p>
<div class="info" style="display: none;">
<p class="code">
Archival conversations with 320,000 clothing inventions
</p>
</div>
</div>
</div>

@@ -45,7 +50,7 @@
<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): ?>
solrurl = 'http://' + solr_hostname + ':' + solr_port + '/solr/' + core + '/select?q.op=OR&q=content%3A' + urllib.parse.quote_plus(search) + '&wt=json&sort=' + sort; request = requests.get(solrurl); json = request.json()
</p>
</div>


Loading…
Cancel
Save