From 10d01e2faef06d1db0958908394f1f79441cd744 Mon Sep 17 00:00:00 2001
From: Damian Zawadzki <damian.zawadzki@outlook.com>
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 %}
             </div>
 
-            <h3>Opis</h3>
-            {{ book.abstract|safe }}
+            <div class="l-article__overlay" data-max-height="327">
+              <h3>Opis</h3>
+              {{ book.abstract|safe }}
+
+              <h4>Spis treści:</h4>
+              <ul>
+                <li>Dziady. Poema</li>
+                <li>Przedmowa</li>
+                <li>Upiór</li>
+                <li>Dziady, część II</li>
+                <li>Dziady, część IV</li>
+                <li>Dziady, część III</li>
+                <li>Dziady. Widowisko, część I</li>
+              </ul>
+            </div>
+            <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Czytaj więcej</button>
           </article>
         </div>
       </section>
@@ -317,7 +331,10 @@
                 {% endif %}
                 <article class="l-author__info">
                   <h3>{{ author.name }}</h3>
-                  {{ author.description|safe }}
+                  <div class="l-article__overlay" data-max-height="327">
+                    {{ author.description|safe }}
+                  </div>
+                  <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Czytaj więcej</button>
                 </article>
               </div>
             </div>
@@ -338,7 +355,6 @@
               </div>
             </div>
           </div>
-        </div>
       </section>
       {% 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