Slightly less ugly pokemon picker >_^

web/controls/ForeignLookup.ascx.cs

@@ -81,6 +81,20 @@ namespace PkmnFoundations.Web.controls
             }
         }
 
+        private String m_css_class;
+        public String CssClass 
+        {
+            get
+            {
+                return m_css_class;
+            }
+            set
+            {
+                m_css_class = value;
+                main.Attributes["class"] = "pfLookup " + Common.HtmlEncode(m_css_class);
+            }
+        }
+
         protected override void LoadViewState(object savedState)
         {
             ForeignLookupViewState viewstate = (ForeignLookupViewState)savedState;
@@ -88,6 +102,7 @@ namespace PkmnFoundations.Web.controls
             SourceUrl = viewstate.SourceUrl;
             MaxRows = viewstate.MaxRows;
             OnClientValueChanged = viewstate.OnClientValueChanged;
+            CssClass = viewstate.CssClass;
         }
 
         protected override object SaveViewState()
@@ -97,6 +112,7 @@ namespace PkmnFoundations.Web.controls
             viewstate.SourceUrl = SourceUrl;
             viewstate.MaxRows = MaxRows;
             viewstate.OnClientValueChanged = OnClientValueChanged;
+            viewstate.CssClass = CssClass;
             return viewstate;
         }
 
@@ -107,6 +123,7 @@ namespace PkmnFoundations.Web.controls
             public String SourceUrl;
             public int MaxRows;
             public String OnClientValueChanged;
+            public String CssClass;
         }
     }
 }

web/controls/PokemonPicker.ascx

@@ -1,4 +1,4 @@
 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PokemonPicker.ascx.cs" Inherits="PkmnFoundations.Web.controls.PokemonPicker" %>
 <%@ Register TagPrefix="pf" TagName="ForeignLookup" Src="~/controls/ForeignLookup.ascx" %>
 
-<pf:ForeignLookup ID="theLookup" MaxRows="8" SourceUrl="~/controls/PokemonSource.ashx" runat="server" />
+<pf:ForeignLookup ID="theLookup" CssClass="pfPokemonPicker" MaxRows="8" SourceUrl="~/controls/PokemonSource.ashx" runat="server" />

web/controls/PokemonSource.ashx.cs

@@ -23,10 +23,19 @@ namespace PkmnFoundations.Web.controls
             DataTable dt = new DataTable();
             dt.Columns.Add("Text", typeof(String));
             dt.Columns.Add("Value", typeof(int));
+            dt.Columns.Add("html", typeof(String));
 
             foreach (Species s in data)
             {
-                dt.Rows.Add(s.Name[iso], s.NationalDex);
+                String name = s.Name[iso];
+                String html = "<img src=\"" + Common.ResolveUrl(WebFormat.SpeciesImageSmall(s)) +
+                    "\" alt=\"" + Common.HtmlEncode(name) +
+                    "\" class=\"sprite speciesSmall\" width=\"40px\" height=\"32px\" />" +
+                    String.Format("{0} (#{1})",
+                    Common.HtmlEncode(name),
+                    s.NationalDex);
+
+                dt.Rows.Add(name, s.NationalDex, html);
             }
 
             return dt;

web/css/form.css

@@ -243,11 +243,19 @@ input[type=submit].large, button.large
     right: 0;
     overflow: auto;
     background-color: white;
+    border: 1px solid #999;
+    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);
+    margin-top: -1px;
+    border-radius: 0 0 2px 2px;
+}
+
+.pfLookup .results_inner
+{
+    overflow: hidden;
 }
 
 .pfLookup .results .result
 {
-    padding: 0;
 }
 
 .pfLookup .results .result.default, .pfLookup .results:hover .result:hover, .pfLookup .results:hover .result.default:hover
@@ -260,3 +268,13 @@ input[type=submit].large, button.large
     background-color: white;
 }
 
+.pfPokemonPicker .result
+{
+    padding: 4px 8px;
+    height: 20px;
+}
+
+.pfPokemonPicker .result img.speciesSmall
+{
+    margin: -6px -4px -10px -10px;
+}

web/scripts/form.js

@@ -124,7 +124,7 @@ function pfReceiveLookupResults(response, status, id_outer, id_value, id_results
 
     if (status == "200")
     {
-        ctrl_results.innerHTML = response;
+        ctrl_results.innerHTML = "<div class=\"results_inner\">" + response + "</div>";
     }
     else
     {