Fixes mobile layout issues on the transcript page (#1567)

syntaxfm · Feb 20, 2024 · 14ecf7d · 14ecf7d
1 parent 23bd918
commit 14ecf7d
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 19 deletions.
diff --git a/src/lib/transcript/TableOfContents.svelte b/src/lib/transcript/TableOfContents.svelte
@@ -26,7 +26,11 @@
 		border: 1px solid var(--border-color);
 		border-radius: 10px;
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+		--min: 400px;
+		grid-template-columns: repeat(auto-fill, minmax(var(--min), 1fr));
+		@media (--below_med) {
+			--min: 200px;
+		}
 	}
 	li {
 		padding: 0;

diff --git a/src/lib/transcript/Transcript.svelte b/src/lib/transcript/Transcript.svelte
@@ -112,11 +112,9 @@
 	{#each Array.from(utterances_by_summary) as [summary, utterances], i}
 		<section>
 			<header class="topic {placeTopic(summary, utterances)}">
-				<div class="gutter">
-					<div id={slug(summary.text)}>
-						<strong>Topic {i}</strong>
-						<span>{summary.time}</span>
-					</div>
+				<div class="gutter" id={slug(summary.text)}>
+					<strong>Topic {i}</strong>
+					<span>{summary.time}</span>
 				</div>
 				<div class="marker">
 					<Squiggle top={true} />
@@ -138,18 +136,16 @@
 						class="utterance {labelUtterance(utterance)}"
 					>
 						<div class="gutter">
-							<div>
-								<button
-									class="button-nunya"
-									on:click={async () => {
-										await player.start_show(show);
-										$player.currentTime = utterance.start;
-									}}>{format_time(utterance.start)}</button
-								>
-								<p class="speaker">
-									{utterance.speakerName || `Guest ${utterance.speakerId}`}
-								</p>
-							</div>
+							<button
+								class="button-nunya"
+								on:click={async () => {
+									await player.start_show(show);
+									$player.currentTime = utterance.start;
+								}}>{format_time(utterance.start)}</button
+							>
+							<p class="speaker">
+								{utterance.speakerName || `Guest ${utterance.speakerId}`}
+							</p>
 						</div>
 						<div class="marker">
 							<span class="dot"></span>
@@ -216,8 +212,19 @@
 		position: relative;
 		display: grid;
 		grid-template-columns: 120px auto 1fr;
-		gap: 20px;
+		gap: 0 20px;
 		font-size: var(--font-size-xs);
+		@media (--below_med) {
+			grid-template-columns: 67px 1fr;
+			grid-template-rows: auto auto;
+			.gutter {
+				grid-column: 2;
+			}
+			.marker {
+				grid-column: 1;
+				grid-row: 1 / -1;
+			}
+		}
 	}
 	.topic {
 		--vertical-spacing: 26px; /* must be in px for the SVG */
@@ -238,6 +245,17 @@
 		.marker {
 			place-content: center;
 		}
+		@media (--below_med) {
+			grid-template-columns: var(--horizonal-spacing) 1fr;
+			grid-template-rows: auto auto;
+			.marker {
+				grid-column: 1;
+				grid-row: 1 / -1;
+			}
+			.gutter {
+				display: none;
+			}
+		}
 	}
 	h4 {
 		padding: 1rem 0;
@@ -264,6 +282,13 @@
 		align-self: start;
 		text-align: right;
 		transform: translateX(-10px);
+		@media (--below_med) {
+			display: flex;
+			position: relative;
+			top: 0;
+			width: 100%;
+			justify-content: space-between;
+		}
 		p {
 			margin: 0;
 		}