* Date: 1st September 2011\r
*/\r
\r
+.jp-type-single {\r
+ padding: 5px 10px 0 10px;\r
+}\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
- cursor: pointer;\r
+ cursor: pointer;\r
}\r
\r
div.jp-audio,\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
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
-}
-
-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
-}
-
-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
-}
+}\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
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
- height:28px;
+ height:28px;\r
margin-top:6px;\r
}\r
-
+\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
\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-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-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-unmute {
+div.jp-audio div.jp-type-playlist a.jp-unmute {\r
margin-left: 154px;\r
-}
+}\r
\r
div.jp-audio a.jp-volume-max {\r
margin-left: 56px;\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
-}
-\r\r
+}\r
+\r
+\r
div.jp-video a.jp-volume-max {\r
left: 134px;\r
}\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
-
+\r
div.jp-volume-bar {\r
position: absolute;\r
overflow:hidden;\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-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
-
-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
- 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
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
-}
-
-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
- 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
-}
-
-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
-}
-
-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
{% 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-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 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 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 %}
{% endif %}
{% download_audio book %}
</div>
-
-
</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>
-
-
-{% 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 %}
{% block cover-area-extra %}
{% if extra_info.license %}
- {% license_icon extra_info.license %}
+ {% license_icon extra_info.license %}
{% endif %}
{% endblock %}
-
-
-
{% 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">
+ {% 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 %}
- {{ cite_promo.endif }}
- {{ fragment_promo.if }}
+ {{ cite_promo.endif }}
+ {{ fragment_promo.if }}
{% ssi_include 'catalogue_fragment_promo' pk=fragment_promo %}
- {{ fragment_promo.endif }}
+ {{ fragment_promo.endif }}
+ </div>
+ {% include 'catalogue/snippets/jplayer.html' %}
</div>
+{% endblock %}
+
+
+{% block book-box-body-pre %}
+ {% include "catalogue/snippets/like_button.html" %}
+{% endblock %}
-</div>
+{% block book-box-pre %}
{% endblock %}
--- /dev/null
+{% 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 %}
--- /dev/null
+{% 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>
@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) {
- position: absolute;
- margin-top: 0;
- right: 20px;
- top: 60px;
+ float: right;
+ margin-top: 48px;
}
}
-
}
.jp-type-playlist {
margin-top: 24px;
+ margin-left: 0.625rem;
@media screen and (min-width: 1024px) {
float: right;
+ margin-right: 0.625rem;
}
}
margin-bottom: 5px;
@include min-screen($S_BOOK_SHORT_FULL) {
- clear: right;
@include size(max-height, 57.6px);
overflow: hidden;
}
fnp / wolnelektury.git / commitdiff