From: Radek Czajka <rczajka@rczajka.pl>
Date: Sat, 10 Jun 2023 15:51:00 +0000 (+0200)
Subject: Searching, filtering fixes.
X-Git-Url: https://git.mdrn.pl/wolnelektury.git/commitdiff_plain/aed70facf3a26e27b1a96b04cad8139de600e42f?ds=inline;hp=2aff714cb52d85d39824728d70b3272bb4fd5064

Searching, filtering fixes.
---

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 @@
   <div>
     {% if tag.photo %}
       <figure class="l-author__photo">
-        <img src="{{ tag.photo.url }}" alt="{{ tag.name }}" style="width: 238px;">
+        <img src="{{ tag.photo.url }}" alt="{{ tag.name }}">
         <figcaption>
           {{ tag.photo_attribution|safe }}
         </figcaption>
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 @@
       </div>
     </div>
   </div>
-  <div class="l-author with-filter">
+  <div class="with-filter">
 
     <div class="row">
       <h2>{% nice_title_from_tags tags categories %}</h2>
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 @@
         <div>
           {% for ordering in view.get_orderings %}
             <button
-                {% if not ordering.default %}
+                {% if ordering.default %}
+                data-order="-"
+                {% else %}
                 data-order="{{ ordering.slug }}"
                 {% endif %}
                 {% if ordering.active %}
@@ -64,14 +66,29 @@
                 {% endif %}
             >{{ ordering.name }}</button>
           {% endfor %}
+          <select name="sorting">
+            {% for ordering in view.get_orderings %}
+              <option
+                  {% if ordering.default %}
+                  value="-"
+                  {% else %}
+                  value="{{ ordering.slug }}"
+                  {% endif %}
+                  {% if ordering.active %}
+                  selected="selected"
+                  {% endif %}
+              >{{ ordering.name }}</option>
+          {% endfor %}
+          </select>
         </div>
       </div>
       {% endif %}
     </div>
   </div>
-  <div class="l-author with-filter">
+  <div class="l-section">
+  <div class="with-filter">
     <div class="row">
-      <h2>{% nice_title_from_tags tags suggested_tags_by_category %}</h2>
+      <h2 class="header">{% nice_title_from_tags tags suggested_tags_by_category %}</h2>
       {% if suggested_tags %}
         <div class="filter-container">
           {% for tag in suggested_tags %}
@@ -83,6 +100,7 @@
       {% endif %}
     </div>
   </div>
+  </div>
 
   {% 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 @@
         </div>
       </div>
     </div>
-    <div class="l-author with-filter">
+    <div class="with-filter">
       <div class="row">
         <h2>{% nice_title_from_tags tags categories %}</h2>
         {% 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 @@
         </div>
       </div>
     </div>
-    <div class="l-author with-filter">
+    <div class="with-filter">
       <div class="row">
-        <h2>{% nice_title_from_tags tags categories %}</h2>
+        <h2 class="header">{% nice_title_from_tags tags categories %}</h2>
         {% if suggest %}
           <div class="filter-container">
             {% 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 @@
   <h1>{% title_from_tags tags %}</h1>
 
   <p>{% trans "The criteria are ambiguous. Please select one of the following options:" %}</p>
-    <div id="books-list">
-      {% for option in options %}
-        <div class="book-description">
-          <p><a href="{% url 'tagged_object_list' option.url_args %}">{% if tags %}{% title_from_tags tags %}, {% endif %}<em>{%title_from_tags option.tags %}</em>{% if unparsed %}, {{unparsed|join:', '}}{% endif %}</a></p>
+  <div id="books-list">
+    {% for option in options %}
+      <div class="book-description">
+        <p><a href="{% url 'tagged_object_list' option.url_args %}">{% if tags %}{% title_from_tags tags %}, {% endif %}<em>{%title_from_tags option.tags %}</em>{% if unparsed %}, {{unparsed|join:', '}}{% endif %}</a></p>
         </div>
       {% endfor %}
     </div>
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/<slug:slug>/', 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<tags>[a-zA-Z0-9-/]*)/$', views.tagged_object_list, {'list_type': 'audiobooks'},
         name='tagged_object_list_audiobooks'),
-    re_path(r'^(?P<tags>[a-zA-Z0-9-/]*)/$', views.TaggedObjectList.as_view(),
+    re_path(r'^(?P<tags>[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 @@
     </div>
   </div>
 
-  <div class="l-author with-filter">
+  <div class="with-filter">
 
     <div class="row">
-      <h2>&nbsp;</h2>
+      <h2 class="header">&nbsp;</h2>
       {% if suggest %}
         <div class="filter-container">
           {% 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) {