opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12639 from guerler/welcome_update

Browse Source 
[21.09] Adjust appearance of new user welcome page
This commit is contained in:
Dannon
2021-10-08 14:52:43 -04:00
committed by GitHub
parent 9faf755c44 6b71f692a2
commit 08b635eef7
3 changed files with 73 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/NewUserWelcome/NewUserWelcome.vue
-12
View File
@@ -87,18 +87,6 @@ export default {
<style scoped type="scss">
.new-user-welcome::v-deep {
.card {
border: 0px;
}
.card-img {
height: 12rem;
}
.card-header,
.card-footer {
border-bottom: 0px;
border-top: 0px;
background-color: #ffffff;
}
.carousel-fig {
padding-bottom: 10;
}
client/src/components/NewUserWelcome/components/Subtopics.vue
+29 -30
View File
@@ -1,35 +1,29 @@
<template>
<div>
<b-card class="text-center">
<b-card-header>
<h1>{{ title | localize }}</h1>
<h4>
{{ intro | localize }}
</h4>
</b-card-header>
<b-row class="justify-content-md-center">
<b-card-group style="d-flex flex-column" v-for="(subject, idx) in topics" :key="idx">
<b-card class="text-center" body-class="d-flex flex-column" style="width: 15rem">
<b-card-header style="height: 6rem; text-align: center; align-v: bottom">
<h4>
{{ subject.title | localize }}
</h4>
</b-card-header>
<b-card-img
class="section-header"
height="200vh"
:src="imgUrl(subject.image)"
:alt="subject.alt"
></b-card-img>
<b-card-text>{{ subject.intro | localize }}</b-card-text>
<b-button class="mt-auto" variant="primary" @click="$emit('select', idx)">Learn more</b-button>
</b-card>
</b-card-group>
</b-row>
<b-card-footer>
<b-button class="mt-auto" variant="primary" @click="$emit('back')">Return</b-button>
</b-card-footer>
</b-card>
<header class="main-header">
<h1 class="text-center my-3">{{ title | localize }}</h1>
<h4 class="text-center my-3">{{ intro | localize }}</h4>
</header>
<b-row class="justify-content-md-center mb-3">
<b-card-group v-for="(subject, idx) in topics" :key="idx">
<b-card class="text-center m-2 border-0" body-class="d-flex flex-column">
<b-card-img
class="section-header mb-3"
height="50h"
:src="imgUrl(subject.image)"
:alt="subject.alt"
></b-card-img>
<b-card-text class="font-weight-light">{{ subject.intro | localize }}</b-card-text>
<b-button class="mt-auto" variant="info" @click="$emit('select', idx)">{{
subject.title | localize
}}</b-button>
</b-card>
</b-card-group>
</b-row>
<b-button class="mt-auto" variant="primary" role="link" @click="$emit('back')">
<span class="fa fa-caret-left mr-1" />
<span>Return</span>
</b-button>
</div>
</template>
<script>
@@ -52,3 +46,8 @@ export default {
},
};
</script>
<style scoped>
.card {
width: 15rem;
}
</style>
client/src/components/NewUserWelcome/components/Topics.vue
+44 -36
View File
@@ -1,48 +1,51 @@
<template>
<div>
<header class="main-header text-center">
<h1>{{ "Welcome to Galaxy" | localize }}</h1>
<span>
{{
"Galaxy is web-based platform for reproducible computational analysis. Research in Galaxy \
is supported by 3 pillars: data, tools, and workflows. For an introduction to each, visit the \
below pages, or begin your analysis by selting a tool from the toolbar to the left."
| localize
}}
</span>
<header class="main-header">
<h1 class="text-center my-3">{{ title | localize }}</h1>
<h4 class="text-center my-3">{{ intro | localize }}</h4>
</header>
<b-card class="text-center">
<b-card-header>
<h1>{{ "Get to Know Galaxy" | localize }}</h1>
</b-card-header>
<b-row class="justify-content-md-center">
<b-card-group v-for="(subject, idx) in topics" :key="idx">
<b-card class="text-center" body-class="d-flex flex-column" style="width: 18rem">
<b-card-header class="text-center">
<h3>
{{ subject.title | localize }}
</h3>
</b-card-header>
<b-card-img
class="section-header"
height="200vh"
:src="imgUrl(subject.image)"
:alt="subject.alt"
></b-card-img>
<b-card-text>{{ subject.blurb | localize }}</b-card-text>
<b-button class="mt-auto" variant="primary" @click="$emit('select', idx)">Learn more</b-button>
</b-card>
</b-card-group>
</b-row>
</b-card>
<b-row class="justify-content-md-center mb-3">
<b-card-group v-for="(subject, idx) in topics" :key="idx">
<b-card class="text-center m-2 border-0" body-class="d-flex flex-column">
<b-card-img
class="section-header mb-3"
height="50h"
:src="imgUrl(subject.image)"
:alt="subject.alt"
></b-card-img>
<b-card-text class="font-weight-light">{{ subject.blurb | localize }}</b-card-text>
<b-button class="mt-auto" variant="info" @click="$emit('select', idx)">{{
subject.title | localize
}}</b-button>
</b-card>
</b-card-group>
</b-row>
</div>
</template>
<script>
import { getAppRoot } from "onload/loadConfig";
export default {
props: {
topics: { type: Array, required: true },
imageLoc: { type: String, required: false, default: "plugins/welcome_page/new_user/dist/static/topics/" },
topics: {
type: Array,
required: true,
},
imageLoc: {
type: String,
required: false,
default: "plugins/welcome_page/new_user/dist/static/topics/",
},
title: {
type: String,
default: "Welcome to Galaxy",
},
intro: {
type: String,
default:
"Galaxy is web-based platform for reproducible computational analysis. Research in Galaxy \
is supported by 3 pillars: data, tools, and workflows. For an introduction to each, visit the \
below pages, or begin your analysis by selting a tool from the toolbar to the left.",
},
},
methods: {
imgUrl(src) {
@@ -53,3 +56,8 @@ export default {
},
};
</script>
<style scoped>
.card {
width: 15rem;
}
</style>