Added popup ebook and audiobook download

diff --git a/src/catalogue/templates/catalogue/2021/book_detail.html b/src/catalogue/templates/catalogue/2021/book_detail.html
index 406c703..65a837a 100644 (file)
--- a/src/catalogue/templates/catalogue/2021/book_detail.html
+++ b/src/catalogue/templates/catalogue/2021/book_detail.html
@@ -147,9 +147,7 @@
           <div class="c-media">
             <div class="c-media__actions">
               <div class="c-media__btn">
-                <div class="l-button l-button--media">
-                  pobierz audiobook
-                </div>
+                <button class="l-button l-button--media" id="audiobook">pobierz audiobook</button>
                 <ul>
                   <li>mp3</li>
                   <li>ogg</li>
@@ -157,9 +155,7 @@
                 </ul>
               </div>
               <div class="c-media__btn">
-                <div class="l-button l-button--media">
-                  pobierz książkę
-                </div>
+                <button class="l-button l-button--media" id="ebook">pobierz książkę</button>
                 <ul>
                   <li>PDF</li>
                   <li>epub</li>
@@ -193,6 +189,113 @@
                 </div>
               </div>
             </div>
+            <div class="c-media__popup" data-popup="ebook">
+              <div class="c-media__popup__box">
+                <div class="c-media__popup__box__lead">
+                  <h2>Pobieranie e-booka</h2>
+                  <p>Wybierz wersję dla siebie:</p>
+                </div>
+                <div class="c-media__popup__box__items">
+                  <div class="c-media__popup__box__item">
+                    <div>
+                      <h3>.pdf</h3>
+                      <p>Jeśli planujesz wydruk albo lekturę na urządzeniu mobilnym bez dodatkowych aplikacji.</p>
+                    </div>
+                    <div>
+                      <a href="#" class="l-button l-button--media l-button--media--full">.pdf</a>
+                    </div>
+                  </div>
+                  <div class="c-media__popup__box__item">
+                    <div>
+                      <h3>.epub</h3>
+                      <p>Uniwersalny format e-booków, obsługiwany przez większość czytników sprzętowych i aplikacji na urządzenia mobilne.</p>
+                    </div>
+                    <div>
+                      <a href="#" class="l-button l-button--media l-button--media--full">.epub</a>
+                    </div>
+                  </div>
+                  <div class="c-media__popup__box__item">
+                    <div>
+                      <h3>.mobi</h3>
+                      <p>Natywny format dla czytnika Amazon Kindle.</p>
+                    </div>
+                    <div>
+                      <a href="#" class="l-button l-button--media l-button--media--full">.mobi</a>
+                    </div>
+                  </div>
+                  <div class="c-media__popup__box__item">
+                    <div>
+                      <h3>synchrobook (epub3)</h3>
+                      <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format (np. ..., ..., ...).</p>
+                    </div>
+                    <div>
+                      <a href="#" class="l-button l-button--media l-button--media--full">synchrobook</a>
+                    </div>
+                  </div>
+                  <div class="c-media__popup__box__item">
+                    <div>
+                      <h3>inne formaty</h3>
+                      <ul>
+                        <li><a href="#">plik tekstowy (.txt)</a></li>
+                        <li><a href="#">FictionBook</a></li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+                <button class="c-media__popup__close">
+                  <img src="{% static '2021/images/close.svg' %}" alt="Zamknij">
+                </button>
+              </div>
+            </div>
+            <div class="c-media__popup" data-popup="audiobook">
+              <div class="c-media__popup__box">
+                <div class="c-media__popup__box__lead">
+                  <h2>Pobieranie audiobooka</h2>
+                  <p>Wybierz wersję dla siebie:</p>
+                </div>
+                <div class="c-media__popup__box__items">
+                  <div class="c-media__popup__box__item">
+                    <div>
+                      <h3>.mp3</h3>
+                      <p>Uniwersalny format, obsługiwany przez wszystkie urządzenia.</p>
+                    </div>
+                    <div>
+                      <a href="#" class="l-button l-button--media l-button--media--full">.mp3</a>
+                    </div>
+                  </div>
+                  <div class="c-media__popup__box__item">
+                    <div>
+                      <h3>OggVorbis</h3>
+                      <p>Otwarty format plików audio, oferujący nagranie w najwyższej jakości dźwiękowej.</p>
+                    </div>
+                    <div>
+                      <a href="#" class="l-button l-button--media l-button--media--full">.ogg</a>
+                    </div>
+                  </div>
+                  <div class="c-media__popup__box__item">
+                    <div>
+                      <h3>DAISY</h3>
+                      <p>Format dla osób z dysfunkcjami czytania.</p>
+                    </div>
+                    <div>
+                      <a href="#" class="l-button l-button--media l-button--media--full">DAISY</a>
+                    </div>
+                  </div>
+                  <div class="c-media__popup__box__item">
+                    <div>
+                      <h3>synchrobook</h3>
+                      <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format.</p>
+                    </div>
+                    <div>
+                      <a href="#" class="l-button l-button--media l-button--media--full">synchrobook</a>
+                    </div>
+                  </div>
+                </div>
+                <button class="c-media__popup__close">
+                  <img src="{% static '2021/images/close.svg' %}" alt="Zamknij">
+                </button>
+              </div>
+            </div>
           </div>
 
           {{ book.abstract|safe }}

