From: Jan Szejko Date: Tue, 19 Jan 2016 11:14:00 +0000 (+0100) Subject: fix #3658 Dane książki nachodzą na ramkę odtwarzacza X-Git-Url: https://git.mdrn.pl/wolnelektury.git/commitdiff_plain/983376c58dc611ffdb6789f35ab86950af2e71d1 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 d1214c554..8d309941e 100644 --- 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 */ +.jp-type-single { + padding: 5px 10px 0 10px; +} .jp-audio .title { - font-size: 11px; - position: relative; - left: 10px; - top: 5px; - z-index: 100; + font-size: 11px; + z-index: 100; } .play-prev, .play-next { - cursor: pointer; + cursor: pointer; } div.jp-audio, @@ -84,7 +84,8 @@ div.jp-video-full div.jp-interface { div.jp-interface { position: relative; - background-color:#eee; + margin-top: -5px; + margin-left: -10px; width:100%; } @@ -117,28 +118,28 @@ div.jp-controls-holder { div.jp-interface ul.jp-controls { list-style-type:none; margin:0; - padding: 0; - overflow:hidden; -} - -div.jp-audio ul.jp-controls { + padding: 0; + overflow:hidden; +} + +div.jp-audio ul.jp-controls { width: 320px; padding:20px 20px 0 20px; -} - -div.jp-video div.jp-type-single ul.jp-controls { +} + +div.jp-video div.jp-type-single ul.jp-controls { width: 78px; margin-left: 200px; -} - -div.jp-video div.jp-type-playlist ul.jp-controls { +} + +div.jp-video div.jp-type-playlist ul.jp-controls { width: 134px; margin-left: 172px; -} +} div.jp-video ul.jp-controls, div.jp-interface ul.jp-controls li { - display:inline; - float: left; + display:inline; + float: left; } div.jp-interface ul.jp-controls a { @@ -165,29 +166,29 @@ a.jp-pause { a.jp-pause:hover { background: url("/static/jplayer/jplayer.blue.monday.jpg") -41px -42px no-repeat; } - + a.jp-stop, a.jp-previous, a.jp-next { width:28px; - height:28px; + height:28px; margin-top:6px; } - + a.jp-stop { background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -83px no-repeat; - margin-left:10px; -} + margin-left:10px; +} a.jp-stop:hover { background: url("/static/jplayer/jplayer.blue.monday.jpg") -29px -83px no-repeat; -} +} a.jp-previous { background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -112px no-repeat; } a.jp-previous:hover { background: url("/static/jplayer/jplayer.blue.monday.jpg") -29px -112px no-repeat; -} - +} + a.jp-next { background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -141px no-repeat; } @@ -248,19 +249,19 @@ a.jp-mute, a.jp-unmute, a.jp-volume-max { width:18px; - height:15px; - margin-top:12px; -} - + height:15px; + margin-top:12px; +} + div.jp-audio div.jp-type-single a.jp-mute, -div.jp-audio div.jp-type-single a.jp-unmute { - margin-left: 180px; -} - +div.jp-audio div.jp-type-single a.jp-unmute { + margin-left: 180px; +} + div.jp-audio div.jp-type-playlist a.jp-mute, -div.jp-audio div.jp-type-playlist a.jp-unmute { +div.jp-audio div.jp-type-playlist a.jp-unmute { margin-left: 154px; -} +} div.jp-audio a.jp-volume-max { margin-left: 56px; @@ -275,10 +276,11 @@ div.jp-video a.jp-volume-max { } div.jp-video a.jp-mute, -div.jp-video a.jp-unmute { +div.jp-video a.jp-unmute { left: 50px; -} - +} + + div.jp-video a.jp-volume-max { left: 134px; } @@ -295,14 +297,15 @@ a.jp-unmute { } a.jp-unmute:hover { background: url("/static/jplayer/jplayer.blue.monday.jpg") -79px -170px no-repeat; -} - a.jp-volume-max { +} + +a.jp-volume-max { background: url("/static/jplayer/jplayer.blue.monday.jpg") 0 -186px no-repeat; } a.jp-volume-max:hover { background: url("/static/jplayer/jplayer.blue.monday.jpg") -19px -186px no-repeat; } - + div.jp-volume-bar { position: absolute; overflow:hidden; @@ -346,7 +349,7 @@ div.jp-current-time, div.jp-duration { width:60px; font-size:.64em; - font-style:oblique; + font-style:oblique; } div.jp-current-time { float: left; @@ -507,26 +510,26 @@ div.jp-jplayer { div.jp-jplayer { background-color: #000000; -} - - - - - -/* @group TOGGLES */ +} + + + + + +/* @group TOGGLES */ /* The audio toggles are nested inside jp-time-holder */ - -ul.jp-toggles { - list-style-type:none; - padding:0; + +ul.jp-toggles { + list-style-type:none; + padding:0; margin:0 auto; - overflow:hidden; -} - -div.jp-audio .jp-type-single ul.jp-toggles { - width:25px; -} + overflow:hidden; +} + +div.jp-audio .jp-type-single ul.jp-toggles { + width:25px; +} div.jp-audio .jp-type-playlist ul.jp-toggles { width:55px; margin: 0; @@ -534,78 +537,78 @@ div.jp-audio .jp-type-playlist ul.jp-toggles { left: 325px; top: 50px; } - -div.jp-video ul.jp-toggles { + +div.jp-video ul.jp-toggles { margin-top:10px; width:100px; -} - -ul.jp-toggles li { - display:block; - float:right; -} - -ul.jp-toggles li a { - display:block; - width:25px; - height:18px; +} + +ul.jp-toggles li { + display:block; + float:right; +} + +ul.jp-toggles li a { + display:block; + width:25px; + height:18px; text-indent:-9999px; - 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 */ +} + +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; margin-left: 20px; -} - -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; +} + +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-off:hover { - background: url("/static/jplayer/jplayer.blue.monday.jpg") -90px -270px no-repeat; -} - - +} + +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; + margin-left: 5px; +} + +a.jp-shuffle-off:hover { + background: url("/static/jplayer/jplayer.blue.monday.jpg") -90px -270px no-repeat; +} + + /* @end */ /* @group NO SOLUTION error feedback */ diff --git a/src/catalogue/templates/catalogue/book_short.html b/src/catalogue/templates/catalogue/book_short.html index dea797bc9..af4dc82f2 100644 --- a/src/catalogue/templates/catalogue/book_short.html +++ b/src/catalogue/templates/catalogue/book_short.html @@ -1,50 +1,40 @@ {% spaceless %} {% load i18n %} -{% load catalogue_tags ssify %} -{% load likes_book book_shelf_tags from social_tags %} -
+{% load catalogue_tags %} +{% load book_shelf_tags from social_tags %} +
-
- - +{% block book-box-pre %} + {% include "catalogue/snippets/like_button.html" %} +{% endblock %} -
+
+
+ {% block book-box-body-pre %} + {% endblock %} - {% likes_book book.pk as likes %} -
-
- ★ -
-
-
- {% ssi_csrf_token %} - -
+
+
+ {% for tag in tags.author %} + {{ tag.name }}{% if not forloop.last %}, + {% endif %}{% endfor %}{% for parent in parents %}, + {{ parent.title }}{% endfor %} +
+
+ {% if main_link %}{% endif %}{{ book.title }}{% if main_link %}{% endif %} +
-
-
-
- {% for tag in tags.author %} - {{ tag.name }}{% if not forloop.last %}, - {% endif %}{% endfor %}{% for parent in parents %}, - {{ parent.title }}{% endfor %} -
-
- {% if main_link %}{% endif %}{{ book.title }}{% if main_link %}{% endif %} +
+ {% if book.cover_thumb %} + {% if main_link %}{% endif %} + Cover + {% if main_link %}{% endif %} + {% endif %} + {% block cover-area-extra %}{% endblock %}
-
- -
- {% if book.cover_thumb %} - {% if main_link %}{% endif %} - Cover - {% if main_link %}{% endif %} - {% endif %} - {% block cover-area-extra %}{% endblock %} -
{% spaceless %} @@ -118,88 +108,22 @@ {% endif %} {% download_audio book %}
- - {% block book-box-extra-info %}{% endblock %} {% block box-append %} {% endblock %} -
- - - - - - - {% block right-column %} - {% endblock %} - - -{% if audiobooks %} - - - -{% endif %} +{% block right-column %} + {% if audiobooks %} +
+ {% include 'catalogue/snippets/jplayer.html' %} +
+ {% endif %} +{% endblock %} -
+
{% endspaceless %} diff --git a/src/catalogue/templates/catalogue/book_wide.html b/src/catalogue/templates/catalogue/book_wide.html index 4d5617566..26ee55d71 100644 --- 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 %} - {% license_icon extra_info.license %} + {% license_icon extra_info.license %} {% endif %} {% endblock %} - - - {% block right-column %} -
-
- {% choose_cite book.pk as cite_promo %} - {% choose_fragment book.pk unless=cite_promo as fragment_promo %} - {{ cite_promo.if }} +
+
+ {% 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 }} +
+ {% include 'catalogue/snippets/jplayer.html' %}
+{% endblock %} + + +{% block book-box-body-pre %} + {% include "catalogue/snippets/like_button.html" %} +{% endblock %} -
+{% block book-box-pre %} {% endblock %} diff --git a/src/catalogue/templates/catalogue/snippets/jplayer.html b/src/catalogue/templates/catalogue/snippets/jplayer.html new file mode 100644 index 000000000..dd8ab83ac --- /dev/null +++ b/src/catalogue/templates/catalogue/snippets/jplayer.html @@ -0,0 +1,59 @@ +{% load i18n %} +{% if audiobooks %} + +{% 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 index 000000000..aa6969cd6 --- /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 %} +
+
+ ★ +
+
+
+ {% ssi_csrf_token %} + +
+
+
diff --git a/src/wolnelektury/static/scss/main/book_box.scss b/src/wolnelektury/static/scss/main/book_box.scss index 1674a29b7..d4f1d20d1 100755 --- 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); } +} + + +.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; } } - } @@ -249,9 +262,11 @@ .jp-type-playlist { margin-top: 24px; + margin-left: 0.625rem; @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) { - clear: right; @include size(max-height, 57.6px); overflow: hidden; }