Skip to content

Commit

Permalink
Merge pull request #664 from EmpowerPlastic/651-marketplace-faq-page-…
Browse files Browse the repository at this point in the history 
…pc-m-2

651 marketplace faq page pc m 2
  • Loading branch information
@gjermundgaraba
gjermundgaraba authored May 2, 2023
2 parents 335d6cd + 3d1b709 commit 482cb5f
Show file tree
Hide file tree
Showing 7 changed files with 361 additions and 105 deletions.
1 change: 1 addition & 0 deletions frontend/marketplace/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"format": "prettier --write src/"
},
"dependencies": {
"daisyui": "^2.51.6",
"flowbite": "^1.6.4",
"pinia": "^2.0.32",
"vue": "^3.2.47",
Expand Down
18 changes: 18 additions & 0 deletions frontend/marketplace/src/components/FAQCollapse.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<script setup lang="ts">
export interface FAQCollapseProps {
title:string,
content:string,
}
defineProps<FAQCollapseProps>();
</script>
<template>
<div tabindex="0" class="collapse group collapse-arrow mb-1">
<div class="flex collapse-title text-white bg-mediumGray">
<div class="w-7 h-7 border-2 border-white rounded-full mr-3 group-focus:bg-greenPrimary"/>
{{title}}
</div>
<div class="collapse-content bg-lightBlack">
<p class="text-textWhite px-10 py-3">{{content}}</p>
</div>
</div>
</template>
236 changes: 162 additions & 74 deletions frontend/marketplace/src/components/SearchBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,93 +2,181 @@
</script>
<template>
<!-- Search Auction Mobile-->
<div class="relative md:hidden z-0 w-full mb-7 mt-3">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<img src="../assets/searchIcon.svg">
</div>
<div class="absolute inset-y-0 right-0 flex items-center pr-3">
<button type="button" class="bg-transparent left-1/2 -translate-x-1/2" id="dropdownDividerButton"
data-dropdown-toggle="dropdownDivider">
<img src="../assets/filterIcon.svg">
<div class="md:hidden input-group w-full mb-5 bg-white rounded-full !rounded-lg px-1 border-none font-Inter">
<img class="ml-3" src="../assets/searchIcon.svg">
<input type="text" placeholder="Search…" class="input w-full bg-white border-none"/>
<div class="dropdown dropdown-end">
<button class="btn btn-ghost bg-white !rounded-lg border-none">
<img class="h-11" src="../assets/filterIcon.svg">
</button>
</div>
<input type="text"
class="bg-white text-textPlaceHolderGray border-0 font-Inter text-title14 rounded-lg w-full pl-10"
placeholder="Search auctions">
</div>

<!--Filter Dropdown Mobile-->
<div id="dropdownDivider"
class="z-10 hidden divide-y bg-dropdownBlack absolute right-0 rounded-lg w-11/12 m-l-[-30px]">
<ul class="p-4 font-Inter grid grid-cols-1 gap-4" aria-labelledby="dropdownDividerButton">
<li>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-dropdownBlack rounded-box w-[85vw] p-5 gap-4 font-normal">
<div>
<p class="text-title14 text-dropDownText">LOCATION</p>
<div class="flex flex-row justify-between text-title18 text-white">Select Location
<button type="button" class="bg-transparent">
<img src="../assets/dropdown-icon.svg">
</button>
</div>
<p class="text-title14 text-dropDownText ml-4">LOCATION</p>
<li class="text-title18 text-white">
<select class="select select-ghost w-full bg-dropdownBlack text-title18 text-white py-0 font-normal focus:text-white">
<option disabled selected class="text-white">Select Location</option>
<option class="text-title18 text-white">Options</option>
<option class="text-title18 text-white">Options</option>
<option class="text-title18 text-white">Options</option>
</select>
</li>
</div>
</li>
<li>
<div>
<p class="text-title14 text-dropDownText">VOLUME</p>
<div class="flex flex-row justify-between text-title18 text-white">Select volume
<button type="button" class="bg-transparent">
<img src="../assets/dropdown-icon.svg">
</button>
</div>
</div>
</li>
<li>
<div>
<p class="text-title14 text-dropDownText">REGISTRATION DATE</p>
<div class="flex flex-row justify-between text-title18 text-white">Select date
<button type="button" class="bg-transparent">
<img src="../assets/dropdown-icon.svg">
</button>
</div>
</div>
</li>
<li>

<div>
<p class="text-title14 text-dropDownText">COLLECTOR ORGANISATION</p>
<div class="flex flex-row justify-between text-title18 text-white">Select collector
<button type="button" class="bg-transparent">
<img src="../assets/dropdown-icon.svg">
</button>
</div>
<p class="text-title14 text-dropDownText ml-4">LOCATION</p>
<li class="text-title18 text-white">
<select class="select select-ghost w-full bg-dropdownBlack text-title18 text-white py-0 font-normal focus:text-white">
<option disabled selected class="text-white">Select Location</option>
<option class="text-title18 text-white">Options</option>
<option class="text-title18 text-white">Options</option>
<option class="text-title18 text-white">Options</option>
</select>
</li>
</div>
</li>
<li>

<div>
<p class="text-title14 text-dropDownText">CREDIT TYPE</p>
<div class="flex flex-row justify-between text-title18 text-white">Select credit
<button type="button" class="bg-transparent">
<img src="../assets/dropdown-icon.svg">
</button>
</div>
<p class="text-title14 text-dropDownText ml-4">LOCATION</p>
<li class="text-title18 text-white">
<select class="select select-ghost w-full bg-dropdownBlack text-title18 text-white py-0 font-normal focus:text-white">
<option disabled selected class="text-white">Select Location</option>
<option class="text-title18 text-white">Options</option>
<option class="text-title18 text-white">Options</option>
<option class="text-title18 text-white">Options</option>
</select>
</li>
</div>
</li>
<li>

<div>
<p class="text-title14 text-dropDownText">PRICE PER CREDIT</p>
<div class="flex flex-row justify-between text-title18 text-white">Select price
<button type="button" class="bg-transparent">
<img src="../assets/dropdown-icon.svg">
</button>
</div>
<p class="text-title14 text-dropDownText ml-4">LOCATION</p>
<li class="text-title18 text-white">
<select class="select select-ghost w-full bg-dropdownBlack text-title18 text-white py-0 font-normal focus:text-white">
<option disabled selected class="text-white">Select Location</option>
<option class="text-title18 text-white">Options</option>
<option class="text-title18 text-white">Options</option>
<option class="text-title18 text-white">Options</option>
</select>
</li>
</div>
</li>
<li>

<div>
<button class="bg-greenPrimary font-Inter text-title15 text-white w-full p-3 rounded-sm">Search</button>
<p class="text-title14 text-dropDownText ml-4">LOCATION</p>
<li class="text-title18 text-white">
<select class="select select-ghost w-full bg-dropdownBlack text-title18 text-white py-0 font-normal focus:text-white">
<option disabled selected class="text-white">Select Location</option>
<option class="text-title18 text-white">Options</option>
<option class="text-title18 text-white">Options</option>
<option class="text-title18 text-white">Options</option>
</select>
</li>
</div>
</li>
</ul>
</ul>
</div>
</div>


<!-- <div class="relative md:hidden z-0 w-full mb-7 mt-3">-->
<!-- <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">-->
<!-- <img src="../assets/searchIcon.svg">-->
<!-- </div>-->
<!-- <div class="absolute inset-y-0 right-0 flex items-center pr-3" >-->
<!-- <div class="dropdown dropdown-end">-->
<!-- <label tabindex="0" class=" bg-transparent border-0"><img src="../assets/filterIcon.svg"></label>-->
<!-- <ul tabindex="0" class="dropdown-content menu p-2 bg-red-100 rounded-box w-96">-->
<!-- <ul class="p-4 font-Inter grid grid-cols-1 gap-4" aria-labelledby="dropdownDividerButton">-->
<!-- <li>-->
<!-- <select class="select select-ghost w-40">-->
<!-- <option class="w-14" disabled selected>Pick the best JS framework</option>-->
<!-- <option>Svelte</option>-->
<!-- <option>Vue</option>-->
<!-- <option>React</option>-->
<!-- </select>-->
<!-- </li>-->
<!-- </ul>-->
<!-- </ul>-->
<!-- </div>-->
<!-- <button type="button" class="bg-transparent left-1/2 -translate-x-1/2" id="dropdownDividerButton"-->
<!-- data-dropdown-toggle="dropdownDivider">-->
<!-- <img src="../assets/filterIcon.svg">-->
<!-- </button>-->
<!-- </div>-->
<!-- <input type="text"-->
<!-- class="bg-white text-textPlaceHolderGray h-10 border-0 font-Inter text-title14 rounded-lg w-full pl-10"-->
<!-- placeholder="Search auctions">-->
<!-- </div>-->

<!--Filter Dropdown Mobile-->
<!-- <div id="dropdownDivider"-->
<!-- class="z-10 hidden divide-y bg-dropdownBlack absolute right-0 rounded-lg w-11/12 m-l-[-30px]">-->

<!-- <ul class="p-4 font-Inter grid grid-cols-1 gap-4" aria-labelledby="dropdownDividerButton">-->
<!-- <li>-->
<!-- <div>-->
<!-- <p class="text-title14 text-dropDownText">LOCATION</p>-->
<!-- <div class="flex flex-row justify-between text-title18 text-white">Select Location-->
<!-- <button type="button" class="bg-transparent">-->
<!-- <img src="../assets/dropdown-icon.svg">-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </li>-->
<!-- <li>-->
<!-- <div>-->
<!-- <p class="text-title14 text-dropDownText">VOLUME</p>-->
<!-- <div class="flex flex-row justify-between text-title18 text-white">Select volume-->
<!-- <button type="button" class="bg-transparent">-->
<!-- <img src="../assets/dropdown-icon.svg">-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </li>-->
<!-- <li>-->
<!-- <div>-->
<!-- <p class="text-title14 text-dropDownText">REGISTRATION DATE</p>-->
<!-- <div class="flex flex-row justify-between text-title18 text-white">Select date-->
<!-- <button type="button" class="bg-transparent">-->
<!-- <img src="../assets/dropdown-icon.svg">-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </li>-->
<!-- <li>-->
<!-- <div>-->
<!-- <p class="text-title14 text-dropDownText">COLLECTOR ORGANISATION</p>-->
<!-- <div class="flex flex-row justify-between text-title18 text-white">Select collector-->
<!-- <button type="button" class="bg-transparent">-->
<!-- <img src="../assets/dropdown-icon.svg">-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </li>-->
<!-- <li>-->
<!-- <div>-->
<!-- <p class="text-title14 text-dropDownText">CREDIT TYPE</p>-->
<!-- <div class="flex flex-row justify-between text-title18 text-white">Select credit-->
<!-- <button type="button" class="bg-transparent">-->
<!-- <img src="../assets/dropdown-icon.svg">-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </li>-->
<!-- <li>-->
<!-- <div>-->
<!-- <p class="text-title14 text-dropDownText">PRICE PER CREDIT</p>-->
<!-- <div class="flex flex-row justify-between text-title18 text-white">Select price-->
<!-- <button type="button" class="bg-transparent">-->
<!-- <img src="../assets/dropdown-icon.svg">-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </li>-->
<!-- <li>-->
<!-- <div>-->
<!-- <button class="bg-greenPrimary font-Inter text-title15 text-white w-full p-3 rounded-sm">Search</button>-->
<!-- </div>-->
<!-- </li>-->
<!-- </ul>-->
<!-- </div>-->

<!--Search and filter Desktop-->
<div class="hidden md:grid grid-flow-row auto-rows-max mb-10 font-Inter h-full">
<div class="flex flex-row bg-darkGray w-full p-4 rounded-t-sm">
Expand Down
24 changes: 24 additions & 0 deletions frontend/marketplace/src/pages/FAQPage.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<script setup lang="ts">
import FAQCollapse from "@/components/FAQCollapse.vue";
</script>

<template>
<div class="p-5 md:px-[10%] min-h-[50vh] font-Inter">
<h3 class="text-white text-title24 md:mt-10">Frequently asked questions</h3>

<div class="my-5 text-title18">
<FAQCollapse title="Frequently asked question"
content="Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy"/>

<FAQCollapse title="Frequently asked question"
content="Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy"/>

<FAQCollapse title="Frequently asked question"
content="Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy"/>

<FAQCollapse title="Frequently asked question"
content="Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy"/>

</div>
</div>
</template>
6 changes: 6 additions & 0 deletions frontend/marketplace/src/router/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomePage from "@/pages/HomePage.vue";
import FAQPage from "@/pages/FAQPage.vue";


const router = createRouter({
Expand All @@ -10,6 +11,11 @@ const router = createRouter({
name: 'home',
component: HomePage
},
{
path: '/faq',
name: 'FAQPage',
component: FAQPage
},
]
})

Expand Down
16 changes: 14 additions & 2 deletions frontend/marketplace/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ module.exports = {
dropDownText: "rgba(255, 255, 255, 0.6)",
navBarBlack: "rgba(0, 0, 0, 0.95)",
borderBlack:"rgba(255, 255, 255, 0.03)",
dividerGray:"rgba(255, 255, 255, 0.08)"
dividerGray:"rgba(255, 255, 255, 0.08)",
textWhite:"rgba(255, 255, 255, 0.8)"
},
fontSize: {
title32: "32px",
Expand Down Expand Up @@ -55,6 +56,17 @@ module.exports = {
},
},
},
plugins: [require("flowbite/plugin")],
daisyui: {
styled: true,
themes: false,
base: false,
utils: true,
logs: true,
rtl: false,
prefix: "",
darkTheme: "dark",
},
// plugins: [require("flowbite/plugin"),],
plugins: [require("daisyui")],
}

Loading

0 comments on commit 482cb5f

Please sign in to comment.