Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: contact page #101

Merged
merged 3 commits into from
Nov 20, 2024
Merged

feat: contact page #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4aadd8b
feat: initial contact page
tada5hi Nov 19, 2024
f936f57
fix: override bootstrap styling for dark theme
tada5hi Nov 19, 2024
22da52d
feat: add how to find us section for abi & tbi
tada5hi Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
181 changes: 181 additions & 0 deletions src/.vitepress/components/contact/KContact.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
<!--
- Copyright (c) 2024.
- Author Peter Placzek (tada5hi)
- For the full copyright and license information,
- view the LICENSE file that was distributed with this source code.
-->
<script lang="ts">
import { VPImage } from "vitepress/theme";
import { defineComponent } from "vue";
import KContactDetails from "../utilities/contact/KContactDetails.vue";
import {ContactDetails} from "../utilities/contact/types";
import KSwitch from "../utilities/switch/KSwitch.vue";
import {SwitchElement} from "../utilities/switch/types";

export default defineComponent({
components: {KContactDetails, KSwitch, VPImage},
setup() {
const items : SwitchElement[] = [
{
id: 'tbi',
value: 'TBI'
},
{
id: 'abi',
value: 'ABI'
}
];

const tbiContact : ContactDetails = {
address: [
'University Hospital Tübingen',
'Institute for Translational Bioinformatics',
'Schaffhausenstraße 77',
'72072 Tübingen'
],
phone: '+49-7071-29-84335',
email: '[email protected]'
}

const abiContact : ContactDetails = {
address: [
'University of Tübingen',
'FBI/IBMI - Applied Bioinformatics',
'Sand 14',
'72076 Tübingen'
],
phone: '+49-7071-29-70458',
fax: '+49-7071-29-5152',
email: '[email protected]'
}

return {
items,
tbiContact,
abiContact
}
}
})
</script>
<template>
<div class="container">
<div class="page-title">
<h1 class="page-title-text"><i class="fas fa-address-book"></i> Contact</h1>
</div>
<div class="m-auto">
<KSwitch :items="items" :current="'tbi'">
<template #tbi>
<h3>Translational Bioinformatics Group</h3>
<div class="d-flex flex-column gap-3">
<div>
<KContactDetails :entity="tbiContact" />
</div>
<hr />

<h4>How To Find Us</h4>
<div class="row">
<div class="col-md-8 col-12">
<h6><i class="fa fa-car"></i> By Car</h6>
<ul class="contact-list">
<li>Drive on B27 direction Tübingen from Stuttgart</li>
<li>Take the exit for Herrenberg, Rottenburg (A81)</li>
<li>Follow the street until you see an exit for "Zentrum" on the right</li>
<li>After crossing the bridge, take the next exit on the right</li>
<li>Continue on the road until you see a large building on the left labeled "SYSS" (see image)</li>
</ul>

<h6><i class="fa fa-train"></i> By Train</h6>
<ul class="contact-list">
<li>Arrive at Tübingen train station</li>
<li>The main bus station is directly across from the station exit</li>
<li>Walk to the building (see image)</li>
</ul>

<h6><i class="fa fa-plane"></i> By Airplane</h6>
<ul class="contact-list">
<li>Arrive at Stuttgart airport</li>
<li>Take bus lines 826 or 828 (called 'Airport-Sprinter') from in front of the arrivals exit</li>
<li>Arrive at Tübingen main bus station</li>
<li>Walk to the building (see image)</li>
</ul>
</div>
<div class="col-md-4 col-12">
<VPImage class="contact-image" image="/images/contact/tbi.jpg" />
</div>
</div>
</div>
</template>
<template #abi>
<h3>Applied Bioinformatics Group</h3>

<div class="d-flex flex-column gap-3">
<div>
<KContactDetails :entity="abiContact" />
</div>
<hr />

<h4>How To Find Us</h4>
<div class="row">
<div class="col-md-8 col-4">
<p class="mb-1">
The Applied Bioinformatics Group is located on the 2nd floor (3rd floor for Americans)
of the orange building at Sand 14.
</p>

<h6><i class="fa fa-car"></i> By Car</h6>
<ul class="contact-list">
<li>Drive on B27 direction Tübingen from Stuttgart</li>
<li>Take exit Tübingen, Nordstadt, Kliniken</li>
<li>At the 3rd traffic light, turn left onto Wilhelmstraße</li>
<li>Turn right after the JET gas station (going uphill, onto Nordring)</li>
<li>At the 2nd traffic light, turn right (follow the "Sand" sign)</li>
<li>Turn left into Drosselweg</li>
</ul>

<h6><i class="fa fa-bus"></i> By Bus</h6>

<ul class="contact-list">
<li>Take bus line 2 towards "Sand" from the main bus station</li>
<li>Get off at the "Sand Drosselweg" stop</li>
<li>Walk about 200m to where the bus turned around</li>
<li>Enter the large orange building through the main gate and entrance (see image)</li>
</ul>

<h6><i class="fa fa-train"></i> By Train</h6>
<ul class="contact-list">
<li>Arrive at Tübingen train station</li>
<li>The main bus station is directly across from the station exit</li>
<li>Take bus line 2 (see above)</li>
</ul>

<h6><i class="fa fa-plane"></i> By Airplane</h6>
<ul class="contact-list">
<li>Arrive at Stuttgart airport</li>
<li>Take bus lines 826 or 828 (called 'Airport-Sprinter') from in front of the arrivals exit</li>
<li>Arrive at Tübingen main bus station</li>
<li>Arrive at Tübingen main bus station and follow the bus directions above</li>
</ul>
</div>
<div class="col-md-4 col-12">
<VPImage class="contact-image" image="/images/contact/abi.jpg" />
</div>
</div>
</div>
</template>
</KSwitch>
</div>
</div>
</template>
<style>
.contact-list {
list-style: inherit;
}

