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

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

@@ -11,10 +11,10 @@
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
@@ -88,7 +88,6 @@
v-if="open" v-if="open"
class=" class="
w-64 w-64
max-h-10
px-2 px-2
py-2 py-2
bg-white bg-white
@@ -135,7 +134,6 @@
</div> </div>
</li> </li>
</ul> </ul>
</nav>
</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 !== ''">