From 76a149a0825cf78afb836f91d3d112500d245f1a Mon Sep 17 00:00:00 2001
From: Mustafa Abualsaud <mabualsaud@outlook.com>
Date: Thu, 21 May 2020 16:17:27 -0400
Subject: [PATCH] Upgrade bootstrap and clean UI

+ minor changes to topic form
+ some changes to allow better mobile view
---
 HiCALWeb/hicalweb/CAL/templates/CAL/CAL.html  | 313 +++----
 .../archive/templates/archive/home.html       | 329 +++----
 HiCALWeb/hicalweb/progress/forms.py           |  46 +-
 .../progress/templates/progress/home.html     | 282 +++---
 .../progress/templates/progress/sessions.html | 124 +--
 .../search/templates/search/search.html       |  76 +-
 .../search/templates/search/search_list.html  | 815 +++++++++---------
 HiCALWeb/hicalweb/static/css/project.css      | 573 +++++++-----
 .../hicalweb/static/images/hicalsmall.png     | Bin 0 -> 8898 bytes
 HiCALWeb/hicalweb/static/js/pace.min.js       |   2 +
 HiCALWeb/hicalweb/static/js/popper.min.js     |   5 +
 .../hicalweb/templates/account/login.html     |  50 +-
 HiCALWeb/hicalweb/templates/base.html         | 447 +++++-----
 13 files changed, 1446 insertions(+), 1616 deletions(-)
 mode change 100644 => 100755 HiCALWeb/hicalweb/progress/forms.py
 mode change 100644 => 100755 HiCALWeb/hicalweb/progress/templates/progress/home.html
 create mode 100644 HiCALWeb/hicalweb/static/images/hicalsmall.png
 create mode 100644 HiCALWeb/hicalweb/static/js/pace.min.js
 create mode 100644 HiCALWeb/hicalweb/static/js/popper.min.js

diff --git a/HiCALWeb/hicalweb/CAL/templates/CAL/CAL.html b/HiCALWeb/hicalweb/CAL/templates/CAL/CAL.html
index 6bf446a..69562eb 100644
--- a/HiCALWeb/hicalweb/CAL/templates/CAL/CAL.html
+++ b/HiCALWeb/hicalweb/CAL/templates/CAL/CAL.html
@@ -1,207 +1,164 @@
 {% extends "base.html" %}
 {% load static %}
-
 {% block pagetitle %}CAL{% endblock %}
 
 
-{% block nav-header-title %}{% endblock %}
+{% block navbar-form %}
+<form id="searchContentForm" class="form-inline my-2 my-lg-0">
+	<div class="input-group">
+		<input id="search_content" type="search" class="form-control" placeholder="Highlight">
 
-{% block nav-left-mt %}mt-2{% endblock %}
-{% block nav-right%}
-    {% if request.user.is_authenticated %}
-    <li class="nav-item">
-        <a class="nav-link" data-toggle="modal" data-target="#reviewDocsModal" href="#"
-            id="reviewDocs">Latest judgments</a>
-    </li>
-    {% endif %}
+		<div class="input-group-append">
+			<button class="btn btn-sm btn-secondary" data-search="next" id="searchNext"
+		       type="button">&darr;</button>
+			<button class="btn btn-sm btn-secondary" data-search="prev" type="button">&uarr;</button>
+			<button class="btn btn-sm btn-secondary" data-search="clear" type="button">&times;</button>
+		</div>
+	</div>
+</form>
 {% endblock %}
 
 
-{% block help_modal_text %}
-    <p>This is the machine learning retrieval interface (CAL).
-    The model will select and present the most likely relevant set of documents.
-        The model also selects the most-likely relevant paragraph to reduce review time.</p>
-
-    <p>You can highlight keywords by using the highlighting feature.</p>
-
-    <p>To judge a document, you can click on any of the judging buttons or use the keyboard shortcuts.</p>
-    Once judged, the next most-likely relevant document will appear.
-    To change your judgment, click on latest judgments (or press 'u') to select a previously judged document.
-        You can rejudge the document once you select it.</p>
-
+{% block navbar-noncollapse %}
+<div class="d-lg-none nav navbar-nav mx-auto justify-content-center center-text pl-2 pr-2">
+  <form class="form-inline">
+    <div class="btn-group" role="group">
+        <a href="#" onclick="return send_judgment($('#cal-document').data('doc-id'), $('#document_title').text(), $('#document_snippet').html(), false, true, false, true, false);" class="btn btn-sm btn-outline-secondary d-flex align-items-center">Not Rel</a>
+        <a href="#" onclick="return send_judgment($('#cal-document').data('doc-id'), $('#document_title').text(), $('#document_snippet').html(), false, false, true, true, false);" class="btn btn-sm btn-outline-secondary d-flex align-items-center">Rel</a>
+        <a href="#" onclick="return send_judgment($('#cal-document').data('doc-id'), $('#document_title').text(), $('#document_snippet').html(), true, false, false, true, false);" class="btn btn-sm btn-outline-secondary d-flex align-items-center">Highly Rel</a>
+     </div>
+  </form>
+</div>
 {% endblock %}
 
+
 {% block main %}
-    <!-- Modal -->
-    <div class="modal" id="reviewDocsModal" tabindex="-1" role="dialog"
-         aria-labelledby="reviewDocsModalTitle" aria-hidden="true">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="reviewDocsModalTitle">Latest judged
-                        documents</h5>
-                    <button type="button" class="close" data-dismiss="modal"
-                            aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    <div id="reviewCAL">
-                        <div class="row">
-                            <div class="col-md-12 center-text">
-                                <i id="reviewSpinner" style="display: none;"
-                                class="fa fa-refresh fa-spin text-primary"></i>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
-                        Close
-                    </button>
-                </div>
+<!-- Modal -->
+<div class="modal" id="reviewDocsModal" tabindex="-1" role="dialog"
+     aria-labelledby="reviewDocsModalTitle" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="reviewDocsModalTitle">Latest judged
+          documents</h5>
+        <button type="button" class="close" data-dismiss="modal"
+                aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div id="reviewCAL">
+          <div class="row">
+            <div class="col-md-12 center-text">
+              <i id="reviewSpinner" style="display: none;"
+                 class="fa fa-refresh fa-spin text-primary"></i>
             </div>
+          </div>
         </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+          Close
+        </button>
+      </div>
     </div>
-
-    <div class="extra-bottom-margin">
-
-        <div class="row">
-            <div class="col-md-9">
-                <div class="card small-shadow">
-                    <div class="card-block document-cal" id="cal-document"
-                         data-doc-id="">
-                        <h1 id="document_title" style="font-family: 'Playfair Display', georgia, 'times new roman',times,serif;"><span class="text-danger">Loading...</span></h1>
-                        <div class="row">
-                            <div class="col-md-6">
-                                <small id="document_date"></small>
-                            </div>
-                            <div class="col-md-6 small align-right">
-                                <code id="docno_text">docno: </code><code id="document_id"></code>
-                            </div>
-                        </div>
-                        <div id="document_snippet">
-                            <p>Please wait...</p>
-                        </div>
-                        {% if request.user.current_task.show_full_document_content and request.user.current_task.strategy != 'doc'  %}
-                        <hr style="border-top: 3px solid rgba(0,0,0,.1);">
-                        <div class="row">
-                            <div class="col-md-12">
-                                <a id="show_full_doc_button" class="btn btn-sm btn-block btn-outline-primary"  href="#" onclick="return show_full_doc();">Show full document.</a>
-                            </div>
-                        </div>
-
-                        {% endif %}
-                        <div id="document_content"></div>
-                    </div>
-                </div>
+  </div>
+</div>
+
+<div class="extra-bottom-margin">
+
+  <div class="row">
+    <div class="col-md-9">
+      <div class="card border-0">
+        <div class="card-block document-cal" id="cal-document"
+             data-doc-id="">
+          <h3 id="document_title" style="font-family: 'Playfair Display', georgia, 'times new roman',times,serif;"><span class="text-danger">Loading...</span></h3>
+          <div class="row">
+            <div class=" col-md-11 text-truncate">
+              <code id="document_date" class="text-muted small"></code>
             </div>
+          </div>
+          <hr>
+          <div id="document_snippet">
+          </div>
+          {% if request.user.current_task.show_full_document_content and request.user.current_task.strategy != 'doc' %}
+          <hr style="border-top: 3px solid rgba(0,0,0,.1);">
+          <div class="row">
+            <div class="col-md-12">
+              <a id="show_full_doc_button" class="btn btn-sm btn-block btn-outline-primary" href="#" onclick="return show_full_doc();">Show full document.</a>
+            </div>
+          </div>
 
-            <div class="col-md-3">
-                <nav class="sidebar-nav-fixed bg-faded font-open-sans small-shadow">
-                    <ul class="nav nav-pills flex-column little-padding small-border small-radius">
-                        <div class="cal-search">
-
-                            <li>
-                                <span class="gray-text align-left">Highlight content:</span>
-                                <form id="searchContentForm" class="top-margin">
-                                    <div class="input-group">
-                                        <input id="search_content" type="search"
-                                               class="form-control" placeholder="Search">
-                                  <span class="input-group-btn">
-                                    <button class="btn btn-sm btn-secondary"
-                                            data-search="next" id="searchNext"
-                                            type="button">&darr;</button>
-                                  </span>
-                                  <span class="input-group-btn">
-                                    <button class="btn btn-sm btn-secondary"
-                                            data-search="prev"
-                                            type="button">&uarr;</button>
-                                  </span>
-                                  <span class="input-group-btn">
-                                    <button class="btn btn-sm btn-secondary"
-                                            data-search="clear" type="button">✖
-                                    </button>
-                                  </span>
-                                    </div>
-                                </form>
-                            </li>
-                        </div>
-
-                        <li class="nav-item extra-top-margin">
-                            <div class="gray-text align-left">Judge document:</div>
-
-                            <div class="btn-group top-margin" role="group">
-                                <a href="#" onclick="return send_judgment($('#cal-document').data('doc-id'), $('#document_title').text(), $('#document_snippet').html(), false, true, false, true, false);" class="btn btn-sm btn-danger">Not relevant</a>
-                                <a href="#" onclick="return send_judgment($('#cal-document').data('doc-id'), $('#document_title').text(), $('#document_snippet').html(), false, false, true, true, false);" class="btn btn-sm btn-warning">Relevant</a>
-                                <a href="#" onclick="return send_judgment($('#cal-document').data('doc-id'), $('#document_title').text(), $('#document_snippet').html(), true, false, false, true, false);" class="btn btn-sm btn-success">Highly relevant</a>
-                            </div>
-                        </li>
-
-                        <div class="extra-top-margin align-left">
-                            <span class="gray-text">Keyboard shortcuts:</span>
-                            <li class="nav-item top-margin">
-                                <div class="row">
-                                    <div class="col-md-3">
-                                        <span class="badge badge-danger">s</span>
-                                    </div>
-                                    <div class="col-md-9">
-                                        <small class="left-margin">Mark as non-relevant
-                                        </small>
-                                    </div>
-                                </div>
-                            </li>
-                            <li class="nav-item">
-                                <div class="row">
-                                    <div class="col-md-3">
-                                        <span class="badge badge-warning">r</span>
-                                    </div>
-                                    <div class="col-md-9">
-                                        <small class="left-margin">Mark as relevant
-                                        </small>
-                                    </div>
-                                </div>
-                            </li>
-                            <li class="nav-item">
-                                <div class="row">
-                                    <div class="col-md-3">
-                                        <span class="badge badge-success">h</span>
-                                    </div>
-                                    <div class="col-md-9">
-                                        <small class="left-margin">Mark as highly relevant
-                                        </small>
-                                    </div>
-                                </div>
-                            </li>
-                            <hr>
-                            <li class="nav-item ">
-                                <div class="row">
-                                    <div class="col-md-3">
-                                        <span class="badge badge-primary">u</span>
-                                    </div>
-                                    <div class="col-md-9">
-                                        <small class="left-margin">Show latest judged documents
-                                        </small>
-                                    </div>
-                                </div>
-                            </li>
-                        </div>
-
-                    </ul>
-
-                </nav>
+          {% endif %}
+          <div id="document_content"></div>
+        </div>
+      </div>
+    </div>
 
+    <div class="col-md-2">
+      <div class="position-fixed bg-faded shadow-sm font-open-sans card mr-2 d-none d-sm-block">
+        <div class="card-body">
+          <h5 class="card-title text-secondary">Judge document</h5>
+          <div class="small"><code id="docno_text"></code><code id="document_id"></code></div>
+
+          <div class="btn-group mt-3" role="group">
+            <a href="#" onclick="return send_judgment($('#cal-document').data('doc-id'), $('#document_title').text(), $('#document_snippet').html(), false, true, false, true, false);"
+               class="btn btn-sm btn-outline-secondary d-flex align-items-center">Not relevant</a>
+            <a href="#" onclick="return send_judgment($('#cal-document').data('doc-id'), $('#document_title').text(), $('#document_snippet').html(), false, false, true, true, false);"
+               class="btn btn-sm btn-outline-secondary d-flex align-items-center">Relevant</a>
+            <a href="#" onclick="return send_judgment($('#cal-document').data('doc-id'), $('#document_title').text(), $('#document_snippet').html(), true, false, false, true, false);"
+               class="btn btn-sm btn-outline-secondary d-flex align-items-center">Highly relevant</a>
+          </div>
+          <h5 class="card-title text-secondary mt-4">Keyboard shortcuts</h5>
+
+          <div class="row">
+            <div class="col-md-1">
+              <span class="badge badge-danger">s</span>
+            </div>
+            <div class="col-md-10">
+              <small class="left-margin">Mark as non-relevant
+              </small>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-1">
+              <span class="badge badge-warning">r</span>
+            </div>
+            <div class="col-md-10">
+              <small class="left-margin">Mark as relevant
+              </small>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-1">
+              <span class="badge badge-success">h</span>
+            </div>
+            <div class="col-md-10">
+              <small class="left-margin">Mark as highly relevant
+              </small>
+            </div>
+          </div>
+          <hr>
+          <div class="row">
+            <div class="col-md-1">
+              <span class="badge badge-primary">u</span>
+            </div>
+            <div class="col-md-10">
+              <small class="left-margin">Show latest judged documents
+              </small>
             </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
+</div>
 {% endblock %}
 
 
 
 {% block extra_scripts %}
     <script src="{% static 'js/Queue.src.js' %}"></script>
