Refactor: move (mocked) content type filter to its own component

parent b3f2ee83
<template>
<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>Articles</span>
</a>
</li>
<li>
<a>
<span class='icon is-small'><i class='fa fa-photo'></i></span>
<span>Photos</span>
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
/* Nothing yet. */
}
</script>
<style>
.content-filter-toggle.tabs {
font-size: 1.5vmax;
margin-top: -1.5vmax;
margin-bottom: 4vmax;
}
</style>
<template>
<div>
<!-- Site header -->
<indieHeader @followButtonPress='followModalActive = true' />
<indie-header @followButtonPress='followModalActive = true' />
<!-- 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>Articles</span>
</a>
</li>
<li>
<a>
<span class='icon is-small'><i class='fa fa-photo'></i></span>
<span>Photos</span>
</a>
</li>
</ul>
</div>
<content-type-filter />
<!-- Vue Quill Editor -->
<div class='compose'>
......@@ -75,7 +60,7 @@
<div class='control'>
<no-ssr>
<vue-password v-model='password' classes='input'>
<template slot="password-toggle" scope="props">
<template slot="password-toggle" slot-scope="props">
<button class="button VuePassword__Toggle"
type="button"
v-on:click = "props.toggle"
......@@ -104,11 +89,13 @@ import 'font-awesome/css/font-awesome.min.css'
import indieHeader from '~/components/indieHeader'
import followModal from '~/components/followModal'
import contentTypeFilter from '~/components/contentTypeFilter'
export default {
components: {
indieHeader,
followModal
followModal,
contentTypeFilter
},
computed: {
......@@ -217,14 +204,6 @@ 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 {
......
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