ElevenReader links

diff --git a/src/catalogue/templates/catalogue/book_detail.html b/src/catalogue/templates/catalogue/book_detail.html
index eb1ab8a..6c89f18 100644 (file)
--- a/src/catalogue/templates/catalogue/book_detail.html
+++ b/src/catalogue/templates/catalogue/book_detail.html
@@ -169,6 +169,11 @@
                         <div class="c-media__btn">
                           <button class="l-button l-button--media" id="ebook"><i class="icon icon-book"></i> {% trans "pobierz książkę" %}</button>
                         </div>
+                        <div class="c-media__btn">
+                          {% if first_text %}
+                            <a href="https://elevenreader.io/app/reader/audiobooks/wolnelektury:{{ first_text.slug }}" target="_blank" class="l-button l-button--media"><img src="{% static 'img/elevenreader-21.png' %}" title="{% trans "Posłuchaj w ElevenReader" %}" alt="{% trans "Posłuchaj w ElevenReader" %}"></a>
+                          {% endif %}
+                        </div>
                         <div class="c-media__btn">
                           {% if first_text %}
                             <a href="{% url 'book_text' first_text.slug %}" class="l-button l-button--media l-button--media--full"><i class="icon icon-eye"></i> {% trans "czytaj online" %}</a>

diff --git a/src/wolnelektury/static/2022/styles/components/_media.scss b/src/wolnelektury/static/2022/styles/components/_media.scss
index c4af4eb..9c5f34f 100644 (file)
--- a/src/wolnelektury/static/2022/styles/components/_media.scss
+++ b/src/wolnelektury/static/2022/styles/components/_media.scss
@@ -10,7 +10,7 @@
 
 .c-media__actions {
     display: flex;
-    column-gap: 38px;
+    column-gap: 20px;
     row-gap: 10px;
 }
 

diff --git a/src/wolnelektury/static/2022/styles/layout/_button.scss b/src/wolnelektury/static/2022/styles/layout/_button.scss
index 78b33bb..b1844d8 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_button.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_button.scss
@@ -21,12 +21,16 @@
     @include rwd($break-flow) {
         @include font-size(16px);
         line-height: 20px;
-        padding: 19px 20px;
+        padding: 19px 0;
     }
     
     .icon {
       font-size: 21px;
-      margin-right: 15px;
+      margin-right: 10px;
+    }
+
+    img {
+        height: 21px;
     }
 
     &:hover {

diff --git a/src/wolnelektury/static/img/elevenreader-21.png b/src/wolnelektury/static/img/elevenreader-21.png
new file mode 100644 (file)
index 0000000..86e433d
Binary files /dev/null and b/src/wolnelektury/static/img/elevenreader-21.png differ

diff --git a/src/wolnelektury/static/img/elevenreader.png b/src/wolnelektury/static/img/elevenreader.png
new file mode 100644 (file)
index 0000000..16dcade
Binary files /dev/null and b/src/wolnelektury/static/img/elevenreader.png differ