From 3ad0830940953a8f21ea6fc8933e9538e2c09251 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 18 Aug 2023 14:05:09 +0200
Subject: [PATCH] fix: template design

---
 .../project-[project]/functions/header.svelte | 10 ++-
 .../functions/templates/+page.svelte          | 89 +++++++++++--------
 .../template-[template]/+page.svelte          | 45 ++++++----
 3 files changed, 88 insertions(+), 56 deletions(-)

diff --git a/src/routes/console/project-[project]/functions/header.svelte b/src/routes/console/project-[project]/functions/header.svelte
index 8674ef158..27c744031 100644
--- a/src/routes/console/project-[project]/functions/header.svelte
+++ b/src/routes/console/project-[project]/functions/header.svelte
@@ -16,7 +16,8 @@
         {
             href: `${path}/templates`,
             title: 'Templates',
-            event: 'templates'
+            event: 'templates',
+            experimental: true
         }
     ];
 </script>
@@ -34,6 +35,13 @@
                 event={tab.event}>
                 {tab.title}
             </Tab>
+            {#if tab.experimental}
+                <div class="u-flex u-cross-center">
+                    <div class="tag eyebrow-heading-3">
+                        <span class="text u-x-small">Experimental</span>
+                    </div>
+                </div>
+            {/if}
         {/each}
     </Tabs>
 </Cover>
diff --git a/src/routes/console/project-[project]/functions/templates/+page.svelte b/src/routes/console/project-[project]/functions/templates/+page.svelte
index 1f004901e..701553bcd 100644
--- a/src/routes/console/project-[project]/functions/templates/+page.svelte
+++ b/src/routes/console/project-[project]/functions/templates/+page.svelte
@@ -86,50 +86,63 @@
                     <span class="icon-x" aria-hidden="true" />
                 </button>
             </div>
-            <Collapsible>
-                <CollapsibleItem>
-                    <svelte:fragment slot="title">Use case</svelte:fragment>
-                    {#each [...data.useCases] as useCase}
-                        <div class="input-text-wrapper">
-                            <input
-                                id={`useCase-${useCase}`}
-                                type="checkbox"
-                                value={$page.url.searchParams.getAll('useCase').includes(useCase)}
-                                on:change={(e) => applyFilter('useCase', useCase, e)} />
-                            <label for={`useCase-${useCase}`}>{useCase}</label>
-                        </div>
-                    {/each}
-                </CollapsibleItem>
-                <CollapsibleItem>
-                    <svelte:fragment slot="title">Runtime</svelte:fragment>
-                    {#each [...data.runtimes] as runtime}
-                        {@const icon = getIconFromRuntime(runtime)}
-                        <div class="u-flex">
-                            <input
-                                id={`runtime-${runtime}`}
-                                type="checkbox"
-                                checked={$page.url.searchParams.getAll('runtime').includes(runtime)}
-                                on:change={(e) => applyFilter('runtime', runtime, e)} />
-                            <div class="avatar is-size-x-small">
-                                <img
-                                    style:--p-text-size="16px"
-                                    src={`${base}/icons/${$app.themeInUse}/color/${icon}.svg`}
-                                    alt={icon}
-                                    aria-hidden="true"
-                                    aria-label={icon} />
-                            </div>
-                            <label for={`runtime-${runtime}`}>{runtime}</label>
-                        </div>
-                    {/each}
-                </CollapsibleItem>
-            </Collapsible>
+            <div class="u-margin-block-start-24">
+                <Collapsible>
+                    <CollapsibleItem>
+                        <svelte:fragment slot="title">Use case</svelte:fragment>
+                        <ul class="form-list u-row-gap-16">
+                            {#each [...data.useCases] as useCase}
+                                <li class="form-item">
+                                    <label class="u-flex u-cross-center u-gap-16">
+                                        <input
+                                            type="checkbox"
+                                            class="is-small"
+                                            value={$page.url.searchParams
+                                                .getAll('useCase')
+                                                .includes(useCase)}
+                                            on:change={(e) => applyFilter('useCase', useCase, e)} />
+                                        <div class="u-trim-1">{useCase}</div>
+                                    </label>
+                                </li>
+                            {/each}
+                        </ul>
+                    </CollapsibleItem>
+                    <CollapsibleItem>
+                        <svelte:fragment slot="title">Runtime</svelte:fragment>
+                        <ul class="form-list u-row-gap-16">
+                            {#each [...data.runtimes] as runtime}
+                                {@const icon = getIconFromRuntime(runtime)}
+                                <li class="form-item">
+                                    <label class="u-flex u-cross-center u-gap-16">
+                                        <input
+                                            type="checkbox"
+                                            class="is-small"
+                                            checked={$page.url.searchParams
+                                                .getAll('runtime')
+                                                .includes(runtime)}
+                                            on:change={(e) => applyFilter('runtime', runtime, e)} />
+                                        <div class="u-flex u-cross-center u-gap-8">
+                                            <div class="avatar is-size-x-small">
+                                                <img
+                                                    src={`${base}/icons/${$app.themeInUse}/color/${icon}.svg`}
+                                                    alt={icon} />
+                                            </div>
+                                            <div class="u-trim-1">{runtime}</div>
+                                        </div>
+                                    </label>
+                                </li>
+                            {/each}
+                        </ul>
+                    </CollapsibleItem>
+                </Collapsible>
+            </div>
 
             <section class="card u-margin-block-start-24">
                 <h4 class="body-text-1 u-bold">Contribute</h4>
                 <p class="u-margin-block-start-16">
                     Have an idea for a function template? View our <a
                         class="link"
-                        href=""
+                        href="https://github.com/appwrite/templates/blob/main/CONTRIBUTING.md"
                         target="_blank">contribution guidelines</a
                     >.
                 </p>
diff --git a/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte b/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
index 9370a48bc..e83ba3ffc 100644
--- a/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
@@ -10,23 +10,34 @@
 <Container>
     <div class="grid-300px-1fr">
         <section>
-            <h3 class="body-text-1 u-bold">Use cases</h3>
-            <div class="u-margin-block-start-8 u-flex u-flex-wrap u-gap-8">
-                {#each $template.usecases as useCase}
-                    <Pill>{useCase}</Pill>
-                {/each}
-            </div>
-            <h3 class="body-text-1 u-bold u-margin-block-start-8">Runtimes</h3>
-            <div class="u-margin-block-start-8 u-flex u-flex-wrap u-gap-8">
-                {#each $template.runtimes as runtime}
-                    <Pill>{runtime.name}</Pill>
-                {/each}
-            </div>
-
-            <section class="card u-margin-block-start-24">
-                <h4 class="body-text-1 u-bold">Published by</h4>
-                {$template.providerOwner}
-            </section>
+            <ul class="collapsible">
+                <li class="collapsible-item">
+                    <h3 class="body-text-2 u-bold u-padding-block-12">
+                        Use cases <span class="inline-tag">{$template.usecases.length}</span>
+                    </h3>
+                    <div class="collapsible-content u-flex u-flex-wrap u-gap-8">
+                        {#each $template.usecases as useCase}
+                            <Pill>{useCase}</Pill>
+                        {/each}
+                    </div>
+                </li>
+                <li class="collapsible-item">
+                    <h3 class="body-text-2 u-bold u-padding-block-12">
+                        Runtimes <span class="inline-tag">{$template.runtimes.length}</span>
+                    </h3>
+                    <div class="collapsible-content u-flex u-flex-wrap u-gap-8">
+                        {#each $template.runtimes as runtime}
+                            <Pill>{runtime.name}</Pill>
+                        {/each}
+                    </div>
+                </li>
+                <li class="collapsible-item">
+                    <section class="card u-margin-block-start-24">
+                        <h4 class="body-text-1 u-bold">Published by</h4>
+                        {$template.providerOwner}
+                    </section>
+                </li>
+            </ul>
         </section>
         <section>
             <Card>