From de2867b27eb1e5121b3d36b8d26ec2f0f93cc707 Mon Sep 17 00:00:00 2001
From: Gilgard <Hjelljord.alida@gmail.com>
Date: Wed, 4 May 2022 11:33:34 +0200
Subject: [PATCH] Help view complete
---
src/views/HelpView.vue | 116 ++++++++++++++++++++++-------------------
1 file changed, 62 insertions(+), 54 deletions(-)
diff --git a/src/views/HelpView.vue b/src/views/HelpView.vue
index 8bf24e0..7870d1e 100644
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -1,34 +1,34 @@
<template>
- <div class="py-12 bg-white justify-center">
- <div id="contact" class="border-gray-700 rounded w-11/12">
- <div class="mb-12 lg:mb-0 text-gray-700">
- <h2
- class="text-primary-dark mb-6 uppercase font-bold text-[32px] sm:text-[40px] lg:text-[36px] xl:text-[40px]"
- >
- GET IN TOUCH WITH US
- </h2>
- <p class="text-gray-500 leading-relaxed mb-9">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eius
- tempor incididunt ut labore et dolore magna aliqua. Ut enim adiqua
- minim veniam quis nostrud exercitation ullamco
- </p>
- <div class="flex mb-8 w-full">
- <div class="flex items-center justify-center mr-6 overflow-hidden">
- <LocationMarkerIcon class="w-14 h-14 text-primary-dark rounded" />
+ <div class="mt-6 bg-white justify-center w-screen">
+ <div id="contact" class="grid place-items-center w-full">
+ <div class="lg:mb-0 text-gray-700 w-full">
+ <div class="mx-4">
+ <h2 class="text-primary-dark mb-6 uppercase font-bold text-2xl">
+ Kontakt oss
+ </h2>
+ <p class="text-gray-500 leading-relaxed mb-9">
+ {{ contact.description }}
+ </p>
+ </div>
+ <div class="flex mb-8 ml-2 w-full">
+ <div class="max-w-14 max-h-14 min-h-14 min-w-14">
+ <LocationMarkerIcon
+ class="w-14 h-14 text-primary-dark rounded mr-4"
+ />
</div>
- <div class="w-full">
- <h4 class="font-bold text-gray-800 text-xl mb-1">Our Location</h4>
+ <div class="">
+ <h4 class="font-bold text-gray-800 text-xl mb-1">Lokaler</h4>
<p>{{ contact.address }},</p>
<p>{{ contact.city }},</p>
<p>{{ contact.country }}</p>
</div>
</div>
- <div class="flex mb-8 max-w-[370px] w-full">
- <div class="flex items-center justify-center mr-6 overflow-hidden">
- <MailIcon class="w-16 h-16 text-primary-dark rounded" />
+ <div class="flex mb-8 ml-2 max-w-[370px] w-full">
+ <div class="max-w-14 max-h-14 min-h-14 min-w-14">
+ <MailIcon class="w-14 h-14 text-primary-dark rounded mr-4" />
</div>
- <div class="w-full">
- <h4 class="font-bold text-gray-800 text-xl mb-1">Email Address</h4>
+ <div class="">
+ <h4 class="font-bold text-gray-800 text-xl mb-1">Epost Addresse</h4>
<p>{{ contact.email }}</p>
</div>
</div>
@@ -36,45 +36,45 @@
</div>
<div id="faq">
<div
- class="mx-auto text-center px-4 mt-12 text-2xl text-primary-dark font-semibold"
+ class="mx-auto text-center px-4 text-2xl text-primary-dark font-semibold"
>
Frequently Asked Questions
</div>
- <dl
- v-for="(faqItem, index) in FAQ"
- :key="index"
- class="mt-8 mx-auto max-w-screen-sm lg:max-w-screen-lg flex flex-col lg:flex-row lg:flex-wrap"
+ <div
+ class="mt-8 mx-auto max-w-screen-sm lg:max-w-screen-lg flex flex-col lg:grid lg:grid-cols-2"
>
- <div id="faqItem" class="lg:w-1/2">
- <div
- id="question-and-answer"
- class="select-none cursor-pointer border-2 mx-8 my-3 px-6 py-4 rounded-lg text-sm group"
- >
- <dt id="question">
- <div class="flex justify-between text-gray-800">
- <div class="font-bold">
- {{ faqItem.question }}
- </div>
- <div>
- <div v-if="!faqItem.toggle" @click="toggle(faqItem)">
- <ChevronDoubleDownIcon
- class="h-5 w-5 block rounded-full p-1"
- />
+ <dl v-for="(faqItem, index) in FAQ" :key="index">
+ <div id="faqItem" class="">
+ <div
+ id="question-and-answer"
+ class="select-none cursor-pointer border-2 mx-8 my-3 px-6 py-4 rounded-lg text-sm group"
+ >
+ <dt id="question">
+ <div class="flex justify-between text-gray-800">
+ <div class="font-bold">
+ {{ faqItem.question }}
</div>
- <div v-else @click="toggle(faqItem)">
- <ChevronDoubleUpIcon
- class="h-5 w-5 block rounded-full p-1"
- />
+ <div>
+ <div v-if="!faqItem.toggle" @click="toggle(faqItem)">
+ <ChevronDoubleDownIcon
+ class="h-5 w-5 block rounded-full p-1"
+ />
+ </div>
+ <div v-else @click="toggle(faqItem)">
+ <ChevronDoubleUpIcon
+ class="h-5 w-5 block rounded-full p-1"
+ />
+ </div>
</div>
</div>
- </div>
- </dt>
- <dd v-if="faqItem.toggle" class="mt-2 leading-snug text-gray-700">
- {{ faqItem.answer }}
- </dd>
+ </dt>
+ <dd v-if="faqItem.toggle" class="mt-2 leading-snug text-gray-700">
+ {{ faqItem.answer }}
+ </dd>
+ </div>
</div>
- </div>
- </dl>
+ </dl>
+ </div>
</div>
</div>
</template>
@@ -91,6 +91,8 @@ export default {
data() {
return {
contact: {
+ description:
+ "BoCo (Borrow Community) er et norsk selskap som tilbyr en plattform for utlån av gjenstander for privatpersoner og bedrifter. BoCo streber for å bli den foretrukne plattformen for lån for privatpersoner og bedrifter i Norge.",
email: "BorrowCompany@BorrowCommunity.com",
address: "O. S. Bragstads Plass 2G",
city: "Trondheim",
@@ -103,6 +105,12 @@ export default {
"Ved å trykke på plus-ikonet i navigasjons-baren øverst på siden. Dette vil ta deg til et skjema for å legge ut en ny gjenstand.",
toggle: false,
},
+ {
+ question: "Hvordan kan jeg bli med i en gruppe?",
+ answer:
+ "Fra hovedsiden kan man trykke på pluss-person-ikonet ved siden av mine grupper som vil ta deg til skjemaet for å lage en ny gruppe.",
+ toggle: false,
+ },
],
};
},
--
GitLab