Commit e6966b32 authored by Alexander Pace's avatar Alexander Pace
Browse files

Superevent visual changes

Lots of visual improvements to superevents. Need to port to the public view.
parent b099f6e3
Pipeline #170875 passed with stages
in 16 minutes and 54 seconds
......@@ -11,7 +11,7 @@
"tablesaw": "3.1.2",
"materialize": "1.0.0",
"bootstrap": "4.1.0",
"datatables.net": "^1.10.20",
"datatables.net": "^1.10.22",
"datatables.net-bs4": "^3.2.2",
"ekko-lightbox": "^5.3.0",
"trumbowyg": "2.21.0"
......
......@@ -30,7 +30,7 @@ INFO_BANNER_ENABLED = False
INFO_BANNER_MESSAGE = "TEST MESSAGE"
# Version ---------------------------------------------------------------------
PROJECT_VERSION = '2.10.0-1'
PROJECT_VERSION = '2.10.0-2'
# Unauthenticated access ------------------------------------------------------
# This variable should eventually control whether unauthenticated access is
......
......@@ -66,14 +66,29 @@ embedded_button_template = """<button class="btn btn-secondary btn-sm"
Collapse {}
</button>
"""
#collapsed_card_template = """
#<p><div class="collapse show" id="{}">
# <div class="card card-body">
# <div class="card-header log-card-header text-left">
# <h3>{}</h3>
# </div>
# {}
# </div>
# <br>
# {}
#</div></p>
#"""
collapsed_card_template = """
<p><div class="collapse show" id="{}">
<div class="card card-body">
<div class="card-header log-card-header text-left">
<h6>{}</h6>
</div>
{}
</div>
<table class="table-condensed table-resp-gracedb shadow p-3 mb-5 rounded">
<thead>
<tr><th colspan="2"> <h3>{}</h3> </th></tr>
</thead>
<tbody>
<tr><td>{}<td></tr>
</tbody>
</table>
<br>
{}
</div></p>
......@@ -84,11 +99,11 @@ img_style_template = """max-height= 250px;
image_card_div = """
<div class="card my-3 log-comment-card" style="min-width:250px;">
<div class="card-header log-comment-card-header text-left">
<div class="card-header log-comment-card-header">
<h7>Log Image</h7>
</div>
<a href="{}" data-toggle="lightbox" data-type="image" data-gallery="{}">
<img class="card-img-top img-fluid" src="{}" style="width:auto;"/>
<center><img class="card-img-top img-fluid" src="{}" style="width:auto;"/></center>
</a>
<div class="card-body">
<hr width="50%"/>
......
......@@ -15,6 +15,57 @@ body {
border-color: #FFFFFF;
}
body h2 {
font-weight: 100;
padding-top: 95px;
margin-top: -95px;
}
body h3 {
font-weight: 100;
padding-top: 95px;
margin-top: -95px;
}
.table-resp-gracedb {
/*margin: auto;*/
width: 100%;
}
.table-resp-gracedb > thead {
background-color: #5C7691;
padding: .6rem .8rem;
font-weight: 100;
color: white;
}
.table-hover thead tr:hover {
color:white;
background-color: rgba(0,0,0,0);
}
.table-resp-gracedb th {
padding: .6rem .8rem;
font-weight: 100;
}
.table-resp-gracedb td {
padding: .6rem .8rem;
}
.table-resp-gracedb tbody tr {
border-top: 1px solid #d9e0e7;
}
.table-resp-gracedb h3 {
font-size: 1.25em;
margin-bottom: 0.0rem;
color: white;
font-weight: 100;
padding-top: 95px;
margin-top: -95px;
}
.table-latest {
border-collapse: separate;
border-spacing: 0px;
......@@ -95,14 +146,14 @@ body {
}
.btn-header-dropdown {
color: #fff;
font-weight:inherit;
color: inherit;
font-size:inherit;
padding-left:2px
}
.btn-header-dropdown:hover, .btn-header-dropdown:focus {
color: #fff;
border-color:whitesmoke;
color: inherit;
border-color:#6b6b6b;
}
.header-row {
......@@ -135,87 +186,89 @@ body {
min-height: 150px;
}
/*
div[id^="gdb-table-"] {
overflow: visible;
}
nav[data-toggle="toc"] {
top: 42px;
}
/* small screens */
@media (max-width: 768px) {
/* override stickyness so that the navigation does not follow scrolling */
nav[data-toggle="toc"] {
margin-bottom: 42px;
position: static;
}
/* PICK ONE */
/* don't expand nested items, which pushes down the rest of the page when navigating */
/*
nav[data-toggle="toc"] .nav .active .nav {
display: none;
}
*/
/* alternatively, if you *do* want the second-level navigation to be shown (as seen on this page on mobile), use this */
nav[data-toggle='toc'] .nav .nav {
display: block;
}
}
@media (max-width: 1045px) {
.table-responsive .dropdown-menu {
position: static !important;
}
}
@media (min-width: 1046px) {
.table-responsive {
overflow: inherit;
}
}
@media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
div[id^="gdb-table-"] table,
div[id^="gdb-table-"] thead,
div[id^="gdb-table-"] tbody,
div[id^="gdb-table-"] th,
div[id^="gdb-table-"] th,
div[id^="gdb-table-"] td,
div[id^="gdb-table-"] tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
div[id^="gdb-table-"] thead .header-row {
position: absolute;
top: -9999px;
left: -9999px;
}
/* Format the header that serves as the banner above the table */
div[id^="gdb-table-"] .banner-row {
border: none;
padding-left: 10px;
border-bottom: 0px solid #eee;
position: relative;
white-space: normal;
text-align: left;
color: white;
border-radius: 10px 10px 0px 0px;
}
div[id^="gdb-table-"] tr { border: 0px solid #ccc; }
div[id^="gdb-table-"] .collapsed-header {
text-align:center;
font-size:larger;
font-weight:bold;
margin:5px;
text-decoration: underline;}
div[id^="gdb-table-"] td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 35%;
white-space: normal;
text-align:left;
}
div[id^="gdb-table-"] td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
div[id^="gdb-table-"] td:before { content: attr(data-title); }
}
/* spinner stuff */
.lds-ellipsis {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ellipsis div {
position: absolute;
top: 0px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #001D46;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
div.dataTables_processing {
z-index: 1;
}
/* end spinner stuff */
......@@ -11,13 +11,6 @@
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<link type="text/css" rel="stylesheet" href="{% static "/ekko-lightbox/dist/ekko-lightbox.css" %}" />
<link rel="stylesheet" href="{% static "trumbowyg/dist/ui/trumbowyg.min.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">
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Alegreya:700" rel="stylesheet" type="text/css" />
<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"/>
......@@ -39,11 +32,6 @@
}
</script>
<!--
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></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/jquery.form/4.3.0/jquery.form.js"></script>
......@@ -51,6 +39,13 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Trying out the TOC stuff -->
<link rel="stylesheet"
href="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.css"/>
<!-- add after bootstrap.min.js -->
<script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.js"></script>
<!--ending the TOC stuff -->
<script src="{% static "ekko-lightbox/dist/ekko-lightbox.js" %}"></script>
<!-- lightbox script --->
<script type="text/javascript">
......@@ -79,14 +74,14 @@
</head>
<body id="{% block pageid %}{% endblock %}"{% block bodyattrs %}{% endblock %}>
<body data-spy="scroll" data-target="#toc" id="{% block pageid %}{% endblock %}"{% block bodyattrs %}{% endblock %}>
{% block nav %}
{% include "navbar_frag.html" %}
{% endblock %}
<div class="container-fluid">
<div class="container-fluid" style="padding-top: 85px">
</br>
......@@ -100,28 +95,27 @@
</center>
{% endif %}
<h2>{% block heading %}Title{% endblock %}</h2>
{% block content %}{% endblock %}
<div class="row">
</div>
<div class="row my-5">
<div class="col align-self-center">
<center>
<img height="36" src="{% static "images/nsf_4-color_bitmap_logo.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" %}" />
<img height="36" src="{% static "images/kagra.png" %}" />
<img height="45" src="{% static "images/nsf_4-color_bitmap_logo.png" %}" />
<img height="45" src="{% static "images/ligo-blue.gif" %}" />
<img height="45" src="{% static "images/LSC_logo50.png" %}" />
<img height="45" src="{% static "images/Virgo_logo50.png" %}" />
<img height="45" src="{% static "images/kagra.png" %}" />
{% if user and user.username == "chad.hanna@LIGO.ORG" %}
<img width="194" height="37" src="{% static "images/PI_Logo-anim.gif" %}" />
<img height="45" 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" %}" />
<img height="45" src="{% static "images/utokyo2.gif" %}" />
{% endif %}
</center>
</div>
</div>
</div>
</body>
......
This diff is collapsed.
......@@ -5,12 +5,12 @@
{# Analysis-specific attributes for a cWB event#}
{% block analysis_specific %}
<div class="row my-3 justify-content-center">
<div class="col">
<div id="gdb-table-cwb" class="table-responsive">
<table class="table-basic-info table-condensed my-1">
<div class="col-md-10">
<div id="gdb-table-cwb">
<table class="table-hover table-condensed table-resp-gracedb shadow p-3 mb-5 rounded">
<thead>
<tr>
<th colspan="23" class="banner-row" data-title="">CWB Info</th>
<th colspan="3">CWB Info</th>
</tr>
</thead>
......@@ -20,26 +20,21 @@
<!-- Note: commenting out ifos so that we'll have a multiple of three -->
<!-- attributes. If you want, you can uncomment and re-introduce the -->
<!-- two funny little padding rows down below. Or not. -->
<!-- <tr> <th> ifos </th> <td> {{object.ifos}} </td> </tr> -->
<tr> <th> ifos </th> <td> {{object.ifos}} </td> </tr>
<tr> <th> start_time </th> <td> {{object.start_time}} </td> </tr>
<tr> <th> start_time_ns </th> <td> {{object.start_time_ns}} </td> </tr>
<tr> <th> duration </th> <td> {{object.duration|scientific}} </td> </tr>
<tr> <th> peak_time </th> <td> {{object.peak_time}} </td> </tr>
<tr> <th> peak_time_ns </th> <td> {{object.peak_time_ns}} </td> </tr>
<tr> <th> central_freq </th> <td> {{object.central_freq|floatformat:"-4"}} </td> </tr>
<tr> <th> bandwidth </th> <td> {{object.bandwidth|floatformat:"-4"}} </td> </tr>
</tbody></table>
</td>
<td> <table class="event"> <tbody>
<tr> <th> central_freq </th> <td> {{object.central_freq|floatformat:"-4"}} </td> </tr>
<tr> <th> bandwidth </th> <td> {{object.bandwidth|floatformat:"-4"}} </td> </tr>
<tr> <th> amplitude </th> <td> {{object.amplitude|scientific}} </td> </tr>
<tr> <th> snr </th> <td> {{object.snr|floatformat:"-4"}} </td> </tr>
<tr> <th> confidence </th> <td> {{object.confidence|scientific}} </td> </tr>
<!-- <tr> <th> <div style="min-height:16px"> </div></th> <td> </td> </tr> -->
</tbody></table>
</td>
<td> <table class="event"> <tbody>
<tr> <th> false_alarm_rate </th> <td> {{object.false_alarm_rate|scientific}} </td> </tr>
<tr> <th> ligo_axis_ra </th> <td> {{object.ligo_axis_ra|floatformat:"-4"}} </td> </tr>
<tr> <th> ligo_axis_dec </th> <td> {{object.ligo_axis_dec|floatformat:"-4"}} </td> </tr>
......
......@@ -3,139 +3,165 @@
{% block basic_info %}
<div class="row my-3 justify-content-center">
<div class="col">
<div id="gdb-table-basic-grb" class="table-responsive">
<table class="table-basic-info table-condensed my-1">
<thead>
<tr>
<th colspan="23" class="banner-row">Basic Event Information</th>
</tr>
<div class="col-md-10">
<div id="gdb-table-basic-grb">
<table class="table-hover table-condensed table-resp-gracedb shadow p-3 mb-5 rounded" id="full_event_log">
<thead>
<tr>
<th colspan="8"><h3>Basic Event Information</h3></th>
</tr>
</thead>
<tbody>
<tr class="header-row">
<th>UID</th>
<th>Labels</th>
<th>Group</th>
<th>Pipeline</th>
<th>Search</th>
<th>
{{ "gps"|timeselect:"gps" }}
</th>
<th>Links</th>
<th>
{{ "submitted"|timeselect:"utc" }}
</th>
</tr>
</thead>
<tr>
<td>UID</td>
<td data-title="UID">{{ object.graceid }}</td>
</tr>
<tr>
<td>Labels</td>
<td data-title="Labels">
{% if object.labelling_set.all %}
{% for labelling in object.labelling_set.all %}
<span style="color: {{labelling.label.defaultColor}};" class="label"
data-toggle="tooltip"
data-placement="top"
data-html="true"
title="<em>{{labelling.label.description}}</em><br>
<b>Added by:</b> {{labelling.creator.get_full_name}}<br>
<b>Added:</b> {{labelling.created}}">
{{ labelling.label.name }}</span>
{% endfor %}
{% else %}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
{% endif %}
</td>
</tr>
<tr>
<td>Group</td>
<td data-title="Group">{{ object.group.name }} </td>
</tr>
<tr>
<td>Pipeline</td>
<td data-title="Pipeline">{{ object.pipeline.name }} </td>
</tr>
<tr>
<td>Search</td>
<td data-title="Search">{{ object.search.name }} </td>
</tr>
<tr>
<td>
{{ "gps"|timeselect:"gps" }}
</td>
<td data-title="Event Time">{% if object.gpstime%}
<!-- <span title="{{ object.gpstime|gpsdate }}">{{ object.gpstime }}</span> -->
{{ object.gpstime|multiTime:"gps" }}
{% endif %}</td>
</tr>
<tr>
<td>Links</td>
<td data-title="Links"><a href="{{ object.weburl }}">Data</a></td>
</tr>
<tr>
<td>
{{ "submitted"|timeselect:"utc" }}
</td>
<td data-title="Submitted">{{ object.created|multiTime:"submitted" }}</td>
</tr>
</tbody>
<tr>
<td data-title="UID">{{ object.graceid }}</td>
<td data-title="Labels">
{% if object.labelling_set.all %}
{% for labelling in object.labelling_set.all %}
<span style="color: {{labelling.label.defaultColor}};" class="label"
data-toggle="tooltip"
data-placement="top"
data-html="true"
title="<em>{{labelling.label.description}}</em><br>
<b>Added by:</b> {{labelling.creator.get_full_name}}<br>
<b>Added:</b> {{labelling.created}}">
{{ labelling.label.name }}</span>
{% endfor %}
{% else %}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
{% endif %}
</td>
<td data-title="Group">{{ object.group.name }} </td>
<td data-title="Pipeline">{{ object.pipeline.name }} </td>
<td data-title="Search">{{ object.search.name }} </td>
<td data-title="Event Time">{% if object.gpstime%}
<!-- <span title="{{ object.gpstime|gpsdate }}">{{ object.gpstime }}</span> -->
{{ object.gpstime|multiTime:"gps" }}
{% endif %}</td>
<td data-title="Links"><a href="{{ object.weburl }}">Data</a></td>
<td data-title="Submitted">{{ object.created|multiTime:"submitted" }}</td>
</tr>
</table>
</div>
</div>
</table>
</div>
</div>
</div>
{% endblock %}
{% block analysis_specific %}
{% if object.grbevent %}
<div class="row my-3 justify-content-center">
<div class="col">
<div id="grb-info" class="table-responsive">
<table class="table-basic-info table-condensed my-1">
<thead>
<tr>
<th colspan="23" class="banner-row">GRB Info</th>
</tr>
</thead>
<tr><th>IVORN</th><td colspan="2">{{object.ivorn}}</td></tr>
<tr><th>Author</th><td colspan="2">{{object.author_shortname}}</td></tr>
<tr><th>Author IVORN</th><td colspan="2">{{object.author_ivorn}}</td></tr>