diff --git a/src/wolnelektury/static/2021/css/components/_media.scss b/src/wolnelektury/static/2021/css/components/_media.scss
index 80f50b4..86c9c6c 100644 (file)
--- a/src/wolnelektury/static/2021/css/components/_media.scss
+++ b/src/wolnelektury/static/2021/css/components/_media.scss
@@ -62,3 +62,134 @@
     margin: 0;
   }
 }
+
+.c-media__popup {
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba($color-white, 0.75);
+  display: none;
+
+  &.is-open {
+    display: flex;
+  }
+}
+
+.c-media__popup__box {
+  background-color: white;
+  border: 1px solid #CCCCCC;
+  padding: 40px;
+  min-width: 640px;
+  position: relative;
+}
+
+.c-media__popup__box__lead {
+  padding-bottom: 30px;
+  border-bottom: 2px solid #666666;
+
+  h2 {
+    font-weight: bold;
+    font-size: 24px;
+    line-height: 125%;
+    letter-spacing: -0.01em;
+    color: #666666;
+    margin-top: 0;
+  }
+
+  p {
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 19px;
+    letter-spacing: 0.01em;
+    color: #666666;
+    margin-top: 0;
+  }
+}
+
+.c-media__popup__box__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 20px 0;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid #666666;
+  }
+
+  h3 {
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 19px;
+    letter-spacing: 0.01em;
+    color: #666666;
+    margin-top: 0;
+  }
+
+  p {
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 19px;
+    letter-spacing: 0.01em;
+    color: #666666;
+    margin-top: 10px;
+    max-width: 390px;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 10px 0 0;
+
+    li {
+      line-height: 1;
+
+      &:not(:last-child) {
+        margin-bottom: 15px;
+      }
+
+      a {
+        font-weight: normal;
+        font-size: 14px;
+        line-height: 16px;
+        letter-spacing: 0.01em;
+        text-decoration: underline;
+        color: #666666;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
+  .l-button {
+    padding: 6px 10px;
+    min-width: 120px;
+    display: block;
+    text-align: center;
+  }
+}
+
+.c-media__popup__close {
+  position: absolute;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+  font-size: 0;
+  background-color: transparent;
+  top: 35px;
+  right: 40px;
+  transition: all $ease-dynamic 350ms;
+  opacity: 0.75;
+
+  &:hover {
+    opacity: 1;
+  }
+}

diff --git a/src/wolnelektury/static/2021/css/components/_player.scss b/src/wolnelektury/static/2021/css/components/_player.scss
index c5d4f4a..4646c2c 100644 (file)
--- a/src/wolnelektury/static/2021/css/components/_player.scss
+++ b/src/wolnelektury/static/2021/css/components/_player.scss
@@ -17,8 +17,12 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  transition: all $ease-dynamic 350ms;
 
-  img {}
+  &:hover {
+    background: darken($color-primary, 3%);
+    border-color: darken($color-primary, 3%);
+  }
 }
 
 .c-player__timeline {

diff --git a/src/wolnelektury/static/2021/css/layout/_button.scss b/src/wolnelektury/static/2021/css/layout/_button.scss
index 9da1e6e..af4f2cd 100644 (file)
--- a/src/wolnelektury/static/2021/css/layout/_button.scss
+++ b/src/wolnelektury/static/2021/css/layout/_button.scss
@@ -10,11 +10,17 @@
     padding: 19px 20px;
     cursor: pointer;
     transition: all $ease-dynamic 350ms;
+    background-color: $color-white;
+    outline: 0;
 
     &:hover,
     &.l-button--media--full {
       color: $color-white;
       background: $color-primary;
+      &:hover {
+        background: darken($color-primary, 3%);
+        border-color: darken($color-primary, 3%);
+      }
     }
   }
 }

