Split the middle box under Grow to list events

ref #2337
galaxyproject · Jan 25, 2024 · 4a8d82b · 4a8d82b
1 parent e69fc3c
commit 4a8d82b
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 15 deletions.
diff --git a/content/home/research.yml b/content/home/research.yml
@@ -23,7 +23,7 @@ research3:
   title: Popular tutorials
   content: "Choose from these self-paced tutorials to perform a comprehensive analysis or hone your skills on a specific topic."
   button:
-    title: See more
+    title: Learn more
     url: "https://training.galaxyproject.org"
   links:
   - title: "Visualization of RNA-Seq results with Volcano Plot"
@@ -32,16 +32,26 @@ research3:
     url: "https://training.galaxyproject.org/training-material/topics/transcriptomics/tutorials/ref-based/tutorial.html"
   - title: Quality Control
     url: "https://training.galaxyproject.org/training-material/topics/sequence-analysis/tutorials/quality-control/tutorial.html"
-  - title: "Visualization of RNA-Seq results with heatmap2"
-    url: "https://training.galaxyproject.org/training-material/topics/transcriptomics/tutorials/rna-seq-viz-with-heatmap2/tutorial.html"
-  - title: "RNA-Seq reads to counts"
-    url: "https://training.galaxyproject.org/training-material/topics/transcriptomics/tutorials/rna-seq-reads-to-counts/tutorial.html"
 
 research4:
+  title: Upcoming events
+  content: "The Galaxy community puts on a show every year with dozens of events around the world.<div class='mt-2'>Next up:</div>"
+  button:
+      title: Visit more
+      url: "https://galaxyproject.org/events/"
+  events:
+    - event: "Advances in Genome Biology and Technology (AGBT)"
+      date: "Feb 5, 2024"
+    - event: "An Introduction to High-Performance Computing"
+      date: "Feb 6, 2024"
+    - event: "Materials Galaxy Community Meeting"
+      date: "Feb 7, 2024"
+
+research5:
   title: "Exemplar use cases"
   content: "See how Galaxy cooperates and helps other projects. These are also great exemplars of how Galaxy is being used in production settings."
 
-research5:
+research6:
   logos:
   - title: VGP logo
     url: /projects/vgp/

diff --git a/src/assets/styles.scss b/src/assets/styles.scss
@@ -240,14 +240,26 @@ html {
                         a {
                             .link {
                                 color: $white;
-                                font-weight: 600;
-                                padding-bottom: 2.2rem;
+                                font-size: 80%;
+                                font-weight: 400;
+                                padding-bottom: 0.5rem;
                             }
                         }
                     }
                 }
             }
 
+            &.events {
+                color: $white;
+                background: linear-gradient(155deg, rgba(249, 206, 215, 0.8) 4%, rgba(63, 227, 249, 0.8));
+
+                table {
+                    tr {
+                        font-size: 80%;
+                    }
+                }
+            }
+
             &.cases {
                 color: $white;
                 background: linear-gradient(155deg, rgba(63, 227, 249, 0.8) 44%, #c6a669);

diff --git a/src/pages/Index.vue b/src/pages/Index.vue
@@ -155,9 +155,9 @@
                     </div>
                 </div>
                 <div class="col-xl-4 mb-3">
-                    <div class="area research tutorials h-100">
+                    <div class="area research tutorials h-40">
                         <h3>{{ this.$static.datasetResearch.research3.title }}</h3>
-                        <div v-html="this.$static.datasetResearch.research3.content" class="text-white mb-5"></div>
+                        <div v-html="this.$static.datasetResearch.research3.content" class="text-white mb-3"></div>
                         <ul style="list-style-type: none; padding: 0">
                             <li v-for="t in this.$static.datasetResearch.research3.links" :key="t.title">
                                 <a
@@ -177,20 +177,46 @@
                                 role="button"
                                 rel="noopener"
                                 target="_blank"
-                                class="btn btn-info text-decoration-none mb-4 w-50"
+                                class="btn btn-info text-decoration-none w-50"
                                 >{{ this.$static.datasetResearch.research3.button.title }}</a
                             >
                         </div>
                     </div>
+                    <div class="area research events mt-3 h-40">
+                        <h3>{{ this.$static.datasetResearch.research4.title }}</h3>
+                        <div v-html="this.$static.datasetResearch.research4.content" class="text-white mb-2"></div>
+                        <table style="padding: 0">
+                            <tbody>
+                                <tr v-for="t in this.$static.datasetResearch.research4.events" :key="t.event">
+                                    <td>
+                                        <div>{{ t.date }}</div>
+                                    </td>
+                                    <td>
+                                        <div>{{ t.event }}</div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <div class="d-flex justify-content-center">
+                            <a
+                                :href="this.$static.datasetResearch.research4.button.url"
+                                role="button"
+                                rel="noopener"
+                                target="_blank"
+                                class="btn btn-info text-decoration-none mt-3 mb-3 w-50"
+                                >{{ this.$static.datasetResearch.research4.button.title }}</a
+                            >
+                        </div>
+                    </div>
                 </div>
                 <div class="col-xl-4 mb-3">
                     <div class="area research cases h-100">
-                        <h3>{{ this.$static.datasetResearch.research4.title }}</h3>
-                        <div v-html="this.$static.datasetResearch.research4.content"></div>
+                        <h3>{{ this.$static.datasetResearch.research5.title }}</h3>
+                        <div v-html="this.$static.datasetResearch.research5.content"></div>
                         <div class="row mt-4 mb-4">
                             <div class="col">
                                 <div
-                                    v-for="t in this.$static.datasetResearch.research5.logos"
+                                    v-for="t in this.$static.datasetResearch.research6.logos"
                                     :key="t.title"
                                     class="text-center mt-4"
                                 >
@@ -290,9 +316,21 @@ query {
         },
         research4 {
             title,
-            content
+            content,
+            button {
+                title,
+                url
+            },
+            events {
+                event,
+                date
+            }
         },
         research5 {
+            title,
+            content
+        },
+        research6 {
             logos {
                 title,
                 url,