fix #3658 Dane książki nachodzą na ramkę odtwarzacza

diff --git a/src/catalogue/static/jplayer/jplayer.blue.monday.css b/src/catalogue/static/jplayer/jplayer.blue.monday.css
index d1214c5..8d30994 100644 (file)
--- a/src/catalogue/static/jplayer/jplayer.blue.monday.css
+++ b/src/catalogue/static/jplayer/jplayer.blue.monday.css
@@ -14,15 +14,15 @@
  * Date: 1st September 2011\r
  */\r
 \r
  * Date: 1st September 2011\r
  */\r
 \r

+.jp-type-single {\r
+       padding: 5px 10px 0 10px;\r
+}\r

 .jp-audio .title {\r
 .jp-audio .title {\r

-    font-size: 11px;\r
-    position: relative;\r
-    left: 10px;\r
-    top: 5px;\r
-    z-index: 100;\r
+       font-size: 11px;\r
+       z-index: 100;\r

 }\r
 .play-prev, .play-next {\r
 }\r
 .play-prev, .play-next {\r

-    cursor: pointer;\r
+       cursor: pointer;\r

 }\r
 \r
 div.jp-audio,\r
 }\r
 \r
 div.jp-audio,\r


@@ -84,7 +84,8 @@ div.jp-video-full div.jp-interface {
 \r
 div.jp-interface {\r
        position: relative;\r
 \r
 div.jp-interface {\r
        position: relative;\r

-       background-color:#eee;\r
+       margin-top: -5px;\r
+       margin-left: -10px;\r

        width:100%;\r
 }\r
 \r
        width:100%;\r
 }\r
 \r


@@ -117,28 +118,28 @@ div.jp-controls-holder {
 div.jp-interface ul.jp-controls {\r
        list-style-type:none;\r
        margin:0;\r
 div.jp-interface ul.jp-controls {\r
        list-style-type:none;\r
        margin:0;\r

-       padding: 0;
-       overflow:hidden;
-}
-
-div.jp-audio ul.jp-controls {
+       padding: 0;\r
+       overflow:hidden;\r
+}\r
+\r
+div.jp-audio ul.jp-controls {\r

        width: 320px;\r
        padding:20px 20px 0 20px;\r
        width: 320px;\r
        padding:20px 20px 0 20px;\r

-}
-
-div.jp-video div.jp-type-single ul.jp-controls {
+}\r
+\r
+div.jp-video div.jp-type-single ul.jp-controls {\r

        width: 78px;\r
        margin-left: 200px;\r
        width: 78px;\r
        margin-left: 200px;\r

-}
-
-div.jp-video div.jp-type-playlist ul.jp-controls {
+}\r
+\r
+div.jp-video div.jp-type-playlist ul.jp-controls {\r

        width: 134px;\r
        margin-left: 172px;\r
        width: 134px;\r
        margin-left: 172px;\r

-}
+}\r

 div.jp-video ul.jp-controls,\r
 div.jp-interface ul.jp-controls li {\r
 div.jp-video ul.jp-controls,\r
 div.jp-interface ul.jp-controls li {\r

-       display:inline;
-       float: left;
+       display:inline;\r
+       float: left;\r

 }\r
 \r
 div.jp-interface ul.jp-controls a {\r
 }\r
 \r
 div.jp-interface ul.jp-controls a {\r


@@ -165,29 +166,29 @@ a.jp-pause {
 a.jp-pause:hover {\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") -41px -42px no-repeat;\r
 }\r
 a.jp-pause:hover {\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") -41px -42px no-repeat;\r
 }\r

-
+\r

 a.jp-stop, a.jp-previous, a.jp-next {\r
        width:28px;\r
 a.jp-stop, a.jp-previous, a.jp-next {\r
        width:28px;\r

-       height:28px;
+       height:28px;\r

        margin-top:6px;\r
 }\r
        margin-top:6px;\r
 }\r

-
+\r

 a.jp-stop {\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -83px no-repeat;\r
 a.jp-stop {\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -83px no-repeat;\r

-       margin-left:10px;
-}
+       margin-left:10px;\r
+}\r

 \r
 a.jp-stop:hover {\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") -29px -83px no-repeat;\r
 \r
 a.jp-stop:hover {\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") -29px -83px no-repeat;\r

-}
+}\r

 \r
 a.jp-previous {\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -112px no-repeat;\r
 }\r
 a.jp-previous:hover {\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") -29px -112px no-repeat;\r
 \r
 a.jp-previous {\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -112px no-repeat;\r
 }\r
 a.jp-previous:hover {\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") -29px -112px no-repeat;\r

-}
-
+}\r
+\r

 a.jp-next {\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -141px no-repeat;\r
 }\r
 a.jp-next {\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -141px no-repeat;\r
 }\r


@@ -248,19 +249,19 @@ a.jp-mute,
 a.jp-unmute,\r
 a.jp-volume-max {\r
        width:18px;\r
 a.jp-unmute,\r
 a.jp-volume-max {\r
        width:18px;\r

-       height:15px;
-       margin-top:12px;
-}
-
+       height:15px;\r
+       margin-top:12px;\r
+}\r
+\r

 div.jp-audio div.jp-type-single a.jp-mute,\r
 div.jp-audio div.jp-type-single a.jp-mute,\r

-div.jp-audio div.jp-type-single a.jp-unmute {
-       margin-left: 180px;
-}
-
+div.jp-audio div.jp-type-single a.jp-unmute {\r
+       margin-left: 180px;\r
+}\r
+\r

 div.jp-audio div.jp-type-playlist a.jp-mute,\r
 div.jp-audio div.jp-type-playlist a.jp-mute,\r

-div.jp-audio div.jp-type-playlist a.jp-unmute {
+div.jp-audio div.jp-type-playlist a.jp-unmute {\r

        margin-left: 154px;\r
        margin-left: 154px;\r

-}
+}\r

 \r
 div.jp-audio a.jp-volume-max {\r
        margin-left: 56px;\r
 \r
 div.jp-audio a.jp-volume-max {\r
        margin-left: 56px;\r


@@ -275,10 +276,11 @@ div.jp-video a.jp-volume-max {
 }\r
 \r
 div.jp-video a.jp-mute,\r
 }\r
 \r
 div.jp-video a.jp-mute,\r

-div.jp-video a.jp-unmute {
+div.jp-video a.jp-unmute {\r

        left: 50px;\r
        left: 50px;\r

-}
-\r\r
+}\r
+\r
+\r

 div.jp-video a.jp-volume-max {\r
        left: 134px;\r
 }\r
 div.jp-video a.jp-volume-max {\r
        left: 134px;\r
 }\r


@@ -295,14 +297,15 @@ a.jp-unmute {
 }\r
 a.jp-unmute:hover {\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") -79px -170px no-repeat;\r
 }\r
 a.jp-unmute:hover {\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") -79px -170px no-repeat;\r

-}
-\ra.jp-volume-max {\r
+}\r
+\r
+a.jp-volume-max {\r

        background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -186px no-repeat;\r
 }\r
 a.jp-volume-max:hover {\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") -19px -186px no-repeat;\r
 }\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -186px no-repeat;\r
 }\r
 a.jp-volume-max:hover {\r
        background: url("/static/jplayer/jplayer.blue.monday.jpg") -19px -186px no-repeat;\r
 }\r

-
+\r

 div.jp-volume-bar {\r
        position: absolute;\r
        overflow:hidden;\r
 div.jp-volume-bar {\r
        position: absolute;\r
        overflow:hidden;\r


@@ -346,7 +349,7 @@ div.jp-current-time,
 div.jp-duration {\r
        width:60px;\r
        font-size:.64em;\r
 div.jp-duration {\r
        width:60px;\r
        font-size:.64em;\r

-       font-style:oblique;
+       font-style:oblique;\r

 }\r
 div.jp-current-time {\r
        float: left;\r
 }\r
 div.jp-current-time {\r
        float: left;\r


@@ -507,26 +510,26 @@ div.jp-jplayer {
 \r
 div.jp-jplayer {\r
        background-color: #000000;\r
 \r
 div.jp-jplayer {\r
        background-color: #000000;\r

-}
-
-
-
-
-
-/* @group TOGGLES */
+}\r
+\r
+\r
+\r
+\r
+\r
+/* @group TOGGLES */\r

 \r
 /* The audio toggles are nested inside jp-time-holder */\r
 \r
 /* The audio toggles are nested inside jp-time-holder */\r

-
-ul.jp-toggles {
-       list-style-type:none;
-       padding:0;
+\r
+ul.jp-toggles {\r
+       list-style-type:none;\r
+       padding:0;\r

        margin:0 auto;\r
        margin:0 auto;\r

-       overflow:hidden;
-}
-
-div.jp-audio .jp-type-single ul.jp-toggles {
-       width:25px;
-}
+       overflow:hidden;\r
+}\r
+\r
+div.jp-audio .jp-type-single ul.jp-toggles {\r
+       width:25px;\r
+}\r

 div.jp-audio .jp-type-playlist ul.jp-toggles {\r
        width:55px;\r
        margin: 0;\r
 div.jp-audio .jp-type-playlist ul.jp-toggles {\r
        width:55px;\r
        margin: 0;\r


@@ -534,78 +537,78 @@ div.jp-audio .jp-type-playlist ul.jp-toggles {
        left: 325px;\r
        top: 50px;\r
 }\r
        left: 325px;\r
        top: 50px;\r
 }\r

-
-div.jp-video ul.jp-toggles {
+\r
+div.jp-video ul.jp-toggles {\r

        margin-top:10px;\r
        width:100px;\r
        margin-top:10px;\r
        width:100px;\r

-}
-
-ul.jp-toggles li {
-       display:block;
-       float:right;
-}
-
-ul.jp-toggles li a {
-       display:block;
-       width:25px;
-       height:18px;
+}\r
+\r
+ul.jp-toggles li {\r
+       display:block;\r
+       float:right;\r
+}\r
+\r
+ul.jp-toggles li a {\r
+       display:block;\r
+       width:25px;\r
+       height:18px;\r

        text-indent:-9999px;\r
        text-indent:-9999px;\r

-       line-height:100%; /* need this for IE6 */
-}
-
-a.jp-full-screen {
-       background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -310px no-repeat;
-       margin-left: 20px;
-}
-
-a.jp-full-screen:hover {
-       background: url("/static/jplayer/jplayer.blue.monday.jpg") -30px -310px no-repeat;
-}
-
-a.jp-restore-screen {
-       background: url("/static/jplayer/jplayer.blue.monday.jpg") -60px -310px no-repeat;
+       line-height:100%; /* need this for IE6 */\r
+}\r
+\r
+a.jp-full-screen {\r
+       background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -310px no-repeat;\r
+       margin-left: 20px;\r
+}\r
+\r
+a.jp-full-screen:hover {\r
+       background: url("/static/jplayer/jplayer.blue.monday.jpg") -30px -310px no-repeat;\r
+}\r
+\r
+a.jp-restore-screen {\r
+       background: url("/static/jplayer/jplayer.blue.monday.jpg") -60px -310px no-repeat;\r

        margin-left: 20px;\r
        margin-left: 20px;\r

-}
-
-a.jp-restore-screen:hover {
-       background: url("/static/jplayer/jplayer.blue.monday.jpg") -90px -310px no-repeat;
-}
-
-a.jp-repeat {
-       background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -290px no-repeat;
-}
-
-a.jp-repeat:hover {
-       background: url("/static/jplayer/jplayer.blue.monday.jpg") -30px -290px no-repeat;
-}
-
-a.jp-repeat-off {
-       background: url("/static/jplayer/jplayer.blue.monday.jpg") -60px -290px no-repeat;
-}
-
-a.jp-repeat-off:hover {
-       background: url("/static/jplayer/jplayer.blue.monday.jpg") -90px -290px no-repeat;
-}
-
-a.jp-shuffle {
-       background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -270px no-repeat;
-       margin-left: 5px;
-}
-
-a.jp-shuffle:hover {
-       background: url("/static/jplayer/jplayer.blue.monday.jpg") -30px -270px no-repeat;
-}
-
-a.jp-shuffle-off {
-       background: url("/static/jplayer/jplayer.blue.monday.jpg") -60px -270px no-repeat;
+}\r
+\r
+a.jp-restore-screen:hover {\r
+       background: url("/static/jplayer/jplayer.blue.monday.jpg") -90px -310px no-repeat;\r
+}\r
+\r
+a.jp-repeat {\r
+       background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -290px no-repeat;\r
+}\r
+\r
+a.jp-repeat:hover {\r
+       background: url("/static/jplayer/jplayer.blue.monday.jpg") -30px -290px no-repeat;\r
+}\r
+\r
+a.jp-repeat-off {\r
+       background: url("/static/jplayer/jplayer.blue.monday.jpg") -60px -290px no-repeat;\r
+}\r
+\r
+a.jp-repeat-off:hover {\r
+       background: url("/static/jplayer/jplayer.blue.monday.jpg") -90px -290px no-repeat;\r
+}\r
+\r
+a.jp-shuffle {\r
+       background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -270px no-repeat;\r

        margin-left: 5px;\r
        margin-left: 5px;\r

-}
-
-a.jp-shuffle-off:hover {
-       background: url("/static/jplayer/jplayer.blue.monday.jpg") -90px -270px no-repeat;
-}
-
-
+}\r
+\r
+a.jp-shuffle:hover {\r
+       background: url("/static/jplayer/jplayer.blue.monday.jpg") -30px -270px no-repeat;\r
+}\r
+\r
+a.jp-shuffle-off {\r
+       background: url("/static/jplayer/jplayer.blue.monday.jpg") -60px -270px no-repeat;\r
+       margin-left: 5px;\r
+}\r
+\r
+a.jp-shuffle-off:hover {\r
+       background: url("/static/jplayer/jplayer.blue.monday.jpg") -90px -270px no-repeat;\r
+}\r
+\r
+\r

 /* @end */\r
 \r
 /* @group NO SOLUTION error feedback */\r
 /* @end */\r
 \r
 /* @group NO SOLUTION error feedback */\r

diff --git a/src/catalogue/templates/catalogue/book_short.html b/src/catalogue/templates/catalogue/book_short.html
index dea797b..af4dc82 100644 (file)
--- a/src/catalogue/templates/catalogue/book_short.html
+++ b/src/catalogue/templates/catalogue/book_short.html
@@ -1,50 +1,40 @@
 {% spaceless %}
 {% load i18n %}
 {% spaceless %}
 {% load i18n %}

-{% load catalogue_tags ssify %}
-{% load likes_book book_shelf_tags from social_tags %}
-<div class="{% block box-class %}book-box{% endblock %}">
+{% load catalogue_tags %}
+{% load book_shelf_tags from social_tags %}
+<div class="{% block box-class %}book-box{% if audiobooks %} audiobook-box{% endif %}{% endblock %}">

 <div class="book-box-inner">
 <div class="book-box-inner">

-<div class="book-left-column">
-
-

 
 

+{% block book-box-pre %}
+    {% include "catalogue/snippets/like_button.html" %}
+{% endblock %}

 
 

-<div class="book-box-body">
+<div class="book-left-column">

 
 

+    <div class="book-box-body">
+        {% block book-box-body-pre %}
+        {% endblock %}

 
 

-    {% likes_book book.pk as likes %}
-    <div class="star {{ likes.if }}{{ likes.else }}un{{ likes.endif }}like">
-        <div class="if-like" >
-            <a id="social-book-sets-{{ book.slug }}" data-callback='social-book-sets' class='ajaxable' href='{% url "social_book_sets" book.slug %}'>★</a>
-        </div>
-        <div class="if-unlike">
-            <form id="social-like-book-{{ book.slug }}" data-callback='social-like-book' method='post' class='ajax-form' action='{% url "social_like_book" book.slug %}'>
-                {% ssi_csrf_token %}
-                <button type='submit'>☆</button>
-            </form>
+        <div class="book-box-head">
+            <div class="author">
+                {% for tag in tags.author %}
+                    <a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a>{% if not forloop.last %},
+                {% endif %}{% endfor %}{% for parent in parents %},
+                    <a href="{{ parent.get_absolute_url }}">{{ parent.title }}</a>{% endfor %}
+            </div>
+            <div class="title">
+                {% if main_link %}<a href="{{ main_link }}">{% endif %}{{ book.title }}{% if main_link %}</a>{% endif %}
+            </div>

         </div>
         </div>

-    </div>

 
 

-    <div class="book-box-head">
-        <div class="author">
-            {% for tag in tags.author %}
-                <a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a>{% if not forloop.last %},
-            {% endif %}{% endfor %}{% for parent in parents %},
-                <a href="{{ parent.get_absolute_url }}">{{ parent.title }}</a>{% endfor %}
-        </div>
-        <div class="title">
-            {% if main_link %}<a href="{{ main_link }}">{% endif %}{{ book.title }}{% if main_link %}</a>{% endif %}
+        <div class="cover-area">
+            {% if book.cover_thumb %}
+                {% if main_link %}<a href="{{ main_link }}">{% endif %}
+                    <img src="{{ book.cover_thumb.url }}" alt="Cover" class="cover" />
+                {% if main_link %}</a>{% endif %}
+            {% endif %}
+            {% block cover-area-extra %}{% endblock %}

         </div>
         </div>

-    </div>
-
-    <div class="cover-area">
-        {% if book.cover_thumb %}
-            {% if main_link %}<a href="{{ main_link }}">{% endif %}
-                <img src="{{ book.cover_thumb.url }}" alt="Cover" class="cover" />
-            {% if main_link %}</a>{% endif %}
-        {% endif %}
-        {% block cover-area-extra %}{% endblock %}
-    </div>

 
         <div class="tags">
             {% spaceless %}
 
         <div class="tags">
             {% spaceless %}


@@ -118,88 +108,22 @@
              {% endif %}
              {% download_audio book %}
             </div>
              {% endif %}
              {% download_audio book %}
             </div>

-
-

         </li>
     </ul>
     {% block book-box-extra-info %}{% endblock %}
     {% block box-append %}
     {% endblock %}
         </li>
     </ul>
     {% block book-box-extra-info %}{% endblock %}
     {% block box-append %}
     {% endblock %}

-    </div>
-
-
-
-
-
-
-    {% block right-column %}
-    {% endblock %}
-
-
-{% if audiobooks %}
-<div class="jp-type-playlist">
-  <div id="jplayer" class="jp-jplayer" data-player="jp_container_{{ book.pk }}"
-    data-supplied="{% if have_oggs %}oga,{% endif %}mp3"></div>
-  <div id="jp_container_{{ book.pk }}" class="jp-audio">
-    <div class="jp-type-single">
-        <span class="title"></span>
-      <div class="jp-gui jp-interface">
-        <ul class="jp-controls">
-          <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
-          <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
-          <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
-          <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
-        </ul>
-        <div class="jp-progress">
-          <div class="jp-seek-bar">
-            <div class="jp-play-bar"></div>
-          </div>
-        </div>
-        <div class="jp-volume-bar">
-          <div class="jp-volume-bar-value"></div>
-        </div>
-        <div class="jp-time-holder">
-          <div class="jp-current-time"></div>
-          <div class="jp-duration"></div>
-        </div>
-      </div>
-      <div class="jp-playlist">
-        <ul>
-
-        {% for i in audiobooks %}
-          <li data-mp3='{{ i.mp3.file.url }}' data-ogg='{{ i.ogg.file.url }}'>
-            <div class='play'>{{ i.mp3.name }}
-            <div class='extra-info'>
-              {% trans "Artist" %}: <span class='artist'>{{ i.mp3.extra_info.artist_name }}</span>,
-              {% trans "Director" %}: <span class='director'>{{ i.mp3.extra_info.director_name }}</span>
-            </div>
-            </div>
-          </li>
-        {% endfor %}
-
-        </ul>
-      </div>
-
-      <div class="jp-no-solution">
-        <span>Update Required</span>
-        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
-      </div>
-    </div>
-  </div>
-<div>
-{% if audiobooks|length > 1 %}
-    <a class="play-prev">« {% trans "previous" %}</a>
-    {% trans "Part" %} <span class="number">1</span> / {{ audiobooks|length }}
-    <a class="play-next">{% trans "next" %} »</a>
-{% endif %}

 </div>
 </div>

-</div>
-
-
-{% endif %}

 
 

+{% block right-column %}
+    {% if audiobooks %}
+        <div class="right-column">
+            {% include 'catalogue/snippets/jplayer.html' %}
+        </div>
+    {% endif %}
+{% endblock %}

 
 

-    <div class="clearboth"></div>
+<div class="clearboth"></div>

 </div>
 </div>
 {% endspaceless %}
 </div>
 </div>
 {% endspaceless %}

diff --git a/src/catalogue/templates/catalogue/book_wide.html b/src/catalogue/templates/catalogue/book_wide.html
index 4d56175..26ee55d 100644 (file)
--- a/src/catalogue/templates/catalogue/book_wide.html
+++ b/src/catalogue/templates/catalogue/book_wide.html
@@ -10,26 +10,31 @@
 
 {% block cover-area-extra %}
 {% if extra_info.license %}
 
 {% block cover-area-extra %}
 {% if extra_info.license %}

-    {% license_icon extra_info.license %}
+  {% license_icon extra_info.license %}

 {% endif %}
 {% endblock %}
 
 
 {% endif %}
 {% endblock %}
 
 

-
-
-

 {% block right-column %}
 {% block right-column %}

-<div class="right-column">
-  <div class="quote">
-    {% choose_cite book.pk as cite_promo %}
-    {% choose_fragment book.pk unless=cite_promo as fragment_promo %}
-    {{ cite_promo.if }}
+  <div class="right-column">
+    <div class="quote">
+      {% choose_cite book.pk as cite_promo %}
+      {% choose_fragment book.pk unless=cite_promo as fragment_promo %}
+      {{ cite_promo.if }}

         {% ssi_include 'social_cite' pk=cite_promo %}
         {% ssi_include 'social_cite' pk=cite_promo %}

-    {{ cite_promo.endif }}
-    {{ fragment_promo.if }}
+      {{ cite_promo.endif }}
+      {{ fragment_promo.if }}

         {% ssi_include 'catalogue_fragment_promo' pk=fragment_promo %}
         {% ssi_include 'catalogue_fragment_promo' pk=fragment_promo %}

-    {{ fragment_promo.endif }}
+      {{ fragment_promo.endif }}
+    </div>
+    {% include 'catalogue/snippets/jplayer.html' %}

   </div>
   </div>

+{% endblock %}
+
+
+{% block book-box-body-pre %}
+    {% include "catalogue/snippets/like_button.html" %}
+{% endblock %}

 
 

-</div>
+{% block book-box-pre %}

 {% endblock %}
 {% endblock %}

diff --git a/src/catalogue/templates/catalogue/snippets/jplayer.html b/src/catalogue/templates/catalogue/snippets/jplayer.html
new file mode 100644 (file)
index 0000000..dd8ab83
--- /dev/null
+++ b/src/catalogue/templates/catalogue/snippets/jplayer.html
@@ -0,0 +1,59 @@
+{% load i18n %}
+{% if audiobooks %}
+  <div class="jp-type-playlist">
+    <div id="jplayer" class="jp-jplayer" data-player="jp_container_{{ book.pk }}"
+         data-supplied="{% if have_oggs %}oga,{% endif %}mp3"></div>
+    <div id="jp_container_{{ book.pk }}" class="jp-audio">
+      <div class="jp-type-single">
+        <span class="title"></span>
+        <div class="jp-gui jp-interface">
+          <ul class="jp-controls">
+            <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
+            <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
+            <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
+            <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
+          </ul>
+          <div class="jp-progress">
+            <div class="jp-seek-bar">
+              <div class="jp-play-bar"></div>
+            </div>
+          </div>
+          <div class="jp-volume-bar">
+            <div class="jp-volume-bar-value"></div>
+          </div>
+          <div class="jp-time-holder">
+            <div class="jp-current-time"></div>
+            <div class="jp-duration"></div>
+          </div>
+        </div>
+        <div class="jp-playlist">
+          <ul>
+            {% for i in audiobooks %}
+              <li data-mp3='{{ i.mp3.file.url }}' data-ogg='{{ i.ogg.file.url }}'>
+                <div class='play'>{{ i.mp3.name }}
+                  <div class='extra-info'>
+                    {% trans "Artist" %}: <span class='artist'>{{ i.mp3.extra_info.artist_name }}</span>,
+                    {% trans "Director" %}: <span class='director'>{{ i.mp3.extra_info.director_name }}</span>
+                  </div>
+                </div>
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
+
+        <div class="jp-no-solution">
+          <span>Update Required</span>
+          To play the media you will need to either update your browser to a recent version or update your
+          <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
+        </div>
+      </div>
+    </div>
+    <div>
+      {% if audiobooks|length > 1 %}
+        <a class="play-prev">« {% trans "previous" %}</a>
+        {% trans "Part" %} <span class="number">1</span> / {{ audiobooks|length }}
+        <a class="play-next">{% trans "next" %} »</a>
+      {% endif %}
+    </div>
+  </div>
+{% endif %}

diff --git a/src/catalogue/templates/catalogue/snippets/like_button.html b/src/catalogue/templates/catalogue/snippets/like_button.html
new file mode 100644 (file)
index 0000000..aa6969c
--- /dev/null
+++ b/src/catalogue/templates/catalogue/snippets/like_button.html
@@ -0,0 +1,14 @@
+{% load ssify %}
+{% load likes_book from social_tags %}
+{% likes_book book.pk as likes %}
+<div class="star {{ likes.if }}{{ likes.else }}un{{ likes.endif }}like">
+    <div class="if-like" >
+        <a id="social-book-sets-{{ book.slug }}" data-callback='social-book-sets' class='ajaxable' href='{% url "social_book_sets" book.slug %}'>★</a>
+    </div>
+    <div class="if-unlike">
+        <form id="social-like-book-{{ book.slug }}" data-callback='social-like-book' method='post' class='ajax-form' action='{% url "social_like_book" book.slug %}'>
+            {% ssi_csrf_token %}
+            <button type='submit'>☆</button>
+        </form>
+    </div>
+</div>

diff --git a/src/wolnelektury/static/scss/main/book_box.scss b/src/wolnelektury/static/scss/main/book_box.scss
index 1674a29..d4f1d20 100755 (executable)
--- a/src/wolnelektury/static/scss/main/book_box.scss
+++ b/src/wolnelektury/static/scss/main/book_box.scss
@@ -119,18 +119,31 @@
         @include inner-box;
         @include size(min-height, 197.5px);
     }
         @include inner-box;
         @include size(min-height, 197.5px);
     }

+}
+
+
+.audiobook-box {
+    .book-left-column {
+        @media screen and (min-width: 1024px) {
+            display: inline-block;
+            @include size(width, 590px);
+        }
+    }
+
+    .right-column {
+        @media screen and (min-width: 1024px) {
+            @include size(width, 360px);
+        }
+    }

 
     .jp-type-playlist {
         margin-top: 24px;
 
         @media screen and (min-width: 1024px) {
 
     .jp-type-playlist {
         margin-top: 24px;
 
         @media screen and (min-width: 1024px) {

-            position: absolute;
-            margin-top: 0;
-            right: 20px;
-            top: 60px;
+            float: right;
+            margin-top: 48px;

         }
     }
         }
     }

-

 }
 
 
 }
 
 


@@ -249,9 +262,11 @@
 
     .jp-type-playlist {
         margin-top: 24px;
 
     .jp-type-playlist {
         margin-top: 24px;

+        margin-left: 0.625rem;

 
         @media screen and (min-width: 1024px) {
             float: right;
 
         @media screen and (min-width: 1024px) {
             float: right;

+            margin-right: 0.625rem;

         }
     }
 
         }
     }
 


@@ -322,7 +337,6 @@
         margin-bottom: 5px;
 
         @include min-screen($S_BOOK_SHORT_FULL) {
         margin-bottom: 5px;
 
         @include min-screen($S_BOOK_SHORT_FULL) {

-            clear: right;

             @include size(max-height, 57.6px);
             overflow: hidden;
         }
             @include size(max-height, 57.6px);
             overflow: hidden;
         }