diff --git a/src/wolnelektury/static/2021/css/main.scss b/src/wolnelektury/static/2021/css/main.scss
index 2e02b64..d800a3a 100644 (file)
--- a/src/wolnelektury/static/2021/css/main.scss
+++ b/src/wolnelektury/static/2021/css/main.scss
@@ -25,6 +25,6 @@
 @import "utils/module";
 @import "vendors/module";
 @import "base/module";
-@import "components/module";
 @import "layout/module";
+@import "components/module";
 @import "pages/module";

diff --git a/src/wolnelektury/static/2021/images/close.svg b/src/wolnelektury/static/2021/images/close.svg
new file mode 100644 (file)
index 0000000..a4fb9cb
--- /dev/null
+++ b/src/wolnelektury/static/2021/images/close.svg
@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 3.125C12.8125 3.125 3.125 12.8125 3.125 25C3.125 37.1875 12.8125 46.875 25 46.875C37.1875 46.875 46.875 37.1875 46.875 25C46.875 12.8125 37.1875 3.125 25 3.125ZM25 43.75C14.6875 43.75 6.25 35.3125 6.25 25C6.25 14.6875 14.6875 6.25 25 6.25C35.3125 6.25 43.75 14.6875 43.75 25C43.75 35.3125 35.3125 43.75 25 43.75Z" fill="#666666"/>
+<path d="M33.4375 35.9375L25 27.5L16.5625 35.9375L14.0625 33.4375L22.5 25L14.0625 16.5625L16.5625 14.0625L25 22.5L33.4375 14.0625L35.9375 16.5625L27.5 25L35.9375 33.4375L33.4375 35.9375Z" fill="#666666"/>
+</svg>

diff --git a/src/wolnelektury/static/2021/scripts/main.js b/src/wolnelektury/static/2021/scripts/main.js
index 279440b..ac2f8a1 100644 (file)
--- a/src/wolnelektury/static/2021/scripts/main.js
+++ b/src/wolnelektury/static/2021/scripts/main.js
@@ -27,3 +27,24 @@
     }
   });
 })();
+
+// Ebook/Audiobook Btns
+(function() {
+  let button = $('.c-media__btn button');
+  let closeButton = $('.c-media__popup__close');
+
+  button.on('click', function () {
+    let target = $(this).attr('id');
+    $('[data-popup=' + target).addClass('is-open');
+  });
+
+  closeButton.on('click', function() {
+    $(this).closest('.c-media__popup').removeClass('is-open');
+  });
+
+  $(document).keyup(function(e) {
+    if (e.keyCode === 27) {
+      $('.c-media__popup').removeClass('is-open');
+    }
+  });
+})();