From 14eaee7aef2e0f89f0210f087d10eeaed0bedf43 Mon Sep 17 00:00:00 2001 From: Damian Zawadzki Date: Mon, 22 Nov 2021 14:22:17 +0100 Subject: [PATCH] Added popup ebook and audiobook download --- .../templates/catalogue/2021/book_detail.html | 115 ++++++++++++++- .../static/2021/css/components/_media.scss | 131 ++++++++++++++++++ .../static/2021/css/components/_player.scss | 6 +- .../static/2021/css/layout/_button.scss | 6 + src/wolnelektury/static/2021/css/main.scss | 2 +- src/wolnelektury/static/2021/images/close.svg | 4 + src/wolnelektury/static/2021/scripts/main.js | 21 +++ 7 files changed, 277 insertions(+), 8 deletions(-) create mode 100644 src/wolnelektury/static/2021/images/close.svg diff --git a/src/catalogue/templates/catalogue/2021/book_detail.html b/src/catalogue/templates/catalogue/2021/book_detail.html index 406c703fc..65a837a8c 100644 --- a/src/catalogue/templates/catalogue/2021/book_detail.html +++ b/src/catalogue/templates/catalogue/2021/book_detail.html @@ -147,9 +147,7 @@
-
- pobierz audiobook -
+
  • mp3
  • ogg
    • @@ -157,9 +155,7 @@
-
- pobierz książkę -
+
  • PDF
  • epub
    • @@ -193,6 +189,113 @@
+
+
+
+

Pobieranie e-booka

+

Wybierz wersję dla siebie:

+
+
+
+
+

.pdf

+

Jeśli planujesz wydruk albo lekturę na urządzeniu mobilnym bez dodatkowych aplikacji.

+
+
+ .pdf +
+
+
+
+

.epub

+

Uniwersalny format e-booków, obsługiwany przez większość czytników sprzętowych i aplikacji na urządzenia mobilne.

+
+
+ .epub +
+
+
+
+

.mobi

+

Natywny format dla czytnika Amazon Kindle.

+
+
+ .mobi +
+
+
+
+

synchrobook (epub3)

+

Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format (np. ..., ..., ...).

+
+ +
+
+
+

inne formaty

+ +
+
+
+ +
+
+
+
+
+

Pobieranie audiobooka

+

Wybierz wersję dla siebie:

+
+
+
+
+

.mp3

+

Uniwersalny format, obsługiwany przez wszystkie urządzenia.

+
+
+ .mp3 +
+
+
+
+

OggVorbis

+

Otwarty format plików audio, oferujący nagranie w najwyższej jakości dźwiękowej.

+
+
+ .ogg +
+
+
+
+

DAISY

+

Format dla osób z dysfunkcjami czytania.

+
+
+ DAISY +
+
+
+
+

synchrobook

+

Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format.

+
+ +
+
+ +
+
{{ book.abstract|safe }} diff --git a/src/wolnelektury/static/2021/css/components/_media.scss b/src/wolnelektury/static/2021/css/components/_media.scss index 80f50b4d0..86c9c6cad 100644 --- 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 c5d4f4ad6..4646c2c90 100644 --- 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 9da1e6ee4..af4f2cd16 100644 --- 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 2e02b64d6..d800a3ac5 100644 --- 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 index 000000000..a4fb9cbf6 --- /dev/null +++ b/src/wolnelektury/static/2021/images/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/wolnelektury/static/2021/scripts/main.js b/src/wolnelektury/static/2021/scripts/main.js index 279440b15..ac2f8a1df 100644 --- 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'); + } + }); +})(); -- 2.20.1