From 2438b51c1cf588858d7cf2a268e5dfc69cb1f9b9 Mon Sep 17 00:00:00 2001
From: Sanj <b@pad.ma>
Date: Wed, 31 Aug 2011 01:11:58 +0530
Subject: [PATCH] added default iconic.css for better autocomplete styling

---
 gazetteer/static/css/iconic.css               | 48 +++++++++++++++++++
 .../admin/places/feature/change_form.html     |  1 +
 2 files changed, 49 insertions(+)
 create mode 100644 gazetteer/static/css/iconic.css

diff --git a/gazetteer/static/css/iconic.css b/gazetteer/static/css/iconic.css
new file mode 100644
index 0000000..3c96488
--- /dev/null
+++ b/gazetteer/static/css/iconic.css
@@ -0,0 +1,48 @@
+/*
+	most of the css that makes it look good is in the jquery.autocomplete.css that comes with the autocomplete plugin.
+	that formats the dropdown of search results.
+
+	one class is used on the html interface itself and that's the X that allows you to remove an item.
+	here is the styling I use.  add this to your main css file and season to taste.
+*/
+.iconic {
+	background: #fff;
+	color: #000;
+	border: 1px solid #ddd;
+	padding: 2px 4px;
+	font-weight: bold;
+	font-family: Courier;
+	text-decoration: none;
+}
+.iconic:hover {
+	text-decoration: none;
+	color: #fff;
+	background: #000;
+	cursor: pointer;
+}
+
+input.ac_loading {
+	background: #FFF url('../images/loading-indicator.gif') no-repeat;
+	background-position: right;
+}
+
+
+/* change the X to an image */
+.results_on_deck .iconic, .results_on_deck .iconic:hover {
+    float: left;
+    background: url(../shared/images/Trashcan.gif) no-repeat;
+    color: transparent;
+    border: 0;
+}
+
+/* specific to a site I worked on. the formatted results were tables.  I sized them and floated them left, next to the icon */
+.results_on_deck div table {
+    float: left;
+    width: 300px;
+    border: 0;
+}
+/* and each div in the result clears to start a new row */
+.results_on_deck > div {
+    clear: both;
+}
+
diff --git a/gazetteer/templates/admin/places/feature/change_form.html b/gazetteer/templates/admin/places/feature/change_form.html
index 2b54b0d..360e859 100644
--- a/gazetteer/templates/admin/places/feature/change_form.html
+++ b/gazetteer/templates/admin/places/feature/change_form.html
@@ -8,6 +8,7 @@
     <script type="text/javascript" src="/static/js/feature_admin.js"></script>
     <link rel="stylesheet" href="/static/css/feature_admin.css" />
     <link rel="stylesheet" href="/static/css/jquery.autocomplete.css" />
+    <link rel="stylesheet" href="/static/css/iconic.css" />
     <script type="text/javascript">
         FEATURE_ID = {{ object_id }}
     </script>