Move search into a tab

parent 24e3e190
......@@ -11,24 +11,34 @@
<div class='shade'></div>
<!-- Search box -->
<!-- TODO: Requires a clear button on the opposite side to the search icon. -->
<b-field position='is-centered'>
<b-autocomplete
rounded
v-model="searchTerm"
:data="filteredMockSearchData"
placeholder="Search"
icon="search"
@select="option => selected = option">
<template slot="empty">No results found</template>
</b-autocomplete>
</b-field>
<!-- Tabs with hard-coded content in first. -->
<b-tabs position="is-centered" class="block">
<b-tab-item label="Me">
<!-- Filter by content type -->
<div class='tabs is-toggle is-toggle-rounded is-centered content-filter-toggle'>
<ul>
<li class='is-active'>
<a>
<span class='icon is-small'><i class='fa fa-file'></i></span>
<span>Posts</span>
</a>
</li>
<li>
<a>
<span class='icon is-small'><i class='fa fa-photo'></i></span>
<span>Photos</span>
</a>
</li>
<li>
<a>
<span class='icon is-small'><i class='fa fa-film'></i></span>
<span>Videos</span>
</a>
</li>
</ul>
</div>
<!-- Vue Quill Editor -->
<div class='compose'>
<no-ssr>
......@@ -93,6 +103,28 @@
</b-tab-item>
<b-tab-item label="Everyone"></b-tab-item>
<b-tab-item label='Search'>
<!-- Search box -->
<!-- TODO: Requires a clear button on the opposite side to the search icon. -->
<b-field position='is-centered'>
<b-autocomplete
rounded
v-model="searchTerm"
:data="filteredMockSearchData"
placeholder="Search"
icon="search"
@select="option => selected = option">
<template slot="empty">No results found</template>
</b-autocomplete>
</b-field>
<hr>
<h2>You can search for…</h2>
<ul>
<li>People (e.g., @ar.al)</li>
<li>Topics (e.g., #ethicaldesign)</li>
<li>Anything (e.g., a great restaurant)</li>
</ul>
</b-tab-item>
<!-- <b-tab-item label="Private"></b-tab-item> -->
<!-- <b-tab-item label="…"></b-tab-item> -->
</b-tabs>
......@@ -182,6 +214,16 @@ nav {
font-size: 3vmax;
}
/* Content filter toggle */
.content-filter-toggle.tabs {
font-size: 1.5vmax;
margin-top: -1.5vmax;
margin-bottom: 4vmax;
}
/* Modal: currently unused */
.modal .tabs {
font-size: 2vmax;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment