ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix search box

Browse Source
This commit is contained in:
samaradel
2021-08-24 12:04:01 +02:00
parent b52908d586
commit d9b750c02f
4 changed files with 122 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
src/components/custom/FilterDropdown.vue
View File

@@ -11,131 +11,129 @@
transition-all transition-500 transition-all transition-500
" "
> >
<nav class="inline-flex md:order-2 sm:w-28 px-2 pt-2 pb-4 sm:flex sm:p-0"> <ul
<ul class="
class=" list-none
list-none m-0
sm:flex sm:flex
justify-left justify-left
capitalize capitalize
transition-all transition-500 transition-all transition-500
" "
> >
<!-- Topics --> <!-- Topics -->
<li class="py-1 mx-5"> <li class="py-1 mx-5">
<div class="relative" x-data="{ open: false }"> <div class="relative" x-data="{ open: false }">
<button <button
@click="setActive(0)" @click="setActive(0)"
class="
flex flex-row
items-center
w-full
md:w-auto
md:inline
md:mt-0
md:ml-4
animated-link
"
>
<span class="capitalize">{{ topic.replace(/_/g, " ") }}</span>
<svg
fill="currentColor"
viewBox="0 0 20 20"
:class="{
'rotate-180': active == 0,
'rotate-0': !active == 0,
}"
class=" class="
flex flex-row inline
items-center w-4
w-full h-4
md:w-auto mt-1
md:inline ml-1
md:mt-0 transition-transform
md:ml-4 duration-200
animated-link transform
md:-mt-1
" "
> >
<span class="capitalize">{{ topic.replace(/_/g, " ") }}</span> <path
<svg fill-rule="evenodd"
fill="currentColor" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
viewBox="0 0 20 20" clip-rule="evenodd"
:class="{ ></path>
'rotate-180': active == 0, </svg>
'rotate-0': !active == 0, </button>
}" <div
class=" v-if="active == 0"
inline x-show="open"
w-4 x-transition:enter="transition ease-out duration-100"
h-4 x-transition:enter-start="transform opacity-0 scale-95"
mt-1 x-transition:enter-end="transform opacity-100 scale-100"
ml-1 x-transition:leave="transition ease-in duration-75"
transition-transform x-transition:leave-start="transform opacity-100 scale-100"
duration-200 x-transition:leave-end="transform opacity-0 scale-95"
transform class="
md:-mt-1 absolute
" w-full
> mt-2
<path origin-top-right
fill-rule="evenodd" rounded-md
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" shadow-lg
clip-rule="evenodd" md:w-48
></path> z-30
</svg> "
</button> >
<div <div
v-if="active == 0" v-if="open"
x-show="open"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class=" class="
absolute w-64
w-full px-2
mt-2 py-2
origin-top-right bg-white
rounded-md rounded-md
shadow-lg shadow
md:w-48 dark:bg-gray-700
z-30
" "
> >
<div <a
v-if="open"
class=" class="
w-64 cursor-pointer
max-h-10 block
px-2 px-4
py-2 py-2
bg-white mt-2
rounded-md text-sm
shadow font-semibold
dark:bg-gray-700 bg-transparent
rounded-lg
dark:bg-transparent
dark:hover:bg-gray-600
dark-:focus:bg-gray-600
dark:focus:text-white
dark:hover:text-white
dark:text-gray-200
md:mt-0
hover:text-gray-900
focus:text-gray-900
hover:bg-gray-200
focus:bg-gray-200
focus:outline-none
focus:shadow-outline
" "
v-for="topic in topics"
:key="topic"
@click.self="
setTopic(topic);
open = false;
"
>{{ topic.replace(/_/g, " ") }}</a
> >
<a
class="
cursor-pointer
block
px-4
py-2
mt-2
text-sm
font-semibold
bg-transparent
rounded-lg
dark:bg-transparent
dark:hover:bg-gray-600
dark-:focus:bg-gray-600
dark:focus:text-white
dark:hover:text-white
dark:text-gray-200
md:mt-0
hover:text-gray-900
focus:text-gray-900
hover:bg-gray-200
focus:bg-gray-200
focus:outline-none
focus:shadow-outline
"
v-for="topic in topics"
:key="topic"
@click.self="
setTopic(topic);
open = false;
"
>{{ topic.replace(/_/g, " ") }}</a
>
</div>
</div> </div>
</div> </div>
</li> </div>
</ul> </li>
</nav> </ul>
</header> </header>
</div> </div>
</template> </template>

4
src/components/custom/SearchBox.vue
View File

@@ -1,12 +1,12 @@
<template> <template>
<div class="inline-flex rounded-full border-grey-light test m-auto lg:m-0"> <div class="inline-flex rounded-full border-grey-light test m-auto lg:m-0 mr-5">
<button> <button>
<span class="w-auto inline-flex justify-end items-center text-grey p-2"> <span class="w-auto inline-flex justify-end items-center text-grey p-2">
<font-awesome :icon="['fas', 'search']" /> <font-awesome :icon="['fas', 'search']" />
</span> </span>
</button> </button>
<input <input
class="rounded mr-4" class="w-full rounded mr-4"
type="text" type="text"
placeholder="Search" placeholder="Search"
:value="value" :value="value"

11
src/pages/Blog.vue
View File

@@ -9,17 +9,14 @@
:years="years" :years="years"
:months="months" :months="months"
/> --> /> -->
<div <div class="container sm:pxi-0 mx-auto overflow-hidden">
class="container sm:pxi-0 mx-auto overflow-hidden" <div class="flex my-5">
:style="{ 'min-height': contentHeight + 'px' }"
>
<div class="flex flex-wrap my-5">
<FilterDropdown <FilterDropdown
class="xs:w-1/2" class="xs:w-2/3"
@selectedTopic="setTopic" @selectedTopic="setTopic"
:topics="topics" :topics="topics"
/> />
<SearchBox class="xs:w-1/2" v-model="search" /> <SearchBox class="xs:w-1/3" v-model="search" />
</div> </div>
<div v-if="search !== ''"> <div v-if="search !== ''">

10
src/pages/News.vue
View File

@@ -14,9 +14,13 @@
class="container sm:pxi-0 mx-auto overflow-hidden" class="container sm:pxi-0 mx-auto overflow-hidden"
:style="{ 'min-height': contentHeight + 'px' }" :style="{ 'min-height': contentHeight + 'px' }"
> >
<div class="flex flex-wrap my-5"> <div class="flex my-5">
<FilterDropdown @selectedTopic="setTopic" :topics="topics" /> <FilterDropdown
<SearchBox v-model="search" /> class="xs:w-2/3"
@selectedTopic="setTopic"
:topics="topics"
/>
<SearchBox class="xs:w-1/3" v-model="search" />
</div> </div>
<div v-if="search !== ''"> <div v-if="search !== ''">