From 8fefd8bdaca07a3f5607de79c081dc0f7876fbc7 Mon Sep 17 00:00:00 2001 From: Radek Czajka Date: Fri, 27 Jan 2012 15:22:42 +0100 Subject: [PATCH 1/1] use html5 placeholder and hide labels, pretty fragments, more display fixes --- apps/ajaxable/templates/ajaxable/form.html | 3 +- apps/ajaxable/utils.py | 13 +++ apps/catalogue/templatetags/catalogue_tags.py | 17 ++-- apps/catalogue/views.py | 1 + apps/social/templates/social/sets_form.html | 3 +- apps/social/views.py | 1 + apps/suggest/views.py | 1 + wolnelektury/static/css/base.css | 9 ++ wolnelektury/static/css/book_box.css | 6 +- wolnelektury/static/css/catalogue.css | 47 ++++++++++- wolnelektury/static/css/cite.css | 16 +++- wolnelektury/static/css/dialogs.css | 11 +++ wolnelektury/static/css/social/shelf_tags.css | 18 ++++ wolnelektury/static/js/base.js | 30 +++---- .../templates/auth/login_register.html | 3 +- wolnelektury/templates/base.html | 12 ++- .../templates/catalogue/book_short.html | 3 +- .../templates/catalogue/book_wide.html | 2 +- .../templates/catalogue/fragment_short.html | 31 +++++++ .../templates/catalogue/inline_tag_list.html | 4 +- .../catalogue/tagged_object_list.html | 83 +++++++++---------- wolnelektury/views.py | 8 +- 22 files changed, 234 insertions(+), 88 deletions(-) diff --git a/apps/ajaxable/templates/ajaxable/form.html b/apps/ajaxable/templates/ajaxable/form.html index 1658b9be8..84e86e15f 100755 --- a/apps/ajaxable/templates/ajaxable/form.html +++ b/apps/ajaxable/templates/ajaxable/form.html @@ -1,7 +1,8 @@ {% load i18n %}

{{ title }}