-{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>#}
-{#    <script src="{% static 'js/jquery.mark.min.js' %}"></script>#}
     <script src="{% static 'js/mousetrap.min.js' %}"></script>
     <script src="{% static 'js/CAL.js' %}"></script>
     <script src="{% static 'js/moment.min.js' %}"></script>
@@ -352,7 +309,7 @@ <h1 id="document_title" style="font-family: 'Playfair Display', georgia, 'times
         function updateDocument(id, title, date, snippet, content){
             console.log("Updating document view for document id: " + id);
             $('#cal-document').attr("data-doc-id", id).data("doc-id", id);
-            $("#document_id").html(id);
+            $("#document_id").text(id);
             $("#document_title").html(title);
             $("#document_title").removeClass();
             $("#document_date").html(date);
diff --git a/HiCALWeb/hicalweb/archive/templates/archive/home.html b/HiCALWeb/hicalweb/archive/templates/archive/home.html
index fce00c5..1262b52 100644
--- a/HiCALWeb/hicalweb/archive/templates/archive/home.html
+++ b/HiCALWeb/hicalweb/archive/templates/archive/home.html
@@ -1,224 +1,143 @@
 {% extends "base.html" %}
 {% load static %}
-
 {% block pagetitle %}Archive{% endblock %}
 
 
-
-{% block nav-header-title %}{% endblock %}
-
-{% block help_modal_text %}
-    <p>Here you can view and export the set of documents you have judged for the current topic.</p>
-{% endblock %}
-
-
 {% block main %}
-    <div class="row top-bottom-margin">
-        <div class="col-md-9">
-            <div class="card small-shadow bottom-margin">
-                <div class="card-block">
-                    <h2 class="text-primary"> Judged documents </h2>
-                    <div class="row extra-top-margin">
-                        <div class="col-md-12">
-                            <table class="table table-hover">
-                                <thead>
-                                <tr>
-                                    <th>DocID</th>
-                                    <th>Document Title</th>
-                                    <th>Judgment</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                {% for row in judgments %}
-                                    <tr data-toggle="modal" data-target=".doc-modal" style="cursor: pointer;" onclick="return load_doc('{{ row.doc_id }}');">
-                                        <th scope="row"><code><span
-                                                class="text-primary">{{ row.doc_id }}</span></code>
-                                        </th>
-                                        <td>{{ row.doc_title }} </td>
-                                        <td>
-                                            {% if row.highlyRelevant %}
-                                                <span class="text-success">Highly relevant</span>
-                                            {% elif row.relevant %}
-                                                <span class="text-warning">Relevant</span>
-                                            {% else %}
-                                                <span class="text-danger">Non-relevant</span>
-                                            {% endif %}
-                                        </td>
-                                    </tr>
-                                {% endfor %}
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-
-        <div class="col-md-3">
-            <div class="card small-shadow" style="border-color: #EFAC57">
-                <div class="card-block">
-                    <h2 class="text-warning">Operations </h2>
-                    <hr>
-                    <a id="tocsv" href="#" class="btn btn-outline-primary btn-sm bottom-margin">Export to
-                        csv
-                    </a>
-                </div>
-            </div>
+<div class="row top-bottom-margin">
+  <div class="col-md-9">
+    <div class="card small-shadow bottom-margin">
+      <div class="card-block">
+        <h2 class="text-secondary">Judged documents</h2>
+        <div class="row extra-top-margin">
+          <div class="col-md-12">
+            <table class="table table-borderless table-hover">
+              <thead>
+              <tr>
+                <th>Docno</th>
+                <th>Document Title</th>
+                <th>Judgment</th>
+              </tr>
+              </thead>
+              <tbody>
+              {% for row in judgments %}
+              <tr data-toggle="modal" data-target=".doc-modal" style="cursor: pointer;" onclick="return load_doc('{{ row.doc_id }}');">
+                <th scope="row"><code><span
+                  class="text-primary small">{{ row.doc_id }}</span></code>
+                </th>
+                <td>{{ row.doc_title|truncatechars:100 }}</td>
+                <td>
+                  {% if row.highlyRelevant %}
+                  <span class="text-success">Highly relevant</span>
+                  {% elif row.relevant %}
+                  <span class="text-warning">Relevant</span>
+                  {% else %}
+                  <span class="text-danger">Non-relevant</span>
+                  {% endif %}
+                </td>
+              </tr>
+              {% endfor %}
+              </tbody>
+            </table>
+          </div>
         </div>
+      </div>
+    </div>
 
+  </div>
 
-        <div class="modal fade doc-modal" id="doc-modal" tabindex="-1"
-             role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
-            <div class="modal-dialog modal-xlg">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h3 class="modal-title" id="modal-title">
-                            <span class="text-danger">Please wait...</span>
-                        </h3>
-                        <button type="button" class="close" data-dismiss="modal"
-                                aria-label="Close">
-                            <span aria-hidden="true">&times;</span>
-                        </button>
+  <div class="col-md-3">
+    <div class="card">
+      <div class="card-block">
+        <h2 class="text-secondary">Operations</h2>
+        <hr>
+        <a id="tocsv" href="#" class="btn btn-outline-secondary btn-sm mb-3">Export to csv</a>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal fade doc-modal" id="doc-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-xlg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="modal-title">
+            <span class="text-danger">Please wait...</span>
+          </h5>
+          <button type="button" class="close" data-dismiss="modal">
+            <span>&times;</span>
+          </button>
+        </div>
+        <div class="modal-body" style="overflow: auto; min-height: 450px; max-height: inherit;">
+          <div class="row">
+            <div class="col-md-8">
+              <div class="document-modal-content"
+                   id="document-modal-content"
+                   data-doc-id="">
+                <div class="document_content" id="document_content">
+                  <div class="row bottom-margin small">
+                    <div class="col-md-6 ">
+                      <small class="document_content_date"></small>
                     </div>
-                    <div class="modal-body"
-                         style="overflow: auto; min-height: 450px; max-height: inherit;">
-                        <div class="row">
-                            <div class="col-md-8">
-                                <div class="document-modal-content"
-                                     id="document-modal-content"
-                                     data-doc-id="">
-                                    <div class="document_content" id="document_content">
-                                        <div class="row bottom-margin small">
-                                            <div class="col-md-6 ">
-                                                <small class="document_content_date"></small>
-                                            </div>
-                                            <div class="col-md-6 align-right small">
-                                                <code class="document_content_id"></code>
-                                            </div>
-                                        </div>
-                                        <div class="document_content_text"
-                                             id="document_raw_content">
-                                            <p><span class="text-danger">Fetching document. Please wait...</span>
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="col-md-2" id="sideBar">
-                                <nav class="sidebar-nav-fixed bg-faded font-open-sans">
-                                    <ul class="nav nav-pills flex-column little-padding">
-                                        <div class="cal-search">
-                                            <li class=" top-margin">
-                                                <span class="gray-text align-left">Highlight content:</span>
-                                                <form id="searchContentForm_doc"
-                                                      class="top-margin">
-                                                    <div class="input-group">
-                                                        <input id="search_content_doc"
-                                                               type="search"
-                                                               class="form-control"
-                                                               placeholder="Search">
-                                                  <span class="input-group-btn">
-                                                    <button class="btn btn-sm btn-secondary"
-                                                            data-search="next"
-                                                            id="searchNextDoc"
-                                                            type="button">&darr;</button>
-                                                  </span>
-                                                  <span class="input-group-btn">
-                                                    <button class="btn btn-sm btn-secondary"
-                                                            data-search="prev"
-                                                            type="button">&uarr;</button>
-                                                  </span>
-                                                  <span class="input-group-btn">
-                                                    <button class="btn btn-sm btn-secondary"
-                                                            data-search="clear"
-                                                            type="button">✖
-                                                    </button>
-                                                  </span>
-                                                    </div>
-                                                </form>
-                                            </li>
-                                        </div>
-
-                                        {% comment judge %}
-                                        <li class="nav-item extra-top-margin">
-                                            <div class="gray-text align-left">Judge document:
-                                            </div>
-                                            <div class="btn-group top-margin" role="group"
-                                                 aria-label="Basic example">
-                                                <a href="#"
-                                                   onclick="return send_judgment_and_hide_modal('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', false, true, false, true, false);"
-                                                   class="btn btn-sm btn-danger">Not
-                                                    relevant</a>
-                                                <a href="#"
-                                                   onclick="return send_judgment_and_hide_modal('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', false, false, true, true, false);"
-                                                   class="btn btn-sm btn-warning">Relevant</a>
-                                                <a href="#"
-                                                   onclick="return send_judgment_and_hide_modal('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', true, false, false, true, false);"
-                                                   class="btn btn-sm btn-success">Highly
-                                                    relevant</a>
-                                            </div>
-                                        </li>
-                                        <div class="extra-top-margin align-left">
-                                            <div class="gray-text">Keyboard shortcuts:
-                                            </div>
-                                            <li class="nav-item top-margin">
-                                                <div class="row">
-                                                    <div class="col-md-3">
-                                                        <span class="badge badge-danger">s</span>
-                                                    </div>
-                                                    <div class="col-md-9">
-                                                        <small class="left-margin gray-text">
-                                                            Mark as non-relevant
-                                                        </small>
-                                                    </div>
-                                                </div>
-                                            </li>
-                                            <li class="nav-item">
-                                                <div class="row">
-                                                    <div class="col-md-3">
-                                                        <span class="badge badge-warning">r</span>
-                                                    </div>
-                                                    <div class="col-md-9">
-                                                        <small class="left-margin gray-text">
-                                                            Mark as relevant
-                                                        </small>
-                                                    </div>
-                                                </div>
-                                            </li>
-                                            <li class="nav-item">
-                                                <div class="row">
-                                                    <div class="col-md-3">
-                                                        <span class="badge badge-success">h</span>
-                                                    </div>
-                                                    <div class="col-md-9">
-                                                        <small class="left-margin gray-text">
-                                                            Mark as highly relevant
-                                                        </small>
-                                                    </div>
-                                                </div>
-                                            </li>
-                                        </div>
-                                        {% endcomment %}
+                    <div class="col-md-6 align-right small">
+                      <code class="document_content_id"></code>
+                    </div>
+                  </div>
+                  <div class="document_content_text"
+                       id="document_raw_content">
+                    <p><span class="text-danger">Fetching document. Please wait...</span>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
 
-                                    </ul>
+            <div class="col-md-2" id="sideBar">
+              <nav class="sidebar-nav-fixed bg-faded font-open-sans">
+                <ul class="nav nav-pills flex-column little-padding">
+                  <div class="cal-search">
+                    <li class="mt-1">
+                      <h5 class="gray-text align-left">Highlight content</h5>
+                      <form id="searchContentForm_doc"
+                            class="top-margin">
+                        <div class="input-group">
+                          <input id="search_content_doc"
+                                 type="search"
+                                 class="form-control"
+                                 placeholder="Search">
+
+                          <div class="input-group-append">
+                            <button class="btn btn-sm btn-secondary"
+                                    data-search="next"
+                                    id="searchNextDoc"
+                                    type="button">&darr;
+                            </button>
+                            <button class="btn btn-sm btn-secondary"
+                                    data-search="prev"
+                                    type="button">&uarr;
+                            </button>
+                            <button class="btn btn-sm btn-secondary"
+                                    data-search="clear"
+                                    type="button">&times;
+                            </button>
+                          </div>
+                        </div>
+                      </form>
+                    </li>
+                  </div>
+                </ul>
 
-                                </nav>
+              </nav>
 
-                            </div>
-                        </div>
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary"
-                                data-dismiss="modal">
-                            Close
-                        </button>
-                    </div>
-                </div>
             </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         </div>
+      </div>
     </div>
+  </div>
+</div>
 {% endblock %}
 
 
diff --git a/HiCALWeb/hicalweb/progress/forms.py b/HiCALWeb/hicalweb/progress/forms.py
old mode 100644
new mode 100755
index 2483c32..c4f5fbf
--- a/HiCALWeb/hicalweb/progress/forms.py
+++ b/HiCALWeb/hicalweb/progress/forms.py
@@ -1,8 +1,8 @@
+from crispy_forms.bootstrap import StrictButton
 from crispy_forms.helper import FormHelper
-from crispy_forms.layout import Submit
+from crispy_forms.layout import Submit, Layout, Column, Row
 from django import forms
 from django.db.models import Q
-
 from hicalweb.progress.models import Task
 from hicalweb.topic.models import Topic
 
@@ -18,13 +18,10 @@ class Meta:
         model = Task
         exclude = ["username", "setting", "timespent", "last_activity"]
         help_texts = {
-            'max_number_of_judgments': 'Max number of judgments (effort) for this task. '
-                                       'Enter 0 or negative number to '
-                                       'disable (i.e. no max).',
-            'strategy': 'Choose the strategy of retrieval.',
-            'show_full_document_content': 'For paragraph strategies, '
-                             'indicate whether you would like ability to view full '
-                             'document content.',
+            'max_number_of_judgments': 'Max number of judgments for this topic. '
+                                       'Enter <= 0 to disable (i.e. no max).',
+            'strategy': 'CAL strategy of retrieval.',
+            'show_full_document_content': 'Only for paragraph strategies.'
         }
 
     def __init__(self, *args, **kwargs):
@@ -44,11 +41,14 @@ class TopicForm(forms.ModelForm):
     """
     submit_name = 'submit-topic-form'
 
-    max_number_of_judgments = forms.IntegerField(required=True)
+    max_number_of_judgments = forms.IntegerField(required=True,
+                                                 label="Effort",
+                                                 help_text=TaskForm.Meta.help_texts.get('max_number_of_judgments'))
     strategy = forms.ChoiceField(choices=Task.STRATEGY_CHOICES,
                                  required=True,
                                  help_text=TaskForm.Meta.help_texts.get('strategy'))
-    show_full_document_content = forms.BooleanField(required=False,help_text=TaskForm.Meta.help_texts.get('show_full_document_content'))
+    show_full_document_content = forms.BooleanField(required=False,
+                                                    help_text=TaskForm.Meta.help_texts.get('show_full_document_content'))
 
     class Meta:
         model = Topic
@@ -56,8 +56,26 @@ class Meta:
 
     def __init__(self, *args, **kwargs):
         super(TopicForm, self).__init__(*args, **kwargs)
+        self.fields['description'].widget.attrs['rows'] = 2
         self.helper = FormHelper(self)
-        self.helper.layout.append(
-            Submit(self.submit_name, u'Create topic and start judging',
-                   css_class='btn btn-warning btn-sm')
+        self.helper.layout = Layout(
+            Row(
+                Column('title', css_class='form-group col-md-4 mb-0'),
+                Column('seed_query', css_class='form-group col-md-8 mb-0'),
+                css_class='form-row'
+            ),
+            'description',
+            Row(
+                Column('max_number_of_judgments', css_class='form-group col-md-6 mb-0'),
+                Column('strategy', css_class='form-group col-md-6 mb-0'),
+                css_class='form-row'
+            ),
+            'show_full_document_content',
+            StrictButton(u'Create topic and start judging',
+                   name=self.submit_name,
+                   type="submit",
+                   css_class='btn btn-sm btn-outline-secondary')
+            # Alternative to StrictButton
+            # Submit(self.submit_name, u'Create topic and start judging',
+            #       css_class='btn btn-sm')
         )
diff --git a/HiCALWeb/hicalweb/progress/templates/progress/home.html b/HiCALWeb/hicalweb/progress/templates/progress/home.html
old mode 100644
new mode 100755
index 3e1c58e..7af7b61
--- a/HiCALWeb/hicalweb/progress/templates/progress/home.html
+++ b/HiCALWeb/hicalweb/progress/templates/progress/home.html
@@ -4,172 +4,142 @@
 {% block pagetitle %}Home{% endblock %}
 
 {% block extra_head %}
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"
-            type="application/javascript"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js" type="application/javascript"></script>
 {% endblock %}
 
-
-{% block nav-header %}{% endblock %}
-{% block nav-right%}
-<li class="nav-item mt-0-4 mr-3">
-    {% if request.user.is_authenticated and request.user|has_group:"practice" %}
-    <a href="{% url 'progress:practice_complete' %}" class="btn btn-primary btn-sm">Exit practice</a>
-    {% elif request.user.is_authenticated %}
-    <a class="btn btn-outline-primary btn-sm small" href="{% url 'account_logout'  %}">Sign out</a>
-    {% else %}
-    <a class="btn btn-outline-primary btn-sm small" href="{% url 'account_login' %}">Sign In</a>
-    {% endif %}
-</li>
-{% endblock %}
-
-
-{% block help_modal_text %}
-    <p>Here you can initiate the topic of your search. You can select one of the pre-defined TREC topics or create your own topic.</p>
-{% endblock %}
-
-
-
 {% block main %}
-    <div class="row">
-        <div class="col-md-8">
-            <div class="card small-shadow bottom-margin ">
-                <div class="card-block">
-                    {% if user.current_task %}
-                    <h2 class="text-primary"> Your current topic </h2>
-                    <hr>
-                    <p><strong>Title</strong>: {{ user.current_task.topic.title }}</p>
-                    <p><strong>Seed query</strong>: {{ user.current_task.topic.seed_query }}</p>
-                    <p><strong>Description</strong>: {{ user.current_task.topic.description }}</p>
-                    {% else %}
-                    <h2 class="text-danger">Please create or select a topic</h2>
-                    <hr>
-                    <p>You currently don't have an active topic session. Please select or create a topic of search.</p>
-                    {% endif %}
-                </div>
-            </div>
+<div class="row">
 
-            {% if user.current_task %}
-            <div class="card small-shadow">
-                <div class="card-block" id="first">
-                    <h4 class="text-primary">How many documents did you judge?</h4>
-                    <div class="row extra-top-margin">
-                        <div class="col-md-12">
-                            <table class="table table-hover">
-                                <thead>
-                                <tr>
-                                    <th>Judgment Category</th>
-                                    <th>Learning model</th>
-                                    <th>Search model</th>
-                                    <th>All</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr>
-                                    <th scope="row"><span
-                                            class="text-success">Highly relevant</span></th>
-                                    <td>{{ total_highlyRelevant_CAL }}</td>
-                                    <td>{{ total_highlyRelevant_search }}</td>
-                                    <td>{{ total_highlyRelevant_CAL|add:total_highlyRelevant_search }}</td>
-                                </tr>
-                                <tr>
-                                    <th scope="row"><span
-                                            class="text-warning">Relevant</span></th>
-                                    <td>{{ total_relevant_CAL }}</td>
-                                    <td>{{ total_relevant_search }}</td>
-                                    <td>{{ total_relevant_CAL|add:total_relevant_search }}</td>
-                                </tr>
-                                <tr>
-                                    <th scope="row"><span
-                                            class="text-danger">Non relevant</span></th>
-                                    <td>{{ total_nonrelevant_CAL }}</td>
-                                    <td>{{ total_nonrelevant_search }}</td>
-                                    <td>{{ total_nonrelevant_CAL|add:total_nonrelevant_search }}</td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                    <hr>
-                    <div class="row">
-                        <div class="offset-md-2 col-md-8">
-                            <canvas id="piechart" width="200" height="200"
-                                    class="extra-top-margin"></canvas>
-                        </div>
-                    </div>
-                    <script>
-                        var ctx = document.getElementById("piechart");
-                        var data = {
-                            labels: [
-                                "Highly relevant",
-                                "Relevant",
-                                "Non relevant"
-                            ],
-                            datasets: [
-                                {
-                                    data: [
-                                        {{ total_highlyRelevant_CAL|add:total_highlyRelevant_search }},
-                                        {{ total_relevant_CAL|add:total_relevant_search }},
-                                        {{ total_nonrelevant_CAL|add:total_nonrelevant_search }}],
-                                    backgroundColor: [
-                                        "#5cb85c",
-                                        "#f0ad4e",
-                                        "#d9534f"
-                                    ],
-                                    hoverBackgroundColor: [
-                                        "#5cb85c",
-                                        "#f0ad4e",
-                                        "#d9534f"
-                                    ]
-                                }]
-                        };
-                        var myPieChart = new Chart(ctx, {
-                            type: 'pie',
-                            data: data,
-                            options: {
-                                legend: {
-                                    display: true,
-                                    position: 'right'
-                                }
-                            }
-                        });
-                    </script>
+  <div class="col-md-4">
+    <div class="card border-0">
+      <div class="card-block">
+        {% if user.current_task %}
+        <h2 class="text-secondary">Current topic</h2>
+        <hr>
+        <p><strong>Title</strong>: {{ user.current_task.topic.title }}</p>
+        <p><strong>Seed query</strong>: {{ user.current_task.topic.seed_query }}</p>
+        {% if user.current_task.topic.description %}<p><strong>Description</strong>: {{ user.current_task.topic.description }}</p> {% endif %}
+        {% else %}
+        <h2 class="text-danger">Please create a topic</h2>
+        <hr>
+        <p>You currently don't have an active topic session. Please create a topic first.</p>
+        {% endif %}
+      </div>
+    </div>
+  </div>
 
-                </div>
-            </div>
-            {% endif %}
-        </div>
+  <div class="col-md-4">
+      <div class="card border-0">
+        <div class="card-block">
 
-        <div class="col-md-4">
-            <div class="card small-shadow bottom-margin"  style="border-color: #6190e8">
-                <div class="card-block">
-                    <h2 class="text-primary">Old sessions</h2>
-                    <hr>
-                    <a href="{% url 'progress:sessions' %}" class="btn btn-sm btn-primary">Click to view old sessions</a>
-                </div>
+          {% if user.current_task %}
+          <h2 class="text-secondary">Judgments</h2>
+          <hr>
+          <div class="row">
+            <div class="col-md-12">
+              <table class="table table-borderless table-hover">
+                <thead>
+                <tr>
+                  <th>Type</th>
+                  <th>CAL</th>
+                  <th>Search</th>
+                  <th>All</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                  <th scope="row"><span
+                    class="text-success">Highly relevant</span></th>
+                  <td>{{ total_highlyRelevant_CAL }}</td>
+                  <td>{{ total_highlyRelevant_search }}</td>
+                  <td>{{ total_highlyRelevant_CAL|add:total_highlyRelevant_search }}</td>
+                </tr>
+                <tr>
+                  <th scope="row"><span
+                    class="text-warning">Relevant</span></th>
+                  <td>{{ total_relevant_CAL }}</td>
+                  <td>{{ total_relevant_search }}</td>
+                  <td>{{ total_relevant_CAL|add:total_relevant_search }}</td>
+                </tr>
+                <tr>
+                  <th scope="row"><span
+                    class="text-danger">Non relevant</span></th>
+                  <td>{{ total_nonrelevant_CAL }}</td>
+                  <td>{{ total_nonrelevant_search }}</td>
+                  <td>{{ total_nonrelevant_CAL|add:total_nonrelevant_search }}</td>
+                </tr>
+                </tbody>
+              </table>
             </div>
-
-            <div class="card small-shadow bottom-margin"  style="border-color: #EFAC57">
-                <div class="card-block">
-                    <h2 class="text-warning">TREC topics </h2>
-                    <hr>
-                    <form method="POST">
-                        {% csrf_token %}
-                        {% crispy form %}
-                    </form>
-                </div>
+          </div>
+          <div class="row">
+            <div class="col-md-8 col-sm-5 mx-auto center-text">
+              <canvas id="piechart" width="200" height="200"
+                      class="mt-2"></canvas>
             </div>
+            <script>
+              var ctx = document.getElementById("piechart");
+              var data = {
+                  labels: [
+                      "Highly relevant",
+                      "Relevant",
+                      "Non relevant"
+                  ],
+                  datasets: [
+                      {
+                          data: [
+                              {{ total_highlyRelevant_CAL|add:total_highlyRelevant_search }},
+                              {{ total_relevant_CAL|add:total_relevant_search }},
+                              {{ total_nonrelevant_CAL|add:total_nonrelevant_search }}],
+                          backgroundColor: [
+                              "#5cb85c",
+                              "#f0ad4e",
+                              "#d9534f"
+                          ],
+                          hoverBackgroundColor: [
+                              "#5cb85c",
+                              "#f0ad4e",
+                              "#d9534f"
+                          ]
+                      }]
+              };
+              var myPieChart = new Chart(ctx, {
+                  type: 'pie',
+                  data: data,
+                  options: {
+                      legend: {
+                          display: true,
+                          position: 'right'
+                      }
+                  }
+              });
+              </script>
+          </div>
+          {% endif %}
+      </div>
+    </div>
+  </div>
 
-            <div class="card small-shadow"  style="border-color: #EFAC57">
-                <div class="card-block">
-                    <h2 class="text-warning">Create new topic </h2>
-                    <hr>
-                    <form method="POST">
-                        {% csrf_token %}
-                        {% crispy form_topic %}
-                    </form>
-                </div>
+  <div class="col-md-4">
+    <div class="card border-0 mb-4 ">
+      <div class="card-block">
+        <h2 class="text-secondary">Create new topic </h2>
+        <hr>
+        <div class=row>
+          <div class="col-md-12">
+            <div class="card">
+              <div class="card-body">
+                <form method="POST">
+                  {% csrf_token %}
+                  {% crispy form_topic %}
+                </form>
+              </div>
             </div>
-
+          </div>
         </div>
+      </div>
     </div>
+  </div>
+
+</div>
 {% endblock %}
diff --git a/HiCALWeb/hicalweb/progress/templates/progress/sessions.html b/HiCALWeb/hicalweb/progress/templates/progress/sessions.html
index 26a25e8..6b3408b 100644
--- a/HiCALWeb/hicalweb/progress/templates/progress/sessions.html
+++ b/HiCALWeb/hicalweb/progress/templates/progress/sessions.html
@@ -4,89 +4,57 @@
 {% block pagetitle %}Sessions{% endblock %}
 
 {% block extra_head %}
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"
-            type="application/javascript"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js" type="application/javascript"></script>
 {% endblock %}
 
-
-{% block nav-header %}{% endblock %}
-{% block nav-right%}
-<li class="nav-item mt-0-4 mr-3">
-    {% if request.user.is_authenticated and request.user|has_group:"practice" %}
-    <a href="{% url 'progress:practice_complete' %}" class="btn btn-primary btn-sm">Exit practice</a>
-    {% elif request.user.is_authenticated %}
-    <a class="btn btn-outline-primary btn-sm small" href="{% url 'account_logout'  %}">Sign out</a>
-    {% else %}
-    <a class="btn btn-outline-primary btn-sm small" href="{% url 'account_login' %}">Sign In</a>
-    {% endif %}
-</li>
-{% endblock %}
-
-
-{% block help_modal_text %}
-    <p>Here you can select one of your previously started sessions.</p>
-{% endblock %}
-
-
-
 {% block main %}
-    <div class="row">
-        <div class="col-md-12">
-
-                    <h1 class="text-primary"> Your sessions </h1>
-
-                    {% if not tasks %}
-                    <h2 class="text-danger">Please create or select a topic</h2>
-                    <p>There are currently no topic sessions..</p>
-                    {% endif %}
-
-                    {% for task in tasks %}
-                        {% if user.current_task == task.task_obj %}
-                        <div class="card bottom-margin small-shadow"  style="border-color: #13ce66">
-                        {% else %}
-                        <div class="card bottom-margin">
-                        {% endif %}
-                            <div class="card-block">
-                                <div class="row align-items-center">
-                                    <div class="col-md-3 center-text">
-                                        <h1 class="text-danger mb-3">Topic: {{ task.task_obj.topic.number }}</h1>
-                                        <p class="m-0"><strong>Strategy:</strong> {{ task.task_obj.get_strategy_display }}</p>
-                                        <p class="m-0"><strong>Max Judgments (effort):</strong>  {{ task.task_obj.max_number_of_judgments }} </p>
-                                        <p class="m-0"><strong>Show Full Document:</strong>  {{ task.task_obj.show_full_document_content }} </p>
-                                        <hr>
-                                        {% if user.current_task == task.task_obj %}
-                                            <button type="button" class="btn btn-sm btn-secondary" disabled>Activated</button>
-                                        {% else %}
-                                            <form action="" method="POST">
-                                                {% csrf_token %}
-                                                <button type="submit" name="sessionid" value="{{ task.task_obj.uuid }}" class="btn btn-sm btn-success">Activate</button>
-                                            </form>
-                                        {% endif %}
-
-                                    </div>
-                                    <div class="col-md-7">
-                                        <p><strong>Title:</strong> {{ task.task_obj.topic.title }}</p>
-                                        <p><strong>Description:</strong> {{ task.task_obj.topic.description }}</p>
-                                        <p><strong>Created at:</strong> {{ task.created_at }}</p>
-                                    </div>
-                                    <div class="col-md-2 ">
-                                        <p class="mb-0"><strong>Total judged:</strong> {{ task.total_judged }}</p>
-                                        <p class="mb-0"><strong class="text-success">Highly Rel:</strong> {{ task.total_highlyRelevant }}</p>
-                                        <p class="mb-0"><strong class="text-warning">Rel:</strong> {{ task.total_relevant }}</p>
-                                        <p class="mb-0"><strong class="text-danger">NonRel:</strong> {{ task.total_nonrelevant }}</p>
-                                    </div>
-
-                                </div>
-                            </div>
-                        </div>
-
-
-
-                    {% endfor %}
+<div class="row">
+  <div class="col-md-12">
+    <h1 class="text-secondary">Your sessions</h1>
 
+    {% if not tasks %}
+    <h2 class="text-danger">Please create or select a topic</h2>
+    <p>There are currently no topic sessions..</p>
+    {% endif %}
 
+    {% for task in tasks %}
+    {% if user.current_task == task.task_obj %}
+    <div class="card bottom-margin" style="border-color: #13ce66">
+      {% else %}
+      <div class="card bottom-margin">
+        {% endif %}
+        <div class="card-block">
+          <div class="row align-items-center">
+            <div class="col-md-2">
+              {% if task.task_obj.topic.number %}<h5 class="text-danger mb-3">Topic#: {{ task.task_obj.topic.number }}</h5>{% endif %}
+              <p class="m-0"><strong>Strategy:</strong> {{ task.task_obj.get_strategy_display }}</p>
+              <p class="m-0"><strong>Max Judgments (effort):</strong> {{ task.task_obj.max_number_of_judgments }} </p>
+              <p class="m-0"><strong>Show Full Document:</strong> {{ task.task_obj.show_full_document_content }} </p>
+              {% if user.current_task == task.task_obj %}
+              <button type="button" class="btn btn-sm btn-outline-secondary mt-2" disabled>Activated</button>
+              {% else %}
+              <form action="" method="POST">
+                {% csrf_token %}
+                <button type="submit" name="sessionid" value="{{ task.task_obj.uuid }}" class="btn btn-sm btn-outline-success mt-2">Activate</button>
+              </form>
+              {% endif %}
+
+            </div>
+            <div class="col-md-3">
+              <p class="m-0"><strong>Title:</strong> {{ task.task_obj.topic.title }}</p>
+              {% if task.task_obj.topic.description %}<p class="m-0"><strong>Description:</strong> {{ task.task_obj.topic.description }}</p>{% endif %}
+              <p class="m-0"><strong>Created at:</strong> {{ task.created_at }}</p>
+            </div>
+            <div class="col-md-2 ">
+              <p class="mb-0"><strong>Total judged:</strong> {{ task.total_judged }}</p>
+              <p class="mb-0"><strong class="text-success">Highly Rel:</strong> {{ task.total_highlyRelevant }}</p>
+              <p class="mb-0"><strong class="text-warning">Rel:</strong> {{ task.total_relevant }}</p>
+              <p class="mb-0"><strong class="text-danger">NonRel:</strong> {{ task.total_nonrelevant }}</p>
+            </div>
+          </div>
         </div>
-
-
+      </div>
+      {% endfor %}
     </div>
+  </div>
 {% endblock %}
diff --git a/HiCALWeb/hicalweb/search/templates/search/search.html b/HiCALWeb/hicalweb/search/templates/search/search.html
index f06b9ea..9a10962 100644
--- a/HiCALWeb/hicalweb/search/templates/search/search.html
+++ b/HiCALWeb/hicalweb/search/templates/search/search.html
@@ -3,67 +3,32 @@
 
 {% block pagetitle %}Search{% endblock %}
 
-{% block nav-header %}{% endblock %}
-
-
-{% block help_modal_text %}
-    <p>This is the Interactive Search and Judging (ISJ) interface.
-    You can search for documents by submitting your query in the search box.
-        You can also select the number of documents to return.</p>
-
-    <p>Documents can be clicked to view their full content.</p>
-
-    <p>To judge a document, you can click on any of the judging buttons or use the keyboard shortcuts.</p>
-
+{% block navbar-center %}
+<form id="search_form" name="search_input" class="input-group mx-auto w-75">
+  <input autocomplete="off" class="form-control py-2 rounded-pill mr-1 pr-5" type="search" placeholder="Search" id="search_input" name="search_input">
+  <span class="input-group-append">
+     <button class="btn rounded-pill border-0 ml-n5" type="submit"
+             ic-target="#search_result" ic-include="#search_input" ic-post-to="{% url 'search:get_docs' %}"
+     >
+	<i class="fa fa-search text-secondary"></i>
+     </button>
+    </span>
+</form>
 {% endblock %}
 
-
 {% block main %}
-    <div class="row flex-items-lg-middle">
-        <div class="col-lg-2 mt-1 text-primary font-montserrat">
-            <h3>Search</h3>
-        </div>
-        <div class="col-lg-10">
-          <form class="input-group" id="search_form">
-              <input type="text" class="form-control moustrap" placeholder="Search" id="search_input"
-                   name="search_input">
-              <span class="input-group-btn pr-4">
-                <button class="btn btn-outline-primary" type="submit"
-                        ic-indicator="#searchSpinner" ic-target="#search_result"
-                        ic-include="#search_input" ic-post-to="{% url 'search:get_docs' %}"
-                        tabindex="-1" id="search_button">Search
-                </button>
-              </span>
-              <h3 class="ml-1 center-text pr-2" style="min-width: 35px"><i id="searchSpinner" style="display: none;"
-                   class="fas fa-sync fa-spin text-primary"></i></h3>
-              <span class="input-btn left-margin mt-1">
-                #docs:
-                <select class="select btn btn-lg btn-outline-primary" id="id_numdisplay" name="numdisplay">
-                    <option value="10" selected="selected">10</option>
-                    <option value="20">20</option>
-                    <option value="50">50</option>
-                    <option value="100">100</option>
-                </select>
-              </span>
-          </form>
-        </div>
-    </div>
-
-    <div class="extra-top-margin">
-    <div class="double-extra-padding-left-right">
-
-    </div>
-        <div id="search_result">
-        </div>
-
-    </div>
+<div class="row flex-items-lg-middle">
+</div>
 
+<div class="col-md-7 pt-2 mx-auto">
+  <div id="search_result">
+  </div>
+</div>
 {% endblock %}
 
 {% block extra_scripts %}
     <script src="http://cdn.intercoolerjs.org/intercooler-1.1.1.min.js"></script>
     <script src="{% static 'js/mousetrap.min.js' %}"></script>
-    <script src="{% static 'js/bootstrap.min.js' %}"></script>
     <script src="{% static 'js/moment.min.js' %}"></script>
     <script src="{% static 'js/idle.js' %}"></script>
     <script src="{% static 'js/timer.js' %}"></script>
@@ -297,14 +262,15 @@ <h3 class="ml-1 center-text pr-2" style="min-width: 35px"><i id="searchSpinner"
             return false;
         }
 
+        var find_borders_css = function (index, className){return (className.match (/(^|\s)border-\S+/g) || []).join(' ');};
         function update_doc_status(doc_id, highlyRelevant, non, relevant){
             console.log("Updating document " + doc_id + " status");
             if(highlyRelevant){
-                $("#doc_"+doc_id+"_status").html("<div class='bg-success' style='height: 100%; padding: 2px;' ><i class='fa' aria-hidden='true'></i></div>").hide().fadeIn();
+                $("#doc_"+doc_id+"_card").removeClass(find_borders_css).addClass("border-left border-3 border-success");
             }else if(non){
-                $("#doc_"+doc_id+"_status").html("<div class='bg-danger' style='height: 100%; padding: 2px;' ><i class='fa' aria-hidden='true'></i></div>").hide().fadeIn();
+                $("#doc_"+doc_id+"_card").removeClass(find_borders_css).addClass("border-left border-3 border-danger");
             }else if(relevant){
-                $("#doc_"+doc_id+"_status").html("<div class='bg-warning' style='height: 100%; padding: 2px;' ><i class='fa' aria-hidden='true'></i></div>").hide().fadeIn();
+                $("#doc_"+doc_id+"_card").removeClass(find_borders_css).addClass("border-left border-3 border-warning");
             }
             document.getElementById("isJudged_"+doc_id).style.display = "inherit";
         }
diff --git a/HiCALWeb/hicalweb/search/templates/search/search_list.html b/HiCALWeb/hicalweb/search/templates/search/search_list.html
index 313c6ae..deeea5a 100644
--- a/HiCALWeb/hicalweb/search/templates/search/search_list.html
+++ b/HiCALWeb/hicalweb/search/templates/search/search_list.html
@@ -5,457 +5,446 @@
     </div>
 </div>
 {% endif %}
+
 {% if not  documents.items %}
 <div class="med card-section">
-    <p style="padding-top:.33em">
-        Your search - <em>{{ query }}</em> - did not match any documents.  </p>
-        <p style="margin-top:1em">Suggestions:</p>
-        <ul style="margin-left:1.3em;margin-bottom:2em">
-            <li>Make sure that all words are spelled correctly.</li>
-            <li>Try different keywords.</li>
-            <li>Try more general keywords.</li>
-            <li>Try fewer keywords.</li></ul>
+  <p style="padding-top:.33em">
+    Your search - <em>{{ query }}</em> - did not match any documents. </p>
+  <p style="margin-top:1em">Suggestions:</p>
+  <ul style="margin-left:1.3em;margin-bottom:2em">
+    <li>Make sure that all words are spelled correctly.</li>
+    <li>Try different keywords.</li>
+    <li>Try more general keywords.</li>
+    <li>Try fewer keywords.</li>
+  </ul>
 </div>
 {% endif %}
+
 {% if total_time %}
-<small class="gray-text">{{ total_time }} seconds.</small>
+<small class="gray-text d-none">{{ total_time }} seconds.</small>
 {% endif %}
+
 {% for doc_id, document_values in documents.items %}
-    <div class="row flex-items-md-middle">
-        <div class="col-xs " id="doc_{{ document_values.docno }}_status" style="min-width: 4px;">
-            {% if document_values.isJudged %}
-                {% if document_values.relevance_judgment.highlyRelevant %}
-                    <div class="bg-success" style="height: 100%; padding: 2px;" >
-                        <i class="fa" aria-hidden="true"></i>
-                    </div>
-                {% elif document_values.relevance_judgment.nonrelevant %}
-                    <div class="bg-danger" style="height: 100%; padding: 2px;">
-                        <i class="fa" aria-hidden="true"></i>
-                    </div>
-                {% elif document_values.relevance_judgment.relevant %}
-                    <div class="bg-warning" style="height: 100%; padding: 2px;">
-                        <i class="fa" aria-hidden="true"></i>
-                    </div>
-                {% endif %}
-            {% endif %}
-        </div>
-        <div class="col-md-7"  data-toggle="modal" data-target=".doc-{{ document_values.docno }}-modal" style="cursor: pointer; cursor: hand;">
-            <div class="document" data-rank="{{ document_values.rank }}">
-                <div class="title" id="doc-{{ document_values.docno }}-title">{{ document_values.title|safe }}</div>
-                <div class="url">doc_id: {{ document_values.docno }}</div>
-                <div class="snippet" id="doc-{{ document_values.docno }}-snippet">
{{ document_values.snippet|safe }}
</div>
-            </div>
-        </div>
-        <div class="offset-md-1 col-md-3 mt-5 center-text">
-            <div class="btn-group top-margin" role="group">
-                <a href="#" data-dismiss="modal" onclick="return send_judgment('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', false, true, false, true, false, false, null, null);" class="btn btn-sm btn-danger">Not relevant</a>
-                <a href="#" data-dismiss="modal" onclick="return send_judgment('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', false, false, true, true, false, false, null, null);" class="btn btn-sm btn-warning">Relevant</a>
-                <a href="#" data-dismiss="modal" onclick="return send_judgment('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', true, false, false, true, false, false, null, null);" class="btn btn-sm btn-success">Highly Relevant</a>
-            </div>
-            <div class="left-padding gray-text top-margin small bold" id="isJudged_{{ document_values.docno }}" {% if not document_values.isJudged %}style="display: none"{% endif %}>Document has been judged.</div>
-        </div>
+<div class="row flex-items-md-middle">
+  <div class="col-md-6 mt-2
+        {% if document_values.relevance_judgment.highlyRelevant %}
+        border-3 border-left border-success
+        {% elif document_values.relevance_judgment.nonrelevant %}
+        border-3 border-left border-danger
+        {% elif document_values.relevance_judgment.relevant %}
+        border-3 border-left border-warning
+        {% endif %}
+        "
+       id="doc_{{document_values.docno}}_card" data-toggle="modal" data-target=".doc-{{ document_values.docno }}-modal" style="cursor: pointer; cursor: hand; transition: border-color 0.3s ease-in">
+    <div class="document" data-rank="{{ document_values.rank }}">
+      <div class="title" id="doc-{{ document_values.docno }}-title">{{ document_values.title|safe }}</div>
+      <div class="url">doc_id: {{ document_values.docno }}</div>
+      <div class="snippet" id="doc-{{ document_values.docno }}-snippet">
{{ document_values.snippet|safe }}
</div>
     </div>
+  </div>
+  <div class="offset-md-1 col-md-4 align-self-center center-text">
+    <div class="btn-group top-margin" role="group">
+      <a href="#" data-dismiss="modal" onclick="return send_judgment('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', false, true, false, true, false, false, null, null);" class="btn btn-sm btn-outline-secondary">Not relevant</a>
+      <a href="#" data-dismiss="modal" onclick="return send_judgment('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', false, false, true, true, false, false, null, null);" class="btn btn-sm btn-outline-secondary">Relevant</a>
+      <a href="#" data-dismiss="modal" onclick="return send_judgment('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', true, false, false, true, false, false, null, null);" class="btn btn-sm btn-outline-secondary">Highly Relevant</a>
+    </div>
+    <div class="left-padding gray-text top-margin small bold" id="isJudged_{{ document_values.docno }}" {% if not document_values.isJudged %}style="display: none" {% endif %}>This document has been judged.</div>
+  </div>
+</div>
 
-    <!-- DOCUMENT {{ document_values.docno }} MODAL  -->
-    <div class="modal fade doc-{{ document_values.docno }}-modal" id="doc-{{ document_values.docno }}-modal" tabindex="-1"
-         role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-xlg">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h3 class="modal-title" id="modal-title-{{ document_values.docno }}">
-                        <span class="text-danger">Please wait...</span>
-                    </h3>
-                    <button type="button" class="close" data-dismiss="modal"
-                            aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
+<!-- DOCUMENT {{ document_values.docno }} MODAL  -->
+<div class="modal fade doc-{{ document_values.docno }}-modal" id="doc-{{ document_values.docno }}-modal" tabindex="-1"
+     role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-xlg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="modal-title-{{ document_values.docno }}">
+          <span class="text-danger">Please wait...</span>
+        </h5>
+        <button type="button" class="close" data-dismiss="modal"
+                aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body" style="overflow: auto; min-height: 450px; max-height: inherit;">
+        <div class="row">
+          <div class="col-md-8">
+            <div class="document-{{ document_values.docno }}-modal-content" id="document-{{ document_values.docno }}-modal-content"
+                 data-doc-id="">
+              <div class="document_content" id="document_{{ document_values.docno }}_content">
+                <div class="row bottom-margin small text-truncate">
+                  <div class="col-md-6">
+                    <small class="document_content_date"></small>
+                  </div>
+                  <div class="col-md-6 align-right small">
+                    <code class="document_content_id"></code>
+                  </div>
                 </div>
-                <div class="modal-body" style="overflow: auto; min-height: 450px; max-height: inherit;">
-                    <div class="row">
-                        <div class="col-md-8">
-                            <div class="document-{{ document_values.docno }}-modal-content" id="document-{{ document_values.docno }}-modal-content"
-                                 data-doc-id="">
-                                <div class="document_content" id="document_{{ document_values.docno }}_content">
-                                    <div class="row bottom-margin small">
-                                        <div class="col-md-6 ">
-                                            <small class="document_content_date"></small>
-                                        </div>
-                                        <div class="col-md-6 align-right small">
-                                            <code class="document_content_id"></code>
-                                        </div>
-                                    </div>
-                                    <div class="document_content_text" id="document_{{ document_values.docno }}_raw_content">
-                                        <div class='container center-text'> <span class='text-danger'> <h4><i class='fas fa-sync fa-spin mr-4'></i></h4> <h5>Fetching document content. Please wait..</h5> </span> </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="col-md-2" id="{{ document_values.docno }}-sideBar">
-                            <nav class="sidebar-nav-fixed bg-faded font-open-sans small-shadow">
-                                <ul class="nav nav-pills flex-column little-padding small-border small-radius">
-                                    <div class="cal-search">
-                                        <li>
-                                            <span class="gray-text align-left">Highlight content:</span>
-                                            <form id="searchContentForm_doc_{{ document_values.docno }}" class="top-margin">
-                                                <div class="input-group">
-                                                    <input id="search_content_doc_{{ document_values.docno }}" type="search"
-                                                           class="form-control" placeholder="Search">
-                                              <span class="input-group-btn">
-                                                <button class="btn btn-sm btn-secondary"
-                                                        data-search="next" id="searchNextDoc{{ document_values.docno }}"
-                                                        type="button">&darr;</button>
-                                              </span>
-                                              <span class="input-group-btn">
-                                                <button class="btn btn-sm btn-secondary"
-                                                        data-search="prev"
-                                                        type="button">&uarr;</button>
-                                              </span>
-                                              <span class="input-group-btn">
-                                                <button class="btn btn-sm btn-secondary"
-                                                        data-search="clear" type="button">✖
-                                                </button>
-                                              </span>
-                                                </div>
-                                            </form>
-                                        </li>
-                                    </div>
-
-                                    <li class="nav-item extra-top-margin">
-                                        <div class="gray-text align-left">Judge document:</div>
-                                        <div class="btn-group top-margin" role="group"
-                                             aria-label="Basic example">
-                                            <a href="#" onclick="return send_judgment_and_hide_modal('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', false, true, false, true, false);" class="btn btn-sm btn-danger">Not relevant</a>
-                                            <a href="#" onclick="return send_judgment_and_hide_modal('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', false, false, true, true, false);" class="btn btn-sm btn-warning">Relevant</a>
-                                            <a href="#" onclick="return send_judgment_and_hide_modal('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', true, false, false, true, false);" class="btn btn-sm btn-success">Highly relevant</a>
-                                        </div>
-                                    </li>
-                                    <div class="extra-top-margin align-left">
-                                        <div class="gray-text">Keyboard shortcuts:</div>
-                                        <li class="nav-item top-margin">
-                                            <div class="row">
-                                                <div class="col-md-3">
-                                                    <span class="badge badge-danger">s</span>
-                                                </div>
-                                                <div class="col-md-9">
-                                                    <small class="left-margin gray-text">Mark as non-relevant
-                                                    </small>
-                                                </div>
-                                            </div>
-                                        </li>
-                                        <li class="nav-item">
-                                            <div class="row">
-                                                <div class="col-md-3">
-                                                    <span class="badge badge-warning">r</span>
-                                                </div>
-                                                <div class="col-md-9">
-                                                    <small class="left-margin gray-text">Mark as relevant
-                                                    </small>
-                                                </div>
-                                            </div>
-                                        </li>
-                                        <li class="nav-item">
-                                            <div class="row">
-                                                <div class="col-md-3">
-                                                    <span class="badge badge-success">h</span>
-                                                </div>
-                                                <div class="col-md-9">
-                                                    <small class="left-margin gray-text">Mark as highly relevant
-                                                    </small>
-                                                </div>
-                                            </div>
-                                        </li>
-                                    </div>
-
-                                </ul>
-
-                            </nav>
+                <div class="document_content_text" id="document_{{ document_values.docno }}_raw_content">
+                  <div class='container center-text'><span class='text-danger'> <h4><i class='fas fa-sync fa-spin mr-4'></i></h4> <h5>Fetching document content. Please wait..</h5> </span></div>
+                </div>
+              </div>
+            </div>
+          </div>
 
+          <div class="col-md-2" id="{{ document_values.docno }}-sideBar">
+            <nav class="sidebar-nav-fixed bg-faded font-open-sans small-shadow">
+              <ul class="nav nav-pills flex-column little-padding small-border small-radius">
+                <div class="cal-search">
+                  <li>
+                    <span class="gray-text align-left">Highlight content:</span>
+                    <form id="searchContentForm_doc_{{ document_values.docno }}" class="top-margin">
+                      <div class="input-group">
+                        <input id="search_content_doc_{{ document_values.docno }}" type="search"
+                               class="form-control" placeholder="Search">
+                        <div class="input-group-append">
+                          <button class="btn btn-sm btn-secondary"
+                                  data-search="next" id="searchNextDoc{{ document_values.docno }}"
+                                  type="button">&darr;
+                          </button>
+                          <button class="btn btn-sm btn-secondary"
+                                  data-search="prev"
+                                  type="button">&uarr;
+                          </button>
+                          <button class="btn btn-sm btn-secondary"
+                                  data-search="clear" type="button">&times;
+                          </button>
                         </div>
-                    </div>
+                      </div>
+                    </form>
+                  </li>
                 </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
-                        Close
-                    </button>
+
+                <li class="nav-item extra-top-margin d-none">
+                  <div class="gray-text align-left">Judge document:</div>
+                  <div class="btn-group top-margin" role="group"
+                       aria-label="Basic example">
+                    <a href="#" onclick="return send_judgment_and_hide_modal('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', false, true, false, true, false);" class="btn btn-sm btn-danger">Not relevant</a>
+                    <a href="#" onclick="return send_judgment_and_hide_modal('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', false, false, true, true, false);" class="btn btn-sm btn-warning">Relevant</a>
+                    <a href="#" onclick="return send_judgment_and_hide_modal('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', true, false, false, true, false);" class="btn btn-sm btn-success">Highly relevant</a>
+                  </div>
+                </li>
+                <div class="extra-top-margin align-left d-none">
+                  <div class="gray-text">Keyboard shortcuts:</div>
+                  <li class="nav-item top-margin">
+                    <div class="row">
+                      <div class="col-md-3">
+                        <span class="badge badge-danger">s</span>
+                      </div>
+                      <div class="col-md-9">
+                        <small class="left-margin gray-text">Mark as non-relevant
+                        </small>
+                      </div>
+                    </div>
+                  </li>
+                  <li class="nav-item">
+                    <div class="row">
+                      <div class="col-md-3">
+                        <span class="badge badge-warning">r</span>
+                      </div>
+                      <div class="col-md-9">
+                        <small class="left-margin gray-text">Mark as relevant
+                        </small>
+                      </div>
+                    </div>
+                  </li>
+                  <li class="nav-item">
+                    <div class="row">
+                      <div class="col-md-3">
+                        <span class="badge badge-success">h</span>
+                      </div>
+                      <div class="col-md-9">
+                        <small class="left-margin gray-text">Mark as highly relevant
+                        </small>
+                      </div>
+                    </div>
+                  </li>
                 </div>
-            </div>
+              </ul>
+            </nav>
+
+          </div>
         </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+          Close
+        </button>
+      </div>
     </div>
+  </div>
+</div>
 
     <!-- MODAL EVENT TRIGGERS -->
-    <script>
-
-        $('#doc-{{ document_values.docno }}-modal').on('hidden.bs.modal', function (e) {
-            isModalOpen = false;
-            currentOpenedModalDocId = null;
-            if(documents_timers['{{ document_values.docno }}'] == undefined){
-                console.error("Hiding modal with no timer. An error must have happened.");
-                return;
-            }
-            var timeActive = Date.now() - documents_timers['{{ document_values.docno }}'].startTime - documents_timers['{{ document_values.docno }}'].totalAwayTime;
-            var timeAway = documents_timers['{{ document_values.docno }}'].totalAwayTime;
-            console.log("Model has been hidden.");
-            console.log("Destroying document# {{ document_values.docno }} timer.");
-            documents_timers['{{ document_values.docno }}'].idle.stop();
-            delete documents_timers['{{ document_values.docno }}'];
+<script>
+  $('#doc-{{ document_values.docno }}-modal').on('hidden.bs.modal', function (e) {
+      isModalOpen = false;
+      currentOpenedModalDocId = null;
+      if(documents_timers['{{ document_values.docno }}'] == undefined){
+          console.error("Hiding modal with no timer. An error must have happened.");
+          return;
+      }
+      var timeActive = Date.now() - documents_timers['{{ document_values.docno }}'].startTime - documents_timers['{{ document_values.docno }}'].totalAwayTime;
+      var timeAway = documents_timers['{{ document_values.docno }}'].totalAwayTime;
+      console.log("Model has been hidden.");
+      console.log("Destroying document# {{ document_values.docno }} timer.");
+      documents_timers['{{ document_values.docno }}'].idle.stop();
+      delete documents_timers['{{ document_values.docno }}'];
 
 
-            if(is_from_judement == false){
-                console.log("No judgment has been made. Sending no judgment call to backend for document id: " + '{{ document_values.docno }}');
-                var now = + new Date();
-                var ctrlf_terms = $("#search_content_doc_{{ document_values.docno }}").val();
-                var timeVerbose = {
-                    "timestamp": now,
-                    "timeActive": timeActive,
-                    "timeAway": timeAway,
-                    "source": "searchModal",
-                    "judged": false,
-                    'ctrl_f_terms_input': ctrlf_terms,
-                    'found_ctrl_f_terms_in_title': marked_matches_in_document_title,
-                    'found_ctrl_f_terms_in_full_doc': marked_matches_in_document_content
-                };
-                var data = {
-                    'doc_id': '{{ document_values.docno }}',
-                    'doc_title': '{{ document_values.title|escapejs }}',
-                    'doc_search_snippet': '{{ document_values.snippet|escapejs }}',
-                    'client_time': now,
-                    'timeVerbose': timeVerbose,
-                    'csrfmiddlewaretoken': '{{ csrf_token }}',
-                    'page_title': document.title
-                };
+      if(is_from_judement == false){
+          console.log("No judgment has been made. Sending no judgment call to backend for document id: " + '{{ document_values.docno }}');
+          var now = + new Date();
+          var ctrlf_terms = $("#search_content_doc_{{ document_values.docno }}").val();
+          var timeVerbose = {
+              "timestamp": now,
+              "timeActive": timeActive,
+              "timeAway": timeAway,
+              "source": "searchModal",
+              "judged": false,
+              'ctrl_f_terms_input': ctrlf_terms,
+              'found_ctrl_f_terms_in_title': marked_matches_in_document_title,
+              'found_ctrl_f_terms_in_full_doc': marked_matches_in_document_content
+          };
+          var data = {
+              'doc_id': '{{ document_values.docno }}',
+              'doc_title': '{{ document_values.title|escapejs }}',
+              'doc_search_snippet': '{{ document_values.snippet|escapejs }}',
+              'client_time': now,
+              'timeVerbose': timeVerbose,
+              'csrfmiddlewaretoken': '{{ csrf_token }}',
+              'page_title': document.title
+          };
 
-                $.ajax({
-                    url: '{% url 'judgment:post_nojudgment' %}',
-                    method: 'POST',
-                    data: JSON.stringify(data),
-                    success: function (result) {
-                        console.log(result['message']);
-                    },
-                    error: function (result) {
-                        console.error(result);
-                    }
-                });
-            }else{
-                // reset flag
-                is_from_judement = false;
-            }
-        });
+          $.ajax({
+              url: '{% url 'judgment:post_nojudgment' %}',
+              method: 'POST',
+              data: JSON.stringify(data),
+              success: function (result) {
+                  console.log(result['message']);
+              },
+              error: function (result) {
+                  console.error(result);
+              }
+          });
+      }else{
+          // reset flag
+          is_from_judement = false;
+      }
+  });
 
-        $('#doc-{{ document_values.docno }}-modal').on('shown.bs.modal', function (e) {
+  $('#doc-{{ document_values.docno }}-modal').on('shown.bs.modal', function (e) {
 
-            var now = + new Date();
-                $.ajax({
-                    url: '{% url 'search:post_search_doc_open' %}',
-                    method: 'POST',
-                    data: JSON.stringify({
-                        'client_time': now,
-                        'query': $("#search_input").val(),
-                        'doc_id': '{{ document_values.docno }}',
-                        'doc_title': '{{ document_values.title|escapejs }}',
-                        'doc_search_snippet': '{{ document_values.snippet|escapejs }}',
-                        'csrfmiddlewaretoken': '{{ csrf_token }}',
-                        'page_title': document.title
-                    }),
-                    success: function (result) {
-                        console.log(result['message']);
-                    }
-                });
+      var now = + new Date();
+          $.ajax({
+              url: '{% url 'search:post_search_doc_open' %}',
+              method: 'POST',
+              data: JSON.stringify({
+                  'client_time': now,
+                  'query': $("#search_input").val(),
+                  'doc_id': '{{ document_values.docno }}',
+                  'doc_title': '{{ document_values.title|escapejs }}',
+                  'doc_search_snippet': '{{ document_values.snippet|escapejs }}',
+                  'csrfmiddlewaretoken': '{{ csrf_token }}',
+                  'page_title': document.title
+              }),
+              success: function (result) {
+                  console.log(result['message']);
+              }
+          });
 
-            var modal = $(this);
-            if(!('{{ document_values.docno }}' in loaded_docs)){
-                $.ajax({
-                    url: '{% url 'search:get_doc' %}?docid={{ document_values.docno }}',
-                    method: 'GET',
-                    success: function (result) {
-                        $("#modal-title-{{ document_values.docno }}").html(result[0]['title']);
-                        modal.find('.document_content_text').html(result[0]['content']);
-                        loaded_docs['{{ document_values.docno }}'] = true;
-                        modal.find('.document_content_date').html(result[0]['date']);
-                        modal.find('.document_content_id').html(result[0]['doc_id']);
-                        console.log("Initializing document timer for doc: {{ document_values.docno }}");
-                        var documentTimer = AwayTimer(false);
-                        documents_timers['{{ document_values.docno }}'] = documentTimer;
-                    },
-                    error: function (result){
-                        var error_msg = "<code>" + "[" + result['status'] + "] " + "Failed to get document. Error message: " + result["statusText"] + "." + "</code>";
-                        modal.find('.document_content').html(error_msg).addClass("text-danger");
-                        console.error(error_msg);
-                    },
-                    statusCode: {
-                        502: function (xhr) {
-                            var error_msg = "<code>" + "[502] Failed to get document. Error message: "+xhr.responseText; + "</code>"
-                            modal.find('.document_content').html(error_msg).addClass("text-danger");
-                            console.error(error_msg);
-                        }
-                    }
-                });
-            }else{
-                console.log("Re-initializing document timer for doc: {{ document_values.docno }}");
-                var documentTimer = AwayTimer(false);
-                documents_timers['{{ document_values.docno }}'] = documentTimer;
-            }
+      var modal = $(this);
+      if(!('{{ document_values.docno }}' in loaded_docs)){
+          $.ajax({
+              url: '{% url 'search:get_doc' %}?docid={{ document_values.docno }}',
+              method: 'GET',
+              success: function (result) {
+                  $("#modal-title-{{ document_values.docno }}").html(result[0]['title']);
+                  modal.find('.document_content_text').html(result[0]['content']);
+                  loaded_docs['{{ document_values.docno }}'] = true;
+                  modal.find('.document_content_date').html(result[0]['date']);
+                  modal.find('.document_content_id').html(result[0]['doc_id']);
+                  console.log("Initializing document timer for doc: {{ document_values.docno }}");
+                  var documentTimer = AwayTimer(false);
+                  documents_timers['{{ document_values.docno }}'] = documentTimer;
+              },
+              error: function (result){
+                  var error_msg = "<code>" + "[" + result['status'] + "] " + "Failed to get document. Error message: " + result["statusText"] + "." + "</code>";
+                  modal.find('.document_content').html(error_msg).addClass("text-danger");
+                  console.error(error_msg);
+              },
+              statusCode: {
+                  502: function (xhr) {
+                      var error_msg = "<code>" + "[502] Failed to get document. Error message: "+xhr.responseText; + "</code>"
+                      modal.find('.document_content').html(error_msg).addClass("text-danger");
+                      console.error(error_msg);
+                  }
+              }
+          });
+      }else{
+          console.log("Re-initializing document timer for doc: {{ document_values.docno }}");
+          var documentTimer = AwayTimer(false);
+          documents_timers['{{ document_values.docno }}'] = documentTimer;
+      }
 
-            // fake an updated on the ctrl+f search bar to update
-            $("#search_content_doc_{{ document_values.docno }}").trigger("updated");
-            updateMatchesLists();
-            console.log("Model has been shown");
-            isModalOpen = true;
-            currentOpenedModalDocId = '{{ document_values.docno }}';
-        });
-    </script>
+      // fake an updated on the ctrl+f search bar to update
+      $("#search_content_doc_{{ document_values.docno }}").trigger("updated");
+      updateMatchesLists();
+      console.log("Model has been shown");
+      isModalOpen = true;
+      currentOpenedModalDocId = '{{ document_values.docno }}';
+  });
+</script>
 
 
-    <!-- MODAL SEARCH CONTENT -->
-    <script>
+<!-- MODAL SEARCH CONTENT -->
+<script>
+  $('#searchContentForm_doc_{{ document_values.docno }}').submit(function (e) {
+      e.preventDefault();
+      $("#searchNextDoc{{ document_values.docno }}").click();
+      return false;
+  });
 
-        $('#searchContentForm_doc_{{ document_values.docno }}').submit(function (e) {
-            e.preventDefault();
-            $("#searchNextDoc{{ document_values.docno }}").click();
-            return false;
-        });
+  $(function() {
 
-        $(function() {
+    // the input field
+    var $input = $("#search_content_doc_{{ document_values.docno }}"),
+      // clear button
+      $clearBtn = $("button[data-search='clear']"),
+      // prev button
+      $prevBtn = $("button[data-search='prev']"),
+      // next button
+      $nextBtn = $("button[data-search='next']"),
+      // the context where to search
+      $content = $("#doc-{{ document_values.docno }}-modal"),
+      // list of selectors to ignore during the search
+      $exclude = [".document_content_date", ".document_content_id", ".sidebar-nav-fixed", ".btn", ".gray-text", ".badge"],
+      // jQuery object to save <mark> elements
+      $results = "",
+      // the class that will be appended to the current
+      // focused element
+      currentClass = "current",
+      // top offset for the jump (the search bar)
+      offsetTop = 50,
+      // the current index of the focused element
+      currentIndex = 0;
 
-          // the input field
-          var $input = $("#search_content_doc_{{ document_values.docno }}"),
-            // clear button
-            $clearBtn = $("button[data-search='clear']"),
-            // prev button
-            $prevBtn = $("button[data-search='prev']"),
-            // next button
-            $nextBtn = $("button[data-search='next']"),
-            // the context where to search
-            $content = $("#doc-{{ document_values.docno }}-modal"),
-            // list of selectors to ignore during the search
-            $exclude = [".document_content_date", ".document_content_id", ".sidebar-nav-fixed", ".btn", ".gray-text", ".badge"],
-            // jQuery object to save <mark> elements
-            $results = "",
-            // the class that will be appended to the current
-            // focused element
-            currentClass = "current",
-            // top offset for the jump (the search bar)
-            offsetTop = 50,
-            // the current index of the focused element
-            currentIndex = 0;
+      var search_form = document.getElementById("search_content_doc_{{ document_values.docno }}");
+      Mousetrap(search_form).handleKey = function handleKey(character, modifiers, event){
+          if(event.type == "keydown" && $(search_form).is(':focus')){
+              var now = + new Date();
+              $.ajax({
+                  url: '{% url 'progress:post_find_keystroke' %}',
+                  method: 'POST',
+                  data: JSON.stringify({
+                      'client_time': now,
+                      'doc_id': "{{ document_values.docno }}",
+                      'character': character,
+                      'page_title': document.title,
+                      'search_bar_value': $(search_form).val(),
+                      'isSearchbarFocused': $(search_form).is(':focus'),
+                      'csrfmiddlewaretoken': '{{ csrf_token }}'
+                  }),
+                  success: function (result) {
+                      console.log(result['message']);
+                  }
+              });
+              console.log("Character pressed: '"+character+"'", "at:", now);
+          }
+          document.body.click();
+      };
 
-            var search_form = document.getElementById("search_content_doc_{{ document_values.docno }}");
-            Mousetrap(search_form).handleKey = function handleKey(character, modifiers, event){
-                if(event.type == "keydown" && $(search_form).is(':focus')){
-                    var now = + new Date();
-                    $.ajax({
-                        url: '{% url 'progress:post_find_keystroke' %}',
-                        method: 'POST',
-                        data: JSON.stringify({
-                            'client_time': now,
-                            'doc_id': "{{ document_values.docno }}",
-                            'character': character,
-                            'page_title': document.title,
-                            'search_bar_value': $(search_form).val(),
-                            'isSearchbarFocused': $(search_form).is(':focus'),
-                            'csrfmiddlewaretoken': '{{ csrf_token }}'
-                        }),
-                        success: function (result) {
-                            console.log(result['message']);
-                        }
-                    });
-                    console.log("Character pressed: '"+character+"'", "at:", now);
-                }
-                document.body.click();
-            };
 
+    /**
+     * Jumps to the element matching the currentIndex
+     */
+    function jumpTo() {
+      if ($results.length) {
+        $input.addClass("greenBorder").css("border-color","#449D44");
+        var position,
+          $current = $results.eq(currentIndex);
+        $results.removeClass(currentClass);
+        if ($current.length) {
+          $current.addClass(currentClass);
+          position = $current[0].offsetTop - offsetTop;
+          $("#doc-{{ document_values.docno }}-modal").scrollTop(position);
+        }
+      }else{
+        if(!$input.val()){
+            $input.removeAttr( 'style' );
+        }else if ($input.is(':focus')){
+          $input.addClass("redBorder").css("border-color","#C9302C");
+        }
+        $("#doc-{{ document_values.docno }}-modal").scrollTop(0);
+      }
+    }
 
-          /**
-           * Jumps to the element matching the currentIndex
-           */
-          function jumpTo() {
-            if ($results.length) {
-              $input.addClass("greenBorder").css("border-color","#449D44");
-              var position,
-                $current = $results.eq(currentIndex);
-              $results.removeClass(currentClass);
-              if ($current.length) {
-                $current.addClass(currentClass);
-                position = $current[0].offsetTop - offsetTop;
-                $("#doc-{{ document_values.docno }}-modal").scrollTop(position);
-              }
-            }else{
-              if(!$input.val()){
-                  $input.removeAttr( 'style' );
-              }else if ($input.is(':focus')){
-                $input.addClass("redBorder").css("border-color","#C9302C");
-              }
-              $("#doc-{{ document_values.docno }}-modal").scrollTop(0);
+    /**
+     * Searches for the entered keyword in the
+     * specified context on input
+     */
+    $input.on("input", function() {
+      var searchVal = this.value;
+      $content.unmark({
+        done: function() {
+          $content.mark(searchVal, {
+            separateWordSearch: true,
+            exclude: $exclude,
+            done: function() {
+              updateMatchesLists();
+              $results = $content.find("mark");
+              currentIndex = 0;
+              jumpTo();
             }
-          }
-
-          /**
-           * Searches for the entered keyword in the
-           * specified context on input
-           */
-          $input.on("input", function() {
-            var searchVal = this.value;
-            $content.unmark({
-              done: function() {
-                $content.mark(searchVal, {
-                  separateWordSearch: true,
-                  exclude: $exclude,
-                  done: function() {
-                    updateMatchesLists();
-                    $results = $content.find("mark");
-                    currentIndex = 0;
-                    jumpTo();
-                  }
-                });
-              }
-            });
           });
+        }
+      });
+    });
 
-          $content.on( "updated", function() {
-              var searchVal = $input.val();
-               if(searchVal != undefined){
-                   $content.unmark({
-                      done: function () {
-                          $content.mark(searchVal, {
-                              separateWordSearch: true,
-                              exclude: $exclude,
-                              done: function () {
-                                  updateMatchesLists();
-                                  $results = $content.find("mark");
-                                  currentIndex = 0;
-                              }
-                          });
-                      }
-                  });
-               }
+    $content.on( "updated", function() {
+        var searchVal = $input.val();
+         if(searchVal != undefined){
+             $content.unmark({
+                done: function () {
+                    $content.mark(searchVal, {
+                        separateWordSearch: true,
+                        exclude: $exclude,
+                        done: function () {
+                            updateMatchesLists();
+                            $results = $content.find("mark");
+                            currentIndex = 0;
+                        }
+                    });
+                }
             });
+         }
+      });
 
-          /**
-           * Clears the search
-           */
-          $clearBtn.on("click", function() {
-            resetMatchesDict();
-            $content.unmark();
-            $input.val("").focus();
-          });
+    /**
+     * Clears the search
+     */
+    $clearBtn.on("click", function() {
+      resetMatchesDict();
+      $content.unmark();
+      $input.val("").focus();
+    });
 
-          /**
-           * Next and previous search jump to
-           */
-          $nextBtn.add($prevBtn).on("click", function() {
-            if ($results.length) {
-              currentIndex += $(this).is($prevBtn) ? -1 : 1;
-              if (currentIndex < 0) {
-                currentIndex = $results.length - 1;
-              }
-              if (currentIndex > $results.length - 1) {
-                currentIndex = 0;
-              }
-              jumpTo();
-            }
-          });
-        });
+    /**
+     * Next and previous search jump to
+     */
+    $nextBtn.add($prevBtn).on("click", function() {
+      if ($results.length) {
+        currentIndex += $(this).is($prevBtn) ? -1 : 1;
+        if (currentIndex < 0) {
+          currentIndex = $results.length - 1;
+        }
+        if (currentIndex > $results.length - 1) {
+          currentIndex = 0;
+        }
+        jumpTo();
+      }
+    });
+  });
 
-    </script>
-    <hr>
+</script>
 {% endfor %}
diff --git a/HiCALWeb/hicalweb/static/css/project.css b/HiCALWeb/hicalweb/static/css/project.css
index 964ef01..4e1f5e9 100644
--- a/HiCALWeb/hicalweb/static/css/project.css
+++ b/HiCALWeb/hicalweb/static/css/project.css
@@ -1,4 +1,3 @@
-
 /*
  * Base structure
  */
@@ -21,6 +20,10 @@ h1 {
   border-bottom: 1px solid #eee;
 }
 
+.card-block {
+  padding: 1rem !important;
+}
+
 .mt-0-4 {
   margin-top: .4rem !important;
 }
@@ -37,20 +40,17 @@ h1 {
  * Sidebar
  */
 
-
 .navbar.fixed-top {
   z-index: 100;
   min-height: 40px;
 }
 
-
-.nav-link:hover {
-  background-color: #e6e6e6;
-
+.border-3 {
+  border-width: 3px!important;
 }
 
 .sidebar .nav-link {
-    -webkit-transition: background-color .2s ease-out;
+  -webkit-transition: background-color .2s ease-out;
   -moz-transition: background-color .2s ease-out;
   -o-transition: background-color .2s ease-out;
   transition: background-color .2s ease-out;
@@ -62,9 +62,8 @@ h1 {
 
 }
 
-
 .nav-link {
-    padding: .5em 0em;
+  padding: .5em 0em;
 }
 
 .sidebar-brand {
@@ -72,15 +71,14 @@ h1 {
   color: #fff;
 }
 
-.sidebar-brand:hover{
+.sidebar-brand:hover {
   background-color: #d2d5d7;
 }
 
-a.sidebar-brand{
+a.sidebar-brand {
   color: #0275d8;
 }
 
-
 .sidebar {
   position: fixed;
   top: 0px;
@@ -120,7 +118,7 @@ a.sidebar-brand{
  * Dashboard
  */
 
- /* Placeholders */
+/* Placeholders */
 .placeholders {
   padding-bottom: 3rem;
 }
@@ -167,179 +165,172 @@ a.sidebar-brand{
   display: block !important;
 }
 
-
-
-.center-text{
+.center-text {
   text-align: center;
 }
 
-
-.display-inline{
-    display: inline;
+.display-inline {
+  display: inline;
 }
 
-.display-inline-flex{
-    display: inline-flex;
+.display-inline-flex {
+  display: inline-flex;
 }
 
-.display-table-caption{
-    display: table-caption;
+.display-table-caption {
+  display: table-caption;
 }
 
-.display-block{
-    display: block;
+.display-block {
+  display: block;
 }
 
-.page-link{
-    cursor: hand;
+.page-link {
+  cursor: hand;
 }
 
 .right-border {
-    border-right: 2px solid #ccc;
+  border-right: 2px solid #ccc;
 }
 
 .right-margin {
-    margin-right: 40px;
+  margin-right: 40px;
 }
 
 .left-border {
-    border-left: 1px solid #ccc;
+  border-left: 1px solid #ccc;
 }
 
 .no-decoration,
 .no-decoration a,
 .no-decoration a:hover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .small-shadow {
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
 }
 
 .no-border {
-    border: none;
+  border: none;
 }
 
 .small-border {
-  border: 1px solid rgba(0,0,0,.125);
+  border: 1px solid rgba(0, 0, 0, .125);
 }
 
 .small-radius {
   border-radius: 4px;
 }
 
-.no-padding{
+.no-padding {
   padding: 0;
 }
 
 .left-padding {
-    padding-left: 2.0em;
+  padding-left: 2.0em;
 }
 
 .right-padding {
-    padding-right : 2.0em;
-}
-
-.no-margin{
-    margin: 0;
+  padding-right: 2.0em;
 }
 
 .left-margin {
-    margin-left: 1.0em;
+  margin-left: 1.0em;
 }
 
 .right-margin {
-    margin-right: 1.0em;
+  margin-right: 1.0em;
 }
 
 .extra-left-margin {
-    margin-left: 2.0em;
+  margin-left: 2.0em;
 }
 
 .extra-right-margin {
-    margin-right: 2.0em;
+  margin-right: 2.0em;
 }
 
 .top-margin {
-    margin-top: 1.0rem;
+  margin-top: 1.0rem;
 }
 
 .extra-top-margin {
-    margin-top: 2.0rem;
+  margin-top: 2.0rem;
 }
 
 .double-extra-top-margin {
-    margin-top: 7.0rem;
+  margin-top: 7.0rem;
 }
 
 .bottom-margin {
-    margin-bottom: 1.0rem;
+  margin-bottom: 1.0rem;
 }
 
 .extra-bottom-margin {
-    margin-bottom: 2.0rem;
+  margin-bottom: 2.0rem;
 }
 
 .double-extra-bottom-margin {
-    margin-bottom: 7.0rem;
+  margin-bottom: 7.0rem;
 }
 
 .top-bottom-margin {
-    margin: 1.0rem 0;
+  margin: 1.0rem 0;
 }
 
 .extra-top-bottom-margin {
-    margin: 2.0rem 0;
+  margin: 2.0rem 0;
 }
 
 .double-extra-top-bottom-margin {
-    margin: 7.0rem 0;
+  margin: 7.0rem 0;
 }
 
 .triple-extra-top-bottom-margin {
-    margin: 10.0rem 0;
+  margin: 10.0rem 0;
 }
 
 .little-padding {
-    padding: 2.0rem;
+  padding: 2.0rem;
 }
 
 .extra-padding {
-    padding: 3.0rem;
+  padding: 3.0rem;
 }
 
 .extra-padding-left-right {
-    padding: 0 4.0rem;
+  padding: 0 4.0rem;
 }
 
 .double-extra-padding {
-    padding: 7.0rem;
+  padding: 7.0rem;
 }
 
 .double-extra-padding-left-right {
-    padding: 0 7.0rem;
+  padding: 0 7.0rem;
 }
 
 .double-extra-padding-both-side {
-    padding: 9.0rem 7rem;
+  padding: 9.0rem 7rem;
 }
 
 .center-text {
-    text-align: center;
+  text-align: center;
 }
 
 .align-left {
-    text-align: left;
+  text-align: left;
 }
 
 .align-right {
-    text-align: right;
+  text-align: right;
 }
 
 .vcenter {
-    display: inline-block;
-    vertical-align: middle;
-    float: none;
+  display: inline-block;
+  vertical-align: middle;
+  float: none;
 }
 
 .display-5 {
@@ -348,13 +339,13 @@ a.sidebar-brand{
 }
 
 .light-gray-text {
-    color: #cdcdcd;
+  color: #cdcdcd;
 }
 
 .light-gray-text a,
 .gray-text a {
-    color: inherit;
-    text-decoration: none;
+  color: inherit;
+  text-decoration: none;
 
 }
 
@@ -362,290 +353,286 @@ a.sidebar-brand{
 .light-gray-text a:hover,
 .gray-text a:focus,
 .gray-text a:hover {
-    color: #787878;
-    text-decoration: none;
+  color: #787878;
+  text-decoration: none;
 }
 
 .gray-text {
-    color: #888;
+  color: #888;
 }
 
 .gray-background {
-    background-color: #ccc;
+  background-color: #ccc;
 }
 
 .light-gray-background {
-    background-color: #fafafa;
+  background-color: #fafafa;
 }
 
 .almost-white-background {
-    background-color: #FBFBFB;
+  background-color: #FBFBFB;
 }
 
 .text-overflow {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .borderless td, .borderless th {
-    border: none;
+  border: none;
 }
 
 table.vertical-align > tbody > tr > td {
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
 .border-bottom {
-    border-bottom: 1px solid #eee;
+  border-bottom: 1px solid #eee;
 }
 
 .form-information h1,
 .form-information h2,
 .form-information h3,
 .form-information h4 {
-    color: #0275d8;
+  color: #0275d8;
 }
 
-.form-information p{
-    color: #888;
+.form-information p {
+  color: #888;
 }
 
 .right-corner-button {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 3px 5px 3px 8px;
-    border-radius: 0 3px 0 3px;
-    border-left: 1px solid #ccc;
-    border-bottom: 1px solid #ccc;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 3px 5px 3px 8px;
+  border-radius: 0 3px 0 3px;
+  border-left: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
 }
 
 .right-corner-button:hover {
-    background-color: #888888;
-    border: none;
-    color: white;
+  background-color: #888888;
+  border: none;
+  color: white;
 }
 
 .features-container .feature-icon {
-    text-align: center;
+  text-align: center;
 }
 
 .borderd-circle {
-    padding: 2px;
-    border: 1px solid rgba(2, 117, 216, .5);
+  padding: 2px;
+  border: 1px solid rgba(2, 117, 216, .5);
 }
 
 .btn-circle {
-    width: 85px;
-    height: 85px;
-    text-align: center;
-    padding: 15px 0;
-    font-size: 12px;
-    line-height: 1.428571429;
-    border-radius: 50%;
+  width: 85px;
+  height: 85px;
+  text-align: center;
+  padding: 15px 0;
+  font-size: 12px;
+  line-height: 1.428571429;
+  border-radius: 50%;
 }
 
 .btn-primary-bordered {
-    color: #0275d8;
-    background-color: #fff;
-    border: 5px solid #0275d8;
+  color: #0275d8;
+  background-color: #fff;
+  border: 5px solid #0275d8;
 }
 
 .btn-primary-bordered:hover {
-    color: #fff;
-    background-color: #0275d8;
+  color: #fff;
+  background-color: #0275d8;
 }
 
 .btn-primary-bordered.active {
-    color: #fff;
-    background-color: #0275d8;
+  color: #fff;
+  background-color: #0275d8;
 }
 
-
 .btn-primary-bordered-inverse {
-    color: #fff;
-    background-color: #0275d8;
-    border: 5px solid #fff;
+  color: #fff;
+  background-color: #0275d8;
+  border: 5px solid #fff;
 }
 
 .btn-primary-bordered-inverse:hover {
-    color: #0275d8;
-    background-color: #fff;
+  color: #0275d8;
+  background-color: #fff;
 }
 
 .btn-primary-bordered-inverse.active {
-    color: #0275d8;
-    background-color: #fff;
+  color: #0275d8;
+  background-color: #fff;
 }
 
-
 input.date-radio-button[type="radio"] {
-    display: none;
+  display: none;
 }
 
 input.date-radio-button[type="radio"]:checked {
-    color: #fff;
-    background-color: #0275d8;
+  color: #fff;
+  background-color: #0275d8;
 }
 
 .used-by-slider-items {
-    padding: 20px 0;
+  padding: 20px 0;
 }
 
 .btn-circle-strong {
-    display: block;
-    font-size: large;
+  display: block;
+  font-size: large;
 }
 
 .date-circle .day {
-    display: block;
-    margin: 10px 0;
+  display: block;
+  margin: 10px 0;
 }
 
 .normal-cursor {
-    cursor: wait;
+  cursor: wait;
 }
 
 .navButton {
-    font-size: 4em;
-    cursor: pointer;
+  font-size: 4em;
+  cursor: pointer;
 }
 
 .small-navButton {
-    font-size: 2.5em;
-    cursor: pointer;
+  font-size: 2.5em;
+  cursor: pointer;
 }
 
 .prevDateButton {
-    margin-top: -50px;
+  margin-top: -50px;
 }
 
 .nextDateButton {
-    margin-top: -50px;
+  margin-top: -50px;
 }
 
 .font-montserrat {
-    font-family: 'Montserrat', sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 .font-open-sans {
-    font-family: 'Open Sans', sans-serif;
+  font-family: 'Open Sans', sans-serif;
 
 }
 
-
-.font-sans{
-    font-family: sans-serif;
+.font-sans {
+  font-family: sans-serif;
 }
 
 .bold {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .thin {
-    font-weight: 200;
+  font-weight: 200;
 }
 
-.nav-bar-padding{
+.nav-bar-padding {
   padding: 0rem 1rem 0rem 4rem;
 }
 
-.nav-link{
-    transition-duration: 0.3s;
-    transition-property: color;
-    text-decoration: none;
+.nav-link {
+  transition-duration: 0.3s;
+  transition-property: color;
+  text-decoration: none;
 }
 
 .nav-justified {
-    width: 100%;
-    border-bottom: 0;
+  width: 100%;
+  border-bottom: 0;
 }
 
 .nav-justified .nav-item {
-    float: none;
+  float: none;
 }
 
 .nav-justified .nav-link {
-    text-align: center;
-    margin-bottom: 5px;
+  text-align: center;
+  margin-bottom: 5px;
 }
 
 .nav-justified > .dropdown .dropdown-menu {
-    top: auto;
-    left: auto;
+  top: auto;
+  left: auto;
 }
 
 @media (min-width: 544px) {
-    .nav-justified .nav-item {
-        display: table-cell;
-        width: 1%;
-    }
+  .nav-justified .nav-item {
+    display: table-cell;
+    width: 1%;
+  }
 
-    .nav-justified .nav-link {
-        margin-bottom: 0;
-    }
+  .nav-justified .nav-link {
+    margin-bottom: 0;
+  }
 }
 
 .nav-justified .nav-link {
-    margin-right: 0;
-    border-radius: 0.25rem;
+  margin-right: 0;
+  border-radius: 0.25rem;
 }
 
 .nav-justified .nav-link.active,
 .nav-justified .nav-link.active:hover,
 .nav-justified .nav-link.active:focus {
-    border: none;
+  border: none;
 }
 
 @media (min-width: 544px) {
-    .nav-justified .nav-link {
-        border-radius: 0.25rem;
-    }
+  .nav-justified .nav-link {
+    border-radius: 0.25rem;
+  }
 
-    .nav-justified .nav-link.active,
-    .nav-justified .nav-link.active:hover,
-    .nav-justified .nav-link.active:focus {
+  .nav-justified .nav-link.active,
+  .nav-justified .nav-link.active:hover,
+  .nav-justified .nav-link.active:focus {
 
-    }
+  }
 }
 
 .colorRadioLabel {
-    margin-bottom: 0px;
+  margin-bottom: 0px;
 }
 
 input[type=text],
 input[type=password],
 input[type=radio],
-input[type=checkbox]{
-    transition-duration: .3s;
+input[type=checkbox] {
+  transition-duration: .3s;
 }
 
-
 input[type=radio].with-font {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
 }
 
 input[type=radio].with-font ~ label:before {
-    font-family: FontAwesome;
-    display: inline-block;
-    content: "\f111";
-    letter-spacing: 10px;
-    font-size: 1.5em;
-    width: 1.7em;
+  font-family: FontAwesome;
+  display: inline-block;
+  content: "\f111";
+  letter-spacing: 10px;
+  font-size: 1.5em;
+  width: 1.7em;
 }
 
 input[type=radio].with-font:checked ~ label:before {
-    content: '\f058';
-    font-size: 1.5em;
-    letter-spacing: 5px;
+  content: '\f058';
+  font-size: 1.5em;
+  letter-spacing: 5px;
 }
 
 input[type=radio].with-font:focus ~ label:before,
@@ -655,30 +642,29 @@ input[type=radio].with-font:focus ~ label {
 
 .tooltip.bs-tether-element-attached-left .tooltip-inner::before,
 .tooltip.tooltip-right .tooltip-inner::before {
-    display: none;
+  display: none;
 }
 
 a.dropdown-item {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .vsmall {
-    font-size: 65%
+  font-size: 65%
 }
 
 .vvsmall {
-    font-size: 85%
+  font-size: 85%
 }
 
 .vbig {
-    font-size: 2em;
+  font-size: 2em;
 }
 
 .vvbig {
-    font-size: 185%;
+  font-size: 185%;
 }
 
-
 @media (min-width: 768px) {
   .col-md-0-5 {
     -webkit-box-flex: 0;
@@ -687,91 +673,91 @@ a.dropdown-item {
     flex: 0 0 3.333333%;
     max-width: 3.333333%;
   }
+
   .offset-md-0-5 {
     margin-left: 3.333333%;
   }
 }
 
-
-
 .document {
-    padding: 10px 10px;
-    margin: 5px 0px 5px 10px;
-    max-width: 600px;
-    min-height: 100px;
+  padding: 10px 10px;
+  margin: 5px 0px 5px 10px;
+  max-width: 600px;
+  min-height: 100px;
 }
 
-.document:hover{
-   background-color: #F5F5F5;
+.document:hover {
+  background-color: #F5F5F5;
 }
 
-.document .title{
-    color: #2735D4;
-    font-size: 18px;
+.document .title {
+  color: #001ba0;
+  font-size: 18px;
 }
 
-.document .purple-title{
-    color: #600090;
-    font-size: 18px;
+.document .purple-title {
+  color: #600090;
+  font-size: 18px;
 }
 
 
 .document .url{
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 12px;
-    color: #009030;
+    color: #006d21;
 }
 
 .document .snippet{
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 12px;
-    color: black;
+    color: #545454;
 }
 
 .document .snippet strong{
     color: black;
 }
 
-.document-cal{
-    font-family: georgia,"times new roman",times,serif;
+.document-cal {
+  font-family: georgia, "times new roman", times, serif;
 }
 
 .sidebar-nav-fixed {
   position: fixed;
 }
 
-
 .bg-faded {
   background-color: #F5F8FA;
 }
 
 .btn-success, .bg-success, .badge-success {
-    background-color: #13ce66!important;
-    border-color: #13ce66;
+  background-color: #13ce66 !important;
+  border-color: #13ce66;
 }
 
 .btn-warning, .bg-warning, .badge-warning {
-    background-color: #ffc82c!important;
-    border-color: #ffc82c;
+  background-color: #ffc82c !important;
+  border-color: #ffc82c;
 }
 
-.btn-danger, .bg-danger , .badge-danger {
-  background-color: #ff4949!important;
+.btn-danger, .bg-danger, .badge-danger {
+  background-color: #ff4949 !important;
   border-color: #ff4949;
 }
 
-
 .text-primary {
-  color: #6190e8!important;
+  color: #6190e8 !important;
 }
+
 .text-danger {
-  color: #ff4949!important;
+  color: #ff4949 !important;
 }
+
 .text-warning {
-  color: #ffc82c!important;
+  color: #ffc82c !important;
 }
+
 .text-success {
-  color: #13ce66!important;
+  color: #13ce66 !important;
 }
 
 mark {
@@ -785,21 +771,20 @@ mark.current {
 
 .judged_doc_title_nonrelevant {
   border-left: 5px solid #ff4949;
-  padding-left: 1.25rem!important;
+  padding-left: 1.25rem !important;
 }
 
 .judged_doc_title_relevant {
   border-left: 5px solid #ffc82c;
-  padding-left: 1.25rem!important;
+  padding-left: 1.25rem !important;
 }
 
 .judged_doc_title_highly_relevant {
   border-left: 5px solid #13ce66;
-  padding-left: 1.25rem!important;
+  padding-left: 1.25rem !important;
 }
 
-
-.cal-search{
+.cal-search {
   display: inline-flex;
 }
 
@@ -811,9 +796,125 @@ mark.current {
   border-radius: 3px;
 }
 
-
 @media (min-width: 992px) {
   .modal-xlg {
     max-width: 1200px;
   }
 }
+
+.btn:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+/* PACE CSS */
+.pace {
+  -webkit-pointer-events: none;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.pace-inactive {
+  display: none;
+}
+
+.pace .pace-progress {
+  background: #6c757d;
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  right: 100%;
+  width: 100%;
+  height: 2px;
+}
+
+.pace .pace-progress-inner {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #6c757d, 0 0 5px #6c757d;
+  opacity: 1.0;
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -moz-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  -o-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+.pace .pace-activity {
+  display: block;
+  position: fixed;
+  z-index: 2000;
+  top: 95%;
+  right: 15px;
+  width: 24px;
+  height: 24px;
+  border: solid 2px transparent;
+  border-top-color: #6c757d;
+  border-left-color: #6c757d;
+  border-radius: 10px;
+  -webkit-animation: pace-spinner 400ms linear infinite;
+  -moz-animation: pace-spinner 400ms linear infinite;
+  -ms-animation: pace-spinner 400ms linear infinite;
+  -o-animation: pace-spinner 400ms linear infinite;
+  animation: pace-spinner 400ms linear infinite;
+}
+
+@-webkit-keyframes pace-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes pace-spinner {
+  0% {
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-o-keyframes pace-spinner {
+  0% {
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-ms-keyframes pace-spinner {
+  0% {
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pace-spinner {
+  0% {
+    transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
diff --git a/HiCALWeb/hicalweb/static/images/hicalsmall.png b/HiCALWeb/hicalweb/static/images/hicalsmall.png
new file mode 100644
index 0000000000000000000000000000000000000000..8dcb3626fc66e237162df21687c6aa3935ad6c7a
GIT binary patch
literal 8898
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
K**a;nu>S%bX%nXa

literal 0
HcmV?d00001

diff --git a/HiCALWeb/hicalweb/static/js/pace.min.js b/HiCALWeb/hicalweb/static/js/pace.min.js
new file mode 100644
index 0000000..c47d6e5
--- /dev/null
+++ b/HiCALWeb/hicalweb/static/js/pace.min.js
@@ -0,0 +1,2 @@
+/*! pace 1.0.0 */
+(function(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X=[].slice,Y={}.hasOwnProperty,Z=function(a,b){function c(){this.constructor=a}for(var d in b)Y.call(b,d)&&(a[d]=b[d]);return c.prototype=b.prototype,a.prototype=new c,a.__super__=b.prototype,a},$=[].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1};for(u={catchupTime:100,initialRate:.03,minTime:250,ghostTime:100,maxProgressPerFrame:20,easeFactor:1.25,startOnPageLoad:!0,restartOnPushState:!0,restartOnRequestAfter:500,target:"body",elements:{checkInterval:100,selectors:["body"]},eventLag:{minSamples:10,sampleCount:3,lagThreshold:3},ajax:{trackMethods:["GET"],trackWebSockets:!0,ignoreURLs:[]}},C=function(){var a;return null!=(a="undefined"!=typeof performance&&null!==performance&&"function"==typeof performance.now?performance.now():void 0)?a:+new Date},E=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,t=window.cancelAnimationFrame||window.mozCancelAnimationFrame,null==E&&(E=function(a){return setTimeout(a,50)},t=function(a){return clearTimeout(a)}),G=function(a){var b,c;return b=C(),(c=function(){var d;return d=C()-b,d>=33?(b=C(),a(d,function(){return E(c)})):setTimeout(c,33-d)})()},F=function(){var a,b,c;return c=arguments[0],b=arguments[1],a=3<=arguments.length?X.call(arguments,2):[],"function"==typeof c[b]?c[b].apply(c,a):c[b]},v=function(){var a,b,c,d,e,f,g;for(b=arguments[0],d=2<=arguments.length?X.call(arguments,1):[],f=0,g=d.length;g>f;f++)if(c=d[f])for(a in c)Y.call(c,a)&&(e=c[a],null!=b[a]&&"object"==typeof b[a]&&null!=e&&"object"==typeof e?v(b[a],e):b[a]=e);return b},q=function(a){var b,c,d,e,f;for(c=b=0,e=0,f=a.length;f>e;e++)d=a[e],c+=Math.abs(d),b++;return c/b},x=function(a,b){var c,d,e;if(null==a&&(a="options"),null==b&&(b=!0),e=document.querySelector("[data-pace-"+a+"]")){if(c=e.getAttribute("data-pace-"+a),!b)return c;try{return JSON.parse(c)}catch(f){return d=f,"undefined"!=typeof console&&null!==console?console.error("Error parsing inline pace options",d):void 0}}},g=function(){function a(){}return a.prototype.on=function(a,b,c,d){var e;return null==d&&(d=!1),null==this.bindings&&(this.bindings={}),null==(e=this.bindings)[a]&&(e[a]=[]),this.bindings[a].push({handler:b,ctx:c,once:d})},a.prototype.once=function(a,b,c){return this.on(a,b,c,!0)},a.prototype.off=function(a,b){var c,d,e;if(null!=(null!=(d=this.bindings)?d[a]:void 0)){if(null==b)return delete this.bindings[a];for(c=0,e=[];c<this.bindings[a].length;)e.push(this.bindings[a][c].handler===b?this.bindings[a].splice(c,1):c++);return e}},a.prototype.trigger=function(){var a,b,c,d,e,f,g,h,i;if(c=arguments[0],a=2<=arguments.length?X.call(arguments,1):[],null!=(g=this.bindings)?g[c]:void 0){for(e=0,i=[];e<this.bindings[c].length;)h=this.bindings[c][e],d=h.handler,b=h.ctx,f=h.once,d.apply(null!=b?b:this,a),i.push(f?this.bindings[c].splice(e,1):e++);return i}},a}(),j=window.Pace||{},window.Pace=j,v(j,g.prototype),D=j.options=v({},u,window.paceOptions,x()),U=["ajax","document","eventLag","elements"],Q=0,S=U.length;S>Q;Q++)K=U[Q],D[K]===!0&&(D[K]=u[K]);i=function(a){function b(){return V=b.__super__.constructor.apply(this,arguments)}return Z(b,a),b}(Error),b=function(){function a(){this.progress=0}return a.prototype.getElement=function(){var a;if(null==this.el){if(a=document.querySelector(D.target),!a)throw new i;this.el=document.createElement("div"),this.el.className="pace pace-active",document.body.className=document.body.className.replace(/pace-done/g,""),document.body.className+=" pace-running",this.el.innerHTML='<div class="pace-progress">\n  <div class="pace-progress-inner"></div>\n</div>\n<div class="pace-activity"></div>',null!=a.firstChild?a.insertBefore(this.el,a.firstChild):a.appendChild(this.el)}return this.el},a.prototype.finish=function(){var a;return a=this.getElement(),a.className=a.className.replace("pace-active",""),a.className+=" pace-inactive",document.body.className=document.body.className.replace("pace-running",""),document.body.className+=" pace-done"},a.prototype.update=function(a){return this.progress=a,this.render()},a.prototype.destroy=function(){try{this.getElement().parentNode.removeChild(this.getElement())}catch(a){i=a}return this.el=void 0},a.prototype.render=function(){var a,b,c,d,e,f,g;if(null==document.querySelector(D.target))return!1;for(a=this.getElement(),d="translate3d("+this.progress+"%, 0, 0)",g=["webkitTransform","msTransform","transform"],e=0,f=g.length;f>e;e++)b=g[e],a.children[0].style[b]=d;return(!this.lastRenderedProgress||this.lastRenderedProgress|0!==this.progress|0)&&(a.children[0].setAttribute("data-progress-text",""+(0|this.progress)+"%"),this.progress>=100?c="99":(c=this.progress<10?"0":"",c+=0|this.progress),a.children[0].setAttribute("data-progress",""+c)),this.lastRenderedProgress=this.progress},a.prototype.done=function(){return this.progress>=100},a}(),h=function(){function a(){this.bindings={}}return a.prototype.trigger=function(a,b){var c,d,e,f,g;if(null!=this.bindings[a]){for(f=this.bindings[a],g=[],d=0,e=f.length;e>d;d++)c=f[d],g.push(c.call(this,b));return g}},a.prototype.on=function(a,b){var c;return null==(c=this.bindings)[a]&&(c[a]=[]),this.bindings[a].push(b)},a}(),P=window.XMLHttpRequest,O=window.XDomainRequest,N=window.WebSocket,w=function(a,b){var c,d,e,f;f=[];for(d in b.prototype)try{e=b.prototype[d],f.push(null==a[d]&&"function"!=typeof e?a[d]=e:void 0)}catch(g){c=g}return f},A=[],j.ignore=function(){var a,b,c;return b=arguments[0],a=2<=arguments.length?X.call(arguments,1):[],A.unshift("ignore"),c=b.apply(null,a),A.shift(),c},j.track=function(){var a,b,c;return b=arguments[0],a=2<=arguments.length?X.call(arguments,1):[],A.unshift("track"),c=b.apply(null,a),A.shift(),c},J=function(a){var b;if(null==a&&(a="GET"),"track"===A[0])return"force";if(!A.length&&D.ajax){if("socket"===a&&D.ajax.trackWebSockets)return!0;if(b=a.toUpperCase(),$.call(D.ajax.trackMethods,b)>=0)return!0}return!1},k=function(a){function b(){var a,c=this;b.__super__.constructor.apply(this,arguments),a=function(a){var b;return b=a.open,a.open=function(d,e){return J(d)&&c.trigger("request",{type:d,url:e,request:a}),b.apply(a,arguments)}},window.XMLHttpRequest=function(b){var c;return c=new P(b),a(c),c};try{w(window.XMLHttpRequest,P)}catch(d){}if(null!=O){window.XDomainRequest=function(){var b;return b=new O,a(b),b};try{w(window.XDomainRequest,O)}catch(d){}}if(null!=N&&D.ajax.trackWebSockets){window.WebSocket=function(a,b){var d;return d=null!=b?new N(a,b):new N(a),J("socket")&&c.trigger("request",{type:"socket",url:a,protocols:b,request:d}),d};try{w(window.WebSocket,N)}catch(d){}}}return Z(b,a),b}(h),R=null,y=function(){return null==R&&(R=new k),R},I=function(a){var b,c,d,e;for(e=D.ajax.ignoreURLs,c=0,d=e.length;d>c;c++)if(b=e[c],"string"==typeof b){if(-1!==a.indexOf(b))return!0}else if(b.test(a))return!0;return!1},y().on("request",function(b){var c,d,e,f,g;return f=b.type,e=b.request,g=b.url,I(g)?void 0:j.running||D.restartOnRequestAfter===!1&&"force"!==J(f)?void 0:(d=arguments,c=D.restartOnRequestAfter||0,"boolean"==typeof c&&(c=0),setTimeout(function(){var b,c,g,h,i,k;if(b="socket"===f?e.readyState<2:0<(h=e.readyState)&&4>h){for(j.restart(),i=j.sources,k=[],c=0,g=i.length;g>c;c++){if(K=i[c],K instanceof a){K.watch.apply(K,d);break}k.push(void 0)}return k}},c))}),a=function(){function a(){var a=this;this.elements=[],y().on("request",function(){return a.watch.apply(a,arguments)})}return a.prototype.watch=function(a){var b,c,d,e;return d=a.type,b=a.request,e=a.url,I(e)?void 0:(c="socket"===d?new n(b):new o(b),this.elements.push(c))},a}(),o=function(){function a(a){var b,c,d,e,f,g,h=this;if(this.progress=0,null!=window.ProgressEvent)for(c=null,a.addEventListener("progress",function(a){return h.progress=a.lengthComputable?100*a.loaded/a.total:h.progress+(100-h.progress)/2},!1),g=["load","abort","timeout","error"],d=0,e=g.length;e>d;d++)b=g[d],a.addEventListener(b,function(){return h.progress=100},!1);else f=a.onreadystatechange,a.onreadystatechange=function(){var b;return 0===(b=a.readyState)||4===b?h.progress=100:3===a.readyState&&(h.progress=50),"function"==typeof f?f.apply(null,arguments):void 0}}return a}(),n=function(){function a(a){var b,c,d,e,f=this;for(this.progress=0,e=["error","open"],c=0,d=e.length;d>c;c++)b=e[c],a.addEventListener(b,function(){return f.progress=100},!1)}return a}(),d=function(){function a(a){var b,c,d,f;for(null==a&&(a={}),this.elements=[],null==a.selectors&&(a.selectors=[]),f=a.selectors,c=0,d=f.length;d>c;c++)b=f[c],this.elements.push(new e(b))}return a}(),e=function(){function a(a){this.selector=a,this.progress=0,this.check()}return a.prototype.check=function(){var a=this;return document.querySelector(this.selector)?this.done():setTimeout(function(){return a.check()},D.elements.checkInterval)},a.prototype.done=function(){return this.progress=100},a}(),c=function(){function a(){var a,b,c=this;this.progress=null!=(b=this.states[document.readyState])?b:100,a=document.onreadystatechange,document.onreadystatechange=function(){return null!=c.states[document.readyState]&&(c.progress=c.states[document.readyState]),"function"==typeof a?a.apply(null,arguments):void 0}}return a.prototype.states={loading:0,interactive:50,complete:100},a}(),f=function(){function a(){var a,b,c,d,e,f=this;this.progress=0,a=0,e=[],d=0,c=C(),b=setInterval(function(){var g;return g=C()-c-50,c=C(),e.push(g),e.length>D.eventLag.sampleCount&&e.shift(),a=q(e),++d>=D.eventLag.minSamples&&a<D.eventLag.lagThreshold?(f.progress=100,clearInterval(b)):f.progress=100*(3/(a+3))},50)}return a}(),m=function(){function a(a){this.source=a,this.last=this.sinceLastUpdate=0,this.rate=D.initialRate,this.catchup=0,this.progress=this.lastProgress=0,null!=this.source&&(this.progress=F(this.source,"progress"))}return a.prototype.tick=function(a,b){var c;return null==b&&(b=F(this.source,"progress")),b>=100&&(this.done=!0),b===this.last?this.sinceLastUpdate+=a:(this.sinceLastUpdate&&(this.rate=(b-this.last)/this.sinceLastUpdate),this.catchup=(b-this.progress)/D.catchupTime,this.sinceLastUpdate=0,this.last=b),b>this.progress&&(this.progress+=this.catchup*a),c=1-Math.pow(this.progress/100,D.easeFactor),this.progress+=c*this.rate*a,this.progress=Math.min(this.lastProgress+D.maxProgressPerFrame,this.progress),this.progress=Math.max(0,this.progress),this.progress=Math.min(100,this.progress),this.lastProgress=this.progress,this.progress},a}(),L=null,H=null,r=null,M=null,p=null,s=null,j.running=!1,z=function(){return D.restartOnPushState?j.restart():void 0},null!=window.history.pushState&&(T=window.history.pushState,window.history.pushState=function(){return z(),T.apply(window.history,arguments)}),null!=window.history.replaceState&&(W=window.history.replaceState,window.history.replaceState=function(){return z(),W.apply(window.history,arguments)}),l={ajax:a,elements:d,document:c,eventLag:f},(B=function(){var a,c,d,e,f,g,h,i;for(j.sources=L=[],g=["ajax","elements","document","eventLag"],c=0,e=g.length;e>c;c++)a=g[c],D[a]!==!1&&L.push(new l[a](D[a]));for(i=null!=(h=D.extraSources)?h:[],d=0,f=i.length;f>d;d++)K=i[d],L.push(new K(D));return j.bar=r=new b,H=[],M=new m})(),j.stop=function(){return j.trigger("stop"),j.running=!1,r.destroy(),s=!0,null!=p&&("function"==typeof t&&t(p),p=null),B()},j.restart=function(){return j.trigger("restart"),j.stop(),j.start()},j.go=function(){var a;return j.running=!0,r.render(),a=C(),s=!1,p=G(function(b,c){var d,e,f,g,h,i,k,l,n,o,p,q,t,u,v,w;for(l=100-r.progress,e=p=0,f=!0,i=q=0,u=L.length;u>q;i=++q)for(K=L[i],o=null!=H[i]?H[i]:H[i]=[],h=null!=(w=K.elements)?w:[K],k=t=0,v=h.length;v>t;k=++t)g=h[k],n=null!=o[k]?o[k]:o[k]=new m(g),f&=n.done,n.done||(e++,p+=n.tick(b));return d=p/e,r.update(M.tick(b,d)),r.done()||f||s?(r.update(100),j.trigger("done"),setTimeout(function(){return r.finish(),j.running=!1,j.trigger("hide")},Math.max(D.ghostTime,Math.max(D.minTime-(C()-a),0)))):c()})},j.start=function(a){v(D,a),j.running=!0;try{r.render()}catch(b){i=b}return document.querySelector(".pace")?(j.trigger("start"),j.go()):setTimeout(j.start,50)},"function"==typeof define&&define.amd?define(function(){return j}):"object"==typeof exports?module.exports=j:D.startOnPageLoad&&j.start()}).call(this);
\ No newline at end of file
diff --git a/HiCALWeb/hicalweb/static/js/popper.min.js b/HiCALWeb/hicalweb/static/js/popper.min.js
new file mode 100644
index 0000000..79ccbf5
--- /dev/null
+++ b/HiCALWeb/hicalweb/static/js/popper.min.js
@@ -0,0 +1,5 @@
+/*
+ Copyright (C) Federico Zivolo 2018
+ Distributed under the MIT License (license terms are at http://opensource.org/licenses/MIT).
+ */(function(e,t){'object'==typeof exports&&'undefined'!=typeof module?module.exports=t():'function'==typeof define&&define.amd?define(t):e.Popper=t()})(this,function(){'use strict';function e(e){return e&&'[object Function]'==={}.toString.call(e)}function t(e,t){if(1!==e.nodeType)return[];var o=getComputedStyle(e,null);return t?o[t]:o}function o(e){return'HTML'===e.nodeName?e:e.parentNode||e.host}function n(e){if(!e)return document.body;switch(e.nodeName){case'HTML':case'BODY':return e.ownerDocument.body;case'#document':return e.body;}var i=t(e),r=i.overflow,p=i.overflowX,s=i.overflowY;return /(auto|scroll|overlay)/.test(r+s+p)?e:n(o(e))}function r(e){return 11===e?re:10===e?pe:re||pe}function p(e){if(!e)return document.documentElement;for(var o=r(10)?document.body:null,n=e.offsetParent;n===o&&e.nextElementSibling;)n=(e=e.nextElementSibling).offsetParent;var i=n&&n.nodeName;return i&&'BODY'!==i&&'HTML'!==i?-1!==['TD','TABLE'].indexOf(n.nodeName)&&'static'===t(n,'position')?p(n):n:e?e.ownerDocument.documentElement:document.documentElement}function s(e){var t=e.nodeName;return'BODY'!==t&&('HTML'===t||p(e.firstElementChild)===e)}function d(e){return null===e.parentNode?e:d(e.parentNode)}function a(e,t){if(!e||!e.nodeType||!t||!t.nodeType)return document.documentElement;var o=e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING,n=o?e:t,i=o?t:e,r=document.createRange();r.setStart(n,0),r.setEnd(i,0);var l=r.commonAncestorContainer;if(e!==l&&t!==l||n.contains(i))return s(l)?l:p(l);var f=d(e);return f.host?a(f.host,t):a(e,d(t).host)}function l(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:'top',o='top'===t?'scrollTop':'scrollLeft',n=e.nodeName;if('BODY'===n||'HTML'===n){var i=e.ownerDocument.documentElement,r=e.ownerDocument.scrollingElement||i;return r[o]}return e[o]}function f(e,t){var o=2<arguments.length&&void 0!==arguments[2]&&arguments[2],n=l(t,'top'),i=l(t,'left'),r=o?-1:1;return e.top+=n*r,e.bottom+=n*r,e.left+=i*r,e.right+=i*r,e}function m(e,t){var o='x'===t?'Left':'Top',n='Left'==o?'Right':'Bottom';return parseFloat(e['border'+o+'Width'],10)+parseFloat(e['border'+n+'Width'],10)}function h(e,t,o,n){return $(t['offset'+e],t['scroll'+e],o['client'+e],o['offset'+e],o['scroll'+e],r(10)?o['offset'+e]+n['margin'+('Height'===e?'Top':'Left')]+n['margin'+('Height'===e?'Bottom':'Right')]:0)}function c(){var e=document.body,t=document.documentElement,o=r(10)&&getComputedStyle(t);return{height:h('Height',e,t,o),width:h('Width',e,t,o)}}function g(e){return le({},e,{right:e.left+e.width,bottom:e.top+e.height})}function u(e){var o={};try{if(r(10)){o=e.getBoundingClientRect();var n=l(e,'top'),i=l(e,'left');o.top+=n,o.left+=i,o.bottom+=n,o.right+=i}else o=e.getBoundingClientRect()}catch(t){}var p={left:o.left,top:o.top,width:o.right-o.left,height:o.bottom-o.top},s='HTML'===e.nodeName?c():{},d=s.width||e.clientWidth||p.right-p.left,a=s.height||e.clientHeight||p.bottom-p.top,f=e.offsetWidth-d,h=e.offsetHeight-a;if(f||h){var u=t(e);f-=m(u,'x'),h-=m(u,'y'),p.width-=f,p.height-=h}return g(p)}function b(e,o){var i=2<arguments.length&&void 0!==arguments[2]&&arguments[2],p=r(10),s='HTML'===o.nodeName,d=u(e),a=u(o),l=n(e),m=t(o),h=parseFloat(m.borderTopWidth,10),c=parseFloat(m.borderLeftWidth,10);i&&'HTML'===o.nodeName&&(a.top=$(a.top,0),a.left=$(a.left,0));var b=g({top:d.top-a.top-h,left:d.left-a.left-c,width:d.width,height:d.height});if(b.marginTop=0,b.marginLeft=0,!p&&s){var y=parseFloat(m.marginTop,10),w=parseFloat(m.marginLeft,10);b.top-=h-y,b.bottom-=h-y,b.left-=c-w,b.right-=c-w,b.marginTop=y,b.marginLeft=w}return(p&&!i?o.contains(l):o===l&&'BODY'!==l.nodeName)&&(b=f(b,o)),b}function y(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],o=e.ownerDocument.documentElement,n=b(e,o),i=$(o.clientWidth,window.innerWidth||0),r=$(o.clientHeight,window.innerHeight||0),p=t?0:l(o),s=t?0:l(o,'left'),d={top:p-n.top+n.marginTop,left:s-n.left+n.marginLeft,width:i,height:r};return g(d)}function w(e){var n=e.nodeName;return'BODY'===n||'HTML'===n?!1:'fixed'===t(e,'position')||w(o(e))}function E(e){if(!e||!e.parentElement||r())return document.documentElement;for(var o=e.parentElement;o&&'none'===t(o,'transform');)o=o.parentElement;return o||document.documentElement}function v(e,t,i,r){var p=4<arguments.length&&void 0!==arguments[4]&&arguments[4],s={top:0,left:0},d=p?E(e):a(e,t);if('viewport'===r)s=y(d,p);else{var l;'scrollParent'===r?(l=n(o(t)),'BODY'===l.nodeName&&(l=e.ownerDocument.documentElement)):'window'===r?l=e.ownerDocument.documentElement:l=r;var f=b(l,d,p);if('HTML'===l.nodeName&&!w(d)){var m=c(),h=m.height,g=m.width;s.top+=f.top-f.marginTop,s.bottom=h+f.top,s.left+=f.left-f.marginLeft,s.right=g+f.left}else s=f}return s.left+=i,s.top+=i,s.right-=i,s.bottom-=i,s}function x(e){var t=e.width,o=e.height;return t*o}function O(e,t,o,n,i){var r=5<arguments.length&&void 0!==arguments[5]?arguments[5]:0;if(-1===e.indexOf('auto'))return e;var p=v(o,n,r,i),s={top:{width:p.width,height:t.top-p.top},right:{width:p.right-t.right,height:p.height},bottom:{width:p.width,height:p.bottom-t.bottom},left:{width:t.left-p.left,height:p.height}},d=Object.keys(s).map(function(e){return le({key:e},s[e],{area:x(s[e])})}).sort(function(e,t){return t.area-e.area}),a=d.filter(function(e){var t=e.width,n=e.height;return t>=o.clientWidth&&n>=o.clientHeight}),l=0<a.length?a[0].key:d[0].key,f=e.split('-')[1];return l+(f?'-'+f:'')}function L(e,t,o){var n=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null,i=n?E(t):a(t,o);return b(o,i,n)}function S(e){var t=getComputedStyle(e),o=parseFloat(t.marginTop)+parseFloat(t.marginBottom),n=parseFloat(t.marginLeft)+parseFloat(t.marginRight),i={width:e.offsetWidth+n,height:e.offsetHeight+o};return i}function T(e){var t={left:'right',right:'left',bottom:'top',top:'bottom'};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function C(e,t,o){o=o.split('-')[0];var n=S(e),i={width:n.width,height:n.height},r=-1!==['right','left'].indexOf(o),p=r?'top':'left',s=r?'left':'top',d=r?'height':'width',a=r?'width':'height';return i[p]=t[p]+t[d]/2-n[d]/2,i[s]=o===s?t[s]-n[a]:t[T(s)],i}function D(e,t){return Array.prototype.find?e.find(t):e.filter(t)[0]}function N(e,t,o){if(Array.prototype.findIndex)return e.findIndex(function(e){return e[t]===o});var n=D(e,function(e){return e[t]===o});return e.indexOf(n)}function P(t,o,n){var i=void 0===n?t:t.slice(0,N(t,'name',n));return i.forEach(function(t){t['function']&&console.warn('`modifier.function` is deprecated, use `modifier.fn`!');var n=t['function']||t.fn;t.enabled&&e(n)&&(o.offsets.popper=g(o.offsets.popper),o.offsets.reference=g(o.offsets.reference),o=n(o,t))}),o}function k(){if(!this.state.isDestroyed){var e={instance:this,styles:{},arrowStyles:{},attributes:{},flipped:!1,offsets:{}};e.offsets.reference=L(this.state,this.popper,this.reference,this.options.positionFixed),e.placement=O(this.options.placement,e.offsets.reference,this.popper,this.reference,this.options.modifiers.flip.boundariesElement,this.options.modifiers.flip.padding),e.originalPlacement=e.placement,e.positionFixed=this.options.positionFixed,e.offsets.popper=C(this.popper,e.offsets.reference,e.placement),e.offsets.popper.position=this.options.positionFixed?'fixed':'absolute',e=P(this.modifiers,e),this.state.isCreated?this.options.onUpdate(e):(this.state.isCreated=!0,this.options.onCreate(e))}}function W(e,t){return e.some(function(e){var o=e.name,n=e.enabled;return n&&o===t})}function B(e){for(var t=[!1,'ms','Webkit','Moz','O'],o=e.charAt(0).toUpperCase()+e.slice(1),n=0;n<t.length;n++){var i=t[n],r=i?''+i+o:e;if('undefined'!=typeof document.body.style[r])return r}return null}function H(){return this.state.isDestroyed=!0,W(this.modifiers,'applyStyle')&&(this.popper.removeAttribute('x-placement'),this.popper.style.position='',this.popper.style.top='',this.popper.style.left='',this.popper.style.right='',this.popper.style.bottom='',this.popper.style.willChange='',this.popper.style[B('transform')]=''),this.disableEventListeners(),this.options.removeOnDestroy&&this.popper.parentNode.removeChild(this.popper),this}function A(e){var t=e.ownerDocument;return t?t.defaultView:window}function M(e,t,o,i){var r='BODY'===e.nodeName,p=r?e.ownerDocument.defaultView:e;p.addEventListener(t,o,{passive:!0}),r||M(n(p.parentNode),t,o,i),i.push(p)}function I(e,t,o,i){o.updateBound=i,A(e).addEventListener('resize',o.updateBound,{passive:!0});var r=n(e);return M(r,'scroll',o.updateBound,o.scrollParents),o.scrollElement=r,o.eventsEnabled=!0,o}function F(){this.state.eventsEnabled||(this.state=I(this.reference,this.options,this.state,this.scheduleUpdate))}function R(e,t){return A(e).removeEventListener('resize',t.updateBound),t.scrollParents.forEach(function(e){e.removeEventListener('scroll',t.updateBound)}),t.updateBound=null,t.scrollParents=[],t.scrollElement=null,t.eventsEnabled=!1,t}function U(){this.state.eventsEnabled&&(cancelAnimationFrame(this.scheduleUpdate),this.state=R(this.reference,this.state))}function Y(e){return''!==e&&!isNaN(parseFloat(e))&&isFinite(e)}function j(e,t){Object.keys(t).forEach(function(o){var n='';-1!==['width','height','top','right','bottom','left'].indexOf(o)&&Y(t[o])&&(n='px'),e.style[o]=t[o]+n})}function K(e,t){Object.keys(t).forEach(function(o){var n=t[o];!1===n?e.removeAttribute(o):e.setAttribute(o,t[o])})}function q(e,t,o){var n=D(e,function(e){var o=e.name;return o===t}),i=!!n&&e.some(function(e){return e.name===o&&e.enabled&&e.order<n.order});if(!i){var r='`'+t+'`';console.warn('`'+o+'`'+' modifier is required by '+r+' modifier in order to work, be sure to include it before '+r+'!')}return i}function G(e){return'end'===e?'start':'start'===e?'end':e}function z(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],o=me.indexOf(e),n=me.slice(o+1).concat(me.slice(0,o));return t?n.reverse():n}function V(e,t,o,n){var i=e.match(/((?:\-|\+)?\d*\.?\d*)(.*)/),r=+i[1],p=i[2];if(!r)return e;if(0===p.indexOf('%')){var s;switch(p){case'%p':s=o;break;case'%':case'%r':default:s=n;}var d=g(s);return d[t]/100*r}if('vh'===p||'vw'===p){var a;return a='vh'===p?$(document.documentElement.clientHeight,window.innerHeight||0):$(document.documentElement.clientWidth,window.innerWidth||0),a/100*r}return r}function _(e,t,o,n){var i=[0,0],r=-1!==['right','left'].indexOf(n),p=e.split(/(\+|\-)/).map(function(e){return e.trim()}),s=p.indexOf(D(p,function(e){return-1!==e.search(/,|\s/)}));p[s]&&-1===p[s].indexOf(',')&&console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');var d=/\s*,\s*|\s+/,a=-1===s?[p]:[p.slice(0,s).concat([p[s].split(d)[0]]),[p[s].split(d)[1]].concat(p.slice(s+1))];return a=a.map(function(e,n){var i=(1===n?!r:r)?'height':'width',p=!1;return e.reduce(function(e,t){return''===e[e.length-1]&&-1!==['+','-'].indexOf(t)?(e[e.length-1]=t,p=!0,e):p?(e[e.length-1]+=t,p=!1,e):e.concat(t)},[]).map(function(e){return V(e,i,t,o)})}),a.forEach(function(e,t){e.forEach(function(o,n){Y(o)&&(i[t]+=o*('-'===e[n-1]?-1:1))})}),i}function X(e,t){var o,n=t.offset,i=e.placement,r=e.offsets,p=r.popper,s=r.reference,d=i.split('-')[0];return o=Y(+n)?[+n,0]:_(n,p,s,d),'left'===d?(p.top+=o[0],p.left-=o[1]):'right'===d?(p.top+=o[0],p.left+=o[1]):'top'===d?(p.left+=o[0],p.top-=o[1]):'bottom'===d&&(p.left+=o[0],p.top+=o[1]),e.popper=p,e}for(var J=Math.min,Q=Math.round,Z=Math.floor,$=Math.max,ee='undefined'!=typeof window&&'undefined'!=typeof document,te=['Edge','Trident','Firefox'],oe=0,ne=0;ne<te.length;ne+=1)if(ee&&0<=navigator.userAgent.indexOf(te[ne])){oe=1;break}var i=ee&&window.Promise,ie=i?function(e){var t=!1;return function(){t||(t=!0,window.Promise.resolve().then(function(){t=!1,e()}))}}:function(e){var t=!1;return function(){t||(t=!0,setTimeout(function(){t=!1,e()},oe))}},re=ee&&!!(window.MSInputMethodContext&&document.documentMode),pe=ee&&/MSIE 10/.test(navigator.userAgent),se=function(e,t){if(!(e instanceof t))throw new TypeError('Cannot call a class as a function')},de=function(){function e(e,t){for(var o,n=0;n<t.length;n++)o=t[n],o.enumerable=o.enumerable||!1,o.configurable=!0,'value'in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),ae=function(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e},le=Object.assign||function(e){for(var t,o=1;o<arguments.length;o++)for(var n in t=arguments[o],t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},fe=['auto-start','auto','auto-end','top-start','top','top-end','right-start','right','right-end','bottom-end','bottom','bottom-start','left-end','left','left-start'],me=fe.slice(3),he={FLIP:'flip',CLOCKWISE:'clockwise',COUNTERCLOCKWISE:'counterclockwise'},ce=function(){function t(o,n){var i=this,r=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};se(this,t),this.scheduleUpdate=function(){return requestAnimationFrame(i.update)},this.update=ie(this.update.bind(this)),this.options=le({},t.Defaults,r),this.state={isDestroyed:!1,isCreated:!1,scrollParents:[]},this.reference=o&&o.jquery?o[0]:o,this.popper=n&&n.jquery?n[0]:n,this.options.modifiers={},Object.keys(le({},t.Defaults.modifiers,r.modifiers)).forEach(function(e){i.options.modifiers[e]=le({},t.Defaults.modifiers[e]||{},r.modifiers?r.modifiers[e]:{})}),this.modifiers=Object.keys(this.options.modifiers).map(function(e){return le({name:e},i.options.modifiers[e])}).sort(function(e,t){return e.order-t.order}),this.modifiers.forEach(function(t){t.enabled&&e(t.onLoad)&&t.onLoad(i.reference,i.popper,i.options,t,i.state)}),this.update();var p=this.options.eventsEnabled;p&&this.enableEventListeners(),this.state.eventsEnabled=p}return de(t,[{key:'update',value:function(){return k.call(this)}},{key:'destroy',value:function(){return H.call(this)}},{key:'enableEventListeners',value:function(){return F.call(this)}},{key:'disableEventListeners',value:function(){return U.call(this)}}]),t}();return ce.Utils=('undefined'==typeof window?global:window).PopperUtils,ce.placements=fe,ce.Defaults={placement:'bottom',positionFixed:!1,eventsEnabled:!0,removeOnDestroy:!1,onCreate:function(){},onUpdate:function(){},modifiers:{shift:{order:100,enabled:!0,fn:function(e){var t=e.placement,o=t.split('-')[0],n=t.split('-')[1];if(n){var i=e.offsets,r=i.reference,p=i.popper,s=-1!==['bottom','top'].indexOf(o),d=s?'left':'top',a=s?'width':'height',l={start:ae({},d,r[d]),end:ae({},d,r[d]+r[a]-p[a])};e.offsets.popper=le({},p,l[n])}return e}},offset:{order:200,enabled:!0,fn:X,offset:0},preventOverflow:{order:300,enabled:!0,fn:function(e,t){var o=t.boundariesElement||p(e.instance.popper);e.instance.reference===o&&(o=p(o));var n=B('transform'),i=e.instance.popper.style,r=i.top,s=i.left,d=i[n];i.top='',i.left='',i[n]='';var a=v(e.instance.popper,e.instance.reference,t.padding,o,e.positionFixed);i.top=r,i.left=s,i[n]=d,t.boundaries=a;var l=t.priority,f=e.offsets.popper,m={primary:function(e){var o=f[e];return f[e]<a[e]&&!t.escapeWithReference&&(o=$(f[e],a[e])),ae({},e,o)},secondary:function(e){var o='right'===e?'left':'top',n=f[o];return f[e]>a[e]&&!t.escapeWithReference&&(n=J(f[o],a[e]-('right'===e?f.width:f.height))),ae({},o,n)}};return l.forEach(function(e){var t=-1===['left','top'].indexOf(e)?'secondary':'primary';f=le({},f,m[t](e))}),e.offsets.popper=f,e},priority:['left','right','top','bottom'],padding:5,boundariesElement:'scrollParent'},keepTogether:{order:400,enabled:!0,fn:function(e){var t=e.offsets,o=t.popper,n=t.reference,i=e.placement.split('-')[0],r=Z,p=-1!==['top','bottom'].indexOf(i),s=p?'right':'bottom',d=p?'left':'top',a=p?'width':'height';return o[s]<r(n[d])&&(e.offsets.popper[d]=r(n[d])-o[a]),o[d]>r(n[s])&&(e.offsets.popper[d]=r(n[s])),e}},arrow:{order:500,enabled:!0,fn:function(e,o){var n;if(!q(e.instance.modifiers,'arrow','keepTogether'))return e;var i=o.element;if('string'==typeof i){if(i=e.instance.popper.querySelector(i),!i)return e;}else if(!e.instance.popper.contains(i))return console.warn('WARNING: `arrow.element` must be child of its popper element!'),e;var r=e.placement.split('-')[0],p=e.offsets,s=p.popper,d=p.reference,a=-1!==['left','right'].indexOf(r),l=a?'height':'width',f=a?'Top':'Left',m=f.toLowerCase(),h=a?'left':'top',c=a?'bottom':'right',u=S(i)[l];d[c]-u<s[m]&&(e.offsets.popper[m]-=s[m]-(d[c]-u)),d[m]+u>s[c]&&(e.offsets.popper[m]+=d[m]+u-s[c]),e.offsets.popper=g(e.offsets.popper);var b=d[m]+d[l]/2-u/2,y=t(e.instance.popper),w=parseFloat(y['margin'+f],10),E=parseFloat(y['border'+f+'Width'],10),v=b-e.offsets.popper[m]-w-E;return v=$(J(s[l]-u,v),0),e.arrowElement=i,e.offsets.arrow=(n={},ae(n,m,Q(v)),ae(n,h,''),n),e},element:'[x-arrow]'},flip:{order:600,enabled:!0,fn:function(e,t){if(W(e.instance.modifiers,'inner'))return e;if(e.flipped&&e.placement===e.originalPlacement)return e;var o=v(e.instance.popper,e.instance.reference,t.padding,t.boundariesElement,e.positionFixed),n=e.placement.split('-')[0],i=T(n),r=e.placement.split('-')[1]||'',p=[];switch(t.behavior){case he.FLIP:p=[n,i];break;case he.CLOCKWISE:p=z(n);break;case he.COUNTERCLOCKWISE:p=z(n,!0);break;default:p=t.behavior;}return p.forEach(function(s,d){if(n!==s||p.length===d+1)return e;n=e.placement.split('-')[0],i=T(n);var a=e.offsets.popper,l=e.offsets.reference,f=Z,m='left'===n&&f(a.right)>f(l.left)||'right'===n&&f(a.left)<f(l.right)||'top'===n&&f(a.bottom)>f(l.top)||'bottom'===n&&f(a.top)<f(l.bottom),h=f(a.left)<f(o.left),c=f(a.right)>f(o.right),g=f(a.top)<f(o.top),u=f(a.bottom)>f(o.bottom),b='left'===n&&h||'right'===n&&c||'top'===n&&g||'bottom'===n&&u,y=-1!==['top','bottom'].indexOf(n),w=!!t.flipVariations&&(y&&'start'===r&&h||y&&'end'===r&&c||!y&&'start'===r&&g||!y&&'end'===r&&u);(m||b||w)&&(e.flipped=!0,(m||b)&&(n=p[d+1]),w&&(r=G(r)),e.placement=n+(r?'-'+r:''),e.offsets.popper=le({},e.offsets.popper,C(e.instance.popper,e.offsets.reference,e.placement)),e=P(e.instance.modifiers,e,'flip'))}),e},behavior:'flip',padding:5,boundariesElement:'viewport'},inner:{order:700,enabled:!1,fn:function(e){var t=e.placement,o=t.split('-')[0],n=e.offsets,i=n.popper,r=n.reference,p=-1!==['left','right'].indexOf(o),s=-1===['top','left'].indexOf(o);return i[p?'left':'top']=r[o]-(s?i[p?'width':'height']:0),e.placement=T(t),e.offsets.popper=g(i),e}},hide:{order:800,enabled:!0,fn:function(e){if(!q(e.instance.modifiers,'hide','preventOverflow'))return e;var t=e.offsets.reference,o=D(e.instance.modifiers,function(e){return'preventOverflow'===e.name}).boundaries;if(t.bottom<o.top||t.left>o.right||t.top>o.bottom||t.right<o.left){if(!0===e.hide)return e;e.hide=!0,e.attributes['x-out-of-boundaries']=''}else{if(!1===e.hide)return e;e.hide=!1,e.attributes['x-out-of-boundaries']=!1}return e}},computeStyle:{order:850,enabled:!0,fn:function(e,t){var o=t.x,n=t.y,i=e.offsets.popper,r=D(e.instance.modifiers,function(e){return'applyStyle'===e.name}).gpuAcceleration;void 0!==r&&console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');var s,d,a=void 0===r?t.gpuAcceleration:r,l=p(e.instance.popper),f=u(l),m={position:i.position},h={left:Z(i.left),top:Q(i.top),bottom:Q(i.bottom),right:Z(i.right)},c='bottom'===o?'top':'bottom',g='right'===n?'left':'right',b=B('transform');if(d='bottom'==c?-f.height+h.bottom:h.top,s='right'==g?-f.width+h.right:h.left,a&&b)m[b]='translate3d('+s+'px, '+d+'px, 0)',m[c]=0,m[g]=0,m.willChange='transform';else{var y='bottom'==c?-1:1,w='right'==g?-1:1;m[c]=d*y,m[g]=s*w,m.willChange=c+', '+g}var E={"x-placement":e.placement};return e.attributes=le({},E,e.attributes),e.styles=le({},m,e.styles),e.arrowStyles=le({},e.offsets.arrow,e.arrowStyles),e},gpuAcceleration:!0,x:'bottom',y:'right'},applyStyle:{order:900,enabled:!0,fn:function(e){return j(e.instance.popper,e.styles),K(e.instance.popper,e.attributes),e.arrowElement&&Object.keys(e.arrowStyles).length&&j(e.arrowElement,e.arrowStyles),e},onLoad:function(e,t,o,n,i){var r=L(i,t,e,o.positionFixed),p=O(o.placement,r,t,e,o.modifiers.flip.boundariesElement,o.modifiers.flip.padding);return t.setAttribute('x-placement',p),j(t,{position:o.positionFixed?'fixed':'absolute'}),o},gpuAcceleration:void 0}}},ce});
+//# sourceMappingURL=popper.min.js.map
diff --git a/HiCALWeb/hicalweb/templates/account/login.html b/HiCALWeb/hicalweb/templates/account/login.html
index 02a2b86..0c2e4ca 100644
--- a/HiCALWeb/hicalweb/templates/account/login.html
+++ b/HiCALWeb/hicalweb/templates/account/login.html
@@ -1,46 +1,36 @@
 {% extends "account/base.html" %}
-
 {% load i18n static crispy_forms_tags %}
 
 {% block head_title %}{% trans "Sign In" %}{% endblock %}
-{% block nav-right %}
-<li class="nav-item mt-0-4 mr-3">
-    <a href="{% url 'progress:practice' %}" class="btn btn-primary btn-sm">{% trans "Click here to practice" %}</a>
-</li>
-{% endblock %}
 
 {% block main %}
 {% block inner %}
 
-{% block help_modal_text %}
-{% endblock %}
-
-
-<div class="row">
+<div class="row mt-4">
 
-    <div class="col-md-7 align-self-center center-text">
-        <div class="brand font-montserrat mb-3"><img src="{% static 'images/hical.png' %}" width="20%"></div>
-        <p class="gray-text">A System for Efficient High-Recall Retrieval</p>
-    </div>
-    <div class="col-md-5">
+  <div class="col-md-6 align-self-center center-text">
+    <div class="brand font-montserrat mb-3"><img src="{% static 'images/hical.png' %}" width="20%"></div>
+    <p class="gray-text">A System for Efficient High-Recall Retrieval</p>
+  </div>
+  <div class="col-md-5">
 
-        <h1>{% trans "Sign In" %}</h1>
+    <h1>{% trans "Sign In" %}</h1>
 
-        <p>{% blocktrans %}If you have not created an account yet, then please
-        <a href="{{ signup_url }}">sign up</a> first. {% endblocktrans %}</p>
-        <p>If you would like to practice using the system, click on the
-             practice button above.</p>
+    <p>{% blocktrans %}If you have not created an account yet, then please
+      <a href="{{ signup_url }}">sign up</a> first. {% endblocktrans %}</p>
+    <p>If you would like to practice using the system, click on the
+      practice button above.</p>
 
-        <form class="login" method="POST" action="{% url 'account_login' %}">
-          {% csrf_token %}
-          {{ form|crispy }}
-          {% if redirect_field_value %}
-          <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
-          {% endif %}
-          <button class="primaryAction btn btn-primary" type="submit">{% trans "Sign In" %}</button>
-        </form>
+    <form class="login" method="POST" action="{% url 'account_login' %}">
+      {% csrf_token %}
+      {{ form|crispy }}
+      {% if redirect_field_value %}
+      <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
+      {% endif %}
+      <button class="primaryAction btn btn-primary" type="submit">{% trans "Sign In" %}</button>
+    </form>
 
-    </div>
+  </div>
 
 </div>
 
diff --git a/HiCALWeb/hicalweb/templates/base.html b/HiCALWeb/hicalweb/templates/base.html
index c3c9ef3..4715224 100644
--- a/HiCALWeb/hicalweb/templates/base.html
+++ b/HiCALWeb/hicalweb/templates/base.html
@@ -1,275 +1,220 @@
-{% load staticfiles i18n static raven %}
+{% load staticfiles i18n static raven has_group crispy_forms_tags %}
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="HiCAL">
-    <meta name="author" content="University of Waterloo IR lab.">
-
-    <title>HiCAL - {% block pagetitle %}home{% endblock %}</title>
-
-    <!-- Bootstrap core CSS -->
-    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
-
-    <!-- Custom styles for this template -->
-    <link href="{% static 'css/project.css' %}" rel="stylesheet">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
-    {% include "raven-config.html" %}
-
-    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" type="image/x-icon">
-    <link rel="icon" href="{% static 'images/favicon.ico' %}" type="image/x-icon">
-
-    {% block extra_head %}{% endblock %}
-</head>
-
-<body>
-
-
-<nav class="navbar nav-bar-padding navbar-toggleable-md bg-faded fixed-top font-montserrat">
-
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
+  <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+      <meta name="description" content="HiCAL">
+      <meta name="author" content="University of Waterloo - Information Retrieval Lab">
+      <title>HiCAL - {% block pagetitle %}home{% endblock %}</title>
+      <!-- Bootstrap core CSS -->
+      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+      <!-- Custom styles for this template -->
+      <link href="{% static 'css/project.css' %}" rel="stylesheet">
+      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
+      {% include "raven-config.html" %}
+      <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" type="image/x-icon">
+      <link rel="icon" href="{% static 'images/favicon.ico' %}" type="image/x-icon">
+      {% block extra_head %}{% endblock %}
+  </head>
+
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
+        <a class="navbar-brand" href="/">
+          <img src="{% static 'images/hicalsmall.png' %}" width="31" height="31" alt="">
+        </a>
+      {% block navbar-noncollapse %}{% endblock %}
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbars">
+        <span class="navbar-toggler-icon"></span>
+      </button>
 
       <div class="collapse navbar-collapse" id="navbars">
-        {% block nav-left%}
-        <ul class="navbar-nav {% block nav-left-mt %}mt-2{% endblock %}">
-            <a id="desc_popover" href="#" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 800px;" data-toggle="popover" title="Topic Description" data-placement="bottom" data-trigger="focus" data-content="{% if user.current_task.topic.description %}{{ user.current_task.topic.description }}{% else %}No description provided.{% endif %}">
-             {{ user.current_task.topic.title }}
-            </a>
-            <span class="small mt-1 text-primary left-margin">
-                {% if user.current_task %}
-                    [Click on topic to view full description]
-                {% endif %}
-            </span>
-        </ul>
-        {% endblock %}
-
-        <ul class="navbar-nav mx-auto small mt-1">
-            {% block nav-header %}
-            {% block nav-header-title %}{% endblock %}
-            {% endblock %}
-        </ul>
-        <div class="form-inline mt-2 mt-md-0">
-            <ul class="navbar-nav mr-auto">
-                {% block nav-right %}
-                {% endblock %}
-                {% block help_button %}
-                <li class="nav-item">
-                    <a class="nav-link" href="#" data-toggle="modal" data-target="#helpModal">Help</a>
-                </li>
-                {% endblock %}
-            </ul>
+        {% if request.user.is_authenticated and request.user.current_task %}
+        <div class="navbar-nav">
+          <a class="nav-item nav-link" href="{% url 'search:main' %}">Search</a>
+          <a class="nav-item nav-link" href="{% url 'CAL:main' %}">CAL</a>
         </div>
-    </div>
-
-</nav>
+        {% endif %}
+        <ul class="nav navbar-nav flex-fill justify-content-center center-text pl-5 pr-5 {%block navbar-hidesmall %}d-none d-sm-block{%endblock%}">
+          {% block navbar-center %}
+          <span class="navbar-text text-truncate" style="max-width: 15rem;">
+           {% if request.user.current_task %}
+           {{user.current_task.topic.title}}
+           {% elif request.user.is_authenticated %}
+           Please create a new topic
+           {% endif %}
+          </span>
+          {% endblock %}
+        </ul>
 
-<!-- Help Modal -->
-<div class="modal fade" id="helpModal" tabindex="-1" role="dialog"
-     aria-labelledby="helpModal" aria-hidden="true">
-    <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">Help</h5>
-                <button type="button" class="close" data-dismiss="modal"
-                        aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
+        {% block navbar-form %} {% endblock %}
+
+        <ul class="navbar-nav">
+          {% if request.user.is_authenticated %}
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Session</a>
+            <div class="dropdown-menu dropdown-menu-right">
+              <a class="dropdown-item" href="{% url 'archive:main' %}">Judged Documents</a>
+
+              <div class="dropdown-divider"></div>
+              <a class="dropdown-item" href="{% url 'progress:sessions' %}">All Sessions</a>
+              {% if request.user.is_authenticated and request.user|has_group:"practice" %}
+              <a href="{% url 'progress:practice_complete' %}" class="dropdown-item">Exit practice</a>
+              {% elif request.user.is_authenticated %}
+              <a class="dropdown-item" href="{% url 'account_logout'  %}">Sign out</a>
+              {% else %}
+              <a class="dropdown-item" href="{% url 'account_login' %}">Sign In</a>
+              {% endif %}
             </div>
-            <div class="modal-body">
-                {% block help_modal_text %}
-                <p>Insert help here.</p>
-                {% endblock %}
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">
-                    Close
-                </button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div class="container-fluid">
-    <div class="row">
-        <nav class="col-sm-2 col-md-0-5 hidden-xs-down sidebar bg-faded font-open-sans">
-            <ul class="nav nav-pills flex-column center-text">
-                <li class="nav-item sidebar-brand extra-bottom-margin">
-                    <a class="nav-link sidebar-brand" href="/"><i class="fas fa-home" aria-hidden="true"></i></a>
-                </li>
-
-                {% block sidebar %}
-                {% if user.current_task %}
-                <li class="nav-item">
-                    <a class="nav-link" href="{% url 'CAL:main' %}"><i class="far fa-lightbulb" aria-hidden="true"></i></a>
-                </li>
-                <li class="nav-item ">
-                    <a class="nav-link" href="{% url 'search:main' %}"><i class="fa fa-search" aria-hidden="true"></i></a>
-                </li>
-{#                <li class="nav-item">#}
-{#                    <a class="nav-link" href="{% url 'iterative:main' %}"><i class="fa fa-list-ol" aria-hidden="true"></i></a>#}
-{#                </li>#}
-                <hr>
-                <li class="nav-item">
-                    <a class="nav-link" href="{% url 'archive:main' %}"><i class="fa fa-archive" aria-hidden="true"></i></a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="{% url 'progress:sessions' %}"><i class="fa fa-clipboard-list" aria-hidden="true"></i></a>
-                </li>
-                {% comment %}
-                <li class="nav-item">
-                    <a class="nav-link" href="{% url 'judgment:get_all' %}">A</a>
-                </li>
-                {% endcomment %}
-                {% endif %}
-                {% endblock %}
-            </ul>
-
-        </nav>
-
-        <main class="col-sm-10 offset-sm-1  offset-md-0-5 col-md-11 pt-3 top-margin extra-padding">
-            {% block messages %}
-                {% if messages %}
-                    <div class="alert alert-info"
-                         role="alert">
-                        <button type="button" class="close" data-dismiss="alert"
-                                aria-label="Close">
-                            <span aria-hidden="true">&times;</span>
-                        </button>
-                        {% for message in messages %}
-                            <p class="no-margin">
-                                <strong>Done</strong> {{ message }}</p>
-                        {% endfor %}
-                    </div>
-                {% endif %}
-            {% endblock %}
-            {% block main %}
-                MAIN CONTENT HERE
-            {% endblock %}
+          </li>
+          {% else %}
+          <a class="btn btn-sm btn-outline-secondary" href="{% url 'progress:practice' %}">Click here to practice</a>
+          {% endif %}
+        </ul>
+      </div>
+    </nav>
+
+    <div class="container-fluid">
+      <div class="row">
+        <main class="col-md-12 pt-4">
+          {% block messages %}
+          {% if messages %}
+          <div class="alert alert-info" role="alert">
+            <button type="button" class="close" data-dismiss="alert">
+              <span>&times;</span>
+            </button>
+            {% for message in messages %}
+            <p class="m-0"><strong>Done</strong> {{ message }}</p>
+            {% endfor %}
+          </div>
+          {% endif %}
+          {% endblock %}
+          {% block main %}
+          MAIN CONTENT HERE
+          {% endblock %}
         </main>
 
         {% block extra_body %}{% endblock %}
 
+      </div>
     </div>
-</div>
 
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="{% static 'js/jquery.mark.min.js' %}"></script>
-<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
-        integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
-        crossorigin="anonymous"></script>
-<script src="{% static 'js/bootstrap.min.js' %}"></script>
-<script>
-
-    function showAlarm(msg) {
-        var now = + new Date();
-        var data = {
-            'action': 'trig_user_gone_away',
-            'message': 'Alert message is shown to user.',
-            'extra_context': {
-                'alert_msg': msg
-            },
-            'client_time': now,
-            'csrfmiddlewaretoken': '{{ csrf_token }}',
-            'page_title': document.title
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="{% static 'js/jquery.mark.min.js' %}"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
+    <script>
+
+        function showAlarm(msg) {
+            var now = + new Date();
+            var data = {
+                'action': 'trig_user_gone_away',
+                'message': 'Alert message is shown to user.',
+                'extra_context': {
+                    'alert_msg': msg
+                },
+                'client_time': now,
+                'csrfmiddlewaretoken': '{{ csrf_token }}',
+                'page_title': document.title
+            };
+            $.ajax({
+                url: '{% url 'progress:post_log_msg' %}',
+                method: 'POST',
+                data: JSON.stringify(data),
+                success: function (result) {
+                    console.log(result['message']);
+                }
+            });
+
+            alert(msg);
+            document.body.click();
+            now = + new Date();
+            data = {
+                'action': 'trig_user_came_back',
+                'message': 'User clicked ok to alert message.',
+                'extra_context': {
+                    'alert_msg': msg
+                },
+                'client_time': now,
+                'csrfmiddlewaretoken': '{{ csrf_token }}',
+                'page_title': document.title
+            };
+            $.ajax({
+                url: '{% url 'progress:post_log_msg' %}',
+                method: 'POST',
+                data: JSON.stringify(data),
+                success: function (result) {
+                    console.log(result['message']);
+                }
+            });
+        }
+        window.jquery_ajax = $.ajax;
+        $.ajax = function (param) {
+            var tmp_success_callback = param['success'];
+            param['success'] = function (data, tmp, xhr) {
+                if (xhr.getResponseHeader('completed') == "1" && window.location.pathname != "/completed/") {
+                    window.location.href = "/completed/";
+                } else
+                    tmp_success_callback(data, tmp, xhr);
+            };
+            window.jquery_ajax(param);
         };
-        $.ajax({
-            url: '{% url 'progress:post_log_msg' %}',
-            method: 'POST',
-            data: JSON.stringify(data),
-            success: function (result) {
-                console.log(result['message']);
-            }
-        });
 
-        alert(msg);
-        document.body.click();
-        now = + new Date();
-        data = {
-            'action': 'trig_user_came_back',
-            'message': 'User clicked ok to alert message.',
-            'extra_context': {
-                'alert_msg': msg
-            },
-            'client_time': now,
-            'csrfmiddlewaretoken': '{{ csrf_token }}',
-            'page_title': document.title
-        };
-        $.ajax({
-            url: '{% url 'progress:post_log_msg' %}',
-            method: 'POST',
-            data: JSON.stringify(data),
-            success: function (result) {
-                console.log(result['message']);
-            }
+        $('#desc_popover').on('show.bs.popover', function () {
+            var now = +new Date();
+            var data = {
+                'action': 'trig_user_clicked_on_topic_desc',
+                'message': 'User clicked on the topic desc.',
+                'extra_context': {
+                    "topic_title": "{{ user.current_task.topic.title|escapejs }}"
+                },
+                'client_time': now,
+                'csrfmiddlewaretoken': '{{ csrf_token }}',
+                'page_title': document.title
+            };
+            $.ajax({
+                url: '{% url 'progress:post_log_msg' %}',
+                method: 'POST',
+                data: JSON.stringify(data),
+                success: function (result) {
+                    console.log(result['message']);
+                }
+            });
         });
-    }
-    window.jquery_ajax = $.ajax;
-    $.ajax = function (param) {
-        var tmp_success_callback = param['success'];
-        param['success'] = function (data, tmp, xhr) {
-            if (xhr.getResponseHeader('completed') == "1" && window.location.pathname != "/completed/") {
-                window.location.href = "/completed/";
-            } else
-                tmp_success_callback(data, tmp, xhr);
-        }
-        window.jquery_ajax(param);
-    };
 
-    $('#desc_popover').on('show.bs.popover', function () {
-        var now = +new Date();
-        var data = {
-            'action': 'trig_user_clicked_on_topic_desc',
-            'message': 'User clicked on the topic desc.',
-            'extra_context': {
-                "topic_title": "{{ user.current_task.topic.title|escapejs }}"
-            },
-            'client_time': now,
-            'csrfmiddlewaretoken': '{{ csrf_token }}',
-            'page_title': document.title
-        };
-        $.ajax({
-            url: '{% url 'progress:post_log_msg' %}',
-            method: 'POST',
-            data: JSON.stringify(data),
-            success: function (result) {
-                console.log(result['message']);
-            }
+        $(document).ready(function () {
+            $('[data-toggle="popover"]').popover({
+                trigger: 'focus'
+            });
         });
-    });
 
-    $(document).ready(function () {
-        $('[data-toggle="popover"]').popover({
-            trigger: 'focus'
-        });
-    });
+        // Notify server of page visit on page load
+        window.onload = function () {
+            var now = +new Date();
+            $.ajax({
+                url: '{% url 'progress:post_visit' %}',
+                method: 'POST',
+                data: JSON.stringify({
+                    'client_time': now,
+                    'page_title': document.title,
+                    'page_file': '{{ request.page_file }}',
+                    'csrfmiddlewaretoken': '{{ csrf_token }}'
+                }),
+                success: function (result) {
+                    console.log(result['message']);
+                }
+            });
+        };
 
-    // Notify server of page visit on page load
-    window.onload = function () {
-        var now = +new Date();
-        $.ajax({
-            url: '{% url 'progress:post_visit' %}',
-            method: 'POST',
-            data: JSON.stringify({
-                'client_time': now,
-                'page_title': document.title,
-                'page_file': '{{ request.page_file }}',
-                'csrfmiddlewaretoken': '{{ csrf_token }}'
-            }),
-            success: function (result) {
-                console.log(result['message']);
-            }
-        });
-    };
-</script>
+    window.paceOptions = {ajax: { trackMethods: ['GET', 'POST'] }};
 
-{% block extra_scripts %}{% endblock %}
+    </script>
 
+    {% block extra_scripts %}{% endblock %}
 
-</body>
+    <script src="{% static 'js/pace.min.js' %}"></script>
+  </body>
 </html>