Text overlay toggler and table of contents

diff --git a/src/catalogue/templates/catalogue/2021/book_detail.html b/src/catalogue/templates/catalogue/2021/book_detail.html
index f7261ec..ea3591f 100644 (file)
--- a/src/catalogue/templates/catalogue/2021/book_detail.html
+++ b/src/catalogue/templates/catalogue/2021/book_detail.html
@@ -286,8 +286,22 @@
               {% endif %}
             </div>
 
               {% 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>
           </article>
         </div>
       </section>


@@ -317,7 +331,10 @@
                 {% endif %}
                 <article class="l-author__info">
                   <h3>{{ author.name }}</h3>
                 {% 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>
                 </article>
               </div>
             </div>


@@ -338,7 +355,6 @@
               </div>
             </div>
           </div>
               </div>
             </div>
           </div>

-        </div>

       </section>
       {% endfor %}
 
       </section>
       {% endfor %}
 

diff --git a/src/wolnelektury/static/2021/scripts/main.js b/src/wolnelektury/static/2021/scripts/main.js
index ac2f8a1..8120b43 100644 (file)
--- 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 d83ef81..66e4381 100644 (file)
--- 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;
   }
     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 {
 }
 
 .l-article__lead {


@@ -30,3 +69,16 @@
   font-family: $secondary-font;
   line-height: 166%;
 }
   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 f88eb54..fef1cf9 100644 (file)
--- 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;
   }
     line-height: 150%;
     color: #474747;
   }

-  dd, dt {
-    font-weight: normal;
+  h4 {

     font-size: 18px;
     line-height: 150%;
     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;
       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;
       font-style: normal;
       font-weight: normal;
       font-size: 15px;