-
+
    {{ form.as_ul }} diff --git a/apps/ajaxable/utils.py b/apps/ajaxable/utils.py index e32356aee..ac8d5c6f9 100755 --- a/apps/ajaxable/utils.py +++ b/apps/ajaxable/utils.py @@ -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, diff --git a/apps/catalogue/templatetags/catalogue_tags.py b/apps/catalogue/templatetags/catalogue_tags.py index 33eec324c..cf80bebb5 100644 --- a/apps/catalogue/templatetags/catalogue_tags.py +++ b/apps/catalogue/templatetags/catalogue_tags.py @@ -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 }}: {{ tag.name }}") + return capfirst(",
    ".join( + template.render(Context({'tag': tag, 'category': _(tag.category)})) for tag in tags)) + + def simple_title(tags): title = [] diff --git a/apps/catalogue/views.py b/apps/catalogue/views.py index 9044a809e..01600f5bc 100644 --- a/apps/catalogue/views.py +++ b/apps/catalogue/views.py @@ -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)) diff --git a/apps/social/templates/social/sets_form.html b/apps/social/templates/social/sets_form.html index eff951e13..ab982fe42 100755 --- a/apps/social/templates/social/sets_form.html +++ b/apps/social/templates/social/sets_form.html @@ -1,7 +1,8 @@ {% load i18n %}

    {{ title }}

    - + diff --git a/apps/social/views.py b/apps/social/views.py index 6ded289b2..d5362a436 100644 --- a/apps/social/views.py +++ b/apps/social/views.py @@ -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 diff --git a/apps/suggest/views.py b/apps/suggest/views.py index 15b65f24d..8a8df5bdb 100644 --- a/apps/suggest/views.py +++ b/apps/suggest/views.py @@ -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.') diff --git a/wolnelektury/static/css/base.css b/wolnelektury/static/css/base.css index 7b1c9ef4d..a7145ec18 100755 --- a/wolnelektury/static/css/base.css +++ b/wolnelektury/static/css/base.css @@ -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; diff --git a/wolnelektury/static/css/book_box.css b/wolnelektury/static/css/book_box.css index b9ef8f286..eb212a873 100755 --- a/wolnelektury/static/css/book_box.css +++ b/wolnelektury/static/css/book_box.css @@ -124,7 +124,7 @@ .book-box-body { height: 17em; - overflow: hidden; + overflow:hidden; position: relative; } @@ -134,7 +134,7 @@ .book-box-head { min-height: 7em; - margin-top: 1.4em; + padding-top: 1.4em; margin-bottom: 1em; } .book-box-head a { @@ -146,6 +146,8 @@ } .book-box-head .title { font-size: 2.4em; + height: 2.4em; + overflow:hidden; margin-top: .3em; } .book-box-body .tags { diff --git a/wolnelektury/static/css/catalogue.css b/wolnelektury/static/css/catalogue.css index b08d99bcc..a31d4c769 100755 --- a/wolnelektury/static/css/catalogue.css +++ b/wolnelektury/static/css/catalogue.css @@ -71,4 +71,49 @@ } .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; +} diff --git a/wolnelektury/static/css/cite.css b/wolnelektury/static/css/cite.css index 4335f2ee6..d6f9bbabf 100755 --- a/wolnelektury/static/css/cite.css +++ b/wolnelektury/static/css/cite.css @@ -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; +} diff --git a/wolnelektury/static/css/dialogs.css b/wolnelektury/static/css/dialogs.css index c3b968bb5..08255d3e7 100755 --- a/wolnelektury/static/css/dialogs.css +++ b/wolnelektury/static/css/dialogs.css @@ -73,12 +73,23 @@ 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; diff --git a/wolnelektury/static/css/social/shelf_tags.css b/wolnelektury/static/css/social/shelf_tags.css index b963b1c0c..812a1c96d 100755 --- a/wolnelektury/static/css/social/shelf_tags.css +++ b/wolnelektury/static/css/social/shelf_tags.css @@ -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 { @@ -16,3 +26,11 @@ color: #0b838d; border-radius: 1em; } + + +.social-shelf-tags:hover { + overflow: visible; + text-overflow: ellipsis; + white-space: normal; + z-index: 1000; +} diff --git a/wolnelektury/static/js/base.js b/wolnelektury/static/js/base.js index 7af03709d..8225a1f6c 100755 --- a/wolnelektury/static/js/base.js +++ b/wolnelektury/static/js/base.js @@ -35,27 +35,23 @@ $(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) }) }); diff --git a/wolnelektury/templates/auth/login_register.html b/wolnelektury/templates/auth/login_register.html index e262e2e82..ecaeaf4a1 100755 --- a/wolnelektury/templates/auth/login_register.html +++ b/wolnelektury/templates/auth/login_register.html @@ -6,7 +6,8 @@

    {% trans "or register" %}:

    -
    +
      {{ register_form.as_ul }} diff --git a/wolnelektury/templates/base.html b/wolnelektury/templates/base.html index 2477726fb..c9cfe1533 100644 --- a/wolnelektury/templates/base.html +++ b/wolnelektury/templates/base.html @@ -1,11 +1,9 @@ - - + + {% load cache compressed i18n %} {% load catalogue_tags reporting_stats sponsor_tags %} - {% block title %}{% trans "Wolne Lektury" %} :: @@ -76,12 +74,12 @@ <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> diff --git a/wolnelektury/templates/catalogue/book_short.html b/wolnelektury/templates/catalogue/book_short.html index 6173d7c29..304cdc63e 100644 --- a/wolnelektury/templates/catalogue/book_short.html +++ b/wolnelektury/templates/catalogue/book_short.html @@ -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> <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"> diff --git a/wolnelektury/templates/catalogue/book_wide.html b/wolnelektury/templates/catalogue/book_wide.html index 1507f3640..c778caa50 100644 --- a/wolnelektury/templates/catalogue/book_wide.html +++ b/wolnelektury/templates/catalogue/book_wide.html @@ -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 %} diff --git a/wolnelektury/templates/catalogue/fragment_short.html b/wolnelektury/templates/catalogue/fragment_short.html index 4526857bb..9fbe0cb9c 100644 --- a/wolnelektury/templates/catalogue/fragment_short.html +++ b/wolnelektury/templates/catalogue/fragment_short.html @@ -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 %} diff --git a/wolnelektury/templates/catalogue/inline_tag_list.html b/wolnelektury/templates/catalogue/inline_tag_list.html index d42f3f945..52e92c443 100755 --- a/wolnelektury/templates/catalogue/inline_tag_list.html +++ b/wolnelektury/templates/catalogue/inline_tag_list.html @@ -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 }} ({{ tag.book_count }})</a> + <li><a href="{% catalogue_url choices tag %}">{{ tag }} ({{ tag.book_count }})</a></li> {% endfor %} + </ul> {% endif %} diff --git a/wolnelektury/templates/catalogue/tagged_object_list.html b/wolnelektury/templates/catalogue/tagged_object_list.html index 1a6843a81..c7898d56c 100644 --- a/wolnelektury/templates/catalogue/tagged_object_list.html +++ b/wolnelektury/templates/catalogue/tagged_object_list.html @@ -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"> @@ -68,34 +81,12 @@ <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 %} @@ -114,6 +105,7 @@ </ul> {% endcomment %} </div> + {% endif %} </div> @@ -121,7 +113,7 @@ - + {% if not theme_is_set %} <div id="books-list"> {% if object_list %} {% work_list object_list %} @@ -129,6 +121,7 @@ {% trans "Sorry! Search cirteria did not match any resources." %} {% include "info/join_us.html" %} {% endif %} - {% endwith %} </div> + {% endif %} + {% endwith %} {% endblock %} diff --git a/wolnelektury/views.py b/wolnelektury/views.py index 8732079ff..555b732bb 100755 --- a/wolnelektury/views.py +++ b/wolnelektury/views.py @@ -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'), } -- 2.20.1