Skip to content
Snippets Groups Projects
Commit 83ab6212 authored by Alexander Pace's avatar Alexander Pace
Browse files

New-new look 

Did some work to redo the front page with bootstrap css instead of
materialize. Generally more compatible.
parent f743a166
No related branches found
No related tags found
1 merge request!46Refreshed look and feel
Pipeline #97980 passed
Stage: test
Stage: branch
Hide whitespace changes
Inline Side-by-side
bower.json
+ 2
− 1
View file @ 83ab6212
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
"moment-timezone": "0.5.0", "moment-timezone": "0.5.0",
"moment": "2.11.1", "moment": "2.11.1",
"tablesaw": "3.1.2", "tablesaw": "3.1.2",
"materialize": "1.0.0" "materialize": "1.0.0",
"bootstrap": "4.0.0"
}, },
"resolutions": { "resolutions": {
"webcomponentsjs": "^0.6.0" "webcomponentsjs": "^0.6.0"
......
gracedb/static/css/override.css
+ 15
− 0
View file @ 83ab6212
...@@ -4,3 +4,18 @@ ...@@ -4,3 +4,18 @@
.nano-image { .nano-image {
background-color: white; 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;
}
gracedb/templates/base.html
+ 51
− 80
View file @ 83ab6212
...@@ -4,11 +4,12 @@ ...@@ -4,11 +4,12 @@
<head> <head>
{% load static %} {% load static %}
<!--Import bootstrap and custom colors-->
<!--Import Google Icon Font--> <link type="text/css" rel="stylesheet" href="{% static "bootstrap/dist/css/bootstrap.min.css" %}" media="screen,projection"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="{% static "css/override.css" %}" />
<!--Import materialize.css--> <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link type="text/css" rel="stylesheet" href="{% static "css/materialize.min.css" %}" media="screen,projection"/> <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--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
...@@ -18,88 +19,58 @@ ...@@ -18,88 +19,58 @@
{# remove requests for favicon #} {# remove requests for favicon #}
<link rel="icon" href="data:,"> <link rel="icon" href="data:,">
<title>GraceDB | {% block title %}{% endblock %}</title> <title>GraceDB | {% block title %}{% endblock %}</title>
<!-- START TESTING --> <!-- START TESTING -->
<script type="text/javascript"> <script type="text/javascript">
function changeTime(obj, label) { function changeTime(obj, label) {
//var timetype = obj.get("value"); //var timetype = obj.get("value");
var timetype = obj.value; var timetype = obj.value;
if (timetype=="") { return; } if (timetype=="") { return; }
var times = document.getElementsByName("time-"+label); var times = document.getElementsByName("time-"+label);
for (i=0; i<times.length; i++) { for (i=0; i<times.length; i++) {
newtime = times[i].getAttribute(timetype); newtime = times[i].getAttribute(timetype);
times[i].innerHTML = newtime; times[i].innerHTML = newtime;
} }
} }
</script> </script>
{% endblock %} <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- END TESTING --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
{% block jscript %}{% endblock %} <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
{% endblock %}
<!-- override other CSS templates as necessary <!-- END TESTING -->
<link rel="stylesheet" href="{% static "css/override.css" %}" />--> {% block jscript %}
{% endblock %}
</head>
<script src="{% static "js/materialize.js" %}"></script>
<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 &mdash; </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> </head>
{% block nav %}
{% include "navbar_frag.html" %}
{% endblock %}
<h2>{% block heading %}Title{% endblock %}</h2>
{% block content %}{% endblock %}
<body id="{% block pageid %}{% endblock %}"{% block bodyattrs %}{% endblock %}>
<div class="divider"></div>
<br>
</div>
<div id=footer" class="container"> {% block nav %}
<center> {% include "navbar_frag.html" %}
<img height="36" src="{% static "images/kagra.png" %}" /> {% endblock %}
<img height="36" src="{% static "images/ligo-blue.gif" %}" />
<img height="36" src="{% static "images/LSC_logo50.png" %}" /> <div class="container-fluid">
<img height="36" src="{% static "images/Virgo_logo50.png" %}" /> <h2>{% block heading %}Title{% endblock %}</h2>
{% if user and user.username == "chad.hanna@LIGO.ORG" %} {% block content %}{% endblock %}
<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" %}" /> <center>
{% endif %} <img height="36" src="{% static "images/kagra.png" %}" />
</center> <img height="36" src="{% static "images/ligo-blue.gif" %}" />
</div> <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> </body>
</html> </html>
gracedb/templates/gracedb/index.html
+ 13
− 7
View file @ 83ab6212
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
<!-- stuff for the recent events plot --> <!-- stuff for the recent events plot -->
<style> <style>
body { body {
font: 12px ; font: 12px ;
...@@ -37,6 +38,9 @@ body { ...@@ -37,6 +38,9 @@ body {
</style> </style>
<div class="row">
<div class="col-1"></div>
<div class="col-10">
{% if recent_events != "" %} {% if recent_events != "" %}
<h2>Recent Events</h2> <h2>Recent Events</h2>
<div id="recent_events_plot"></div> <div id="recent_events_plot"></div>
...@@ -46,17 +50,14 @@ body { ...@@ -46,17 +50,14 @@ body {
<!-- I find myself needing some more space. --> <!-- I find myself needing some more space. -->
<!-- <br/> --> <!-- <br/> -->
<div class="section">
<h5>GraceDB Overview</h5> <h5>GraceDB Overview</h5>
<div class="divider"></div> <hr>
<p> <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. 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> </p>
</div> <br>
<div class="section">
<h5>Useful information</h5> <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>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><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> <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 { ...@@ -64,7 +65,8 @@ body {
{% if information %} {% if information %}
{{ information|safe }} {{ information|safe }}
{% endif %} {% 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> </div>
<!--XXX Infrastructure for human signoffs. Hopefully this will not be permanent. --> <!--XXX Infrastructure for human signoffs. Hopefully this will not be permanent. -->
...@@ -107,6 +109,10 @@ body { ...@@ -107,6 +109,10 @@ body {
{% endif %} {% endif %}
{% endif %} {% endif %}
</div>
<div class="col-1"></div>
</div>
<!-- lots of script for the recent events plot --> <!-- lots of script for the recent events plot -->
{% if recent_events %} {% if recent_events %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
......
gracedb/templates/navbar_frag.html
+ 77
− 70
View file @ 83ab6212
<nav> {% load static %}
<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> <nav class="navbar navbar-expand-sm navbar-gracedb navbar-dark">
{% if user.first_name %} <a class="navbar-brand text-white" href="/">
<span class="gray-text" style="font-size:8pt">{{ user.get_full_name }}</span> <img src="{% static "images/logo.svg" %}" style="width:40px;">
{% else %} GraceDB
<span class="gray-text" style="font-size:8pt">{{ user.username }}</span> {% if config_name %}
{% endif %} <span class="text-danger">({{ config_name }})</span>
{% else %} {% endif %}
<span class="gray-text" style="font-size:8pt" > </a>
Please log in to view full database contents.
</span> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
{% endif %} <span class="navbar-toggler-icon"></span>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a> </button>
<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> <div class="collapse navbar-collapse" id="collapsibleNavbar">
<li id="nav-latest"><a href="{% url "latest" %}">Latest</a></li>
<li id="nav-search"><a href="{% url "mainsearch" %}">Search</a></li> <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 %} {% 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 %} {% 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 %} {% 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 %}
{% if user.is_superuser %} {% 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 %}
{% endif %} {% endif %}
{% if user.is_authenticated %} {% 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 %} {% 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 %} {% endif %}
</ul> </ul>
</div> </div>
</nav> </nav>
<ul class="sidenav" id="mobile-demo"> <div class="container-fluid navbar-gracedb text-right">
<li id="nav-public" style="font-weight: bold"><a href="{% url "superevents:public-alerts-O3" %}">Public Alerts</a></li> <span class="text-muted" style="font-size:8pt">
<li id="nav-latest"><a href="{% url "latest" %}">Latest</a></li> {% if user.is_authenticated %}
<li id="nav-search"><a href="{% url "mainsearch" %}">Search</a></li> Authenticated as:
{% if user_is_internal %} {% if user.first_name %}
<li id="nav-alerts"><a href="{% url "alerts:index" %}">Alerts</a></li> {{ user.get_full_name }}
<li id="nav-pipelines"><a href="{% url "manage-pipelines" %}">Pipelines</a></li> {% else %}
{% elif user_is_lvem %} {{ user.username }}
<li id="nav-password"><a href="{% url "manage-password" %}">Manage Password</a></li> {% endif %}
{% endif %} {% else %}
<li id="nav-docs"><a href="{% url "home" %}documentation/">Documentation</a></li> Please log in to view full database contents.
{% if user %} </span>
{% if user.is_superuser %} {% endif %}
<li id="nav-admin-docs"><a href="{% url "home" %}admin_docs/">Admin Docs</a></li> </div>
{% 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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment