styling and remove empty cols

DHBern · Jun 22, 2024 · c28b7cc · c28b7cc
1 parent 95dfc55
commit c28b7cc
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 63 deletions.
diff --git a/src/routes/textzeugen/[[sigla]]/[[thirties]]/[[verse]]/+page.svelte b/src/routes/textzeugen/[[sigla]]/[[thirties]]/[[verse]]/+page.svelte
@@ -78,69 +78,70 @@
 	</div>
 </section>
 {#if data.content}
-	{#each data.content as content, i}
-		<article
-			class="grid grid-cols-[repeat(auto-fit,minmax(450px,1fr))] gap-4 bg-surface-active-token my-4 py-4 px-8 rounded-xl"
-		>
-			<section>
-				<div class="mb-4 relative">
-					<h2 class="h2">Textzeuge: {generateLabel([content.sigla])}</h2>
-					<p>
-						Vers: {localVerses[i]}
-					</p>
-					<a class="btn btn-icon absolute top-0 right-0" href={generateCloseLink(content.sigla)}
-						><i class="fa-solid fa-x"></i></a
-					>
-				</div>
-				{#await content.meta then meta}
-					{#if typeof meta === 'object' && typeof meta.tpData === 'object'}
-						{#await meta.tpData}
-							<p>Loading...</p>
-						{:then tpData}
-							{#if tpData}
-								{#if tpData?.content}
-									<TextzeugenContent
-										content={tpData.content}
-										on:localVerseChange={(e) => (localVerses[i] = e.detail)}
-									/>
+	<div class="grid grid-cols-[repeat(auto-fit,minmax(550px,1fr))] gap-4">
+		{#each data.content as content, i}
+			<article
+				class="grid grid-cols-[repeat(auto-fit,minmax(500px,1fr))] gap-4 bg-surface-active-token my-4 py-4 px-8 rounded-xl relative"
+			>
+				<section>
+					<div class="mb-4 relative">
+						<h2 class="h2">Textzeuge: {generateLabel([content.sigla])}</h2>
+						<p>
+							Vers: {localVerses[i]}
+						</p>
+						<a class="btn btn-icon absolute top-0 right-0" href={generateCloseLink(content.sigla)}
+							><i class="fa-solid fa-x"></i></a
+						>
+					</div>
+					{#await content.meta then meta}
+						{#if typeof meta === 'object' && typeof meta.tpData === 'object'}
+							{#await meta.tpData}
+								<p>Loading...</p>
+							{:then tpData}
+								{#if tpData}
+									{#if tpData?.content}
+										<TextzeugenContent
+											content={tpData.content}
+											on:localVerseChange={(e) => (localVerses[i] = e.detail)}
+										/>
+									{:else}
+										{JSON.stringify(tpData)}
+									{/if}
 								{:else}
-									{JSON.stringify(tpData)}
+									<p>Der Vers existiert nicht</p>
 								{/if}
-							{:else}
-								<p>Der Vers existiert nicht</p>
+							{:catch error}
+								<p style="color: red">{error.message}</p>
+							{/await}
+						{/if}
+					{/await}
+				</section>
+				{#if !($page.url.searchParams.get('iiif')?.split('-')[i] === 'true')}
+					<section class="min-h-[40vh] relative">
+						{#await content.meta then meta}
+							{#if typeof meta === 'object' && typeof meta.tpData === 'object'}
+								{#await meta.iiif}
+									<p>Loading...</p>
+								{:then iiif}
+									{#if typeof iiif === 'object'}
+										<a
+											class="btn btn-icon absolute top-0 right-0 z-10"
+											href={generateIiifLink($page.url, i, true)}><i class="fa-solid fa-x"></i></a
+										>
+										<IIIFViewer {iiif} />
+									{/if}
+								{:catch error}
+									<p style="color: red">{error.message}</p>
+								{/await}
 							{/if}
-						{:catch error}
-							<p style="color: red">{error.message}</p>
 						{/await}
-					{/if}
-				{/await}
-			</section>
-			<section class="min-h-[40vh] relative">
-				{#await content.meta then meta}
-					{#if typeof meta === 'object' && typeof meta.tpData === 'object'}
-						{#await meta.iiif}
-							<p>Loading...</p>
-						{:then iiif}
-							{#if typeof iiif === 'object'}
-								{#if !($page.url.searchParams.get('iiif')?.split('-')[i] === 'true')}
-									<a
-										class="btn btn-icon absolute top-0 right-0 z-10"
-										href={generateIiifLink($page.url, i, true)}><i class="fa-solid fa-x"></i></a
-									>
-									<IIIFViewer {iiif} />
-								{:else}
-									<a
-										class="btn btn-icon absolute top-0 right-0 z-10"
-										href={generateIiifLink($page.url, i, false)}><i class="fa-solid fa-x"></i></a
-									>
-								{/if}
-							{/if}
-						{:catch error}
-							<p style="color: red">{error.message}</p>
-						{/await}
-					{/if}
-				{/await}
-			</section>
-		</article>
-	{/each}
+					</section>
+				{:else}
+					<a class="btn btn-icon" href={generateIiifLink($page.url, i, false)}
+						><i class="fa-solid fa-image"></i></a
+					>
+				{/if}
+			</article>
+		{/each}
+	</div>
 {/if}
diff --git a/src/routes/textzeugen/[[sigla]]/[[thirties]]/[[verse]]/TextzeugenContent.svelte b/src/routes/textzeugen/[[sigla]]/[[thirties]]/[[verse]]/TextzeugenContent.svelte
@@ -86,15 +86,36 @@
 			destroy() {}
 		};
 	};
+	// returns true when the column is empty or when it contains only children that are empty or themselves have empty children (recursively)
+	const isEmptyColumn = (/** @type {String} */ column) => {
+		const parser = new DOMParser();
+		const doc = parser.parseFromString(column, 'text/html');
+		const children = doc.body.children;
+		for (let i = 0; i < children.length; i++) {
+			const child = children[i];
+			if (child.children.length === 0) {
+				if (child.textContent.trim() !== '') {
+					return false;
+				}
+			} else {
+				if (!isEmptyColumn(child.innerHTML)) {
+					return false;
+				}
+			}
+		}
+		return true;
+	};
 </script>
 
 <div
-	class="flex flex-row gap-5 max-h-[70vh] overflow-y-auto snap-y"
+	class="grid grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] gap-4 max-h-[70vh] overflow-y-auto snap-y"
 	on:scrollend={onScrollEnd}
 	use:scrollToVerse={$targetVerse}
 >
 	{#each columns as column}
-		<div class="column">{@html column}</div>
+		{#if !isEmptyColumn(column)}
+			<div class="column">{@html column}</div>
+		{/if}
 	{/each}
 </div>