use html5 placeholder and hide labels,
authorRadek Czajka <radoslaw.czajka@nowoczesnapolska.org.pl>
Fri, 27 Jan 2012 14:22:42 +0000 (15:22 +0100)
committerRadek Czajka <radoslaw.czajka@nowoczesnapolska.org.pl>
Fri, 27 Jan 2012 15:44:58 +0000 (16:44 +0100)
pretty fragments,
more display fixes

22 files changed:
apps/ajaxable/templates/ajaxable/form.html
apps/ajaxable/utils.py
apps/catalogue/templatetags/catalogue_tags.py
apps/catalogue/views.py
apps/social/templates/social/sets_form.html
apps/social/views.py
apps/suggest/views.py
wolnelektury/static/css/base.css
wolnelektury/static/css/book_box.css
wolnelektury/static/css/catalogue.css
wolnelektury/static/css/cite.css
wolnelektury/static/css/dialogs.css
wolnelektury/static/css/social/shelf_tags.css
wolnelektury/static/js/base.js
wolnelektury/templates/auth/login_register.html
wolnelektury/templates/base.html
wolnelektury/templates/catalogue/book_short.html
wolnelektury/templates/catalogue/book_wide.html
wolnelektury/templates/catalogue/fragment_short.html
wolnelektury/templates/catalogue/inline_tag_list.html
wolnelektury/templates/catalogue/tagged_object_list.html
wolnelektury/views.py

index 1658b9b..84e86e1 100755 (executable)
@@ -1,7 +1,8 @@
 {% load i18n %}
 <h1>{{ title }}</h1>
 
-<form action="{{ request.get_full_path }}" method="post" accept-charset="utf-8" class="cuteform">
+<form action="{{ request.get_full_path }}" method="post" accept-charset="utf-8"
+       class="cuteform{% if placeholdize %} hidelabels{% endif %}">
 <ol>
     <div id="id_{% if form_prefix %}{{ form_prefix }}-{% endif %}__all__"></div>
     {{ form.as_ul }}
index e32356a..ac8d5c6 100755 (executable)
@@ -53,6 +53,12 @@ def require_login(request):
         return HttpResponseRedirect('/uzytkownicy/zaloguj')# next?=request.build_full_path())
 
 
+def placeholdized(form):
+    for field in form.fields.values():
+        field.widget.attrs['placeholder'] = field.label
+    return form
+
+
 class AjaxableFormView(object):
     """Subclass this to create an ajaxable view for any form.
 
@@ -60,6 +66,7 @@ class AjaxableFormView(object):
 
     """
     form_class = None
+    placeholdize = False
     # override to customize form look
     template = "ajaxable/form.html"
     submit = _('Send')
@@ -74,6 +81,7 @@ class AjaxableFormView(object):
     @method_decorator(vary_on_headers('X-Requested-With'))
     def __call__(self, request, *args, **kwargs):
         """A view displaying a form, or JSON if request is AJAX."""
+        #form_class = placeholdized(self.form_class) if self.placeholdize else self.form_class
         form_args, form_kwargs = self.form_args(request, *args, **kwargs)
         if self.form_prefix:
             form_kwargs['prefix'] = self.form_prefix
@@ -104,6 +112,8 @@ class AjaxableFormView(object):
                 else:
                     errors = form.errors
                 response_data = {'success': False, 'errors': errors}
+            else:
+                response_data = None
             if request.is_ajax():
                 return HttpResponse(LazyEncoder(ensure_ascii=False).encode(response_data))
         else:
@@ -115,9 +125,12 @@ class AjaxableFormView(object):
             response_data = None
 
         template = self.template if request.is_ajax() else self.full_template
