Make the book grid out of floats

audioverse-org · Dec 4, 2024 · 114f078 · 114f078
1 parent fd8b8aa
commit 114f078
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/src/components/organisms/passageNavigation.module.scss b/src/components/organisms/passageNavigation.module.scss
@@ -23,10 +23,10 @@
 	padding-bottom: 16px;
 }
 
-.wrapper .books:global(.grid) {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
-}
+// .wrapper .books:global(.grid) {
+// 	display: grid;
+// 	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+// }
 
 .wrapper li,
 .wrapper li button,
@@ -53,9 +53,9 @@
 	width: 100%;
 }
 
-.books:global(.grid) .chapters {
-	grid-column: 1 / -1;
-}
+// .books:global(.grid) .chapters {
+// 	grid-column: 1 / -1;
+// }
 
 .chapters {
 	display: grid;
@@ -92,9 +92,19 @@
 	font-size: 12px;
 	line-height: 14.4px;
 	text-transform: uppercase;
-	display: inline-block;
 }
 
 .chaptersWrapper {
-	grid-column: 1 / -1;
+	width: 100%;
+	display: none;
+}
+
+.chaptersWrapper:global(.active) {
+	display: block;
+	float: left;
+}
+
+.books:global(.grid) .book {
+	width: 70px;
+	display: inline-block;
 }
diff --git a/src/components/organisms/passageNavigation.tsx b/src/components/organisms/passageNavigation.tsx
@@ -55,9 +55,17 @@ export default function PassageNavigation({ books }: Props): JSX.Element {
 										: book.title}
 								</button>
 							</li>
-							{book.id === selectedBook && selectedView === 'list' ? (
-								<li className={styles.chaptersWrapper}>
-									<ul className={styles.chapters}>
+							{book.id === selectedBook ? (
+								<li
+									className={clsx(styles.chaptersWrapper, {
+										active: book.id === selectedBook,
+									})}
+								>
+									<ul
+										className={clsx(styles.chapters, {
+											active: book.id === selectedBook,
+										})}
+									>
 										{chapters?.map((chapter) => {
 											const n = Number(chapter.title.split(' ').pop());
 											return (