Apply suggestions from code review

neurobagel · Nov 16, 2023 · 13e37fc · 13e37fc
1 parent bc3135e
commit 13e37fc
Showing 1 changed file with 23 additions and 22 deletions.
diff --git a/pages/index.vue b/pages/index.vue
@@ -2,38 +2,39 @@
 
     <b-container fluid>
 
-        <b-row align-h="center">
-            <b-col cols="6">
+        <b-row align-h="left">
+            <b-col cols="12">
                 <h1>
                     👋 Welcome to the neurobagel annotation tool
                 </h1>
                 <p>
                     This tool allows you to create a machine readable data dictionary
-                    in .json format for a tabular phenotypic file in .tsv format (Data table).
-                    If you already have a BIDS-like .json data dictionary, you can provide it here
-                    and augment it with more detailed annotations.
+                    in .json format for a tabular phenotypic file in .tsv format ("Data table").
+                    If you already have a <a href="https://bids-specification.readthedocs.io/en/stable/03-modality-agnostic-files.html#phenotypic-and-assessment-data" target="_blank">BIDS-like .json data dictionary</a>, you can provide it here
+                     (under "Data Dictionary") and augment it with more detailed annotations.
                 </p>
                 <p>
-                    🏗️ This tool (like all of neuroabgel) is under active development and we are thankful
+                    🏗️ This tool (like all of neurobagel) is under active development and we are thankful
                     for all feedback and suggestions you may have. You can either use our feedback widget
                     on the side of this window, or open an issue on <a href="https://github.com/neurobagel/annotation_tool" target="_blank">our GitHub repository</a>.
                 </p>
-                <p>
-                    The process of annotations works like this:
-                </p>
-                <ol>
-                    <li>Upload a .tsv tabular phenotypic file (<a href="https://neurobagel.org/annotation_tool/" target="_blank">see our docs for details</a>)</li>
-                    <li>Upload a <a href="https://neurobagel.org/dictionaries/" target="_blank">BIDS-like .json data dictionary</a> (optional)</li>
-                    <li>Annotate any or all "Columns" in your table by telling us what data they are "about"</li>
-                    <li>Annotate the values in the "Columns" you have annotated, by mapping them to controlled terms from
-                        <a href="https://neurobagel.org/term_naming_standards/#currently-used-namespaces" target="_blank">existing vocabularies</a>
-                    </li>
-                    <li>Download your augmented data dictionary in .json</li>
-                    <li>Use the augmented data dictionary to <a href="https://neurobagel.org/cli/" target="_blank">create a harmonized view of your data</a> (optional, uses other neurobagel tools)</li>
-                </ol>
-                <p>
-                    If you want to learn more about neurobagel, check out our website: <a href="https://neurobagel.org/" target="_blank">neurobagel.org</a>.
-                </p>
+                <b-button v-b-toggle.collapse-1 variant="primary">More details on the annotation process</b-button>
+                <b-collapse id="collapse-1">
+                    <br />
+                    <ol>
+                        <li>Upload a .tsv tabular phenotypic file (<a href="https://neurobagel.org/annotation_tool/" target="_blank">see our docs for details</a>)</li>
+                        <li>Upload a <a href="https://neurobagel.org/dictionaries/" target="_blank">BIDS-like .json data dictionary</a> (optional)</li>
+                        <li>Annotate any or all "Columns" in your table by telling us what data they are "about"</li>
+                        <li>Annotate the values in the "Columns" you have annotated, by mapping them to controlled terms from
+                            <a href="https://neurobagel.org/term_naming_standards/#currently-used-namespaces" target="_blank">existing vocabularies</a>
+                        </li>
+                        <li>Download your augmented data dictionary in .json</li>
+                        <li>Use the augmented data dictionary to <a href="https://neurobagel.org/cli/" target="_blank">create a harmonized view of your data</a> (optional, uses other neurobagel tools)</li>
+                    </ol>
+                    <p>
+                        If you want to learn more about neurobagel, check out our website: <a href="https://neurobagel.org/" target="_blank">neurobagel.org</a>.
+                    </p>
+                </b-collapse>
             </b-col>
         </b-row>