doc: demo and roadmap updates

0gust1 · Sep 21, 2023 · a1f87d0 · a1f87d0
1 parent 4f82ef7
commit a1f87d0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/src/routes/components/simple-elements/+page.md b/src/routes/components/simple-elements/+page.md
@@ -58,15 +58,19 @@
 
 {#if browser}
 	{#await loadComponentDemoWithPDB() then MolstarComp}
+	<div class="not-prose">
 		<svelte:component this={MolstarComp} pdbIds={[pdbId1]} class="border h-18 w-1/2 bg-slate-300"/>
+	</div>
 	{/await}
 {/if}
 
 ### PdbID, with several instances (reactive)
 
 {#if browser}
 	{#await loadComponentDemoWithPDB() then MolstarComp}
+	<div class="not-prose">
 		<svelte:component this={MolstarComp} pdbIds={pdbList2} class="border h-18 bg-slate-300"/>
+	</div>
 	{/await}
 {/if}
 
@@ -79,24 +83,32 @@
 ### URL, with one instance
 
 {#if browser}
-	{#await loadComponentDemoWithURLs() then MolstarComp}
-		<svelte:component this={MolstarComp} structuresURLs={[url1]} class="border h-18 bg-slate-300"/>
-	{/await}
+{#await loadComponentDemoWithURLs() then MolstarComp}
+<div class="not-prose">
+<svelte:component this={MolstarComp} structuresURLs={[url1]} class="border h-18 bg-slate-300"/>
+</div>
+{/await}
 {/if}
 
 ### URL, with several instances (reactive)
+
 (todo: fix this, some problems with the reactive part/each keyed loop)
+
 {#if browser}
-	{#await loadComponentDemoWithURLs() then MolstarComp}
-		<svelte:component this={MolstarComp} structuresURLs={urlList2} class="border h-18 bg-slate-300"/>
-	{/await}
+{#await loadComponentDemoWithURLs() then MolstarComp}
+<div class="not-prose">
+<svelte:component this={MolstarComp} structuresURLs={urlList2} class="border h-18 bg-slate-300"/>
+</div>
+{/await}
 {/if}
 
 ### URLChain one instance
 
 {#if browser}
 	{#await loadComponentDemoWithURLChains() then MolstarComp}
+	<div class="not-prose">
 		<svelte:component this={MolstarComp} structuresURLs={[urlChain1]} class="border h-18 bg-slate-300"/>
+	</div>
 	{/await}
 {/if}
 
@@ -106,6 +118,8 @@
 
 {#if browser}
 	{#await loadComponentDemoWithURLChains() then MolstarComp}
+	<div class="not-prose">
 		<svelte:component this={MolstarComp} structuresURLs={urlChainList} class="border h-18 bg-slate-300"/>
+	</div>
 	{/await}
 {/if}
diff --git a/src/routes/roadmap/+page.md b/src/routes/roadmap/+page.md
@@ -17,7 +17,7 @@ More sophisticated design (like component factories / programmaic components) co
 - [ ] create a set of controls components (button-bar, debug ui, etc.), refine styling concerns (outside plugin)
 - [ ] refine the API around representation and coloring (in plugin)
 - [ ] A drag and drop component to load a file (most common formats, including `ply`).
-- [ ] explore a dedicated synchronized grid component
+- [ ] explore a dedicated synchronized grid component, with zoomable/focusable thumbnails
 - [ ] explore a dedicated superposition component
 
 ## References / resources