NCGEARS/cheesy-arena-lite
1
0
Fork 0
mirror of https://github.com/Team254/cheesy-arena-lite.git synced 2026-03-09 21:56:50 -04:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Styled Rankings

Browse Source
This commit is contained in:
Nick Eyre
2014-06-04 23:17:38 -07:00
parent c1a4e4cce4
commit 9fdcac26e9
4 changed files with 138 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
static/css/rankings.css
View File

@@ -3,21 +3,66 @@ Copyright 2014 Team 254. All Rights Reserved.
Author: nick@team254.com (Nick Eyre)
*/
.container {
body {
font-family: 'robotoregular';
position: fixed;
font-size: 2em;
}
#titlebar {
position: fixed;
top: 0;
right: 0;
left: 0;
padding: .2em 1em;
font-size: 2em;
}
#titlebar img {
height: 1em;
position: fixed;
top: .4em;
right: 1em;
}
#header {
position: fixed;
left: 0;
top: 4em;
width: 100%;
background-color: #0070ff;
color: white;
text-align: center;
}
#container {
position: fixed;
top: 5.9em;
bottom: 1.8em;
right: 0;
left: 0;
overflow-y: scroll;
text-align: right;
}
::-webkit-scrollbar {
display: none;
}
td {
padding: 0.2em 1em;
}
.left {
text-align: left;
}
#container tr:nth-child(even) {
background-color: #ddd;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0;
background: white;
padding: 0.2em 1em;
border-top: 1px solid black;
}
.container.black {
background: black;
color: white;
}
.jumbo {
line-height: 0;
width: 100%;
height: 100%;
#footer .right {
float: right;
}

BIN
static/img/eventlogo-flat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

38
static/js/rankings.js
View File

@@ -8,12 +8,15 @@ var app = angular
app.controller('RankingsController', ['$scope', 'Rankings', '$interval', function($scope, Rankings, $interval){
$scope.date = new Date();
// Load Rankings
init();
function init(){
Rankings.get().then(function(data){
$scope.rankingsOld = data;
$scope.rankingsNew = data;
setTimeout(equalize, 0);
setTimeout(detectListSize, 0);
});
}
@@ -21,7 +24,7 @@ app.controller('RankingsController', ['$scope', 'Rankings', '$interval', functio
// Detect if List is Long Enough to Require Scrolling
function detectListSize(){
$('.new').hide();
if($(document).height() > $(window).height()){
if($('#container table').height() > $('#container').height()){
$('.new').show();
setTimeout(scrollToBottom, 0);
}
@@ -29,10 +32,11 @@ app.controller('RankingsController', ['$scope', 'Rankings', '$interval', functio
// Scroll to Bottom of List
function scrollToBottom(){
$('body').animate({scrollTop: $('.old').first().offset().top}, 0);
$scope.interval = $interval(loadNewData, 10);
var time = 500 * $scope.rankingsOld.length;
$('body').animate({scrollTop: $('.new').first().offset().top}, time, 'linear', scrollComplete);
var offset = $('#container').offset().top;
$('#container').animate({scrollTop: $('.old').first().offset().top - offset}, 0);
// $scope.interval = $interval(loadNewData, 10);
var time = 1000 * $scope.rankingsOld.length;
$('#container').animate({scrollTop: $('.new').first().offset().top - offset}, time, 'linear', scrollComplete);
}
// Go Back to Top
@@ -50,10 +54,30 @@ app.controller('RankingsController', ['$scope', 'Rankings', '$interval', functio
$scope.rankingsOld = $scope.rankingsNew;
$scope.rankingsNew = data;
$interval.cancel($scope.interval);
setTimeout(equalize, 0);
});
}
}
// Balance Column Widths
function equalize(){
var width = $('#container table').width();
var count = $('#container tr').first().children('td').length;
var offset = ($(window).width() - width) / (count + 1);
var widths = [];
$('#container tr').first().children('td').each(function(){
var width = $(this).width()+offset;
$(this).width(width);
widths.push(width);
});
$('#header').children('td').each(function(index){
$(this).width(widths[index]);
});
$('#container tr.new').children('td').each(function(index){
$(this).width(widths[index]);
});
}
}]);
app.factory('Rankings', ['$http', '$log', '$q', function($http, $log, $q){
@@ -62,7 +86,7 @@ app.factory('Rankings', ['$http', '$log', '$q', function($http, $log, $q){
var deferred = $q.defer();
$http.get('/reports/json/rankings').
success(function(data, status, headers, config) {
data[0]['TeamId'] = jQuery.now();
// data[0]['TeamId'] = jQuery.now();
deferred.resolve(data);
}).
error(function(data, status, headers, config) {
@@ -71,4 +95,4 @@ app.factory('Rankings', ['$http', '$log', '$q', function($http, $log, $q){
return deferred.promise;
}
};
}]);
}]);

61
static/rankings.html
View File

@@ -12,22 +12,65 @@
<title>Cheesy Arena - Rankings</title>
<meta name="generator" content="Cheesy Arena" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/rankings.css"/>
<link rel="stylesheet" href="css/fonts/roboto-regular/stylesheet.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="/static/css/fonts/roboto-regular/stylesheet.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="/static/css/rankings.css"/>
</head>
<body ng-controller="RankingsController">
<div id='titlebar'>
Event Rankings
<img src='/static/img/eventlogo-flat.png'>
</div>
<table>
<tr ng-repeat="team in rankingsOld" class='old'>
<td>{{team.Rank}}</td>
<td>{{team.TeamId}}</td>
</tr>
<tr ng-repeat="team in rankingsNew" class='new'>
<td>{{team.Rank}}</td>
<td>{{team.TeamId}}</td>
<tr id='header'>
<td class='rank'>Rank</td>
<td class='team'></td>
<td class='team'>Team</td>
<td class='qs'>Record</td>
<td class='qs'>QS</td>
<td class='assist'>Assist</td>
<td class='tc'>Auto</td>
<td class='tc'>T/C</td>
<td class='tc'>G Foul</td>
</tr>
</table>
<div id='container'>
<table>
<tr ng-repeat="team in rankingsOld" class='old'>
<td>{{team.Rank}}</td>
<td>{{team.TeamId}}</td>
<td class='left'>The Cheesy Poofs</td>
<td>{{team.Wins}} - {{team.Losses}} - {{team.Ties}} ({{team.Played}})</td>
<td>{{team.QualificationScore}}</td>
<td>{{team.AssistPoints}}</td>
<td>{{team.AutoPoints}}</td>
<td>{{team.TrussCatchPoints}}</td>
<td>{{team.GoalFoulPoints}}</td>
</tr>
</table>
<br /><hr>
<table>
<tr ng-repeat="team in rankingsNew" class='new'>
<td>{{team.Rank}}</td>
<td>{{team.TeamId}}</td>
<td class='left'>The Cheesy Poofs</td>
<td>{{team.Wins}} - {{team.Losses}} - {{team.Ties}} ({{team.Played}})</td>
<td>{{team.QualificationScore}}</td>
<td>{{team.AssistPoints}}</td>
<td>{{team.AutoPoints}}</td>
<td>{{team.TrussCatchPoints}}</td>
<td>{{team.GoalFoulPoints}}</td>
</tr>
</table>
</div>
<div id='footer'>
<span class='right'>As of Match 32</span>
</div>
<script src="/static/lib/jquery.min.js"></script>
<script src="/static/lib/angular.min.js"></script>
<script src="/static/js/rankings.js"></script>