Refactor: move Follow Modal into its own component

parent 718fae2f
<template>
<b-modal :active.sync='isActive' @close='onClose' :width='300' scroll='keep'>
<div class='card'>
<div class='card-image'>
<figure class='image is-fullwidth'>
<img src='/profile-image.jpg' alt='Profile image'>
</figure>
</div>
<div class='card-content'>
<!-- <p>You are about to follow</p> -->
<p class='title'>{{name}}</p>
<p class='subtitle'>{{bio}}</p>
<p>Enter your domain name (or Mastodon address, etc.) to follow:</p>
<b-field>
<span class='button is-static'>https://</span>
<b-input expanded placeholder='Your site'></b-input>
</b-field>
<button @click='onClose' class='button is-primary is-fullwidth'>Follow</button>
</div>
</div>
</b-modal>
</template>
<script>
export default {
props: {
isActive: {
type: Boolean,
required: true,
default: false
}
},
computed: {
name () { return this.$store.state.name },
bio () { return this.$store.state.bio },
},
methods: {
onClose () {
this.$emit('close')
}
}
}
</script>
<style>
div.card-content {
padding-top: 0;
}
</style>
......@@ -101,28 +101,7 @@
</b-tabs>
<!-- Follow modal -->
<b-modal :active.sync='followModalActive' :width='300' scroll='keep'>
<div class='card'>
<div class='card-image'>
<figure class='image is-fullwidth'>
<img src='/profile-image.jpg' alt='Profile image'>
</figure>
</div>
<div class='card-content'>
<!-- <p>You are about to follow</p> -->
<p class='title'>{{name}}</p>
<p class='subtitle'>{{bio}}</p>
<p>Enter your domain name (or Mastodon address, etc.) to follow:</p>
<b-field>
<span class='button is-static'>https://</span>
<b-input expanded placeholder='Your site'></b-input>
</b-field>
<button @click='followModalActive = !followModalActive' class='button is-primary is-fullwidth'>Follow</button>
</div>
</div>
</b-modal>
<follow-modal :isActive='followModalActive' @close='followModalActive = false'></follow-modal>
</div>
</template>
......@@ -131,7 +110,13 @@
import 'font-awesome/css/font-awesome.min.css'
import followModal from '~/components/followModal'
export default {
components: {
followModal
},
computed: {
name () { return this.$store.state.name },
bio () { return this.$store.state.bio },
......
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