From 577d6a6939195f1e451d1de7eb41916d1c5b8419 Mon Sep 17 00:00:00 2001
From: Rachel <rtorchet@pasteur.fr>
Date: Wed, 13 Oct 2021 16:15:51 +0200
Subject: [PATCH] Update homepage and phenotype page
---
client/assets/css/global.css | 7 ++++---
client/components/AnalysisCard.vue | 5 +++--
client/layouts/default.vue | 2 +-
client/pages/index.vue | 32 +++++++-----------------------
client/pages/phenotypes.vue | 14 ++++++++++---
5 files changed, 26 insertions(+), 34 deletions(-)
diff --git a/client/assets/css/global.css b/client/assets/css/global.css
index b0fe309f..ebeb0bc0 100644
--- a/client/assets/css/global.css
+++ b/client/assets/css/global.css
@@ -53,8 +53,9 @@
}
h1 {
- font-family: 'BrandonGrotesqueBld';
- text-transform: uppercase;
+ font-family: 'PlayfairDisplayReg';
+ text-transform: capitalize;
+ font-size: 30px;
}
h2 {
@@ -96,7 +97,7 @@
.card-title {
font-family: 'PlayfairDisplayReg';
- font-size: 20px;
+ font-size: 25px;
}
.left-card {
diff --git a/client/components/AnalysisCard.vue b/client/components/AnalysisCard.vue
index d92acfed..75d48547 100644
--- a/client/components/AnalysisCard.vue
+++ b/client/components/AnalysisCard.vue
@@ -21,7 +21,8 @@
</v-col
>
</v-row>
- <v-card-actions>
+ <v-card-actions style="width: 50%; margin: 0 auto; background: white; border-radius: 3px; padding: 20px; box-shadow: 1px 1px 5px #aeaeae;">
+ <v-card-text style="font-size:18px; text-align:center;"> {{short_btn}}</v-card-text>
<v-btn :to ="link" :style="myStyle" style="color:#fff; text-transform:none; margin:0 auto;">
{{short_desc}}
</v-btn>
@@ -33,6 +34,6 @@
<script>
export default {
name:"AnalysisCard",
- props: ['title', "description", "short_desc","link","myStyle","myClass","myImg"]
+ props: ['title', "description", "short_btn", "short_desc","link","myStyle","myClass","myImg"]
}
</script>
diff --git a/client/layouts/default.vue b/client/layouts/default.vue
index c9a2d10a..02968621 100644
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@@ -29,7 +29,7 @@
<v-container>
<Nuxt />
</v-container>
- <v-footer :absolute!=fixed app dark class="py-0">
+ <v-footer app dark class="py-0">
<v-container>
<v-row justify="center">
<v-col sm="10" md="8">
diff --git a/client/pages/index.vue b/client/pages/index.vue
index 160f7b16..facaef27 100644
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@@ -11,35 +11,15 @@
<v-container fluid>
<v-row dense>
- <AnalysisCard v-for="analysis in analysis" :key="analysis.title" :title="analysis.title" :description="analysis.description" :short_desc="analysis.short_desc" :link="analysis.link" :myStyle="analysis.myStyle" :myClass="analysis.myClass" :myImg="analysis.myImg" />
+ <AnalysisCard v-for="analysis in analysis" :key="analysis.title" :title="analysis.title" :description="analysis.description" :short_btn="analysis.short_btn" :short_desc="analysis.short_desc" :link="analysis.link" :myStyle="analysis.myStyle" :myClass="analysis.myClass" :myImg="analysis.myImg" />
</v-row>
</v-container>
+ <div style="text-align: center; background-color: #fbfbfb; padding: 20px; width: 80%; margin: 30px auto;">
<h2> Team </h2>
<p>
Jass is developed at Institut Pasteur by the <a href="https://research.pasteur.fr/en/team/statistical-genetics/">Statistical Genetics group</a> and the <a href="https://research.pasteur.fr/en/team/bioinformatics-and-biostatistics-hub/">Biostatistic and Bioinformatic HUB</a>
</p>
-
- <v-card>
- <v-card-title>Cite JASS</v-card-title>
- </hr>
- <v-card-text>
- When using JASS, please cite the following two papers. If your analysis relies on public summary statistic please include the original publication in references.
- <br>
- <ul>
- <li>
- JASS: command line and web interface for the joint analysis of GWAS results
- Hanna Julienne, Pierre Lechat, Vincent Guillemot, Carla Lasry, Chunzi Yao, Robinson Araud, Vincent Laville, Bjarni Vilhjalmsson, Hervé Ménager, Hugues Aschard
- in: NAR Genomics and Bioinformatics, Volume 2, Issue 1, March 2020, lqaa003,<a href="https://doi.org/10.1093/nargab/lqaa003">https://doi.org/10.1093/nargab/lqaa003</a>
- </li>
- <br>
- <li>
- Multitrait genetic-phenotype associations to connect disease variants and biological mechanisms
- Hanna Julienne, Vincent Laville, Zachary R. McCaw, Zihuai He, Vincent Guillemot, Carla Lasry, Andrey Ziyatdinov, Amaury Vaysse, Pierre Lechat, Hervé Ménager, Wilfried Le Goff, Marie-Pierre Dube, Peter Kraft, Iuliana Ionita-Laza, Bjarni J. Vilhjálmsson, Hugues Aschard
- In Press in PLOS Genetics
- </li>
- </ul>
- </v-card-text>
- </v-card>
+ </div>
</div>
</template>
@@ -64,7 +44,8 @@ export default {
{
title: 'Genome wide Analysis',
description:'Run JASS on a set of traits genome wide, Explore result interactively and download results summary or full genome wide results. Can take up to ~30 to run depending on the number of trait selected.',
- short_desc: 'Run Genome Wide Analysis',
+ short_btn:'Browse Genome Wide Anlysis',
+ short_desc: 'Run Analysis',
link:'/phenotypes',
myStyle:{
backgroundColor:'#2D96FA',
@@ -76,7 +57,8 @@ export default {
{
title: 'Region Analysis',
description: 'Run JASS on a region of interest, Explore results interactively and export them to csv files. This analysis is limited to one chromosome and will run faster than genome wide analysis.',
- short_desc: 'Run Region Analysis',
+ short_btn:'Browse Regions',
+ short_desc: 'Run Analysis',
link:'/',
myStyle:{
backgroundColor:'#69AC98',
diff --git a/client/pages/phenotypes.vue b/client/pages/phenotypes.vue
index c6f62df0..5fb317eb 100644
--- a/client/pages/phenotypes.vue
+++ b/client/pages/phenotypes.vue
@@ -1,6 +1,14 @@
<template>
<div>
- <h1>List of phenotypes</h1>
+ <div style="text-align:center; margin:30px;">
+ <h1>
+ Genome Wide Analysis
+ </h1>
+ <p style="width:80%; margin: 0 auto;">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae sapien at ante eleifend aliquet. Etiam cursus et ante non ultrices. Cras vel sollicitudin urna. Aliquam consectetur massa nec augue consequat, ac commodo est suscipit. Nulla sollicitudin risus eget orci feugiat vulputate. Maecenas ut feugiat massa. Nam euismod, augue a ullamcorper interdum, ipsum urna blandit nisl, cursus vehicula leo ante ac nisi. Sed semper pulvinar nisi ut dictum. In cursus velit nec eros sagittis aliquet. Donec interdum volutpat massa viverra fermentum.
+ </p>
+</div>
+ <h2>List of phenotypes</h2>
<div id="app">
<v-app>
<v-data-table
@@ -25,11 +33,11 @@
</v-text-field>
</template>
</v-data-table>
- <v-row align="center" justify="start" no-gutters>
+ <div align="left" justify="start">
<v-btn depressed color="primary" v-on:click="runAnalysis()">
Run analysis
</v-btn>
- </v-row>
+ </div>
</v-app>
</div>
</div>
--
GitLab