From b030c1398bc909ebceec092907134da99b439695 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Wed, 18 May 2022 13:18:21 +0100
Subject: [PATCH] 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.
---
resources/js/components/chapter-toggle.js | 4 ++--
resources/js/services/animations.js | 4 ++--
resources/sass/_lists.scss | 3 +--
resources/views/chapters/parts/list-item.blade.php | 2 +-
4 files changed, 6 insertions(+), 7 deletions(-)
diff --git a/resources/js/components/chapter-toggle.js b/resources/js/components/chapter-toggle.js
index bfd0ac729..2fb3f3f1e 100644
--- 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 9ccd5f442..12b8077cf 100644
--- 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 7003ae88c..3569ed3db 100644
--- 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 285e34893..5aa9864b2 100644
--- 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>