new layout fixes

diff --git a/src/catalogue/static/player/2022_player.js b/src/catalogue/static/player/2022_player.js
index f6dc069..0efe2fc 100644 (file)
--- a/src/catalogue/static/player/2022_player.js
+++ b/src/catalogue/static/player/2022_player.js
@@ -12,7 +12,45 @@
             var speed = 1;
             var totalDurationLeft = 0;
             var lastUpdate = 0;
+            var player = null;
+
+            var setMedia = function(elem, time=0) {
+                console.log('setMedia', elem, time);
+                var media = {}
+
+                media['mp3'] = elem.attr('data-mp3');
+                media['oga'] = elem.attr('data-ogg');
+                media['id'] = elem.attr('data-media-id');
+
+                $(".c-player__head", $root).html(
+                    $(".attribution", elem).html())
+                ;
+                $(".c-player__info", $root).html(
+                    $(".title", elem).html()
+                );
+                $(".c-media__caption .content", $root).html($(".project-description", elem).html());
+                $(".c-media__caption .license", $root).html($(".license", elem).html());
+                $(".c-media__caption .project-logo", $root).html($(".project-icon", elem).html());
+
+                player.jPlayer("setMedia", media);
+                player.jPlayer("option", "playbackRate", speed);
+                player.jPlayer("pause", time);
+
+                $currentMedia = elem;
+                $(".play-prev", $root).prop("disabled", !elem.prev().length);
+                $(".play-next", $root).prop("disabled", !elem.next().length);
+
+                let du = elem.data('duration');
+                currentDuration = du;
+                elem.nextAll().each(function() {
+                    du += $(this).data('duration');
+                });
+                totalDurationLeft = du;
+
+                return player;
+            };
 
+            
         $self.jPlayer({
             swfPath: "/static/js/contrib/jplayer/",
             solution: "html,flash",
@@ -21,50 +59,14 @@
             useStateClassSkin: true,
 
             ready: function() {
-                var player = $(this);
+                player = $(this);
                 console.log(1);
 
-                var setMedia = function(elem, time=0) {
-                    console.log('setMedia', elem, time);
-                    var media = {}
-
-                    media['mp3'] = elem.attr('data-mp3');
-                    media['oga'] = elem.attr('data-ogg');
-                    media['id'] = elem.attr('data-media-id');
-
-                    $(".c-player__head", $root).html(
-                        $(".attribution", elem).html())
-                    ;
-                    $(".c-player__info", $root).html(
-                        $(".title", elem).html()
-                    );
-                    $(".c-media__caption .content", $root).html($(".project-description", elem).html());
-                    $(".c-media__caption .license", $root).html($(".license", elem).html());
-                    $(".c-media__caption .project-logo", $root).html($(".project-icon", elem).html());
-                    
-                    player.jPlayer("setMedia", media);
-                    $("audio")[0].playbackRate = speed;
-                    player.jPlayer("pause", time);
-
-                    $currentMedia = elem;
-                    $(".play-prev", $root).prop("disabled", !elem.prev().length);
-                    $(".play-next", $root).prop("disabled", !elem.next().length);
-
-                    let du = elem.data('duration');
-                    currentDuration = du;
-                    elem.nextAll().each(function() {
-                        du += $(this).data('duration');
-                    });
-                    totalDurationLeft = du;
-
-                    return player;
-                };
-
                 let selectItem = $('.c-select li');
                 selectItem.on('click', function() {
                     let speedStr = $(this).data('speed');
                     speed = parseFloat(speedStr);
-                    $("audio")[0].playbackRate = speed;
+                    player.jPlayer("option", "playbackRate", speed);
                     localStorage['audiobook-speed'] = speedStr;
                 });
                 
@@ -149,6 +151,14 @@
                     localStorage["audiobook-history"] = JSON.stringify(audiobooks);
                     lastUpdate = t;
                 }
+            },
+
+
+            ended: function(event) {
+                let p = $currentMedia.next();
+                if (p.length) {
+                    setMedia(p).jPlayer("play");
+                }
             }
         });
       });

