Facebook-like tags for search.

diff --git a/apps/catalogue/forms.py b/apps/catalogue/forms.py
index 076282b..828227d 100644 (file)
--- a/apps/catalogue/forms.py
+++ b/apps/catalogue/forms.py
@@ -26,6 +26,7 @@ class SearchForm(forms.Form):
         tags = kwargs.pop('tags', [])
         super(SearchForm, self).__init__(*args, **kwargs)
         self.fields['q'].widget.attrs['title'] = _('title, author, theme/topic, epoch, kind, genre')
+       self.fields['q'].widget.attrs['style'] = 'float: left; width: 200px; border: medium none; height: 15px; margin-top: 2px;'
         self.fields['tags'].initial = '/'.join(tag.slug for tag in Tag.get_tag_list(tags))
 
 

diff --git a/apps/catalogue/views.py b/apps/catalogue/views.py
index e79e5d4..0e146fd 100644 (file)
--- a/apps/catalogue/views.py
+++ b/apps/catalogue/views.py
@@ -351,7 +351,6 @@ def tags_starting_with(request):
 
     return HttpResponse('\n'.join(tag.name for tag in _tags_starting_with(prefix, request.user)))
 
-
 # ====================
 # = Shelf management =
 # ====================

diff --git a/wolnelektury/static/css/facelist_2-0.css b/wolnelektury/static/css/facelist_2-0.css
new file mode 100644 (file)
index 0000000..c10e45a
--- /dev/null
+++ b/wolnelektury/static/css/facelist_2-0.css
@@ -0,0 +1,184 @@
+.facelist-selections a {
+       color: white;
+       text-decoration: none;
+}
+.facelist-selections a:hover {
+       color: black;
+       text-decoration: none;
+}
+ul.facelist-selections {
+       list-style-type: none;
+       border-top: 1px solid #888;
+       border-bottom: 1px solid #b6b6b6;
+       border-left: 1px solid #aaa;
+       border-right: 1px solid #aaa;
+       padding: 4px 0 4px 4px;
+       overflow: auto;
+       background-color: #fff;
+       box-shadow:inset 0 1px 2px #888;
+       -webkit-box-shadow:inset 0 1px 2px #888;
+       -moz-box-shadow:inset 0 1px 2px #888;
+       width: 900px;
+}
+
+ul.facelist-selections.loading {
+       background-color: #eee;
+}
+
+ul.facelist-selections li {
+       float: left;
+       margin: 1px 4px 1px 0;
+       padding-top: 20px;
+       margin-left: 10px;
+}
+
+ul.facelist-selections li.facelist-selection-item {
+       color:white;
+       position: relative;
+       background-color: #fbc11d;
+       -moz-border-radius: 3px;
+       -webkit-border-radius: 3px;
+       border-radius: 3px;
+       -webkit-transition: background-color .2s ease-in;
+       cursor: pointer;
+       padding:2px 5px 2px 5px;
+       font-size: 13px;
+       font-family: "Lucida Grande", arial, sans-serif;
+}
+
+ul.facelist-selections li.facelist-selection-item:last-child {
+       margin-left: 30px;
+}
+
+ul.facelist-selections li.facelist-selection-item a.facelist-close {
+       float: right;
+       margin: 1px 0 0 7px;
+       padding: 0 2px;
+       cursor: pointer;
+       color: #black;
+       font-family: "Helvetica", helvetica, arial, sans-serif;
+       font-size: 14px;
+       font-weight: bold;
+       -webkit-transition: color .1s ease-in;
+}
+
+ul.facelist-selections li.facelist-selection-item.blur a.facelist-close {
+       color: #999;
+}
+
+ul.facelist-selections li:hover.facelist-selection-item {
+       background-color: #d8dfea;
+       border: solid 1px #ccd5e4;
+}
+
+ul.facelist-selections li.facelist-selection-item.selected {
+       border-color: #3b5998;
+       background-color: #5670a6;
+       color: #fff; 
+}
+
+ul.facelist-selections li.facelist-original {
+       margin-left: 0;
+}
+
+ul.facelist-selections li.facelist-original input {
+       border: none;
+       outline: none;
+       font-size: 13px;
+       width: 120px;
+       height: 18px;
+       padding-top: 3px;
+}
+
+ul.facelist-list {
+       position: absolute;
+       list-style-type: none;
+       margin: 2px 0 0 0;
+       padding: 0;
+       font-size: 14px;
+       color: #000;
+       font-family: "Lucida Grande", arial, sans-serif;
+       background-color: #fff;
+       z-index: 2;
+       border: solid #ccd5e4 1px;
+}
+
+li.facelist-result-item, li.facelist-message {
+       margin: 0 0 0 0;
+       padding: 5px 12px;
+       background-color: transparent;
+       border: 1px solid #fff;
+       border-bottom: 1px solid #ddd;
+       cursor: pointer;
+}
+
+li:first-child.facelist-result-item {
+       margin: 0;
+}
+
+li.facelist-message {
+       margin: 0;
+       cursor: default;
+}
+
+li.facelist-result-item.active {
+       background-color: #3b5998;
+       border-color: #3342e8;
+       color: #fff;
+}
+
+li.facelist-result-item em { 
+       font-style: normal; 
+       background: #dbe1ec;  
+       padding: 0 2px;
+}
+
+li.facelist-result-item.active em { 
+       background: #5670a6;  
+       color: #fff;
+}
+
+/* Firefox 3.0 Hacks */
+ul.facelist-list,  x:-moz-any-link, x:default { 
+       border: 1px solid #888;
+}
+BODY:first-of-type ul.facelist-list, x:-moz-any-link, x:default { /* Target FF 3.5+ */
+       border: none;
+}
+
+/* Webkit Hacks  */
+@media screen and (-webkit-min-device-pixel-ratio:0) { 
+       ul.facelist-selections {
+               border-top-width: 2px;
+       }
+       ul.facelist-selections li.facelist-selection-item {
+               padding-top: 3px;
+               padding-bottom: 3px;
+       }
+       ul.facelist-selections li.facelist-selection-item a.facelist-close {
+               margin-top: -1px;
+       }
+       ul.facelist-selections li.facelist-original input {
+               height: 19px;
+       }
+}
+
+/* Opera Hacks  */
+@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
+       ul.facelist-list {
+               border: 1px solid #888;
+       }
+       ul.facelist-selections li.facelist-selection-item a.facelist-close {
+               margin-left: 4px;
+               margin-top: 0;
+       }
+}
+
+/* IE Hacks  */
+ul.facelist-list {
+       border: 1px solid #888\9;
+}
+ul.facelist-selections li.facelist-selection-item a.facelist-close {
+       margin-left: 4px\9;
+       margin-top: 0\9;
+}

