adding a 'searching' effect, navigation menu at the bottom and working with a slightly wider wrapper element

start.py

@@ -8,7 +8,7 @@ import tfidf
 import readings
 import printer
 from manifestos import manifestos
-
+from time import sleep
 
 # Create the application.
 APP = flask.Flask(__name__)
@@ -55,8 +55,7 @@ def index_():
 	else:
 		index = readings.load_index()
 		filenames = [manifesto for manifesto, _ in index.items()]
-		mappings_top = open('tfidf.top50.txt', 'r').readlines()
-		return flask.render_template('index.html', filenames=filenames, mappings=mappings_top)
+		return flask.render_template('index.html', filenames=filenames)
 
 @APP.route('/cross-readings', methods=['GET', 'POST'])
 def crossreadings():

static/css/stylesheet.css

@@ -42,6 +42,7 @@ body{
 	overflow-x: hidden;
 	z-index: -1;
 }
+
 body.black,
 body.black a{
 	background-color: rgb(5,5,5);
@@ -54,6 +55,10 @@ body.black #txt-list{
 	display: none;
 }
 
+body.searching{
+	opacity: 0.5;
+}
+
 h1, h2, h3{
 	font-size: 16px;
 	font-weight: normal;
@@ -77,6 +82,7 @@ sup, small{
 }
 p{
 	margin:0;
+	word-wrap: break-word;
 }
 code{
 	font-family: 'mono';
@@ -138,7 +144,7 @@ a.contrast{
 #wrapper{
 	position: absolute;
 	z-index: -1;
-	width: calc(100% - 400px);
+	width: calc(100% - 320px);
 	min-width: 600px;
 	margin:0 0 20px 0;
 	font-family: mono, sans-serif;
@@ -165,16 +171,36 @@ a.contrast{
 		color: white;
 	}
 
+/* NAVIGATION BAR (black at the bottom) */
 #nav{
-	position: absolute;
-	top:0;
-	right:0;
+	position: fixed;
+	bottom: 0;
+	right: 0;
+	font-size: 13px;
+	background-color: black;
+	width: calc(100% - 132px);
+	padding: 10px 66px 35px;
+	text-align: right;
+	z-index: 10;
+}
+#nav a{
+	color: white;
 }
 #nav .page-button{
 	display: inline-block;
 	padding-right: 5px;
 }
+#wrapper, 
+#txt-list{
+	padding-bottom: 70px; /* To appear above the black nav bar */
+}
+body.black #nav{
+	z-index: -1;
+}
+
+
 
+/* HEADER TITLE + SEARCH TOOLS */
 #logo a, 
 #search {
 	position: relative;
@@ -266,6 +292,7 @@ strong, strong.query, strong.word, .result{
 	margin-bottom: 0.5em;
 }
 
+/* Colophon & Cross-Reader pages (black pages) */
 .cross{
 	clear: both;
 }

templates/base.html

@@ -20,18 +20,18 @@
 			</li>
 		{% endfor %}
 	<ul>
-	{% block txtlist %}
+</div>
+<div id="nav">
+	{% block nav %}
+	<div class="page-button">
+		<a href="/cross-readings">cross-readings</a>
+	</div>
+	<div class="page-button">
+		<a href="/colophon">colophon</a>
+	</div>
 	{% endblock %}
 </div>
 <div id="wrapper">
-	<div id="nav">
-		<div class="page-button">
-			<a href="/cross-readings">cross-readings</a>
-		</div>
-		<div class="page-button">
-			<a href="/colophon">colophon</a>
-		</div>
-	</div>
 	<div id="logo">
 		<a href="/">cyber/technofeminist <br>cross-readings</a>
 	</div>
@@ -44,6 +44,7 @@
 		<script>
 			(function () {
 				var searching = false,
+					body = document.querySelector('body'),
 					button = document.querySelector('#search #submit'),
 					submitting = document.querySelector('#submitform').getAttribute('isSubmitting');
 
@@ -51,6 +52,7 @@
 					if (!searching) {
 						searching = true;
 						button.classList.add('searching');
+						body.classList.add('searching');
 					}
 					else {
 						e.preventDefault();
@@ -61,7 +63,7 @@
 		</script>
 	</div>
 	{% endblock %}
-	{% block nav %}
+	{% block printbutton %}
 	{% endblock %}
 	<div id="content">
 		{% block content %}
@@ -96,5 +98,24 @@
 	for (var i = 0; i < links.length; i++) {
 	     links[i].target = "_self";
 	}
+
+	(function () {
+		var searching = false,
+			body = document.querySelector('body'),
+			buttons = document.querySelectorAll('strong.word, strong.query')
+
+		for (var i = 0; i < buttons.length; i++) {
+			buttons[i].addEventListener('click', function (e) {
+				if (!searching) {
+					searching = true;
+					body.classList.add('searching');
+				}
+				else {
+					e.preventDefault();
+					alert('Already searching ...');
+				}
+			})
+		}
+	})();
 </script>
 </html>

templates/colophon.html

@@ -5,6 +5,18 @@
 {% block search %}
 {% endblock %}
 
+{% block nav %}
+	<div class="page-button">
+		<a href="/">home</a>
+	</div>
+	<div class="page-button">
+		<a href="/cross-readings">cross-readings</a>
+	</div>
+	<div class="page-button">
+		colophon
+	</div>
+{% endblock %}
+
 {% block content %}
 <div id="colophon">
 	<br>

templates/cross-readings.html

@@ -5,6 +5,18 @@
 {% block search %}
 {% endblock %}
 
+{% block nav %}
+	<div class="page-button">
+		<a href="/">home</a>
+	</div>
+	<div class="page-button">
+		cross-readings
+	</div>
+	<div class="page-button">
+		<a href="/colophon">colophon</a>
+	</div>
+{% endblock %}
+
 {% block content %}
 <div id="howto">
 	<br>

templates/list.html

@@ -5,7 +5,7 @@
 <div id="list">
 	<h1>{{ list_type }} * {{ filename | prettyfilename }}</h1>
 	{% for value, word in list | sort(reverse=True) %}
-		<div><strong><a href="/?q={{ word}}">{{ word }}</a></strong> <sup>({{ value }})</sup></div>
+		<div><strong class="query"><a href="/?q={{ word}}">{{ word }}</a></strong> <sup>({{ value }})</sup></div>
 	{% endfor %}
 </div>
 {% endblock %}

templates/results.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block title %}- {{ query }}{% endblock %}
 
-{% block nav %}
+{% block printbutton %}
 <div id="print" class="{{ connection }}">
 	<a href="?q={{ query }}&print=now"><button></button></a>
 </div>
@@ -96,6 +96,8 @@
 			<br>
 			<br>
 		</div>
+		{% else %}
+		<div>None</div>
 		{% endif%}
 	</div>
 	{% endblock %}