+        if self.placeholdize:
+            form = placeholdized(form)
         context = {
                 self.formname: form, 
                 "title": self.title,
+                "placeholdize": self.placeholdize,
                 "submit": self.submit,
                 "response_data": response_data,
                 "ajax_template": self.template,
index 33eec32..cf80beb 100644 (file)
@@ -4,17 +4,11 @@
 #
 import datetime
 import feedparser
-import re
 
 from django import template
-from django.template import Node, Variable
-from django.utils.encoding import smart_str
-from django.core.cache import get_cache
+from django.template import Node, Variable, Template, Context
 from django.core.urlresolvers import reverse
 from django.contrib.auth.forms import UserCreationForm, AuthenticationForm
-from django.db.models import Q
-from django.conf import settings
-from django.template.defaultfilters import stringfilter
 from django.utils.translation import ugettext as _
 
 from catalogue import forms
@@ -51,6 +45,15 @@ def capfirst(text):
         return ''
 
 
+@register.simple_tag
+def html_title_from_tags(tags):
+    if len(tags) < 2:
+        return title_from_tags(tags)
+    template = Template("{{ category }}: <a href='{{ tag.get_absolute_url }}'>{{ tag.name }}</a>")
+    return capfirst(",<br/>".join(
+        template.render(Context({'tag': tag, 'category': _(tag.category)})) for tag in tags))
+    
+
 
 def simple_title(tags):
     title = []
index 9044a80..01600f5 100644 (file)
@@ -186,6 +186,7 @@ def tagged_object_list(request, tags=''):
             'only_my_shelf': only_my_shelf,
             'formats_form': forms.DownloadFormatsForm(),
             'tags': tags,
+            'theme_is_set': theme_is_set,
         },
         context_instance=RequestContext(request))
 
index eff951e..ab982fe 100755 (executable)
@@ -1,7 +1,8 @@
 {% load i18n %}
 <h1>{{ title }}</h1>
 
-<form action="{% url social_unlike_book view_kwargs.slug %}" method="post" accept-charset="utf-8" class="cuteform">
+<form action="{% url social_unlike_book view_kwargs.slug %}" method="post" accept-charset="utf-8"
+       class="cuteform{% if placeholdize %} hidelabels{% endif %}">
     <input type="submit" value="{% trans "Remove from my shelf" %}"/>
 </form>
 
index 6ded289..d5362a4 100644 (file)
@@ -46,6 +46,7 @@ def my_shelf(request):
 
 class ObjectSetsFormView(AjaxableFormView):
     form_class = forms.ObjectSetsForm
+    placeholdize = True
     template = 'social/sets_form.html'
     ajax_redirect = True
     POST_login = True
index 15b65f2..8a8df5b 100644 (file)
@@ -18,6 +18,7 @@ class PublishingSuggestionFormView(AjaxableFormView):
 
 class SuggestionFormView(AjaxableFormView):
     form_class = forms.SuggestForm
+    placeholdize = True
     title = _('Report a bug or suggestion')
     submit = _('Send report')
     success_message = _('Report was sent successfully.')
index 7b1c9ef..a7145ec 100755 (executable)
@@ -34,6 +34,9 @@ h1 {
     font-weight: normal;
     margin-top: .4em
 }
