Make the book grid out of floats

audioverse-org · Dec 3, 2024 · e64a4c0 · e64a4c0
1 parent 2a0009b
commit e64a4c0
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 40 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
@@ -19,7 +19,6 @@ export default function PassageNavigation(props: Props): JSX.Element {
 		BIBLE_BOOKS[0],
 	);
 	const [selectedView, setSelectedView] = useState<'grid' | 'list'>('grid');
-
 	const languageRoute = useLanguageRoute();
 
 	return (
@@ -40,8 +39,8 @@ export default function PassageNavigation(props: Props): JSX.Element {
 			</div>
 
 			<ul className={clsx(styles.books, { grid: selectedView === 'grid' })}>
-				{BIBLE_BOOKS.map((book) => {
-					const chapters = getChapters(props.audiobibles, book);
+				{BIBLE_BOOKS.map((book, idx) => {
+					const chapters = getChapters(props.audiobibles, selectedBook);
 					return (
 						<>
 							<li
@@ -58,38 +57,38 @@ export default function PassageNavigation(props: Props): JSX.Element {
 										: book}
 								</button>
 							</li>
-							{book === selectedBook ? (
-								<li className={styles.chaptersWrapper}>
-									<ul className={styles.chapters}>
-										{chapters?.map(({ title }) => {
-											console.log('title', title);
-											const n = title.split(' ').pop()?.padStart(2, '0') ?? '';
-											return (
-												<li key={title} className={styles.chapter}>
-													<Link
-														href={root
-															.lang(languageRoute)
-															.bibles.bookId(
-																getBookId('Exodus', props.audiobibles) ?? '',
-															)
-															.chapterNumber(n)
-															.get()}
-													>
-														{n}
-													</Link>
+							<li
+								className={clsx(styles.chaptersWrapper, {
+									active: book === selectedBook,
+								})}
+							>
+								<ul className={styles.chapters}>
+									{chapters?.map(({ title }) => {
+										console.log('title', title);
+										const n = title.split(' ').pop()?.padStart(2, '0') ?? '';
+										return (
+											<li key={title} className={styles.chapter}>
+												<Link
+													href={root
+														.lang(languageRoute)
+														.bibles.bookId(
+															getBookId('Exodus', props.audiobibles) ?? '',
+														)
+														.chapterNumber(n)
+														.get()}
+												>
+													{n}
+												</Link>
 
-													{/*
+												{/*
 												example good link: /en/bibles/chapters/27015/exodus-1 
 												Current Linking: /en/bibles/20
 												*/}
-												</li>
-											);
-										})}
-									</ul>
-								</li>
-							) : (
-								''
-							)}
+											</li>
+										);
+									})}
+								</ul>
+							</li>
 						</>
 					);
 				})}