Skip to content

Commit

Permalink
#94 - Update the help page
Browse files Browse the repository at this point in the history
- Design
- Add faq section
  • Loading branch information
ammarbarakat committed Oct 13, 2022
1 parent 5d1358d commit 47cbdaf
Show file tree
Hide file tree
Showing 3 changed files with 171 additions and 16 deletions.
21 changes: 19 additions & 2 deletions locales/de-DE.js
Original file line number Diff line number Diff line change
Expand Up @@ -355,8 +355,25 @@ export default {
subtitle: ''
},
help: {
title: 'Hilfe',
subtitle: ''
title: 'DEHub Hilfe-Center',
subtitle: 'Womit können wir dir helfen?',
faq: 'FAQ',
faqExtended: 'Häufig gestellte Fragen',
footer: 'Bei Fragen kannst du uns gerne kontaktieren:',
faqList: {
demoAccount: [
{
id: 0,
question: 'Wie kann ich das DEHub testen?',
answer: 'Mit dem folgendem test-account kannst Du Dich zum Testen einloggen:\n\tUsername: dehub-demo\n\tPasswort: demo'
},
{
id: 1,
question: 'Kann ich einen eigenen test-account haben, um die Funktionalität von Public/Private Namespaces zu testen?',
answer: 'Selbstverständlich, kontaktiere uns bitte unter info@dataelementhub.de'
}
]
}
},
login: {
title: 'Anmeldung',
Expand Down
23 changes: 21 additions & 2 deletions locales/en-US.js
Original file line number Diff line number Diff line change
Expand Up @@ -357,8 +357,27 @@ export default {
subtitle: ''
},
help: {
title: 'Help?',
subtitle: ''
title: 'DEHub Help Center',
subtitle: 'What can we help you with?',
faq: 'FAQ',
faqExtended: 'Frequently asked questions',
footer: 'If you have any questions feel free to send an Email to:',
faqList: {
demoAccount: [
{
id: 0,
question: 'How can I test the DEHub?',
answer: 'You can log in for testing with the following test account:' +
'\n\tUsername: dehub-demo' +
'\n\tPassword: demo'
},
{
id: 1,
question: 'Can I have my own test account to test the functionality of public/private namespaces?',
answer: 'Of course, please contact us at info@dataelementhub.de'
}
]
}
},
login: {
title: 'Login',
Expand Down
143 changes: 131 additions & 12 deletions pages/help.vue
Original file line number Diff line number Diff line change
@@ -1,17 +1,136 @@
<script>
export default {
auth: false,
data () {
return {
expanded: [],
faqHeaders: [
{
text: 'Question',
value: 'question'
}
]
}
}
}
</script>

<template>
<v-container>
<h1>{{ $t('pages.help.title') }}</h1>
You can login with the following Account Data:
<p>
<b>User:</b> dehub-demo<br>
<b>Password:</b> demo
</p>
If you have any questions feel free to send an Email to: <a href="mailto:vengadeswaran@med.uni-frankfurt.de">vengadeswaran@med.uni-frankfurt.de</a>.
<v-container fluid>
<v-row class="first-row">
<v-col class="first-col">
<p class="p-1">
{{ $t('pages.help.title') }}
</p>
<h1 class="h1-1">
{{ $t('pages.help.subtitle') }}
</h1>
</v-col>
</v-row>
<v-row class="second-row">
<v-col class="second-col">
<h1>{{ $t('pages.help.faq') }}</h1>
<p>{{ $t('pages.help.faqExtended') }}</p>
<v-data-table
class="faq-table elevation-1"
:headers="faqHeaders"
:items="$t('pages.help.faqList.demoAccount')"
single-expand
:expanded.sync="expanded"
item-key="id"
show-expand
hide-default-header
hide-default-footer
@click:row="(item, slot) => slot.expand(!slot.isExpanded)"
>
<template #expanded-item="{ headers, item }">
<td :colspan="headers.length">
{{ item.answer }}
</td>
</template>
</v-data-table>
</v-col>
</v-row>
<v-row class="third-row">
<v-col class="third-col">
<v-card class="contact-card text-center">
<img
height="180"
src="@/assets/images/logo/2.png"
>
<v-card-subtitle>
{{ $t('pages.help.footer') }} <a href="mailto:info@dataelementhub.de">info@dataelementhub.de</a>.
</v-card-subtitle>
</v-card>
</v-col>
</v-row>
</v-container>
</template>

<script>
export default {
auth: false
<style lang="scss">
.third-row {
padding-top: 5rem;
}
</script>
.third-col {
padding-left: 30%;
}
.contact-card {
margin-top: 20vh;
width: 60%;
}
.footer-row {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 3rem;
text-align: center;
}
.faq-table {
width: 60%;
}
.second-col {
padding-left: 30%;
}
.first-col {
padding-left: 25%;
padding-top: 4%;
width: 30%;
}
.p-1 {
color: white;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1.3rem;
margin-bottom: 2rem;
}
.h1-1 {
color: white;
font-size: 3rem;
font-weight: 700;
letter-spacing: -0.025rem;
line-height: 3.6rem;
}
.first-row {
position: relative;
font-family: "Lato", sans-serif;
height: 30vh;
background-image: linear-gradient(to right bottom, rgba(172, 206, 248, 0.81), rgba(6, 130, 196, 0.73));
background-size: cover;
background-position: top;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 20%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
}
</style>

0 comments on commit 47cbdaf

Please sign in to comment.