Fix search box
This commit is contained in:
samaradel
@@ -11,131 +11,129 @@
|
||||
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
|
||||
class="
|
||||
list-none
|
||||
sm:flex
|
||||
justify-left
|
||||
capitalize
|
||||
transition-all transition-500
|
||||
"
|
||||
>
|
||||
<!-- Topics -->
|
||||
<li class="py-1 mx-5">
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button
|
||||
@click="setActive(0)"
|
||||
<ul
|
||||
class="
|
||||
list-none
|
||||
m-0
|
||||
sm:flex
|
||||
justify-left
|
||||
capitalize
|
||||
transition-all transition-500
|
||||
"
|
||||
>
|
||||
<!-- Topics -->
|
||||
<li class="py-1 mx-5">
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button
|
||||
@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="
|
||||
flex flex-row
|
||||
items-center
|
||||
w-full
|
||||
md:w-auto
|
||||
md:inline
|
||||
md:mt-0
|
||||
md:ml-4
|
||||
animated-link
|
||||
inline
|
||||
w-4
|
||||
h-4
|
||||
mt-1
|
||||
ml-1
|
||||
transition-transform
|
||||
duration-200
|
||||
transform
|
||||
md:-mt-1
|
||||
"
|
||||
>
|
||||
<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="
|
||||
inline
|
||||
w-4
|
||||
h-4
|
||||
mt-1
|
||||
ml-1
|
||||
transition-transform
|
||||
duration-200
|
||||
transform
|
||||
md:-mt-1
|
||||
"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
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"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
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"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
v-if="active == 0"
|
||||
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="
|
||||
absolute
|
||||
w-full
|
||||
mt-2
|
||||
origin-top-right
|
||||
rounded-md
|
||||
shadow-lg
|
||||
md:w-48
|
||||
z-30
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="active == 0"
|
||||
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"
|
||||
v-if="open"
|
||||
class="
|
||||
absolute
|
||||
w-full
|
||||
mt-2
|
||||
origin-top-right
|
||||
w-64
|
||||
px-2
|
||||
py-2
|
||||
bg-white
|
||||
rounded-md
|
||||
shadow-lg
|
||||
md:w-48
|
||||
z-30
|
||||
shadow
|
||||
dark:bg-gray-700
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="open"
|
||||
<a
|
||||
class="
|
||||
w-64
|
||||
max-h-10
|
||||
px-2
|
||||
cursor-pointer
|
||||
block
|
||||
px-4
|
||||
py-2
|
||||
bg-white
|
||||
rounded-md
|
||||
shadow
|
||||
dark:bg-gray-700
|
||||
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
|
||||
>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<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>
|
||||
<span class="w-auto inline-flex justify-end items-center text-grey p-2">
|
||||
<font-awesome :icon="['fas', 'search']" />
|
||||
</span>
|
||||
</button>
|
||||
<input
|
||||
class="rounded mr-4"
|
||||
class="w-full rounded mr-4"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
:value="value"
|
||||
|
||||
@@ -9,17 +9,14 @@
|
||||
:years="years"
|
||||
:months="months"
|
||||
/> -->
|
||||
<div
|
||||
class="container sm:pxi-0 mx-auto overflow-hidden"
|
||||
:style="{ 'min-height': contentHeight + 'px' }"
|
||||
>
|
||||
<div class="flex flex-wrap my-5">
|
||||
<div class="container sm:pxi-0 mx-auto overflow-hidden">
|
||||
<div class="flex my-5">
|
||||
<FilterDropdown
|
||||
class="xs:w-1/2"
|
||||
class="xs:w-2/3"
|
||||
@selectedTopic="setTopic"
|
||||
:topics="topics"
|
||||
/>
|
||||
<SearchBox class="xs:w-1/2" v-model="search" />
|
||||
<SearchBox class="xs:w-1/3" v-model="search" />
|
||||
</div>
|
||||
|
||||
<div v-if="search !== ''">
|
||||
|
||||
@@ -14,9 +14,13 @@
|
||||
class="container sm:pxi-0 mx-auto overflow-hidden"
|
||||
:style="{ 'min-height': contentHeight + 'px' }"
|
||||
>
|
||||
<div class="flex flex-wrap my-5">
|
||||
<FilterDropdown @selectedTopic="setTopic" :topics="topics" />
|
||||
<SearchBox v-model="search" />
|
||||
<div class="flex my-5">
|
||||
<FilterDropdown
|
||||
class="xs:w-2/3"
|
||||
@selectedTopic="setTopic"
|
||||
:topics="topics"
|
||||
/>
|
||||
<SearchBox class="xs:w-1/3" v-model="search" />
|
||||
</div>
|
||||
|
||||
<div v-if="search !== ''">
|
||||
|
||||
Reference in New Issue
Block a user