Verified Commit 82b5a7d1 authored by Aral Balkan's avatar Aral Balkan
Browse files

Refactor to use Buefy’s b-modal instead of sweet-modal

parent ad9cae39
......@@ -110,32 +110,42 @@
<b-tab-item label="…"></b-tab-item>
</b-tabs>
<!-- Modal: compose panel -->
<sweet-modal ref="compose" title="Compose" overlay-theme="dark">
<b-tabs position="is-centered" class="block">
<b-tab-item label="Text">
<section>
<textarea style='width: 100%;'>What’s on your mind?</textarea>
</section>
</b-tab-item>
<b-tab-item label="Photo"></b-tab-item>
</b-tabs>
<!-- <sweet-modal-tab title="Text" id="tab1">Contents of Tab 1</sweet-modal-tab>
<sweet-modal-tab title="Photo" id="tab2">Contents of Tab 2</sweet-modal-tab> -->
</sweet-modal>
<!-- Compose Panel Modal -->
<b-modal :active.sync="isComposePanelModalActive" :width="960" scroll="keep">
<div class="card">
<b-tabs position="is-centered" class="block card-content">
<b-tab-item label="Text">
<section>
<textarea placeholder='What’s on your mind?' class='composeText' style='width: 100%; height: 20vmax;'></textarea>
<button ref="postButton" @click="closeComposePanel" class='button is-medium is-primary'>Post</button>
</section>
</b-tab-item>
<b-tab-item label="Photo"></b-tab-item>
</b-tabs>
</div>
</b-modal>
</div>
</template>
<script>
export default {
computed: {
name () { return this.$store.state.name },
bio () { return this.$store.state.bio }
},
data() {
return {
isComposePanelModalActive: false
}
},
methods: {
openComposePanel: function (event) {
this.$refs.compose.open()
this.isComposePanelModalActive = true
},
closeComposePanel: function (event) {
this.isComposePanelModalActive = false
}
}
}
......@@ -162,14 +172,20 @@ nav {
font-size: 3vmax;
}
.sweet-content .tabs {
.modal .tabs {
font-size: 2vmax;
}
.sweet-content nav {
.modal nav {
margin-top: 0;
}
/* The component doesn’t set its own z-index high. We need to so as to
cover the Add button. */
.modal {
z-index: 9001;
}
.header-material {
text-align: center;
z-index: 2;
......@@ -259,4 +275,14 @@ header {
bottom: 2vmax;
right: 2vmax;
}
.composeText {
font-size: 2vmax;
}
.button.is-medium {
font-size: 2vmax;
float: right;
}
</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