From 13398edd852f4eb8f83dd874812e5a55655d7b18 Mon Sep 17 00:00:00 2001
From: "sofia.haglund" <sofia.haglund@scilifelab.se>
Date: Mon, 16 Oct 2023 15:51:58 +0200
Subject: [PATCH 1/4] add accordion to pipeline parameter headers

---
 .../schema/SchemaListingGroup.svelte          | 39 ++++++++++++-------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/components/schema/SchemaListingGroup.svelte b/src/components/schema/SchemaListingGroup.svelte
index 8f724fd152..760e8706e1 100644
--- a/src/components/schema/SchemaListingGroup.svelte
+++ b/src/components/schema/SchemaListingGroup.svelte
@@ -24,30 +24,33 @@
     });
 </script>
 
-<div class="card my-2" class:collapse={hidden} class:show={$showHidden}>
-    <div class="card-header position-sticky bg-body-secondary">
-        <h2 class="card-title text-success scroll-target my-1" id={id.replaceAll('_', '-')}>
+<div class="accordion my-2">
+    <div class="accordion-item">
+        <h2 class="accordion-button bg-body-secondary" data-bs-toggle="collapse" data-bs-target={'#' + id.replaceAll('_', '-')}
+            aria-controls={'#' + id.replaceAll('_', '-')} id={id.replaceAll('_', '-') + '_acc'}>
             <a
                 class="text-decoration-none text-success"
                 aria-hidden="true"
                 tabindex="-1"