.contact-image {
width: 480px;
height: 280px;
object-fit: cover;
object-position: bottom;
border-radius: 6px;
}
</style>
2 changes: 1 addition & 1 deletion src/.vitepress/components/person/KPerson.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {Person} from '../../domains';
import { KHistoryEntries } from "../history";

import { data } from '../team/team.data';
import KPersonContact from "./KPersonContact.vue";
import KPersonContact from "../utilities/contact/KContactDetails.vue";

export default defineComponent({
components: {KPersonContact, KHistoryEntries },
Expand Down
2 changes: 1 addition & 1 deletion src/.vitepress/components/publication/KPublicationTitle.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default defineComponent({
});
</script>
<template>
<h5 class="text-dark">
<h5>
<i class="fa-solid fa-book me-2" />
<template v-if="pmID">
<VCLink
Expand Down
106 changes: 52 additions & 54 deletions src/.vitepress/components/publication/KPublications.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,66 +56,64 @@ export default defineComponent({
});
</script>
<template>
<div class="container mb-3 mt-3 vp-doc">
<h1 class="mb-3">
<VPTeamPageTitle>
<template #title>
<i class="fa-solid fa-book" /> Publications
</template>
</VPTeamPageTitle>
</h1>
<div class="d-flex">
<div class="ms-auto me-auto">
<VCPagination
:total="total"
:offset="offset"
:limit="limit"
@load="load"
/>
</div>
</div>
<div class="d-flex flex-column gap-3">
<template
v-for="(entity, key) in items"
:key="key"
>
<KPublication
:entity="entity"
/>
</template>
<div class="container">
<div class="page-title">
<h1 class="page-title-text"><i class="fas fa-book"></i> Publications</h1>
</div>
<div class="d-flex">
<div class="ms-auto me-auto">
<VCPagination
:total="total"
:offset="offset"
:limit="limit"
@load="load"
/>
<div class="d-flex flex-column gap-2">
<div class="d-flex">
<div class="ms-auto">
<VCPagination
:total="total"
:offset="offset"
:limit="limit"
@load="load"
/>
</div>
</div>
</div>
<template v-if="errors">
<h2>Errors</h2>
<div class="mt-1 mb-1">
<div class="d-flex flex-column gap-3">
<template
v-for="(error, key) in errors"
v-for="(entity, key) in items"
:key="key"
>
<div class="alert alert-warning alert-sm">
{{ error.error.split(':').shift() }} could not be read.
<div class="d-flex flex-column">
<div>
<strong>Input</strong><br>
{{ error.input }}
</div>
<div>
<strong>Trace</strong><br>
{{ error.error }}
</div>
</div>
</div>
<KPublication
:entity="entity"
/>
</template>
</div>
</template>
<div class="d-flex">
<div class="ms-auto">
<VCPagination
:total="total"
:offset="offset"
:limit="limit"
@load="load"
/>
</div>
</div>
<template v-if="errors">
<h2>Errors</h2>
<div class="mt-1 mb-1">
<template
v-for="(error, key) in errors"
:key="key"
>
<div class="alert alert-warning alert-sm">
{{ error.error.split(':').shift() }} could not be read.
<div class="d-flex flex-column">
<div>
<strong>Input</strong><br>
{{ error.input }}
</div>
<div>
<strong>Trace</strong><br>
{{ error.error }}
</div>
</div>
</div>
</template>
</div>
</template>
</div>
</div>
</template>
5 changes: 4 additions & 1 deletion src/.vitepress/components/team/KTeam.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,10 @@ export default defineComponent({
});
</script>
<template>
<div class="VPDoc mb-3">
<div class="mb-3">
<div class="page-title">
<h1 class="page-title-text"><i class="fas fa-user-friends"></i> Team</h1>
</div>
<div class="mt-3 m-auto">
<KTeamSwitch
:group="group"
Expand Down
24 changes: 16 additions & 8 deletions ...ress/components/person/KPersonContact.vue → ...nts/utilities/contact/KContactDetails.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
<!--
- Copyright (c) 2024.
- Copyright (c) 2024-2024.
- Author Peter Placzek (tada5hi)
- For the full copyright and license information,
- view the LICENSE file that was distributed with this source code.
-->
<script lang="ts">
import { Person } from "../../domains";
import {computed, defineComponent, PropType} from "vue";
import {ContactDetails} from "./types";

export default defineComponent({
props: {
entity: {
type: Object as PropType<Person>,
type: Object as PropType<ContactDetails>,
required: true
}
},
Expand Down Expand Up @@ -42,12 +42,20 @@ export default defineComponent({
<div v-if="entity.phone">
<i class="fa fa-phone pe-1"></i> {{ entity.phone}}
</div>
<div v-if="entity.fax">
<i class="fa fa-fax pe-1"></i> {{ entity.fax}}
</div>
<div v-if="addresses && addresses.length > 0">
<i class="fa fa-map-marker-alt pe-2"></i>

<template v-for="item in addresses">
{{ item }}
</template>
<div class="d-flex flex-row gap-1">
<div>
<i class="fa fa-map-marker-alt pe-2"></i>
</div>
<div>
<template v-for="item in addresses">
{{ item }}<br />
</template>
</div>
</div>
</div>
</div>
</template>
Loading