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 @@
"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"
......
gracedb/static/css/override.css
+ 15
− 0
View file @ 83ab6212
......@@ -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;
}
gracedb/templates/base.html
+ 51
− 80
View file @ 83ab6212
......@@ -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 &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>
{% 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>
gracedb/templates/gracedb/index.html
+ 13
− 7
View file @ 83ab6212
......@@ -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>
......
gracedb/templates/navbar_frag.html
+ 77
− 70
View file @ 83ab6212
<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>
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