-                href={'#' + id.replaceAll('_', '-')}
+                href={'#' + id.replaceAll('_', '-') + '_acc'}
                 ><i class="ms-1 fas invisible" aria-hidden="true" />{#if definition.fa_icon}
                     <i class="fa fa-fw me-2 {definition.fa_icon}" />
                 {/if}
                 {definition.title}
             </a>
         </h2>
-    </div>
-    <div class="card-body pb-0">
-        <p class="mb-0">{definition.description ? definition.description : ''}</p>
-        {#if definition.properties}
-            <div class="properties">
-                {#each Object.entries(definition.properties) as [title, property] (title)}
-                    <SchemaListingElement {title} {property} />
-                {/each}
-            </div>
-        {/if}
+        <div id={id.replaceAll('_', '-')} class="accordion-collapse collapse show">
+          <div class="accordion-body">
+            <p class="mb-0">{definition.description ? definition.description : ''}</p>
+            {#if definition.properties}
+                <div class="properties">
+                    {#each Object.entries(definition.properties) as [title, property] (title)}
+                        <SchemaListingElement {title} {property} />
+                    {/each}
+                </div>
+            {/if}
+          </div>
+        </div>
     </div>
 </div>
 
@@ -55,4 +58,12 @@
     .properties > :global(.row) {
         margin-top: -1px; // avoid doubled borders
     }
+    .accordion-button {
+        font-size: 2rem;
+        font-weight: 500;
+    }
+    .accordion-button.collapsed {
+        background: #EAECEF;
+    }
 </style>
+

From 102f4bc0a6f55c9bde794cd4aa9eceaa5247e62e Mon Sep 17 00:00:00 2001
From: Sofia Haglund <sofia.h4glund@gmail.com>
Date: Mon, 16 Oct 2023 17:23:57 +0200
Subject: [PATCH 2/4] Tried to fix the href in the accordion header

---
 src/components/schema/SchemaListingGroup.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/schema/SchemaListingGroup.svelte b/src/components/schema/SchemaListingGroup.svelte
index 760e8706e1..0223f10e2c 100644
--- a/src/components/schema/SchemaListingGroup.svelte
+++ b/src/components/schema/SchemaListingGroup.svelte
@@ -26,20 +26,20 @@
 
 <div class="accordion my-2">
     <div class="accordion-item">
-        <h2 class="accordion-button bg-body-secondary" data-bs-toggle="collapse" data-bs-target={'#' + id.replaceAll('_', '-')}
-            aria-controls={'#' + id.replaceAll('_', '-')} id={id.replaceAll('_', '-') + '_acc'}>
+        <h2 class="accordion-button bg-body-secondary" data-bs-toggle="collapse" data-bs-target={'#' + id.replaceAll('_', '-') + '_body'}
+            aria-controls={'#' + id.replaceAll('_', '-') + '_body'} id={id.replaceAll('_', '-')}>
             <a
                 class="text-decoration-none text-success"
                 aria-hidden="true"
                 tabindex="-1"
-                href={'#' + id.replaceAll('_', '-') + '_acc'}
+                href={'#' + id.replaceAll('_', '-')}
                 ><i class="ms-1 fas invisible" aria-hidden="true" />{#if definition.fa_icon}
                     <i class="fa fa-fw me-2 {definition.fa_icon}" />
                 {/if}
                 {definition.title}
             </a>
         </h2>
-        <div id={id.replaceAll('_', '-')} class="accordion-collapse collapse show">
+        <div id={id.replaceAll('_', '-') + '_body'} class="accordion-collapse collapse show">
           <div class="accordion-body">
             <p class="mb-0">{definition.description ? definition.description : ''}</p>
             {#if definition.properties}

From 8c19e9046a0ab77fc0ed679c2671dd139badfd60 Mon Sep 17 00:00:00 2001
From: Sofia Haglund <sofia.h4glund@gmail.com>
Date: Mon, 16 Oct 2023 17:32:38 +0200
Subject: [PATCH 3/4] Prettify scroll accordion header

---
 src/components/schema/SchemaListingGroup.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/schema/SchemaListingGroup.svelte b/src/components/schema/SchemaListingGroup.svelte
index 0223f10e2c..27db7c7874 100644
--- a/src/components/schema/SchemaListingGroup.svelte
+++ b/src/components/schema/SchemaListingGroup.svelte
@@ -26,7 +26,7 @@
 
 <div class="accordion my-2">
     <div class="accordion-item">
-        <h2 class="accordion-button bg-body-secondary" data-bs-toggle="collapse" data-bs-target={'#' + id.replaceAll('_', '-') + '_body'}
+        <h2 class="accordion-button bg-body-secondary scroll-target" data-bs-toggle="collapse" data-bs-target={'#' + id.replaceAll('_', '-') + '_body'}
             aria-controls={'#' + id.replaceAll('_', '-') + '_body'} id={id.replaceAll('_', '-')}>
             <a
                 class="text-decoration-none text-success"

From 9fe6ac8fb090ffd59678a1305e628d97f27cd535 Mon Sep 17 00:00:00 2001
From: nf-core-bot <core@nf-co.re>
Date: Sun, 17 Mar 2024 09:05:36 +0000
Subject: [PATCH 4/4] [automated] Fix code linting

---
 .../schema/SchemaListingGroup.svelte          | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/schema/SchemaListingGroup.svelte b/src/components/schema/SchemaListingGroup.svelte
index 27db7c7874..3359cca6cb 100644
--- a/src/components/schema/SchemaListingGroup.svelte
+++ b/src/components/schema/SchemaListingGroup.svelte
@@ -26,8 +26,13 @@
 
 <div class="accordion my-2">
     <div class="accordion-item">
-        <h2 class="accordion-button bg-body-secondary scroll-target" data-bs-toggle="collapse" data-bs-target={'#' + id.replaceAll('_', '-') + '_body'}
-            aria-controls={'#' + id.replaceAll('_', '-') + '_body'} id={id.replaceAll('_', '-')}>
+        <h2
+            class="accordion-button bg-body-secondary scroll-target"
+            data-bs-toggle="collapse"
+            data-bs-target={'#' + id.replaceAll('_', '-') + '_body'}
+            aria-controls={'#' + id.replaceAll('_', '-') + '_body'}
+            id={id.replaceAll('_', '-')}
+        >
             <a
                 class="text-decoration-none text-success"
                 aria-hidden="true"
@@ -40,16 +45,16 @@
             </a>
         </h2>
         <div id={id.replaceAll('_', '-') + '_body'} class="accordion-collapse collapse show">
-          <div class="accordion-body">
-            <p class="mb-0">{definition.description ? definition.description : ''}</p>
-            {#if definition.properties}
-                <div class="properties">
-                    {#each Object.entries(definition.properties) as [title, property] (title)}
-                        <SchemaListingElement {title} {property} />
-                    {/each}
-                </div>
-            {/if}
-          </div>
+            <div class="accordion-body">
+                <p class="mb-0">{definition.description ? definition.description : ''}</p>
+                {#if definition.properties}
+                    <div class="properties">
+                        {#each Object.entries(definition.properties) as [title, property] (title)}
+                            <SchemaListingElement {title} {property} />
+                        {/each}
+                    </div>
+                {/if}
+            </div>
         </div>
     </div>
 </div>
@@ -63,7 +68,6 @@
         font-weight: 500;
     }
     .accordion-button.collapsed {
-        background: #EAECEF;
+        background: #eaecef;
     }
 </style>
-