From 10d01e2faef06d1db0958908394f1f79441cd744 Mon Sep 17 00:00:00 2001 From: Damian Zawadzki Date: Thu, 3 Feb 2022 11:12:29 +0100 Subject: [PATCH] Text overlay toggler and table of contents --- .../templates/catalogue/2021/book_detail.html | 24 ++++++-- src/wolnelektury/static/2021/scripts/main.js | 26 +++++++++ .../static/2022/styles/layout/_article.scss | 56 ++++++++++++++++++- .../static/2022/styles/layout/_author.scss | 32 +++++------ 4 files changed, 115 insertions(+), 23 deletions(-) diff --git a/src/catalogue/templates/catalogue/2021/book_detail.html b/src/catalogue/templates/catalogue/2021/book_detail.html index f7261ec31..ea3591f17 100644 --- a/src/catalogue/templates/catalogue/2021/book_detail.html +++ b/src/catalogue/templates/catalogue/2021/book_detail.html @@ -286,8 +286,22 @@ {% endif %} -

Opis

- {{ book.abstract|safe }} +
+

Opis

+ {{ book.abstract|safe }} + +

Spis treści:

+ +
+ @@ -317,7 +331,10 @@ {% endif %}

{{ author.name }}

- {{ author.description|safe }} +
+ {{ author.description|safe }} +
+
@@ -338,7 +355,6 @@ - {% endfor %} diff --git a/src/wolnelektury/static/2021/scripts/main.js b/src/wolnelektury/static/2021/scripts/main.js index ac2f8a1df..8120b43fa 100644 --- a/src/wolnelektury/static/2021/scripts/main.js +++ b/src/wolnelektury/static/2021/scripts/main.js @@ -48,3 +48,29 @@ } }); })(); + +// Text overlay toggler +(function () { + let overlays = $('.l-article__overlay'); + let button = $('.l-article__read-more'); + + overlays.each(function () { + let maxHeight = $(this).attr('data-max-height'); + if($(this).outerHeight() > maxHeight) { + $(this).css({'maxHeight': maxHeight+'px'}).addClass('is-active'); + } else { + $(this).next('.l-article__read-more').hide(); + } + }); + + button.on('click', function() { + let dataLabel = $(this).attr('data-label'); + let dataAction = $(this).attr('data-action'); + $(this).parent().find('.l-article__overlay').toggleClass('is-clicked'); + if($(this).text() === dataLabel) { + $(this).text(dataAction); + } else { + $(this).text(dataLabel); + } + }); +})(); \ No newline at end of file diff --git a/src/wolnelektury/static/2022/styles/layout/_article.scss b/src/wolnelektury/static/2022/styles/layout/_article.scss index d83ef818c..66e438148 100644 --- a/src/wolnelektury/static/2022/styles/layout/_article.scss +++ b/src/wolnelektury/static/2022/styles/layout/_article.scss @@ -19,8 +19,47 @@ line-height: 150%; color: #474747; } - ul {} - ol {} + h4 { + font-size: 18px; + line-height: 150%; + font-weight: bolder; + } + + ul { + padding: 0; + list-style: none; + margin-top: 0.25rem; + margin-bottom: 0; + li { + font-size: 18px; + line-height: 150%; + font-weight: normal; + } + } +} + +.l-article__overlay { + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; + color: #474747; + + &.is-active { + &:after { + content: ""; + display: block; + position: absolute; + bottom: 0; left: 0; + width: 100%; height: 70px; + background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); + } + } + + &.is-clicked { + max-height: 100% !important; + &:after { display: none; } + } } .l-article__lead { @@ -30,3 +69,16 @@ font-family: $secondary-font; line-height: 166%; } + +.l-article__read-more { + border: 0; + padding: 0; + color: #007880; + background-color: transparent; + cursor: pointer; + outline: 0; + margin-top: 25px; + &:hover { + text-decoration: underline; + } +} diff --git a/src/wolnelektury/static/2022/styles/layout/_author.scss b/src/wolnelektury/static/2022/styles/layout/_author.scss index f88eb54f1..fef1cf98a 100644 --- a/src/wolnelektury/static/2022/styles/layout/_author.scss +++ b/src/wolnelektury/static/2022/styles/layout/_author.scss @@ -62,19 +62,23 @@ line-height: 150%; color: #474747; } - dd, dt { - font-weight: normal; + h4 { font-size: 18px; line-height: 150%; - color: #474747; - } - dt { - float: left; - clear: left; - margin-right: .4em; + font-weight: bolder; + color: #474747; } - dd { - margin-left: 0; + + ul { + padding: 0; + list-style: none; + margin-top: 0.25rem; + margin-bottom: 0; + li { + font-size: 18px; + line-height: 150%; + font-weight: normal; + } } } @@ -140,14 +144,8 @@ line-height: 140%; letter-spacing: -0.02em; color: #083F4D; - - p { - font-size: inherit; - line-height: inherit; - margin-top: 0; - } } - > p { + p { font-style: normal; font-weight: normal; font-size: 15px; -- 2.20.1