diff --git a/bower.json b/bower.json
index 3c8d15e9603987af5246a55575b1fbd2bef8114b..a47616e5b091f859ac4d7268a382f554f08708f1 100644
--- a/bower.json
+++ b/bower.json
@@ -9,7 +9,8 @@
"moment-timezone": "0.5.0",
"moment": "2.11.1",
"tablesaw": "3.1.2",
- "materialize": "1.0.0"
+ "materialize": "1.0.0",
+ "bootstrap": "4.0.0"
},
"resolutions": {
"webcomponentsjs": "^0.6.0"
diff --git a/gracedb/static/css/override.css b/gracedb/static/css/override.css
index 1084557708546bef6bd84b5599aa52a0940f50ec..643b5f23b7a7dcee3cb3ec21abe95c10df427a79 100644
--- a/gracedb/static/css/override.css
+++ b/gracedb/static/css/override.css
@@ -4,3 +4,18 @@
.nano-image {
background-color: white;
}
+
+.navbar-gracedb{
+ /*background-color: #000066 ; */
+ background-color: #08258C ;
+ border-color: #FFFFFF;
+}
+
+ul {
+ list-style-position: outside;
+}
+
+li {
+list-style-position: inside;
+text-indent: -1em;
+}
diff --git a/gracedb/templates/base.html b/gracedb/templates/base.html
index a715f91b0734c7c82a5772e2dca5ebf9bbf33c86..559dcab4f3c7c60a24aa8beed39fbe9e9f3170e4 100644
--- a/gracedb/templates/base.html
+++ b/gracedb/templates/base.html
@@ -4,11 +4,12 @@
<head>
{% load static %}
-
- <!--Import Google Icon Font-->
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
- <!--Import materialize.css-->
- <link type="text/css" rel="stylesheet" href="{% static "css/materialize.min.css" %}" media="screen,projection"/>
+ <!--Import bootstrap and custom colors-->
+ <link type="text/css" rel="stylesheet" href="{% static "bootstrap/dist/css/bootstrap.min.css" %}" media="screen,projection"/>
+ <link type="text/css" rel="stylesheet" href="{% static "css/override.css" %}" />
+ <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono&display=fallback">
+ <style>body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}</style>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@@ -18,88 +19,58 @@
{# remove requests for favicon #}
<link rel="icon" href="data:,">
<title>GraceDB | {% block title %}{% endblock %}</title>
-<!-- START TESTING -->
-<script type="text/javascript">
-function changeTime(obj, label) {
- //var timetype = obj.get("value");
- var timetype = obj.value;
- if (timetype=="") { return; }
- var times = document.getElementsByName("time-"+label);
- for (i=0; i<times.length; i++) {
- newtime = times[i].getAttribute(timetype);
- times[i].innerHTML = newtime;
- }
-}
-</script>
-{% endblock %}
-<!-- END TESTING -->
-{% block jscript %}{% endblock %}
-
-<!-- override other CSS templates as necessary
-<link rel="stylesheet" href="{% static "css/override.css" %}" />-->
-
-</head>
-
-<script src="{% static "js/materialize.js" %}"></script>
+ <!-- START TESTING -->
+ <script type="text/javascript">
+ function changeTime(obj, label) {
+ //var timetype = obj.get("value");
+ var timetype = obj.value;
+ if (timetype=="") { return; }
+ var times = document.getElementsByName("time-"+label);
+ for (i=0; i<times.length; i++) {
+ newtime = times[i].getAttribute(timetype);
+ times[i].innerHTML = newtime;
+ }
+ }
+ </script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
+ {% endblock %}
+ <!-- END TESTING -->
+ {% block jscript %}
+ {% endblock %}
-<body id="{% block pageid %}{% endblock %}"{% block bodyattrs %}{% endblock %}>
-<div class="container">
-<div class="card-panel blue darken-3">
- <table border="0" cellpadding="0">
- <tbody>
- <tr style="border-bottom: 0px ">
- <td rowspan=2>
- <a href="/">
- <img src="{% static "images/logo.svg" %}" width=56>
- </a>
- </td>
- <td>
- <a href="/">
- <span class="light-blue-text text-lighten-5" style="font-weight: bold"><h5>
- GraceDB — </span>
- {% if config_name %}
- <span class="red-text text-lighten-4">({{ config_name }})</span>
- {% endif %}<br>
- <span class="light-blue-text text-lighten-5" style="font-weight: 100">
- Gravitational-Wave Candidate Event Database
- </span></h5>
- </a>
- </td>
- </tr>
- </tbody>
- </table>
-</div>
-
-{% block nav %}
- {% include "navbar_frag.html" %}
-{% endblock %}
-
- <h2>{% block heading %}Title{% endblock %}</h2>
-
- {% block content %}{% endblock %}
+</head>
+<body id="{% block pageid %}{% endblock %}"{% block bodyattrs %}{% endblock %}>
-<div class="divider"></div>
-<br>
-</div>
-<div id=footer" class="container">
- <center>
- <img height="36" src="{% static "images/kagra.png" %}" />
- <img height="36" src="{% static "images/ligo-blue.gif" %}" />
- <img height="36" src="{% static "images/LSC_logo50.png" %}" />
- <img height="36" src="{% static "images/Virgo_logo50.png" %}" />
- {% if user and user.username == "chad.hanna@LIGO.ORG" %}
- <img width="194" height="37" src="{% static "images/PI_Logo-anim.gif" %}" />
- {% endif %}
- {% if user and user.username == "kipp.cannon@LIGO.ORG" %}
- <img width="194" height="37" src="{% static "images/CITA_logo-anim.gif" %}" />
- {% endif %}
- </center>
-</div>
+ {% block nav %}
+ {% include "navbar_frag.html" %}
+ {% endblock %}
+
+ <div class="container-fluid">
+ <h2>{% block heading %}Title{% endblock %}</h2>
+ {% block content %}{% endblock %}
+
+
+
+ <center>
+ <img height="36" src="{% static "images/kagra.png" %}" />
+ <img height="36" src="{% static "images/ligo-blue.gif" %}" />
+ <img height="36" src="{% static "images/LSC_logo50.png" %}" />
+ <img height="36" src="{% static "images/Virgo_logo50.png" %}" />
+ {% if user and user.username == "chad.hanna@LIGO.ORG" %}
+ <img width="194" height="37" src="{% static "images/PI_Logo-anim.gif" %}" />
+ {% endif %}
+ {% if user and user.username == "kipp.cannon@LIGO.ORG" %}
+ <img width="194" height="37" src="{% static "images/CITA_logo-anim.gif" %}" />
+ {% endif %}
+ </center>
+ </div>
</body>
</html>
diff --git a/gracedb/templates/gracedb/index.html b/gracedb/templates/gracedb/index.html
index b9457ed2746e126af4eed5f1f7d5b190e39fca36..8bc4981ab8e482934a9169b3b96fcf721ebe4528 100644
--- a/gracedb/templates/gracedb/index.html
+++ b/gracedb/templates/gracedb/index.html
@@ -9,6 +9,7 @@
<!-- stuff for the recent events plot -->
+
<style>
body {
font: 12px ;
@@ -37,6 +38,9 @@ body {
</style>
+<div class="row">
+<div class="col-1"></div>
+<div class="col-10">
{% if recent_events != "" %}
<h2>Recent Events</h2>
<div id="recent_events_plot"></div>
@@ -46,17 +50,14 @@ body {
<!-- I find myself needing some more space. -->
<!-- <br/> -->
-<div class="section">
<h5>GraceDB Overview</h5>
- <div class="divider"></div>
+ <hr>
<p>
The gravitational-wave candidate event database (GraceDB) is a service operated by the <a href="https://www.ligo.org/">LIGO Scientific Collaboration</a>. It provides a centralized location for aggregating and retrieving information about candidate gravitational-wave events. GraceDB provides an <a href="{% url "legacy_apiweb:default:root" %}">API</a> for programmatic access, and a <a href="https://ligo-gracedb.readthedocs.io/">client package</a> is available for interacting with the API.
</p>
-</div>
-
-<div class="section">
+ <br>
<h5>Useful information</h5>
- <div class="divider"></div>
+ <hr>
<li>Information about GW alerts and real-time data products is available in the <a href="https://emfollow.docs.ligo.org/userguide/">LIGO/Virgo Public Alert Guide</a>.</li>
<li><a href="https://monitor.ligo.org/ldg">Real-time status of the LIGO Data Grid</a>.</li>
<li>Found a bug? LIGO/Virgo users can report issues on the GraceDB <a href="https://git.ligo.org/lscsoft/gracedb/issues">Gitlab page</a>.</li>
@@ -64,7 +65,8 @@ body {
{% if information %}
{{ information|safe }}
{% endif %}
- <p><b>Server code version: </b> <a href="https://git.ligo.org/lscsoft/gracedb/tree/gracedb-{{server_version}}" style="font-family: 'Courier New'">{{server_version}}</a></p>
+ <br>
+ <p><small><b>Server code version: </b> <a href="https://git.ligo.org/lscsoft/gracedb/tree/gracedb-{{server_version}}" style="font-family: 'Courier New'">{{server_version}}</a></p></small>
</div>
<!--XXX Infrastructure for human signoffs. Hopefully this will not be permanent. -->
@@ -107,6 +109,10 @@ body {
{% endif %}
{% endif %}
+</div>
+<div class="col-1"></div>
+</div>
+
<!-- lots of script for the recent events plot -->
{% if recent_events %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
diff --git a/gracedb/templates/navbar_frag.html b/gracedb/templates/navbar_frag.html
index d098dba68282fe8eab21c2ec1796cd5681141c3a..9229decd62840507ca17a4597ed84f8c7a5fffed 100644
--- a/gracedb/templates/navbar_frag.html
+++ b/gracedb/templates/navbar_frag.html
@@ -1,82 +1,89 @@
-<nav>
- <div class="nav-wrapper blue darken-3" style="padding-left: 15px;">
- {% if user.is_authenticated %}
- <span class="gray-text" style="font-size:8pt" >Authenticated as:</span>
- {% if user.first_name %}
- <span class="gray-text" style="font-size:8pt">{{ user.get_full_name }}</span>
- {% else %}
- <span class="gray-text" style="font-size:8pt">{{ user.username }}</span>
- {% endif %}
- {% else %}
- <span class="gray-text" style="font-size:8pt" >
- Please log in to view full database contents.
- </span>
- {% endif %}
- <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
- <ul class="right hide-on-med-and-down">
- <li id="nav-public" style="font-weight: bold"><a href="{% url "superevents:public-alerts-O3" %}">Public Alerts</a></li>
- <li id="nav-latest"><a href="{% url "latest" %}">Latest</a></li>
- <li id="nav-search"><a href="{% url "mainsearch" %}">Search</a></li>
+{% load static %}
+
+
+ <nav class="navbar navbar-expand-sm navbar-gracedb navbar-dark">
+ <a class="navbar-brand text-white" href="/">
+ <img src="{% static "images/logo.svg" %}" style="width:40px;">
+ GraceDB
+ {% if config_name %}
+ <span class="text-danger">({{ config_name }})</span>
+ {% endif %}
+ </a>
+
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <div class="collapse navbar-collapse" id="collapsibleNavbar">
+
+ <ul class="navbar-nav">
+ <li class="nav-item">
+ <a class="nav-link text-light font-weight-bold" href="{% url "superevents:public-alerts-O3" %}">Public Alerts</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link text-light" href="{% url "latest" %}">Latest</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link text-light" href="{% url "mainsearch" %}">Search</a>
+ </li>
+
{% if user_is_internal %}
- <li id="nav-alerts"><a href="{% url "alerts:index" %}">Alerts</a></li>
- <li id="nav-pipelines"><a href="{% url "manage-pipelines" %}">Pipelines</a></li>
+
+ <li class="nav-item">
+ <a class="nav-link text-light" href="{% url "alerts:index" %}">Alerts</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link text-light" href="{% url "manage-pipelines" %}">Pipelines</a>
+ </li>
+
{% elif user_is_lvem %}
- <li id="nav-password"><a href="{% url "manage-password" %}">Manage Password</a></li>
+ <li class="nav-item">
+ <a class="nav-link text-light" href="{% url "manage-password" %}">Manage Password</a>
+ </li>
+
{% endif %}
- <li id="nav-docs"><a href="{% url "home" %}documentation/">Documentation</a></li>
+
+ <li class="nav-item">
+ <a class="nav-link text-light" href="{% url "home" %}documentation/">Documentation</a>
+ </li>
+
{% if user %}
{% if user.is_superuser %}
- <li id="nav-admin-docs"><a href="{% url "home" %}admin_docs/">Admin Docs</a></li>
+ <li class="nav-item">
+ <a class="nav-link text-light" href="{% url "home" %}admin_docs/">Admin Docs</a>
+ </li>
{% endif %}
{% endif %}
+
{% if user.is_authenticated %}
- <li id="nav-logout"><a href="{% url "logout" %}?next={{ request.path }}">Logout</a></li>
+
+ <li class="nav-item">
+ <a class="nav-link text-light" href="{% url "logout" %}?next={{ request.path }}">Logout</a>
+ </li>
+
{% else %}
- <li id="nav-login"><a href="{% url "login" %}?next={{ request.path }}">Login</a></li>
+ <li class="nav-item">
+ <a class="nav-link text-light" href="{% url "login" %}?next={{ request.path }}">Login</a>
+ </li>
{% endif %}
</ul>
</div>
-</nav>
-
-<ul class="sidenav" id="mobile-demo">
- <li id="nav-public" style="font-weight: bold"><a href="{% url "superevents:public-alerts-O3" %}">Public Alerts</a></li>
- <li id="nav-latest"><a href="{% url "latest" %}">Latest</a></li>
- <li id="nav-search"><a href="{% url "mainsearch" %}">Search</a></li>
- {% if user_is_internal %}
- <li id="nav-alerts"><a href="{% url "alerts:index" %}">Alerts</a></li>
- <li id="nav-pipelines"><a href="{% url "manage-pipelines" %}">Pipelines</a></li>
- {% elif user_is_lvem %}
- <li id="nav-password"><a href="{% url "manage-password" %}">Manage Password</a></li>
- {% endif %}
- <li id="nav-docs"><a href="{% url "home" %}documentation/">Documentation</a></li>
- {% if user %}
- {% if user.is_superuser %}
- <li id="nav-admin-docs"><a href="{% url "home" %}admin_docs/">Admin Docs</a></li>
- {% endif %}
- {% endif %}
- {% if user.is_authenticated %}
- <li id="nav-logout"><a href="{% url "logout" %}?next={{ request.path }}">Logout</a></li>
- {% else %}
- <li id="nav-login"><a href="{% url "login" %}?next={{ request.path }}">Login</a></li>
- {% endif %}
-</ul>
-
-
-<script>
-
-options = {
- edge: 'left',
- draggable: true,
- inDuration: 250,
- outDuration: 200,
- onOpenStart: null,
- onOpenEnd: null,
- onCloseStart: null,
- onCloseEnd: null,
- preventScrolling: true
-};
- document.addEventListener('DOMContentLoaded', function() {
- var elems = document.querySelectorAll('.sidenav');
- var instances = M.Sidenav.init(elems, options);
- });
-</script>
+ </nav>
+
+ <div class="container-fluid navbar-gracedb text-right">
+ <span class="text-muted" style="font-size:8pt">
+ {% if user.is_authenticated %}
+ Authenticated as:
+ {% if user.first_name %}
+ {{ user.get_full_name }}
+ {% else %}
+ {{ user.username }}
+ {% endif %}
+ {% else %}
+ Please log in to view full database contents.
+ </span>
+ {% endif %}
+ </div>