Make chapter view paginator flush

fluff4me · Dec 30, 2024 · c889714 · c889714
1 parent e146624
commit c889714
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/src/ui/view/ChapterView.ts b/src/ui/view/ChapterView.ts
@@ -40,6 +40,7 @@ export default ViewDefinition({
 		const paginator = await view.paginator()
 			.viewTransition("chapter-view-chapter")
 			.style("view-type-chapter-block")
+			.type("flush")
 			.tweak(p => p.title.text.bind(chapterState.mapManual(chapter =>
 				quilt["view/chapter/title"](Maths.parseIntOrUndefined(chapter.url), chapter.name))))
 			.appendTo(view)
@@ -52,6 +53,9 @@ export default ViewDefinition({
 					.setMarkdownContent(chapter.body ?? "")
 			})
 
+		paginator.header.style("view-type-chapter-block-header")
+		paginator.footer.style("view-type-chapter-block-paginator-actions")
+
 		paginator.data.use(paginator, chapter => chapterState.value = chapter)
 
 		return view

diff --git a/style/component/core/paginator.chiri b/style/component/core/paginator.chiri
@@ -103,6 +103,7 @@
 			%padding-block-3
 
 	&-page:
+		display: ${paginator-page-display: flex}
 		%flex
 		%flex-column
 		#transition: #{transition("opacity")}, #{transition("translate")}, #{transition("display")}

diff --git a/style/view/type/chapter.chiri b/style/view/type/chapter.chiri
@@ -2,7 +2,24 @@
 
 	&-work:
 	&-block:
+
+		&-header:
+			#after: .block-header, .paginator-header, .paginator-header--flush
+			%background-none
+			%border-none
+			%box-shadow-none
+			%relative
+			%padding-inline-0
+
+			@before:
+				%background-none
+				%backdrop-filter-none
+
 		&-body:
-			%padding-inline-4
+			#after: .paginator-page
 			%padding-top-3
 			%padding-bottom-4
+			$paginator-page-display: block
+
+		&-paginator-actions:
+			%padding-inline-0