Skip to content

Commit

Permalink
Add contact us page
Browse files Browse the repository at this point in the history
  • Loading branch information
@elirehema
elirehema committed Jan 2, 2022
1 parent 02068a0 commit 56605a0
Show file tree
Hide file tree
Showing 7 changed files with 239 additions and 79 deletions.
2 changes: 1 addition & 1 deletion assets/css/_tags.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ p.tags{
cursor: pointer;
margin-left: 5px;
font-size: 12px;
padding: 1px 9px;
padding: 5px 10px;
text-decoration-color: #ffffff !important;
color: white;
&.link {
Expand Down
2 changes: 1 addition & 1 deletion assets/css/styles.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion assets/css/styles.css.map
View file

Large diffs are not rendered by default.

50 changes: 50 additions & 0 deletions components/ContactAddress.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<template>
<v-card max-width="450" class="mx-auto transparent" flat>
<v-list three-line color="transparent">
<template v-for="(item, index) in items">
<v-subheader v-if="item.header" :key="item.header" v-text="item.header"></v-subheader>

<v-divider v-else-if="item.divider" :key="index" :inset="item.inset"></v-divider>

<v-list-item v-else :key="item.title" >
<v-list-item-avatar>
<v-icon v-html="item.icon" size="40" color="black"></v-icon>
</v-list-item-avatar>

<v-list-item-content>
<v-list-item-title v-html="item.title" class="overline font-weight-bold black--text"></v-list-item-title>
<v-list-item-subtitle v-html="item.subtitle" class="caption black--text"></v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</template>
</v-list>
</v-card>
</template>
<script>
export default {
data: () => ({
items: [
{ header: "Contact Us" },
{
title: "Address",
icon: "mdi-map-marker",
subtitle:
"<span class='black--text'> Dar es Salaam, Tanzania</span> "
},
{ divider: true, inset: true },
{
title: "Phone",
icon: "mdi-phone",
subtitle: "<span class='font-weight-bold'>+255 716 087 522</span>"
},
{ divider: true, inset: true },
{
title: "Email",
icon: "mdi-email",
subtitle: "ospicinfo@gmail.com "
},
{ divider: true, inset: true }
]
})
};
</script>
96 changes: 96 additions & 0 deletions layouts/home.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,105 @@
<template>
<v-app dark>
<v-main class="ma-0 pa-0 welcome" >
<v-card style="background-color: white;" flat rounded fluid class="ma-4 px-xs-0 ml-xs-1 px-md-6">
<v-app-bar color="white" elevation="0" dark>
<v-toolbar-title>
<v-icon large color="green"> mdi-text-box-check-outline </v-icon
>OspicDocs</v-toolbar-title
>
<v-spacer></v-spacer>
<nuxt-link class="links" to="/">Home</nuxt-link>
<v-menu offset-y v-if="$vuetify.breakpoint.smAndUp">
<template v-slot:activator="{ on, attrs }" >
<a class="links" v-on="on" v-bind="attrs"
>Docs
<v-icon medium color="green"> mdi-chevron-down</v-icon>
</a>
</template>

<v-list v-if="$vuetify.breakpoint.mdAndDown">
<v-list-item
v-for="(page, index) in pages"
:key="index"
:to="page.slug"
>
<v-list-item-title>{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>


<v-row v-else no-gutters class="white">
<v-col cols="12" sm="4">
<v-list>
<v-list-item
v-for="(page, index) in firstPart"
:key="index"
:to="page.slug"
>
<v-list-item-title>{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-col>
<v-col cols="12" sm="4">
<v-list>
<v-list-item
v-for="(page, index) in secondPart"
:key="index"
:to="page.slug"
>
<v-list-item-title >{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-col>
<v-col cols="12" sm="4">
<v-list>
<v-list-item
v-for="(page, index) in thirdPart"
:key="index"
:to="page.slug"
>
<v-list-item-title>{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-col>
</v-row>
</v-menu>
<a class="links" href="https://github.com/ospic" target="_blank" v-if="$vuetify.breakpoint.mdAndUp"
>Github</a
>

<a class="links" v-if="$vuetify.breakpoint.mdAndUp">FAQ</a>

<v-spacer></v-spacer>

<v-btn class="ma-2 colored" color="green" v-if="$vuetify.breakpoint.mdAndUp"> Changelogs </v-btn>
<v-btn class="ma-2" outlined color="green" to="/contacts" v-if="$vuetify.breakpoint.mdAndUp"> Contacts </v-btn>
</v-app-bar>
<v-container class=" ma-0 pa-0" fluid>
<nuxt class=" ma-0 pa-0" />
</v-container>
</v-card>
</v-main>
<v-footer class="primary" fixed :absolute="!$vuetify.breakpoint.mdAndUp" padless app>
<v-flex xs12 class="d-flex align-center justify-end flex-column">

<div class="white--text ml-3">
Made by
<a
href="https://github.com/ospic"
style="color: white"
target="_blank"
>Ospic
</a>
as official documentation for
<a
style="color: blue; text-decoration: underline;"
href="https://app.ospicx.com/"
target="_blank"
>Ospic HMS</a
>
</div>
</v-flex>
</v-footer>
</v-app>
</template>
87 changes: 87 additions & 0 deletions pages/contacts.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<template>

<v-container fill-height grid-list-md text-xs-center class="pb-8 pt-8">
<v-layout row wrap align-center>
<v-flex shrink xs12 sm12 md5 order-md1 order-sm1>
<address-component></address-component>
</v-flex>
<v-flex grow xs12 sm12 md2 order-md2 order-sm3></v-flex>

<v-flex grow xs12 sm12 md5 order-md3 order-sm2>
<v-card tile>
<v-card-text color="white">
<v-container>
<v-form ref="form" color="white" v-model="valid" :lazy-validation="lazy">
<v-text-field
v-model="subject"
:rules="subjectRules"
label="Subject"
autocomplete="false"
required
></v-text-field>
<v-textarea
v-model="message"
:rules="messageRules"
name="input-7-4"
label
placeholder="What do you want to tell us"
></v-textarea>
</v-form>
</v-container>
</v-card-text>
<v-card-actions>
<v-container fluid>
<v-btn
color="primary"
style="width: 72px; display: inline-block;"
wrap
@click="mailTo()"
>Send</v-btn>
</v-container>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>

</template>
<script>
import AddressComponent from "~/components/ContactAddress.vue";
export default {
name: "Contacts",
layout: "home",
components: {
AddressComponent
},
data() {
return {
subject: null,
email: null,
message: "",
lazy: false,
valid:true,
subjectRules: [
v => !!v || "Field is required",
v => (v && v.length <= 50) || "It must be less than 50 characters",
v => (v && v.length >= 10) || "It must be not less than 10 characters"
],
messageRules: [
v => !!v || "Field is required",
v => (v && v.length >= 10) || "It must be not less than 10 characters"
],
email: "",
emailRules: [
v => !!v || "E-mail is required",
v => /.+@.+\..+/.test(v) || "E-mail must be valid"
]
};
},
methods: {
mailTo() {
if (this.$refs.form.validate()) {
window.open('https://mail.google.com/mail/?view=cm&fs=1&to=ospicinfo@gmail.com&su=[DOCS]: '+this.subject+'&body='+this.message);
}
}
}
};
</script>
79 changes: 3 additions & 76 deletions pages/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,6 @@
<template>
<v-card style="background-color: white;" flat rounded fluid class="ma-4 px-xs-0 ml-xs-1 px-md-6">
<v-app-bar color="white" elevation="0" dark>
<v-toolbar-title>
<v-icon large color="green"> mdi-text-box-check-outline </v-icon
>OspicDocs</v-toolbar-title
>
<v-spacer></v-spacer>
<a class="links" v-if="$vuetify.breakpoint.mdAndUp">Home</a>
<v-menu offset-y v-if="$vuetify.breakpoint.smAndUp">
<template v-slot:activator="{ on, attrs }" >
<a class="links" v-on="on" v-bind="attrs"
>Docs
<v-icon medium color="green"> mdi-chevron-down</v-icon>
</a>
</template>

<v-list v-if="$vuetify.breakpoint.mdAndDown">
<v-list-item
v-for="(page, index) in pages"
:key="index"
:to="page.slug"
>
<v-list-item-title>{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>


</v-row>
<v-row v-else no-gutters class="white">
<v-col cols="12" sm="4">
<v-list>
<v-list-item
v-for="(page, index) in firstPart"
:key="index"
:to="page.slug"
>
<v-list-item-title>{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-col>
<v-col cols="12" sm="4">
<v-list>
<v-list-item
v-for="(page, index) in secondPart"
:key="index"
:to="page.slug"
>
<v-list-item-title >{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-col>
<v-col cols="12" sm="4">
<v-list>
<v-list-item
v-for="(page, index) in thirdPart"
:key="index"
:to="page.slug"
>
<v-list-item-title>{{ page.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-col>
</v-row>
</v-menu>
<a class="links" href="https://github.com/ospic" target="_blank" v-if="$vuetify.breakpoint.mdAndUp"
>Github</a
>

<a class="links" v-if="$vuetify.breakpoint.mdAndUp">FAQ</a>

<v-spacer></v-spacer>

<v-btn class="ma-2 colored" color="green" v-if="$vuetify.breakpoint.mdAndUp"> Changelogs </v-btn>
<v-btn class="ma-2" outlined color="green" v-if="$vuetify.breakpoint.mdAndUp"> Contacts </v-btn>
</v-app-bar>
<section>
<v-card style="background-color: white;" flat rounded fluid class="ma-0 px-xs-0 ml-xs-1 px-md-0">
<section>
<v-parallax :src="imageLink.sub_main" height="840">
<v-layout column align-center justify-center class="white--text">
<h1
Expand Down Expand Up @@ -151,6 +77,7 @@
export default {
name: "App",
layout: "home",
data: function () {
return {
title: "Ospic",
Expand Down

0 comments on commit 56605a0

Please sign in to comment.