+h1 a {
+       color: inherit;
+}
 
 ul.plain {
     list-style:none;
@@ -178,6 +181,12 @@ h2 {
     font-size: 1.1em;
 }
 
+.pagination {
+       display: block;
+       font-size: 1.2em;
+       padding: .5em;
+       text-align:center;
+}
 
 #footer {
     color: #767676;
index b9ef8f2..eb212a8 100755 (executable)
 
 .book-box-body {
     height: 17em;
-    overflow: hidden;
+    overflow:hidden;
     position: relative;
 }
 
 
 .book-box-head {
     min-height: 7em;
-    margin-top: 1.4em;
+    padding-top: 1.4em;
     margin-bottom: 1em;
 }
 .book-box-head a {
 }
 .book-box-head .title {
     font-size: 2.4em;
+    height: 2.4em;
+    overflow:hidden;
     margin-top: .3em;
 }
 .book-box-body .tags {
index b08d99b..a31d4c7 100755 (executable)
 }
 .catalogue-catalogue ul {
     -moz-column-width: 30em;
-}
\ No newline at end of file
+}
+
+
+#description {
+       margin-bottom: 2em;
+}
+#description dl {
+       margin-top: 0;
+}
+#description dt {
+       display: inline;
+       font-weight: bold;
+       margin: 0;
+}
+#description dd {
+       display: inline;
+       margin: 0;
+}
+#description .meta {
+       list-style: none;
+       padding: 0;
+       margin: 0;
+}
+#description .meta li {
+       text-align:right;
+       color: #666;
+       font-size: .9em;
+}
+
+.inline-header {
+       display: inline-block;
+       vertical-align: top;
+       width: 7em;
+}
+.inline-body {
+       width: 35em;
+       display: inline-block;
+       vertical-align: top;
+       margin-bottom: .5em;
+}
+.inline-body ul {
+       -moz-column-width: 11em;
+       list-style: none;
+       padding: 0;
+       margin: 0;
+}
index 4335f2e..d6f9bba 100755 (executable)
@@ -1,4 +1,4 @@
-a.cite {
+.cite {
     display: block;
     color: black;
     background: white;
@@ -121,3 +121,17 @@ a.cite {
     margin: 0;
     padding: 1em;
 }
+
+
+.Fragment-item .fragment {
+       color: black;
+       display: block;
+}
+.Fragment-item .toggle {
+       font-size: 1.1em;
+       display:block;
+       padding: .5em 0;
+}
+.Fragment-item {
+       margin-bottom: 2em;
+}
index c3b968b..08255d3 100755 (executable)
     width: 100%;
 }
 
+.hidelabels label {
+       width: 1px;
+       height: 1px;
+       overflow:hidden;
+}
+
+
+
 #login-window {
     width: 26em;
 }
 #register-window {
     width: 26em;
 }
+#context-login-window {
+       width: 26em;
+}
 
 #suggest-window {
     width: 26em;
index b963b1c..812a1c9 100755 (executable)
@@ -2,11 +2,21 @@
     list-style: none;
     padding: 0;
     margin: 1em 0;
+    width: 30em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    position:absolute;
+    margin-left: 15.4em;
+    top: 13.5em;
+    padding: .5em 0;
+    background: #fff;
 }
 
 .social-shelf-tags li {
     display: inline-block;
     margin-right:1em;
+    margin-bottom: .5em;
 }
 
 .social-shelf-tags a {
     color: #0b838d;
     border-radius: 1em;
 }
+
+
+.social-shelf-tags:hover {
+    overflow: visible;
+    text-overflow: ellipsis;
+    white-space: normal;
+    z-index: 1000;
+}
index 7af0370..8225a1f 100755 (executable)
             $(this).addClass('short');
 
             if (button && short_text) button.html(short_text);
-            if (button) button.hover(
-                function() { $(this).css({background: '#F3F3F3', cursor: 'pointer'}); },
-                function() { $(this).css({background: '#EEE'}); }
-            ).click(toggle_fun(cont, short_el, long_el, button, short_text, long_text));
-            short_el.hover(
-                function() { $(this).css({background: '#F3F3F3', cursor: 'pointer'}); },
-                function() { $(this).css({background: '#FFF'}); }
-            ).click(toggle_fun(cont, short_el, long_el, button, short_text, long_text));
-            long_el.hover(
-                function() { $(this).css({background: '#F3F3F3', cursor: 'pointer'}); },
-                function() { $(this).css({background: '#FFF'}); }
-            ).click(toggle_fun(cont, short_el, long_el, button, short_text, long_text));
+            if (button) button.click(toggle_fun(cont, short_el, long_el, button, short_text, long_text));
         };
 
 
         // Fragments
