75 lines
1.2 KiB
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> |