Initial add: follow modal

parent 381688ef
......@@ -2,7 +2,7 @@
<div>
<header class='page-header'>
<div class='header-material'>
<button id='follow-button' class='button'>Follow</button>
<button id='follow-button' @click='followModalActive = !followModalActive' class='button'>Follow</button>
<img class='profile-image' src='/profile-image.jpg' alt='Profile image'>
<img class='settings-button' src='/settings.svg' alt='Settings button'>
<h1>{{name}}</h1>
......@@ -80,6 +80,30 @@
<!-- <b-tab-item label="…"></b-tab-item> -->
</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>
</div>
</template>
......@@ -119,6 +143,8 @@ export default {
searchTerm: '',
selectedMockSearchResult: null,
followModalActive: false,
editorContent: '',
editorOption: {
placeholder: 'What’s on your mind?',
......@@ -353,4 +379,10 @@ article h1 {
margin-bottom: .75em;
}
/* Follow card */
div.card-content {
padding-top: 0;
}
</style>
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