Remove spinners if there is no data, push footer down to the bottom (#396)

* Remove spinners if there is no data
* Push footer down to the bottom properly in the admin panel

CTFd/themes/admin/static/css/style.css

@@ -106,12 +106,17 @@ table{
     line-height: 66px;
 }
 
-.spinner {
+.fa.spinner {
     margin-top: 225px;
     text-align: center;
     opacity: 0.5;
 }
 
+.spinner-error {
+    text-align: center;
+    opacity: 0.5;
+}
+
 #score-graph{
     height: 450px;
     display: block;
@@ -495,7 +500,7 @@ table{
 .footer {
     position: absolute;
     left: 0;
-    padding: 0;
+    bottom: 0;
     padding: 0;
     margin: 0;
     width: 100%;

CTFd/themes/admin/templates/base.html

@@ -66,9 +66,12 @@
 		<div class="container">
 				{% block content %}
 				{% endblock %}
-				<div class="navbar navbar-bottom footer">
-						<p class="text-muted text-center"><a style="text-decoration:none;" href="https://ctfd.io"><sub>Powered by CTFd</sub></p>
 		</div>
+
+		<div class="navbar navbar-bottom footer">
+			<p class="text-muted text-center">
+				<a style="text-decoration:none;" href="https://ctfd.io"><sub>Powered by CTFd</sub></a>
+			</p>
 		</div>
 	</div>
 		<script src="{{ request.script_root }}/themes/admin/static/js/vendor/jquery.min.js"></script>

CTFd/themes/admin/templates/team.html

@@ -89,6 +89,7 @@
 		</h2>
 
 
+		{% if solves %}
 		<div id="keys-pie-graph">
 			<div class="text-center">
 				<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw spinner"></i>
@@ -104,6 +105,11 @@
 				<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw spinner"></i>
 			</div>
 		</div>
+		{% else %}
+		<div class="row">
+			<div class="text-center"><h3 class="spinner-error">No solves yet</h3></div>
+		</div>
+		{% endif %}
 
 		<table class="table table-striped">
 				<h3>IP Addresses</h3>

CTFd/themes/original/static/css/style.css

@@ -116,12 +116,18 @@ table{
     clear: both;
 }
 
-.spinner {
+.fa.spinner {
     margin-top: 225px;
     text-align: center;
     opacity: 0.5;
 }
 
+.spinner-error {
+    padding-top: 210px;
+    text-align: center;
+    opacity: 0.5;
+}
+
 #keys-pie-graph{
     width: 50%;
     float: left;

CTFd/themes/original/static/js/scoreboard.js

@@ -1,11 +1,16 @@
 function updatescores () {
   $.get(script_root + '/scores', function( data ) {
-    teams = $.parseJSON(JSON.stringify(data));
+    var teams = $.parseJSON(JSON.stringify(data));
     $('#scoreboard > tbody').empty()
     for (var i = 0; i < teams['standings'].length; i++) {
-      row = "<tr><td>{0}</td><td><a href='/team/{1}'>{2}</a></td><td>{3}</td></tr>".format(i+1, teams['standings'][i].id, htmlentities(teams['standings'][i].team), teams['standings'][i].score)
+      var row = "<tr><td>{0}</td><td><a href='/team/{1}'>{2}</a></td><td>{3}</td></tr>".format(
+          i+1,
+          teams['standings'][i].id,
+          htmlentities(teams['standings'][i].team),
+          teams['standings'][i].score
+      );
       $('#scoreboard > tbody').append(row)
-    };
+    }
   });
 }
 
@@ -18,15 +23,17 @@ function cumulativesum (arr) {
 }
 
 function UTCtoDate(utc){
-    var d = new Date(0)
-    d.setUTCSeconds(utc)
+    var d = new Date(0);
+    d.setUTCSeconds(utc);
     return d;
 }
+
 function scoregraph () {
     $.get(script_root + '/top/10', function( data ) {
         var places = $.parseJSON(JSON.stringify(data));
         places = places['places'];
-        if (Object.keys(places).length == 0 ){
+        if (Object.keys(places).length === 0 ){
+            $('#score-graph').html('<div class="text-center"><h3 class="spinner-error">No solves yet</h3></div>'); // Replace spinner
             return;
         }
 
@@ -46,7 +53,7 @@ function scoregraph () {
                 y: team_score,
                 mode: 'lines+markers',
                 name: places[teams[i]]['name']
-            }
+            };
             traces.push(trace);
         }
 
@@ -65,7 +72,7 @@ function scoregraph () {
         };
         console.log(traces);
 
-        $('#score-graph').empty() // Remove spinners
+        $('#score-graph').empty(); // Remove spinners
         Plotly.newPlot('score-graph', traces, layout);
     });
 }

CTFd/themes/original/static/js/team.js

@@ -22,15 +22,16 @@ function cumulativesum (arr) {
 }
 
 function scoregraph() {
-    var times = []
-    var scores = []
-    var teamname = $('#team-id').text()
+    var times = [];
+    var scores = [];
+    var teamname = $('#team-id').text();
     $.get(script_root + '/solves/' + teamid(), function (data) {
         var solves = $.parseJSON(JSON.stringify(data));
         solves = solves['solves'];
 
-        if (solves.length == 0)
+        if (solves.length == 0) {
             return;
+        }
 
         for (var i = 0; i < solves.length; i++) {
             var date = moment(solves[i].time * 1000);

CTFd/themes/original/templates/scoreboard.html

@@ -32,6 +32,7 @@
 	</div>
 	<br>
 
+	{% if teams %}
 	<table id="scoreboard" class="table table-striped">
 		<thead>
 			<tr>
@@ -50,6 +51,7 @@
 		</tbody>
 	</table>
 	{% endif %}
+	{% endif %}
 </div>
 {% endblock %}
 

CTFd/themes/original/templates/team.html

@@ -41,6 +41,7 @@
 
 	<br>
 
+	{% if solves %}
 	<div id="keys-pie-graph">
 		<div class="text-center">
 			<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw spinner"></i>
@@ -104,6 +105,9 @@
 			</tbody>
 		</table>
 	</div>
+	{% else %}
+		<div class="text-center"><h3 class="spinner-error">No solves yet</h3></div>
+	{% endif %}
 	{% endif %}
 </div>
 {% endblock %}
@@ -111,5 +115,7 @@
 {% block scripts %}
 	<script src="{{ request.script_root }}/themes/{{ ctf_theme() }}/static/js/vendor/plotly.min.js"></script>
 	<script src="{{ request.script_root }}/themes/{{ ctf_theme() }}/static/js/utils.js"></script>
+	{% if solves %}
 	<script src="{{ request.script_root }}/themes/{{ ctf_theme() }}/static/js/team.js"></script>
+	{% endif %}
 {% endblock %}