clean up kill page

7 files changed, 200 insertions, 102 deletions

diff --git a/web/static/css/base.ccss b/web/static/css/base.ccss
index 9419e3f..19aa187 100644
--- a/web/static/css/base.ccss
+++ b/web/static/css/base.ccss
@@ -1,30 +1,35 @@
 *:
-	box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
+	box-sizing: border-box
+	-moz-box-sizing: border-box
+	-webkit-box-sizing: border-box
 
 body:
-	margin: 0;
-	padding: 0;
-	height: 100%;
-	background: #000;
-	color: #ddd;
-	font-family: sans-serif;
+	margin: 0
+	padding: 0
+	height: 100%
+	background: #000
+	color: #ddd
+	font-family: sans-serif
 
 a:
-	text-decoration: none;
-	color: #38c;
+	text-decoration: none
+	color: #38c
 
 form:
 	input:
-		background: #fff;
-		border: 1px solid #cdd;
-		padding: 5px 10px;
+		background: #fff
+		border: 1px solid #cdd
+		padding: 5px 10px
+
+td:
+	white-space: nowrap
+	overflow: hidden
+	text-overflow: ellipsis
 
 .clear:
-	clear: both;
+	clear: both
 
 #wrapper:
-	width: 900px;
-	margin: 50px auto;
-	background: #111;
+	width: 900px
+	margin: 50px auto
+	background: #111
diff --git a/web/static/css/corporation.ccss b/web/static/css/corporation.ccss
index 8ede2ef..c077808 100644
--- a/web/static/css/corporation.ccss
+++ b/web/static/css/corporation.ccss
@@ -5,11 +5,6 @@ table#kills:
 	tr:nth-child(odd):
 		background-color: #1a1a1a
 
-	th, td:
-		white-space: nowrap
-		overflow: hidden
-		text-overflow: ellipsis
-
 	th.time:
 		width: 90px
 	th.system:
diff --git a/web/static/css/kill.ccss b/web/static/css/kill.ccss
new file mode 100644
index 0000000..e53ea0e
--- /dev/null
+++ b/web/static/css/kill.ccss
@@ -0,0 +1,27 @@
+#ship:
+	float: left
+	width: 256px
+	height: 256px
+
+table#victim:
+	float: right
+	table-layout: fixed
+	width: 388px
+
+table#attackers:
+	float: right
+	table-layout: fixed
+	width: 388px
+
+	td:
+		height: 64px
+		&:nth-child(1):
+			width: 66px
+			white-space: normal
+		&:nth-child(2):
+			width: 200px
+		&:nth-child(3):
+			width: 32px
+			white-space: normal
+		&:nth-child(3):
+			width: 50px
diff --git a/web/static/js/common.js b/web/static/js/common.js
index 4592cbe..547c349 100644
--- a/web/static/js/common.js
+++ b/web/static/js/common.js
@@ -1,6 +1,16 @@
-window.ykill.api = function (path, cb) {
-	new Request.JSON({
-		'url': ykill.api_host + path,
-		'onSuccess': cb,
-	}).get();
-}
+Object.append(window.ykill, {
+	'api': function (path, cb) {
+		new Request.JSON({
+			'url': ykill.api_host + path,
+			'onSuccess': cb,
+		}).get();
+	},
+
+	'portrait': function (id, text, img_dir, img_suffix) {
+		var img = new Element('img', {
+			'src': '//image.eveonline.com/' + img_dir + '/' + id + img_suffix,
+			'alt': text,
+		});
+		return img;
+	},
+});
diff --git a/web/static/js/corporation.js b/web/static/js/corporation.js
index b19bbc3..5900477 100644
--- a/web/static/js/corporation.js
+++ b/web/static/js/corporation.js
@@ -8,64 +8,61 @@ window.addEvent('domready', function() {
 			var kill_time = kill['kill_time'].split(' ', 2);
 			var a = new Element('a', {'href': '/kill/' + kill['kill_id']});
 			a.appendText(kill_time[0]);
-			a.adopt(new Element('br'));
+			a.grab(new Element('br'));
 			a.appendText(kill_time[1]);
-			var td = new Element('td').adopt(a);
-			tr.adopt(td);
+			var td = new Element('td').grab(a);
+			tr.grab(td);
 
 			td = new Element('td');
 			td.appendText(kill['system_name'] + ' ');
-			td.adopt(new Element('span', {'html': kill['security'].toFixed(1)}));
-			td.adopt(new Element('br'));
+			td.grab(new Element('span', {'html': kill['security'].toFixed(1)}));
+			td.grab(new Element('br'));
 			td.appendText(kill['region']);
-			tr.adopt(td);
+			tr.grab(td);
 
 			td = new Element('td');
 			var victim = kill['victim'];
-			show_portrait(td, victim['ship_type_id'], victim['ship_name'], 'type', '_32.png');
-			show_portrait(td, victim['character_id'], victim['character_name'], 'character', '_32.jpg');
+			td.adopt(
+				ykill.portrait(victim['ship_type_id'], victim['ship_name'], 'type', '_32.png'),
+				ykill.portrait(victim['character_id'], victim['character_name'], 'character', '_32.jpg')
+			);
 			if (victim['faction_id']) {
-				show_portrait(td, victim['faction_id'], victim['faction_name'], 'faction', '_32.png');
+				td.grab(ykill.portrait(victim['faction_id'], victim['faction_name'], 'faction', '_32.png'));
 			}
-			tr.adopt(td);
+			tr.grab(td);
 
 			td = new Element('td');
 			td.appendText(victim['character_name']);
-			td.adopt(new Element('br'));
+			td.grab(new Element('br'));
 			td.appendText(victim['corporation_name']);
 			if (victim['alliance_id'])
 				td.appendText(' / ' + victim['alliance_name']);
 			if (victim['faction_id'])
 				td.appendText(' / ' + victim['faction_name']);
-			tr.adopt(td);
+			tr.grab(td);
 
 			td = new Element('td');
 			var final_blow = kill['final_blow'];
-			show_portrait(td, final_blow['ship_type_id'], final_blow['ship_name'], 'type', '_32.png');
-			show_portrait(td, final_blow['character_id'], final_blow['character_name'], 'character', '_32.jpg');
+			td.adopt(
+				ykill.portrait(final_blow['ship_type_id'], final_blow['ship_name'], 'type', '_32.png'),
+				ykill.portrait(final_blow['character_id'], final_blow['character_name'], 'character', '_32.jpg')
+			);
 			if (final_blow['faction_id']) {
-				show_portrait(td, final_blow['faction_id'], final_blow['faction_name'], 'faction', '_32.png');
+				td.grab(ykill.portrait(final_blow['faction_id'], final_blow['faction_name'], 'faction', '_32.png'));
 			}
-			tr.adopt(td);
+			tr.grab(td);
 
 			td = new Element('td');
 			td.appendText(final_blow['character_name'] + ' (' + kill['attackers'] + ')');
-			td.adopt(new Element('br'));
+			td.grab(new Element('br'));
 			td.appendText(final_blow['corporation_name']);
 			if (final_blow['alliance_id'])
 				td.appendText(' / ' + final_blow['alliance_name']);
 			if (final_blow['faction_id'])
 				td.appendText(' / ' + final_blow['faction_name']);
-			tr.adopt(td);
+			tr.grab(td);
 
-			table.adopt(tr);
+			table.grab(tr);
 		});
 	});
