From df3222e2f2d7ab7e4a17138cb07d8017e6bef70a Mon Sep 17 00:00:00 2001
From: Pierre LeMoine <github@luben.se>
Date: Tue, 20 Aug 2013 01:21:05 +0200
Subject: [PATCH] Item descriptions and more compact match history

Made rendering of match history more horizontally compact, as on some
screens the table stretches very wide.
Also added item description popups in match history.

Removed the min-width property from  #summonerGamesContainer to make it
possible to render the table on smaller screens without horizontal
scrolling.
Added class for identifying table headers for headers in the
summonerGames-table in the match-history.
Added css to make sure that the 'items' and 'date' collumns do not
introduce awkward linebreaks.
Reduced padding on '#summonerGames th' and '#summonerGames td'.

Turned the item-<img>'s into <div><img><ul>...</ul></div> to enable
item-descriptions on the match-history page. Added css-rules for
'table.statistics ul.itemDesc', 'table.statistics .item' and
'table.statistics item:hover .itemDesc' to handle the actual popups.
Added margin-bottom to #summonerGames to prevent page from re-layouting
when displaying vertically long item descriptions (result from the page
becomming less wide with introduction of horizontal scroll bar).
---
 Web/Script/Module/SummonerGames.js | 72 +++++++++++++++++++-----------
 Web/Style/Style.css                | 39 ++++++++++++++--
 2 files changed, 82 insertions(+), 29 deletions(-)

diff --git a/Web/Script/Module/SummonerGames.js b/Web/Script/Module/SummonerGames.js
index e76e1e6..a645449 100644
--- a/Web/Script/Module/SummonerGames.js
+++ b/Web/Script/Module/SummonerGames.js
@@ -2,25 +2,25 @@ function getSummonerGamesTable(summoner, games)
 {
     var titles =
         [
-            'Champion',
-            'Map',
-            'Mode',
-            'Outcome',
-            'Date',
-            'Side',
-            'Spells',
-            'K',
-            'D',
-            'A',
-            'MK',
-            'NK',
-            'Gold',
-            'Items',
-            'Level',
-            'Premade',
-            'Ping',
-            'Time in queue',
-            'Game ID',
+            ['Champion','champion'],
+            ['Map','map'],
+            ['Mode','mode'],
+            ['Outcome','outcome'],
+            ['Date','date'],
+            ['Side','side'],
+            ['Spells','spells'],
+            ['K','kills'],
+            ['D','deaths'],
+            ['A','assissts'],
+            ['MK','minionKills'],
+            ['NK','neutralKills'],
+            ['Gold','gold'],
+            ['Items','items'],
+            ['Lvl','level'],
+            ['Premade','premade'],
+            ['Ping','ping'],
+            ['Queue Time','queueTime'],
+            ['Game ID','gameID'],
         ];
 
     var container = diverse();
@@ -35,8 +35,12 @@ function getSummonerGamesTable(summoner, games)
     output.add(caption('Games of ' + summoner.SummonerName));
 
     var row = tableRow();
-    titles.forEach(function(title) {
-        row.add(tableHead(title));
+    titles.forEach(function(pair) {
+        var title = pair[0];
+        var className = pair[1];
+        var head = tableHead(title);
+        head.className = className;
+        row.add(head);
     });
     output.add(row);
     games.forEach(function(game) {
@@ -45,12 +49,28 @@ function getSummonerGamesTable(summoner, games)
 
         var items = [];
         game.Items.forEach(function(itemId) {
-            if(itemId == 0)
-                items.push(icon('Item/Small/Blank.png', 'Unused'));
-            else
-            {
+            if(itemId == 0) {
+                var itemDiv = diverse();
+                itemDiv.className = 'item';
+                itemDiv.add(icon('Item/Small/Blank.png', 'Unused'));
+                items.push(itemDiv);
+            } else {
+
                 var item = getItem(itemId);
-                items.push(icon('Item/Small/' + (item.description == 'Unknown' ? 'Unknown' : itemId) + '.png', item.name));
+                var itemDiv = diverse();
+                itemDiv.className = 'item';
+                var _icon = icon('Item/Small/' + (item.description == 'Unknown' ? 'Unknown' : itemId) + '.png', item.name);
+                itemDiv.add(_icon);
+                
+                var theList = list();
+                theList.className = 'itemDesc';
+                theList.add(listElement(text(item.name)));
+                theList.add(listElement(text('')));
+                item.description.split('\n').forEach(function(line) {
+                    theList.add(listElement(text(line)));
+                });
+                itemDiv.add(theList);
+                items.push(itemDiv);
             }
         });
 
diff --git a/Web/Style/Style.css b/Web/Style/Style.css
index ef58cdc..72dd2e3 100644
--- a/Web/Style/Style.css
+++ b/Web/Style/Style.css
@@ -158,7 +158,6 @@ table.statistics td img
 table.statistics td.items img
 {
     margin: 0;
-    float: left;
 }
 
 table.statistics td.items
@@ -166,6 +165,29 @@ table.statistics td.items
     width: 192px;
 }
 
+table.statistics ul.itemDesc {
+   background:#223344;
+    position:absolute;
+    width:200px;
+    display:none;
+    color:#FFFFFF;
+	padding:10px;
+	left:0px;
+	z-index:2;
+	//list-style:none outside none;
+	list-style-type:none;
+}
+
+table.statistics .item {
+	position:relative;
+	float:left;
+}
+
+table.statistics .item:hover .itemDesc {
+    display:block;
+    left:32px;
+}
+
 table.statistics td.spells img
 {
     margin: 0;
@@ -331,21 +353,32 @@ table.graphDescription
     margin-bottom: 1.5em;
 }
 
+#summonerGames th
+{
+	padding:0 0.2em 0 0.2em;
+}
+
 #summonerGames td
 {
+	padding:0 0.3em 0 0.3em;
     border: 1px solid black;
 }
-
+#summonerGames .date {
+	min-width:5em;
+}
+#summonerGames .items {
+	min-width:192px;
+}
 #summonerGames
 {
     text-align: left;
     width: 100%;
+	margin-bottom:500px;
 }
 
 #summonerGamesContainer
 {
     margin: 2em;
-    min-width: 122em;
 }
 
 #returnFromMatchHistory