md-parser/md-parser/src/App.vue

75 lines
1.2 KiB
Vue

<template>
<div id='main-content'>
<div id='top-band'></div>
<ul class='nav'>
<li class='nav-item'>
<router-link to='/edit' class='nav-link'>Edit an article</router-link>
</li>
<li class='nav-item'>
<a href='#' @click='resetInfos' class='nav-link'>New article</a>
</li>
</ul>
<br>
<br>
<transition name="fade">
<router-view id='sub-content'></router-view>
</transition>
</div>
</template>s
<script>
export default {
name: 'App',
components: {
},
data: function() {
return{
}
},
methods: {
resetInfos: function() {
// reset all current content and metadata
this.$store.commit('resetAll')
this.$router.push('/write')
}
}
}
</script>
<style>
* {
font-family: "Gill Sans Extrabold", sans-serif;
}
.column {
width: 50%;
float: left;
}
#main-content {
height: 100%;
}
#sub-content {
margin-left: 50px
}
#render-area {
padding-bottom : 50px;
}
#top-band {
width:100%;
height:40px;
background : linear-gradient(#e6e6ff, #ffffff);
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>