Tweaked chapter list item styles

- Improves animation smoothness
- Changed animation slideup/down animations to use max-height instead of height
  to better avoid jutter at the end.
- Cleaned spacing to match page items in books listing.

diff --git a/resources/js/components/chapter-toggle.js b/resources/js/components/chapter-toggle.js
index bfd0ac7296576f6151aa61e686a3591fd6b72e6a..2fb3f3f1e681719c4629e70e502aadafcca45f58 100644 (file)
--- a/resources/js/components/chapter-toggle.js
+++ b/resources/js/components/chapter-toggle.js
@@ -12,14 +12,14 @@ class ChapterToggle {
         const list = this.elem.parentNode.querySelector('.inset-list');
         this.elem.classList.add('open');
         this.elem.setAttribute('aria-expanded', 'true');
-        slideDown(list, 240);
+        slideDown(list, 180);
     }
 
     close() {
         const list = this.elem.parentNode.querySelector('.inset-list');
         this.elem.classList.remove('open');
         this.elem.setAttribute('aria-expanded', 'false');
-        slideUp(list, 240);
+        slideUp(list, 180);
     }
 
     click(event) {

diff --git a/resources/js/services/animations.js b/resources/js/services/animations.js
index 9ccd5f442499e4e2de247db9a95c43de4a9a6cdb..12b8077cf7dccec37dc48e6f83a7c6aa1ce43c86 100644 (file)
--- a/resources/js/services/animations.js
+++ b/resources/js/services/animations.js
@@ -49,7 +49,7 @@ export function slideUp(element, animTime = 400) {
     const currentPaddingTop = computedStyles.getPropertyValue('padding-top');
     const currentPaddingBottom = computedStyles.getPropertyValue('padding-bottom');
     const animStyles = {
-        height: [`${currentHeight}px`, '0px'],
+        maxHeight: [`${currentHeight}px`, '0px'],
         overflow: ['hidden', 'hidden'],
         paddingTop: [currentPaddingTop, '0px'],
         paddingBottom: [currentPaddingBottom, '0px'],
@@ -73,7 +73,7 @@ export function slideDown(element, animTime = 400) {
     const targetPaddingTop = computedStyles.getPropertyValue('padding-top');
     const targetPaddingBottom = computedStyles.getPropertyValue('padding-bottom');
     const animStyles = {
-        height: ['0px', `${targetHeight}px`],
+        maxHeight: ['0px', `${targetHeight}px`],
         overflow: ['hidden', 'hidden'],
         paddingTop: ['0px', targetPaddingTop],
         paddingBottom: ['0px', targetPaddingBottom],

diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss
index 7003ae88ce2b3d05d286885f2a8ec91480400e8b..3569ed3db904bf2aec82c54e7b36d599c76d8a77 100644 (file)
--- a/resources/sass/_lists.scss
+++ b/resources/sass/_lists.scss
@@ -460,8 +460,7 @@ ul.pagination {
   padding: $-m;
   > div {
     overflow: hidden;
-    padding: $-xs 0;
-    margin-top: -$-xs;
+    padding: 0 0 $-xs 0;
   }
   .entity-chip {
     text-overflow: ellipsis;

diff --git a/resources/views/chapters/parts/list-item.blade.php b/resources/views/chapters/parts/list-item.blade.php
index 285e3489353cca255481e32241245f856527aae0..5aa9864b234cbfce960de04f5a2fb609c46b9827 100644 (file)
--- a/resources/views/chapters/parts/list-item.blade.php
+++ b/resources/views/chapters/parts/list-item.blade.php
@@ -5,7 +5,7 @@
     <div class="content">
         <h4 class="entity-list-item-name break-text">{{ $chapter->name }}</h4>
         <div class="entity-item-snippet">
-            <p class="text-muted break-text mb-s">{{ $chapter->getExcerpt() }}</p>
+            <p class="text-muted break-text">{{ $chapter->getExcerpt() }}</p>
         </div>
     </div>
 </a>