-
-	function show_portrait(el, id, text, img_dir, img_suffix) {
-		el.adopt(new Element('img', {
-			'src': '//image.eveonline.com/' + img_dir + '/' + id + img_suffix,
-			'alt': text,
-		}));
-	}
 });
diff --git a/web/static/js/kill.js b/web/static/js/kill.js
index 57c0a3f..1ef53a4 100644
--- a/web/static/js/kill.js
+++ b/web/static/js/kill.js
@@ -1,51 +1,110 @@
 window.addEvent('domready', function() {
 	var kill_id = document.location.pathname.split('/').getLast();
 	ykill.api('/kill/' + kill_id, function(data) {
-		var kill = data.kill;
-		$('kill_time').appendText(kill['kill_time']);
-		$('solar_system').appendText(kill['solarSystemName'] + ' (' + kill['security'].toFixed(1) + ')');
-
-		var div = $('characters');
-		data.characters.each(function(char) {
-			div.adopt(new Element('img', {
-				'src': '//image.eveonline.com/Character/' + char['character_id'] + '_64.jpg',
-				'alt': char['character_name'],
-			}));
-			div.appendText(char['character_name']);
-			div.adopt(new Element('img', {
-				'src': '//image.eveonline.com/Corporation/' + char['corporation_id'] + '_64.png',
-				'alt': char['corporation_name'],
-			}));
-			div.appendText(char['corporation_name']);
-			if (char['alliance_id']) {
-				div.adopt(new Element('img', {
-					'src': '//image.eveonline.com/Alliance/' + char['alliance_id'] + '_64.png',
-					'alt': char['alliance_name'],
-				}));
-				div.appendText(char['alliance_name']);
-			}
-			div.adopt(new Element('img', {
-				'src': '//image.eveonline.com/Type/' + char['ship_type_id'] + '_32.png',
-				'alt': char['ship_name'],
-			}));
-			if (!char['victim']) {
-				div.adopt(new Element('img', {
-					'src': '//image.eveonline.com/Type/' + char['weapon_type_id'] + '_32.png',
-					'alt': char['weapon_name'],
-				}));
-			}
-			div.appendText(char['damage']);
-			div.adopt(new Element('br'));
+		var table = $('victim');
+		var kill = data['kill'];
+		var victim = data['victim'];
+		table.adopt(
+			new Element('tr').adopt(
+				new Element('td', {'html': 'time'}),
+				new Element('td', {'html': kill['kill_time']})
+			),
+			new Element('tr').adopt(
+				new Element('td', {'html': 'system'}),
+				new Element('td', {'html': kill['solarSystemName'] + ' (' + kill['security'].toFixed(1) + ')'})
+			),
+			new Element('tr').adopt(
+				new Element('td').grab(
+					ykill.portrait(victim['character_id'], victim['character_name'], 'character', '_64.jpg')
+				),
+				new Element('td', {'html': victim['character_name']})
+			),
+			new Element('tr').adopt(
+				new Element('td').grab(
+					ykill.portrait(victim['corporation_id'], victim['corporation_name'], 'corporation', '_64.png')
+				),
+				new Element('td', {'html': victim['corporation_name']})
+			)
+		);
+		if (victim['alliance_id'])
+			table.grab(new Element('tr').adopt(
+				new Element('td').grab(
+					ykill.portrait(victim['alliance_id'], victim['alliance_name'], 'alliance', '_64.png')
+				),
+				new Element('td', {'html': victim['alliance_name']})
+			));
+		if (victim['faction_id'])
+			table.grab(new Element('tr').adopt(
+				new Element('td').grab(
+					ykill.portrait(victim['faction_id'], victim['faction_name'], 'faction', '_64.png')
+				),
+				new Element('td', {'html': victim['faction_name']})
+			));
+		table.grab(new Element('tr').adopt(
+			new Element('td').grab(
+				ykill.portrait(victim['ship_type_id'], victim['ship_name'], 'type', '_64.png')
+			),
+			new Element('td', {'html': victim['ship_name']})
+		));
+
+		var div = $('ship');
+		div.setStyle('background-image', 'url(//image.eveonline.com/render/' + victim['ship_type_id'] + '_256.png)');
+
+		table = $('attackers');
+		show_attacker(table, data['final_blow']);
+		data['attackers'].each(function(char) {
+			show_attacker(table, char);
 		});
 
-		div = $('items');
-		data.items.each(function(item) {
-			div.adopt(new Element('img', {
-				'src': '//image.eveonline.com/Type/' + item['type_id'] + '_32.png',
-				'alt': item['item_name'],
-			}));
-			div.appendText(item['item_name'] + ' (' + item['dropped'] + ',' + item['destroyed'] + ')');
-			div.adopt(new Element('br'));
+		table = $('items');
+		data['items'].each(function(item) {
+			table.grab(new Element('tr').adopt(
+				new Element('td').grab(
+					new Element('img', {
+						'src': '//image.eveonline.com/Type/' + item['type_id'] + '_32.png',
+						'alt': item['item_name'],
+					})
+				),
+				new Element('td', {'html': item['item_name']}),
+				new Element('td', {'html': item['dropped'] || item['destroyed']})
+			));
 		});
 	});
+
+	function show_attacker(table, char) {
+		var tr = new Element('tr');
+
+		var td = new Element('td').adopt(
+			ykill.portrait(char['character_id'], char['character_name'], 'character', '_32.jpg'),
+			ykill.portrait(char['corporation_id'], char['corporation_name'], 'corporation', '_32.png')
+		);
+		if (char['alliance_id'])
+			td.grab(ykill.portrait(char['alliance_id'], char['alliance_name'], 'alliance', '_32.png'));
+		if (char['faction_id'])
+			td.grab(ykill.portrait(char['faction_id'], char['faction_name'], 'faction', '_32.png'));
+		tr.grab(td);
+
+		td = new Element('td');
+		td.appendText(char['character_name']);
+		td.grab(new Element('br'));
+		td.appendText(char['corporation_name']);
+		if (char['alliance_id']) {
+			td.grab(new Element('br'));
+			td.appendText(char['alliance_name']);
+		}
+		if (char['faction_id']) {
+			td.grab(new Element('br'));
+			td.appendText(char['faction_name']);
+		}
+		tr.grab(td);
+
+		td = new Element('td').adopt(
+			ykill.portrait(char['ship_type_id'], char['ship_name'], 'type', '_32.png'),
+			ykill.portrait(char['weapon_type_id'], char['weapon_name'], 'type', '_32.png')
+		);
+		tr.grab(td);
+		tr.grab(new Element('td').appendText(char['damage']));
+
+		table.grab(tr);
+	}
 });
diff --git a/web/templates/kill.html b/web/templates/kill.html
index 95bd972..6a22ba1 100644
--- a/web/templates/kill.html
+++ b/web/templates/kill.html
@@ -4,13 +4,18 @@
 	<script src="/static/js/kill.js"></script>
 {% end %}
 
+{% block css %}
+	<link rel="stylesheet" type="text/css" href="/css/kill.css" />
+{% end %}
+
 {% block main %}
 
-<div id="kill_time"></div>
-<div id="solar_system"></div>
+<div id="ship"></div>
+<table id="victim"></table>
+<div class="clear"></div>
 
-<div id="characters"></div>
+<table id="attackers"></table>
 
-<div id="items"></div>
+<table id="items"></table>
 
 {% end %}