Skip to content

Commit c28b7cc

Browse files
author
Sebastian Flick
committed
styling and remove empty cols
1 parent 95dfc55 commit c28b7cc

File tree

2 files changed

+85
-63
lines changed

2 files changed

+85
-63
lines changed

‎src/routes/textzeugen/[[sigla]]/[[thirties]]/[[verse]]/+page.svelte

+62-61
Original file line numberDiff line numberDiff line change
@@ -78,69 +78,70 @@
7878
</div>
7979
</section>
8080
{#if data.content}
81-
{#each data.content as content, i}
82-
<article
83-
class="grid grid-cols-[repeat(auto-fit,minmax(450px,1fr))] gap-4 bg-surface-active-token my-4 py-4 px-8 rounded-xl"
84-
>
85-
<section>
86-
<div class="mb-4 relative">
87-
<h2 class="h2">Textzeuge: {generateLabel([content.sigla])}</h2>
88-
<p>
89-
Vers: {localVerses[i]}
90-
</p>
91-
<a class="btn btn-icon absolute top-0 right-0" href={generateCloseLink(content.sigla)}
92-
><i class="fa-solid fa-x"></i></a
93-
>
94-
</div>
95-
{#await content.meta then meta}
96-
{#if typeof meta === 'object' && typeof meta.tpData === 'object'}
97-
{#await meta.tpData}
98-
<p>Loading...</p>
99-
{:then tpData}
100-
{#if tpData}
101-
{#if tpData?.content}
102-
<TextzeugenContent
103-
content={tpData.content}
104-
on:localVerseChange={(e) => (localVerses[i] = e.detail)}
105-
/>
81+
<div class="grid grid-cols-[repeat(auto-fit,minmax(550px,1fr))] gap-4">
82+
{#each data.content as content, i}
83+
<article
84+
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"
85+
>
86+
<section>
87+
<div class="mb-4 relative">
88+
<h2 class="h2">Textzeuge: {generateLabel([content.sigla])}</h2>
89+
<p>
90+
Vers: {localVerses[i]}
91+
</p>
92+
<a class="btn btn-icon absolute top-0 right-0" href={generateCloseLink(content.sigla)}
93+
><i class="fa-solid fa-x"></i></a
94+
>
95+
</div>
96+
{#await content.meta then meta}
97+
{#if typeof meta === 'object' && typeof meta.tpData === 'object'}
98+
{#await meta.tpData}
99+
<p>Loading...</p>
100+
{:then tpData}
101+
{#if tpData}
102+
{#if tpData?.content}
103+
<TextzeugenContent
104+
content={tpData.content}
105+
on:localVerseChange={(e) => (localVerses[i] = e.detail)}
106+
/>
107+
{:else}
108+
{JSON.stringify(tpData)}
109+
{/if}
106110
{:else}
107-
{JSON.stringify(tpData)}
111+
<p>Der Vers existiert nicht</p>
108112
{/if}
109-
{:else}
110-
<p>Der Vers existiert nicht</p>
113+
{:catch error}
114+
<p style="color: red">{error.message}</p>
115+
{/await}
116+
{/if}
117+
{/await}
118+
</section>
119+
{#if !($page.url.searchParams.get('iiif')?.split('-')[i] === 'true')}
120+
<section class="min-h-[40vh] relative">
121+
{#await content.meta then meta}
122+
{#if typeof meta === 'object' && typeof meta.tpData === 'object'}
123+
{#await meta.iiif}
124+
<p>Loading...</p>
125+
{:then iiif}
126+
{#if typeof iiif === 'object'}
127+
<a
128+
class="btn btn-icon absolute top-0 right-0 z-10"
129+
href={generateIiifLink($page.url, i, true)}><i class="fa-solid fa-x"></i></a
130+
>
131+
<IIIFViewer {iiif} />
132+
{/if}
133+
{:catch error}
134+
<p style="color: red">{error.message}</p>
135+
{/await}
111136
{/if}
112-
{:catch error}
113-
<p style="color: red">{error.message}</p>
114137
{/await}
115-
{/if}
116-
{/await}
117-
</section>
118-
<section class="min-h-[40vh] relative">
119-
{#await content.meta then meta}
120-
{#if typeof meta === 'object' && typeof meta.tpData === 'object'}
121-
{#await meta.iiif}
122-
<p>Loading...</p>
123-
{:then iiif}
124-
{#if typeof iiif === 'object'}
125-
{#if !($page.url.searchParams.get('iiif')?.split('-')[i] === 'true')}
126-
<a
127-
class="btn btn-icon absolute top-0 right-0 z-10"
128-
href={generateIiifLink($page.url, i, true)}><i class="fa-solid fa-x"></i></a
129-
>
130-
<IIIFViewer {iiif} />
131-
{:else}
132-
<a
133-
class="btn btn-icon absolute top-0 right-0 z-10"
134-
href={generateIiifLink($page.url, i, false)}><i class="fa-solid fa-x"></i></a
135-
>
136-
{/if}
137-
{/if}
138-
{:catch error}
139-
<p style="color: red">{error.message}</p>
140-
{/await}
141-
{/if}
142-
{/await}
143-
</section>
144-
</article>
145-
{/each}
138+
</section>
139+
{:else}
140+
<a class="btn btn-icon" href={generateIiifLink($page.url, i, false)}
141+
><i class="fa-solid fa-image"></i></a
142+
>
143+
{/if}
144+
</article>
145+
{/each}
146+
</div>
146147
{/if}

‎src/routes/textzeugen/[[sigla]]/[[thirties]]/[[verse]]/TextzeugenContent.svelte

+23-2
Original file line numberDiff line numberDiff line change
@@ -86,15 +86,36 @@
8686
destroy() {}
8787
};
8888
};
89+
// returns true when the column is empty or when it contains only children that are empty or themselves have empty children (recursively)
90+
const isEmptyColumn = (/** @type {String} */ column) => {
91+
const parser = new DOMParser();
92+
const doc = parser.parseFromString(column, 'text/html');
93+
const children = doc.body.children;
94+
for (let i = 0; i < children.length; i++) {
95+
const child = children[i];
96+
if (child.children.length === 0) {
97+
if (child.textContent.trim() !== '') {
98+
return false;
99+
}
100+
} else {
101+
if (!isEmptyColumn(child.innerHTML)) {
102+
return false;
103+
}
104+
}
105+
}
106+
return true;
107+
};
89108
</script>
90109
91110
<div
92-
class="flex flex-row gap-5 max-h-[70vh] overflow-y-auto snap-y"
111+
class="grid grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] gap-4 max-h-[70vh] overflow-y-auto snap-y"
93112
on:scrollend={onScrollEnd}
94113
use:scrollToVerse={$targetVerse}
95114
>
96115
{#each columns as column}
97-
<div class="column">{@html column}</div>
116+
{#if !isEmptyColumn(column)}
117+
<div class="column">{@html column}</div>
118+
{/if}
98119
{/each}
99120
</div>
100121

0 commit comments

Comments
 (0)