feat(website): submit nav link always goes to submission portal (#1419)

* always direct submit nav link to submission portal * use buttons on submission portal * center submission portal and organism selection pages
loculus-project · Mar 22, 2024 · d88baa0 · d88baa0
1 parent 27161a2
commit d88baa0
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 12 deletions.
diff --git a/website/src/pages/[organism]/submission/index.astro b/website/src/pages/[organism]/submission/index.astro
@@ -4,17 +4,46 @@ import BaseLayout from '../../../layouts/BaseLayout.astro';
 import { routes } from '../../../routes/routes';
 
 const { organism } = cleanOrganism(Astro.params.organism);
+
+const options = [
+    {
+        title: 'Submit',
+        description: 'Upload new sequences.',
+        route: routes.submitPage(organism!.key),
+    },
+    {
+        title: 'Revise',
+        description: 'Upload revisions for existing sequences.',
+        route: routes.revisePage(organism!.key),
+    },
+    {
+        title: 'Review',
+        description: 'Review your unreleased submissions.',
+        route: routes.userSequenceReviewPage(organism!.key),
+    },
+    {
+        title: 'View',
+        description: "View your group's released sequences.",
+        route: routes.mySequencesWithoutGroup(organism!.key),
+    },
+];
 ---
 
 <BaseLayout title='Submit'>
     <h1 class='title'>Submission portal for {organism!.displayName}</h1>
-
-    <div>
-        <a href={routes.submitPage(organism!.key)}>Make a new submission</a><br />
-        <a href={routes.revisePage(organism!.key)}>Make a revision</a>
-        <br />
-        <a href={routes.userSequenceReviewPage(organism!.key)}>My unreleased sequences</a>
-        <br />
-        <a href={routes.mySequencesWithoutGroup(organism!.key)}>My released sequences</a>
+    <div class='max-w-2xl mx-auto p-8'>
+        <div class='flex flex-wrap'>
+            {
+                options.map((option) => (
+                    <a
+                        href={option.route}
+                        class='block rounded border border-gray-300 p-8 m-2 w-64 text-center hover:bg-gray-100'
+                    >
+                        <h3 class='font-semibold text-gray-700'>{option.title}</h3>
+                        <p class='text-gray-700 text-sm'>{option.description}</p>
+                    </a>
+                ))
+            }
+        </div>
     </div>
 </BaseLayout>
diff --git a/website/src/pages/organism-selector/[redirectTo].astro b/website/src/pages/organism-selector/[redirectTo].astro
@@ -5,7 +5,7 @@ import { routes } from '../../routes/routes';
 const redirectTo = Astro.params.redirectTo;
 
 const purposes: { [key: string]: string } = {
-    submit: 'for which you want to submit data',
+    submission: 'for which you want to submit data',
     search: 'for which you want to browse data',
 };
 
@@ -14,15 +14,15 @@ interface Routes {
 }
 
 const myRoutes: Routes = {
-    submit: routes.submitPage,
+    submission: routes.submissionPage,
     search: routes.searchPage,
 };
 
 const purpose = purposes[redirectTo!];
 ---
 
 <BaseLayout title='Home'>
-    <div class='max-w-6xl mx-auto'>
+    <div class='max-w-4xl mx-auto'>
         <p class='text-gray-700 my-4'>
             Please select an organism {purpose}.
         </p>

diff --git a/website/src/routes/navigationItems.ts b/website/src/routes/navigationItems.ts
@@ -14,7 +14,7 @@ function topNavigationItems(organism: string | undefined, isLoggedIn: boolean, l
             },
             {
                 text: 'Submit',
-                path: routes.organismSelectorPage('submit'),
+                path: routes.organismSelectorPage('submission'),
             },
             {
                 text: 'Datasets',