diff --git a/wolnelektury/static/css/master.css b/wolnelektury/static/css/master.css
index 06c5e34..c75c381 100644 (file)
--- a/wolnelektury/static/css/master.css
+++ b/wolnelektury/static/css/master.css
@@ -133,11 +133,12 @@ em {
 }
 
 #search-form li {
-    margin: 0;
+    margin: 2px 0 0 5px;
     padding: 0;
     list-style: none;
     display: block;
     float: left;
+    /*margin-left: 5px;*/
 }
 
 #search-form li.category, #search-form li.book-title {
@@ -872,4 +873,4 @@ div.shown-tags p, div.all-tags p {
     font-size: 12px;
     color: #FFF;
     text-decoration: none;
-}
\ No newline at end of file
+}

diff --git a/wolnelektury/templates/catalogue/breadcrumbs.html b/wolnelektury/templates/catalogue/breadcrumbs.html
index 000625b..2d471b2 100644 (file)
--- a/wolnelektury/templates/catalogue/breadcrumbs.html
+++ b/wolnelektury/templates/catalogue/breadcrumbs.html
@@ -1,13 +1,21 @@
 {% load i18n %}
 {% load catalogue_tags %}
-<form action="{% url search %}" method="get" accept-charset="utf-8" id="search-form">
-    <ol>
+<form action="{% url search %}" method="get" accept-charset="utf-8" id="search-form" style="float:left;">
+    <div style="width: 100%">
+    <ul class="facelist-selections" style="float:left;">
         {% for tag in tag_list %}
-        <li class="category"><a href="{% catalogue_url tag %}">{{ tag }}</a> | <a href="{% catalogue_url tag_list -tag %}">x</a></li>
+        <li class="facelist-selection-item">
+       <span style="margin-left: 5px;">
+       <a href="{% catalogue_url tag %}">{{ tag }}</a>
+       <a class="facelist-close" href="{% catalogue_url tag_list -tag %}">x</a>
+       </span>
+       </li>
         {% endfor %}
         {% if search_form %}
-            <li>{{ search_form.q }} {{ search_form.tags }} <input type="submit" value="{% trans "Search" %}"/></li>
+            <li>{{ search_form.q }} {{ search_form.tags }}</li>
         {% endif %}
-    </ol>
+    </ul>
+    <input type="submit" value="{% trans "Search" %}" style="float: left; {% if tag_list %}margin-top: 10px; height: 32px;{% else %}margin-top: 10px; {% endif %}"/>
+    </div>
     <div class="clearboth"></div>
-</form>
\ No newline at end of file
+</form>