From aed70facf3a26e27b1a96b04cad8139de600e42f Mon Sep 17 00:00:00 2001 From: Radek Czajka Date: Sat, 10 Jun 2023 17:51:00 +0200 Subject: [PATCH] Searching, filtering fixes. --- src/catalogue/static/2022/book/filter.js | 15 +++++- .../templates/catalogue/2022/author_box.html | 2 +- .../catalogue/2022/author_detail.html | 2 +- .../templates/catalogue/2022/book_list.html | 24 +++++++-- .../catalogue/2022/theme_detail.html | 2 +- .../catalogue/2022/themed_book_list.html | 4 +- .../catalogue/differentiate_tags.html | 10 ++-- src/catalogue/urls.py | 8 +-- src/catalogue/views.py | 26 ++++++++-- .../templates/social/2022/my_shelf.html | 4 +- src/wolnelektury/static/2022/more.scss | 4 -- .../static/2022/styles/layout/_author.scss | 49 +++++++++++++++---- .../static/2022/styles/layout/_books.scss | 35 ++++++++++++- .../2022/styles/layout/_navigation.scss | 17 +++++++ .../static/2022/styles/local.scss | 1 + src/wolnelektury/static/js/2022.js | 6 +++ src/wolnelektury/static/js/search.js | 4 +- 17 files changed, 169 insertions(+), 44 deletions(-) diff --git a/src/catalogue/static/2022/book/filter.js b/src/catalogue/static/2022/book/filter.js index 43b6c4e40..2ff426234 100644 --- a/src/catalogue/static/2022/book/filter.js +++ b/src/catalogue/static/2022/book/filter.js @@ -95,8 +95,19 @@ $(".is-active", $(this).parent()).removeClass("is-active"); $(this).addClass("is-active"); let prop = $(this).attr('data-order'); + $(".l-books__sorting select").val(prop); + if (prop == '-') prop = ''; + resort(prop); + }); + $(".l-books__sorting select").on('change', function() { + let prop = $(this).val(); + $(".is-active", $(this).parent()).removeClass("is-active"); + $("[data-order='" + prop +"']", $(this).parent()).addClass("is-active"); + if (prop == '-') prop = ''; + resort(prop); + }); - + function resort(prop) { // do we NOW have pages (possibly after filtering)? // if we don't have pages, we can just sort here. let havePages = $('.l-pagination li').length > 0; @@ -118,6 +129,6 @@ }, 200); } }, 200); - }); + } })(jQuery); diff --git a/src/catalogue/templates/catalogue/2022/author_box.html b/src/catalogue/templates/catalogue/2022/author_box.html index 35a3ea05b..3b474bf79 100644 --- a/src/catalogue/templates/catalogue/2022/author_box.html +++ b/src/catalogue/templates/catalogue/2022/author_box.html @@ -10,7 +10,7 @@
{% if tag.photo %}
- {{ tag.name }} + {{ tag.name }}
{{ tag.photo_attribution|safe }}
diff --git a/src/catalogue/templates/catalogue/2022/author_detail.html b/src/catalogue/templates/catalogue/2022/author_detail.html index 9596852c3..9b00d8bbd 100644 --- a/src/catalogue/templates/catalogue/2022/author_detail.html +++ b/src/catalogue/templates/catalogue/2022/author_detail.html @@ -56,7 +56,7 @@
-
+

{% nice_title_from_tags tags categories %}

diff --git a/src/catalogue/templates/catalogue/2022/book_list.html b/src/catalogue/templates/catalogue/2022/book_list.html index e08cf3ad9..7c6e310a5 100644 --- a/src/catalogue/templates/catalogue/2022/book_list.html +++ b/src/catalogue/templates/catalogue/2022/book_list.html @@ -56,7 +56,9 @@
{% for ordering in view.get_orderings %} {% endfor %} +
{% endif %}
-
+
+
-

{% nice_title_from_tags tags suggested_tags_by_category %}

+

{% nice_title_from_tags tags suggested_tags_by_category %}

{% if suggested_tags %}
{% for tag in suggested_tags %} @@ -83,6 +100,7 @@ {% endif %}
+
{% autopaginate object_list view.page_size %} diff --git a/src/catalogue/templates/catalogue/2022/theme_detail.html b/src/catalogue/templates/catalogue/2022/theme_detail.html index b4db65d69..df34d17de 100644 --- a/src/catalogue/templates/catalogue/2022/theme_detail.html +++ b/src/catalogue/templates/catalogue/2022/theme_detail.html @@ -40,7 +40,7 @@
-
+

{% nice_title_from_tags tags categories %}

{% if suggest %} diff --git a/src/catalogue/templates/catalogue/2022/themed_book_list.html b/src/catalogue/templates/catalogue/2022/themed_book_list.html index 8ba5e5861..48053bc79 100644 --- a/src/catalogue/templates/catalogue/2022/themed_book_list.html +++ b/src/catalogue/templates/catalogue/2022/themed_book_list.html @@ -40,9 +40,9 @@
-
+
-

{% nice_title_from_tags tags categories %}

+

{% nice_title_from_tags tags categories %}

{% if suggest %}
{% for tag in suggest %} diff --git a/src/catalogue/templates/catalogue/differentiate_tags.html b/src/catalogue/templates/catalogue/differentiate_tags.html index 6c0fcfca4..05709dd8a 100644 --- a/src/catalogue/templates/catalogue/differentiate_tags.html +++ b/src/catalogue/templates/catalogue/differentiate_tags.html @@ -1,4 +1,4 @@ -{% extends "base/base.html" %} +{% extends request.EXPERIMENTS.layout.value|yesno:"2022/base_simple.html,base/base.html" %} {% load i18n %} {% load catalogue_tags %} @@ -10,10 +10,10 @@

{% title_from_tags tags %}

{% trans "The criteria are ambiguous. Please select one of the following options:" %}

-
- {% for option in options %} -
-

{% if tags %}{% title_from_tags tags %}, {% endif %}{%title_from_tags option.tags %}{% if unparsed %}, {{unparsed|join:', '}}{% endif %}

+ diff --git a/src/catalogue/urls.py b/src/catalogue/urls.py index 840d2bfae..7049b1c85 100644 --- a/src/catalogue/urls.py +++ b/src/catalogue/urls.py @@ -30,12 +30,12 @@ urlpatterns = [ path('rodzaj/', views.tag_catalogue, {'category': 'kind'}, name='kind_catalogue'), path('motyw/', views.tag_catalogue, {'category': 'theme'}, name='theme_catalogue'), - path('galeria/', views.GalleryView.as_view(), name='gallery'), + path('galeria/', views.gallery, name='gallery'), path('kolekcje/', views.collections, name='catalogue_collections'), - path('lektury/', views.LiteratureView.as_view(), name='book_list'), + path('lektury/', views.literature, name='book_list'), path('lektury//', views.collection, name='collection'), - path('audiobooki/', views.AudiobooksView.as_view(), name='audiobook_list'), + path('audiobooki/', views.audiobooks, name='audiobook_list'), path('daisy/', views.daisy_list, name='daisy_list'), path('jtags/', search.views.hint, {'param': 'q', 'mozhint': True}, name='jhint'), path('nowe/', ListView.as_view( @@ -76,7 +76,7 @@ urlpatterns = [ name='tagged_object_list_gallery'), re_path(r'^audiobooki/(?P[a-zA-Z0-9-/]*)/$', views.tagged_object_list, {'list_type': 'audiobooks'}, name='tagged_object_list_audiobooks'), - re_path(r'^(?P[a-zA-Z0-9-/]*)/$', views.TaggedObjectList.as_view(), + re_path(r'^(?P[a-zA-Z0-9-/]*)/$', views.tagged_object_list, {'list_type': 'books'}, name='tagged_object_list'), ] diff --git a/src/catalogue/views.py b/src/catalogue/views.py index 2d8aea715..bb5d43ff0 100644 --- a/src/catalogue/views.py +++ b/src/catalogue/views.py @@ -115,12 +115,18 @@ class ObjectListView(TemplateView): orderings = {} default_ordering = None - def setup(self, request, **kwargs): - super().setup(request, **kwargs) + def analyse(self): self.is_themed = False self.ctx = ctx = {} ctx['tags'] = [] + def dispatch(self, *args, **kwargs): + try: + self.analyse() + except ResponseInstead as e: + return e.response + return super().dispatch(*args, **kwargs) + def get_orderings(self): order = self.get_order() return [ @@ -242,6 +248,7 @@ class LiteratureView(BookList): class AudiobooksView(LiteratureView): title = gettext_lazy('Audiobooks') + list_type = 'audiobooks' def get_queryset(self): return Book.objects.filter(findable=True, media__type='mp3').distinct() @@ -256,9 +263,9 @@ class GalleryView(ArtList): class TaggedObjectList(BookList): - def setup(self, request, tags, **kwargs): - super().setup(request, **kwargs) - self.ctx['tags'] = analyse_tags(request, tags) + def analyse(self): + super().analyse() + self.ctx['tags'] = analyse_tags(self.request, self.kwargs['tags']) self.ctx['fragment_tags'] = [t for t in self.ctx['tags'] if t.category in ('theme', 'object')] self.ctx['work_tags'] = [t for t in self.ctx['tags'] if t not in self.ctx['fragment_tags']] self.is_themed = self.ctx['has_theme'] = bool(self.ctx['fragment_tags']) @@ -388,15 +395,21 @@ def object_list(request, objects, fragments=None, related_tags=None, tags=None, def literature(request): + if request.EXPERIMENTS['layout'].value: + return LiteratureView.as_view()(request) books = Book.objects.filter(parent=None, findable=True) return object_list(request, books, related_tags=get_top_level_related_tags([])) def gallery(request): + if request.EXPERIMENTS['layout'].value: + return GalleryView.as_view()(request) return object_list(request, Picture.objects.all(), list_type='gallery') def audiobooks(request): + if request.EXPERIMENTS['layout'].value: + return AudiobooksView.as_view()(request) audiobooks = Book.objects.filter(findable=True, media__type__in=('mp3', 'ogg')).distinct() return object_list(request, audiobooks, list_type='audiobooks', extra={ 'daisy': Book.objects.filter(findable=True, media__type='daisy').distinct(), @@ -461,6 +474,9 @@ def theme_list(request, tags, list_type): def tagged_object_list(request, tags, list_type): + if request.EXPERIMENTS['layout'].value and list_type in ('books', 'audiobooks'): + return TaggedObjectList.as_view()(request, tags=tags) + try: tags = analyse_tags(request, tags) except ResponseInstead as e: diff --git a/src/social/templates/social/2022/my_shelf.html b/src/social/templates/social/2022/my_shelf.html index 2e2b8d6fd..a955b31b7 100644 --- a/src/social/templates/social/2022/my_shelf.html +++ b/src/social/templates/social/2022/my_shelf.html @@ -31,10 +31,10 @@
-
+
-

 

+

 

{% if suggest %}
{% with list_type='book' %} diff --git a/src/wolnelektury/static/2022/more.scss b/src/wolnelektury/static/2022/more.scss index 7505aab5b..65516666f 100644 --- a/src/wolnelektury/static/2022/more.scss +++ b/src/wolnelektury/static/2022/more.scss @@ -5,10 +5,6 @@ body.is-open { overflow-y: hidden; } -.l-navigation__logo { - height: 44px; -} - .l-navigation__menu { .scrollable { height: 100%; diff --git a/src/wolnelektury/static/2022/styles/layout/_author.scss b/src/wolnelektury/static/2022/styles/layout/_author.scss index 1156cdd4c..a07fa566c 100644 --- a/src/wolnelektury/static/2022/styles/layout/_author.scss +++ b/src/wolnelektury/static/2022/styles/layout/_author.scss @@ -3,6 +3,13 @@ display: flex; padding: 50px 0; justify-content: space-between; + flex-direction: column; + align-items: center; + + @include rwd($break-flow) { + flex-direction: row; + align-items: flex-start; + } h2 { margin: 0; @@ -21,9 +28,13 @@ width: 100%; &:nth-child(1) { - div { - display: flex; + display: flex; + flex-wrap: wrap; + + @include rwd($break-wide) { + flex-wrap: nowrap; + } } h2 { @@ -31,21 +42,34 @@ } .l-author__photo { - width: 100%; - max-width: 238px; + width: calc(50% - 24px); + @include rwd($break-wide) { + width: 238px; + } + + img { + width:100%; + } } } &:nth-child(2) { - max-width: 415px; - padding-top: 48px; - padding-left: 32px; + max-width: 415px - 32px; + padding-top: 48px; + @include rwd($break-flow) { + max-width: 415px; + padding-left: 32px; + } } } } .l-author__info { - min-width: 364px; + display: contents; + min-width: 364px; + @include rwd($break-wide) { + display: block; + } h3 { margin: 0; @@ -54,6 +78,8 @@ line-height: 140%; letter-spacing: -0.01em; color: #007880; + + width: 40%; } p { margin-top: 20px; @@ -98,8 +124,11 @@ } .l-author__photo { - margin: 0; - margin-right: 50px; + margin: 0; + margin-right: 16px; + @include rwd($break-wide) { + margin-right: 50px; + } img { border-radius: 10px; overflow: hidden; diff --git a/src/wolnelektury/static/2022/styles/layout/_books.scss b/src/wolnelektury/static/2022/styles/layout/_books.scss index b59e48fd5..51eaba1eb 100644 --- a/src/wolnelektury/static/2022/styles/layout/_books.scss +++ b/src/wolnelektury/static/2022/styles/layout/_books.scss @@ -139,16 +139,25 @@ .l-books__header { width: 100%; display: flex; + gap: 16px; + flex-direction: column; margin-top: 34px; align-items: center; justify-content: space-between; + align-items: stretch; + + @include rwd($break-flow) { + flex-direction: row; + } } .l-books__input { position: relative; display: flex; align-content: center; - width: 560px; + @include rwd($break-flow) { + width: 560px; + } .icon { @include font-size(22px); @@ -172,10 +181,13 @@ border-radius: 52px; border: 1px solid #D9D9D9; width: 100%; - max-width: 580px; outline: 0; transition: border $ease-out 350ms; + @input rwd($break-flow) { + max-width: 580px; + } + &:focus { border-color: #007880; } @@ -185,6 +197,8 @@ .l-books__sorting { display: flex; align-content: center; + align-items: center; + justify-content: center; span { font-weight: $bold; @@ -196,8 +210,21 @@ div { display: flex; align-content: center; + flex-direction: column; + @include rwd($break-flow) { + flex-direction: row; + } + + select { + margin-left: 30px; + @include rwd($break-flow) { + display: none; + } + } + button { + display: none; border: 0; padding: 0; margin: 0 0 0 30px; @@ -209,6 +236,10 @@ color: #808080; cursor: pointer; + @include rwd($break-flow) { + display: block; + } + &.is-active { color: #083F4D; font-weight: $semibold; diff --git a/src/wolnelektury/static/2022/styles/layout/_navigation.scss b/src/wolnelektury/static/2022/styles/layout/_navigation.scss index 12b236a64..e2ff38618 100644 --- a/src/wolnelektury/static/2022/styles/layout/_navigation.scss +++ b/src/wolnelektury/static/2022/styles/layout/_navigation.scss @@ -55,7 +55,23 @@ body { .l-navigation__logo { display: flex; position: relative; + height: 44px; + width: 153px; + flex-shrink: 0; + overflow: hidden; + transition: .5s width; + @include rwd($break-menu) { + width: 230px; + } + + &.search-active { + width: 30px; + @include rwd($break-menu) { + width: 230px; + } + } + img { width: 153px; @include rwd($break-menu) { @@ -89,6 +105,7 @@ body { max-width: 580px; margin-left: 20px; margin-right: 20px; + flex-grow: 1; @include rwd($break-menu) { margin-left: 60px; diff --git a/src/wolnelektury/static/2022/styles/local.scss b/src/wolnelektury/static/2022/styles/local.scss index 982350906..7ea03fa3e 100644 --- a/src/wolnelektury/static/2022/styles/local.scss +++ b/src/wolnelektury/static/2022/styles/local.scss @@ -225,6 +225,7 @@ $red: #FF4C54; .with-filter { padding: 20px 0 0; position: relative; + width: 100%; h2 { margin-bottom: 0; diff --git a/src/wolnelektury/static/js/2022.js b/src/wolnelektury/static/js/2022.js index 1b111e6b5..cbf143057 100644 --- a/src/wolnelektury/static/js/2022.js +++ b/src/wolnelektury/static/js/2022.js @@ -2,6 +2,12 @@ $(function() { $("#search").search(); + $("#search").on('focus', function() { + $(".l-navigation__logo").addClass('search-active'); + }); + $("#search").on('blur', function() { + $(".l-navigation__logo").removeClass('search-active'); + }); }); })(jQuery); diff --git a/src/wolnelektury/static/js/search.js b/src/wolnelektury/static/js/search.js index 7f2a69856..e3e50b780 100644 --- a/src/wolnelektury/static/js/search.js +++ b/src/wolnelektury/static/js/search.js @@ -20,8 +20,8 @@ var __bind = function (self, fn) { }; this.element.autocomplete($.extend(opts, this.options)); - this.element.autocomplete('instance')._renderItem = __bind(this, this.render_item_2022); - this.element.data('autocomplete')._renderItem = __bind(this, this.render_item);; + if (this.element.autocomplete('instance') !== undefined) this.element.autocomplete('instance')._renderItem = __bind(this, this.render_item_2022); + if (this.element.data('autocomplete') !== undefined) this.element.data('autocomplete')._renderItem = __bind(this, this.render_item);; }, enter: function(event, ui) { -- 2.20.1