diff --git a/src/catalogue/templates/catalogue/2022/book_detail.html b/src/catalogue/templates/catalogue/2022/book_detail.html
index a70cba0..4eb6ec4 100644 (file)
--- a/src/catalogue/templates/catalogue/2022/book_detail.html
+++ b/src/catalogue/templates/catalogue/2022/book_detail.html
@@ -128,11 +128,16 @@
           <header class="l-header">
             <div class="l-header__content">
               <p>{% for author in book.authors %}<a href="{{ author.get_absolute_url }}">{{ author.name }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
-                {% if book.translators %}
-                  (tłum. {% for translator in book.translators %}{{ translator }}{% endfor %})
-                {% endif %}
               </p>
               <h1><a href="{{ book.get_absolute_url }}">{{ book.title }}</a></h1>
+              {% if book.translators %}
+                <p class="l-header__translators">
+                  tłum.
+                  {% for translator in book.translators %}
+                    {{ translator }}{% if not forloop.last %}, {% endif %}
+                  {% endfor %}
+                </p>
+              {% endif %}
             </div>
             <div class="l-header__actions">
               <form method='post' action='{% url 'social_like_book' book.slug %}'>

diff --git a/src/wolnelektury/static/2022/styles/layout/_aside.scss b/src/wolnelektury/static/2022/styles/layout/_aside.scss
index e1689b9..934ad64 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_aside.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_aside.scss
@@ -29,10 +29,10 @@
     line-height: 26px;
 
     span {
-      color: #007880;
     }
 
     a {
+      color: #007880;
       &:hover {
         text-decoration: underline;
       }

diff --git a/src/wolnelektury/static/2022/styles/layout/_header.scss b/src/wolnelektury/static/2022/styles/layout/_header.scss
index cf30a2d..7518ee7 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_header.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_header.scss
@@ -46,6 +46,11 @@
       &:not(:last-child):after { content: "/";margin-left: 10px; }
     }
   }
+
+  .l-header__translators {
+      font-size: 18px;
+      margin-top: 5px;
+  }
 }
 
 .l-header__actions {

diff --git a/src/wolnelektury/static/2022/styles/layout/_navigation.scss b/src/wolnelektury/static/2022/styles/layout/_navigation.scss
index c212fe4..51a9420 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_navigation.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_navigation.scss
@@ -111,3 +111,10 @@ $teal: #007880;
   margin: auto;
   cursor: pointer;
 }
+
+
+
+.ui-autocomplete a {
+    display: block;
+    transition: none;
+}

diff --git a/src/wolnelektury/static/js/search.js b/src/wolnelektury/static/js/search.js
index 34c63f3..7f2a698 100644 (file)
--- a/src/wolnelektury/static/js/search.js
+++ b/src/wolnelektury/static/js/search.js
@@ -1,6 +1,6 @@
 
 var __bind = function (self, fn) {
-    return function() { fn.apply(self, arguments); };
+    return function() { return fn.apply(self, arguments); };
 };
 
 (function($){
@@ -19,8 +19,9 @@ var __bind = function (self, fn) {
                     source: this.element.data('source')
             };
 
-            this.element.autocomplete($.extend(opts, this.options))
-            .data("autocomplete")._renderItem = __bind(this, this.render_item);
+            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);;
         },
 
         enter: function(event, ui) {
@@ -43,6 +44,18 @@ var __bind = function (self, fn) {
             .appendTo(ul);
         },
 
+        render_item_2022: function (ul, item) {
+            var label;
+            if (item['author']) {
+                label = '<cite>' + item.label + '</cite>, ' + item['author'];
+            } else {
+                label = item.label;
+            }
+            return $("<li></li>")
+            .append('<a href="'+this.options.host+item.url+'">'+label+'</a>')
+            .appendTo(ul);
+        },
+
         destroy: function() {
         }
     });