-        $('.fragment-short-text').each(function() {
-            var fragment = $(this).closest('.fragment');
-            fragment.toggle_slide({
-                short_el: $(this),
-                long_el: fragment.find('.fragment-text')
+        $('.fragment-with-short').each(function() {
+            $(this).toggle_slide({
+                short_el: $('.fragment-short-text', this),
+                long_el: $('.fragment-long-text', this),
+                button: $('.toggle', this)
+            })
+        });
+        $('#description').each(function() {
+            $(this).toggle_slide({
+                short_el: $('#description-short', this),
+                long_el: $('#description-long', this),
+                button: $(this)
             })
         });
 
index e262e2e..ecaeaf4 100755 (executable)
@@ -6,7 +6,8 @@
 
 <h1>{% trans "or register" %}:</h1>
 
-<form action="{% url register %}" method="post" accept-charset="utf-8" class="cuteform">
+<form action="{% url register %}" method="post" accept-charset="utf-8"
+       class="cuteform hidelabels">
 <ol>
     <div id="id_register-__all__"></div>
     {{ register_form.as_ul }}
index 2477726..c9cfe15 100644 (file)
@@ -1,11 +1,9 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html>
        {% load cache compressed i18n %}
     {% load catalogue_tags reporting_stats sponsor_tags %}
     <head>
         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-        <meta http-equiv="Content-Style-Type" content="text/css" />
         <meta name="description" 
             content="{% block metadescription %}Darmowe opracowane, pełne teksty lektur, e-booki, audiobooki i pliki DAISY na wolnej licencji.{% endblock %}" />
         <title>{% block title %}{% trans "Wolne Lektury" %} :: 
 
             <form id="search-area" action="/fullsearch/">
                 
-                <span id="search-field" class="grid-line">
+                <div id="search-field" class="grid-line">
                  {{search_form.q}}
 <!--                    <input title="np. Leśmian" name="q" autocomplete="off" data-source="/fullsearch/hint/">-->
-                </span><span id="search-button">
+                </div><div id="search-button">
                     <button type='submit'><span class="mono">{% trans "Search" %}</span></button>
-                </span>
+                </div>
                 
                 <div class="clearboth"></div>
             </form>
index 6173d7c..304cdc6 100644 (file)
@@ -44,6 +44,7 @@
             </div>
             <div class="title"><a href="{{ main_link }}">{{ book.title }}</a></div>
         </div>
+
         <div class="tags">
             <span class="mono"> {% trans "Epoch" %}:</span>&nbsp;<span class="book-box-tag">
                {% for name, slug in related.tags.epoch %}
@@ -66,9 +67,9 @@
                 {% endfor %}
             </span>
 
-            {% shelf_tags book %}
         </div>
     </div>
+    {% shelf_tags book %}
 
     <ul class="book-box-tools">
         <li class="book-box-read">
index 1507f36..c778caa 100644 (file)
@@ -11,7 +11,7 @@
 {% if themes %}
     <div class="hidden-box-wrapper" id="theme-list-wrapper">
         <p><a class="mono hidden-box-trigger theme-list-link"
-                href="#">{% trans "motifs and themes" %}</a></p>
+                href="#">{% trans "Motifs and themes" %}</a></p>
         <div class="hidden-box">
             <ul>
             {% for theme in themes %}
index 4526857..9fbe0cb 100644 (file)
@@ -1,4 +1,34 @@
 {% load i18n %}
+
+<div class="cite {% if fragment.short_text %}fragment-with-short{% endif %}">
+       {% if fragment.short_text %}
+       <div class="fragment-short-text">
+       <blockquote class="cite-body">
+                       <a href="{{ fragment.get_absolute_url }}" class="fragment">
+                       {{ fragment.short_text|safe }}
+                       </a>
+           </blockquote>
+               <a href="#" class="toggle mono">↓ {% trans "Expand fragment" %} ↓</a>
+    </div>
+    {% endif %}
+       <div class="fragment-long-text" {% if fragment.short_text %}style="display:none;"{% endif %}>
+    <blockquote class="cite-body fragment-text">
+               <a href="{{ fragment.get_absolute_url }}" class="fragment">
+        {{ fragment.text|safe }}
+               </a>
+    </blockquote>
+               {% if fragment.short_text %}
+               <a href="#" class="toggle mono">↑ {% trans "Hide fragment" %} ↑</a>
+               {% endif %}
+    </div>
+<p class="mono source">{{ fragment.book.pretty_title }}</p>
+</div>
+
+
+
+
+
+{% comment %}
 {% load catalogue_tags %}
 <div class="fragment">
     {% if fragment.short_text %}
@@ -19,3 +49,4 @@
     </div>
     <div class="clearboth"></div>
 </div>
+{% endcomment %}
index d42f3f9..52e92c4 100755 (executable)
@@ -3,7 +3,9 @@
 {% if one_tag %}
     {% trans "See full category" %} <a href="{% catalogue_url one_tag %}">{{ one_tag }}</a>
 {% else %}
+       <ul>
     {% for tag in tags %}
-        <a href="{% catalogue_url choices tag %}">{{ tag }}&nbsp;({{ tag.book_count }})</a>
+        <li><a href="{% catalogue_url choices tag %}">{{ tag }}&nbsp;({{ tag.book_count }})</a></li>
     {% endfor %}
+    </ul>
 {% endif %}
index 1a6843a..c7898d5 100644 (file)
@@ -9,45 +9,55 @@
 {% block body %}
     <div class="left-column">
     <div class="page-desc">
-    <h1>{% title_from_tags tags %}</h1>
+    <h1>{% html_title_from_tags tags %}</h1>
 
     {% with tags|last as last_tag %}
     {% if last_tag.has_description %}
-        <div id="description">
-            <div id='description-long'>{{ last_tag.description|safe }}</div>
-            <div id='description-short'>{{ last_tag.description|safe|truncatewords_html:30 }}</div>
+        <div id="description" class="normal-text">
+            <div id='description-long' style="diplay:none">{{ last_tag.description|safe }}</div>
+            <div id='description-short'>{{ last_tag.description|safe|truncatewords_html:40 }}</div>
         </div>
-        <div class="clearboth"></div>
-        <div id="toggle-description"><p></p></div>
     {% endif %}
 
 
     <div class="inline-tag-lists">
     {% if categories.author %}
-        <p><span class="mono">{% trans "Authors" %}:</span>
-        {% inline_tag_list categories.author tags %}
-        </p>
+       <div>
+               <div class="mono inline-header">{% trans "Authors" %}:</div>
+           <div class="inline-body">
+                           {% inline_tag_list categories.author tags %}
+               </div>
+        </div>
     {% endif %}
     {% if categories.kind %}
-        <p><span class="mono">{% trans "Kinds" %}:</span>
-        {% inline_tag_list categories.kind tags %}
-        </p>
+       <div>
+               <div class="mono inline-header">{% trans "Kinds" %}:</div>
+           <div class="inline-body">
+                           {% inline_tag_list categories.kind tags %}
+               </div>
+        </div>
     {% endif %}
     {% if categories.genre %}
-        <p><span class="mono">{% trans "Genres" %}:</span>
-        {% inline_tag_list categories.genre tags %}
-        </p>
+       <div>
+               <div class="mono inline-header">{% trans "Genres" %}:</div>
+           <div class="inline-body">
+                           {% inline_tag_list categories.genre tags %}
+               </div>
+        </div>
     {% endif %}
     {% if categories.epoch %}
-        <p><span class="mono">{% trans "Epochs" %}:</span>
-        {% inline_tag_list categories.epoch tags %}
-        </p>
+       <div class="inline-tag-list">
+               <div class="mono inline-header">{% trans "Epochs" %}:</div>
+           <div class="inline-body">
+                           {% inline_tag_list categories.epoch tags %}
+               </div>
+        </div>
     {% endif %}
     </div>
 
     {% if categories.theme %}
         <div class="hidden-box-wrapper">
-            <p><a href="#" class="hidden-box-trigger theme-list-link" class="mono">
+            <p><a href="#" class="hidden-box-trigger theme-list-link mono">
                {% trans "Motifs and themes" %}</a></p>
             <div class="hidden-box">
                 {% tag_list categories.theme tags %}
@@ -60,6 +70,9 @@
 
 
     <div class="right-column">
+        {% if theme_is_set %}
+            {% work_list object_list %}
+        {% else %}
         {% cite_promo tags 1 %}
 
         <div class="see-also">
             <ul>
         {% if last_tag.gazeta_link %}
         <li><a href="{{ last_tag.gazeta_link }}">
-            {% switch last_tag.category %}
-                {% case "author" %}
-                    {% trans "Read work's study of this author on Lektury.Gazeta.pl" %}
-                {% case "epoch" %}
-                    {% blocktrans %}Read study of epoch {{ last_tag }} on Lektury.Gazeta.pl{% endblocktrans %}
-                {% case "kind" %}
-                    {% blocktrans %}Read study of kind {{ last_tag }} on Lektury.Gazeta.pl{% endblocktrans %}
-                {% case "genre" %}
-                    {% blocktrans %}Read study of genre {{ last_tag }} on Lektury.Gazeta.pl{% endblocktrans %}
-                {% else %}
-                    {% trans "Read related study on Lektury.Gazeta.pl" %}
-            {% endswitch %}
+               {% trans "in Lektury.Gazeta.pl" %}
         </a></li>
         {% endif %}
         {% if last_tag.wiki_link %}
         <li><a href="{{ last_tag.wiki_link }}">
-               {% switch last_tag.category %}
-                           {% case "author" %}
-                                   {% trans "Read article about this author on Wikipedia" %}
-                               {% case "epoch" %}
-                    {% blocktrans %}Read article about epoch {{ last_tag }} on Wikipedia{% endblocktrans %}
-                               {% case "kind" %}
-                    {% blocktrans %}Read article about kind {{ last_tag }} on Wikipedia{% endblocktrans %}
-                               {% case "genre" %}
-                    {% blocktrans %}Read article about genre {{ last_tag }} on Wikipedia{% endblocktrans %}
-                               {% else %}
-                                   {% trans "Read related article on Wikipedia" %}
-                       {% endswitch %}
+                       {% trans "in Wikipedia" %}
         </a></li>
         {% endif %}
 
             </ul>
             {% endcomment %}
         </div>
+        {% endif %}
 
     </div>
 
 
 
 
-
+    {% if not theme_is_set %}
     <div id="books-list">
         {% if object_list %}
             {% work_list object_list %}
             {% trans "Sorry! Search cirteria did not match any resources." %}
             {% include "info/join_us.html" %}
         {% endif %}
-        {% endwith %}
     </div>
+    {% endif %}
+    {% endwith %}
 {% endblock %}
index 8732079..555b732 100755 (executable)
@@ -14,6 +14,7 @@ from django.views.decorators.cache import never_cache
 from django.conf import settings
 from ajaxable.utils import AjaxableFormView
 from catalogue.models import Book
+from ajaxable.utils import placeholdized
 
 
 def main_page(request):
@@ -25,6 +26,7 @@ def main_page(request):
 
 class LoginFormView(AjaxableFormView):
     form_class = AuthenticationForm
+    placeholdize = True
     title = _('Sign in')
     submit = _('Sign in')
     ajax_redirect = True
@@ -40,6 +42,7 @@ class LoginFormView(AjaxableFormView):
 
 class RegisterFormView(AjaxableFormView):
     form_class = UserCreationForm
+    placeholdize = True
     title = _('Register')
     submit = _('Register')
     ajax_redirect = True
@@ -51,7 +54,7 @@ class RegisterFormView(AjaxableFormView):
         return super(RegisterFormView, self).__call__(request)
 
     def success(self, form, request):
-        user = form.save()
+        form.save()
         user = auth.authenticate(
             username=form.cleaned_data['username'],
             password=form.cleaned_data['password1']
@@ -61,10 +64,11 @@ class RegisterFormView(AjaxableFormView):
 
 class LoginRegisterFormView(LoginFormView):
     template = 'auth/login_register.html'
+    title = _('You have to be logged in to continue')
 
     def extra_context(self):
         return {
-            "register_form": UserCreationForm(prefix='register'),
+            "register_form": placeholdized(UserCreationForm(prefix='register')),
             "register_submit": _('Register'),
         }