More layout update
This commit is contained in:
parent
562f1aa60c
commit
ecd701555b
@ -6,7 +6,7 @@
|
||||
</a>
|
||||
<nuxt-link :to="link" v-else>
|
||||
<i class="material-icons md-24">{{ icon }}</i>
|
||||
<p class="header-link">{{ text }}</p>
|
||||
<p>{{ text }}</p>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
@ -15,7 +15,7 @@ export default {
|
||||
props: [ 'link', 'text','external', 'icon' ],
|
||||
methods: {
|
||||
getCurrentClasses() {
|
||||
if(this.link == this.$nuxt.$route.path) {
|
||||
if(this.$nuxt.$route.path.startsWith(this.link)) {
|
||||
return ['footer-nav','selected'];
|
||||
}
|
||||
return ['footer-nav'];
|
||||
|
@ -1,16 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<header>
|
||||
<div class="header-left">
|
||||
<nuxt-link to="/"><p class="header-link">Damillora</p></nuxt-link>
|
||||
<div class="header-left" v-if="needsBackButton">
|
||||
<nuxt-link class="header-link" to="/"><i class="material-icons">arrow_back</i></nuxt-link>
|
||||
</div>
|
||||
<div class="header-middle">
|
||||
<p class="text-lg">{{ title }}</p>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<!-- <nuxt-link to="/about"><p class="header-link">about</p></nuxt-link>
|
||||
<nuxt-link to="/games"><p class="header-link">game profile</p></nuxt-link>
|
||||
<nuxt-link to="/sns"><p class="header-link">social media</p></nuxt-link>
|
||||
<a href="//blog.nanao.moe"><p class="header-link">blog</p></a> -->
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
@ -18,7 +15,20 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
computed: {
|
||||
needsBackButton() {
|
||||
return this.$nuxt.$route.path != "/";
|
||||
},
|
||||
title() {
|
||||
return this.$store.state.title;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack(event) {
|
||||
if(event) event.preventDefault();
|
||||
this.$router.back();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -27,15 +37,15 @@ header {
|
||||
@apply h-16 w-full z-10 flex flex-row justify-start items-center px-4;
|
||||
}
|
||||
.header-link {
|
||||
@apply text-white text-lg mx-2;
|
||||
@apply mx-2 h-6 w-6 cursor-pointer;
|
||||
}
|
||||
.header-left {
|
||||
|
||||
@apply flex flex-row justify-start items-center h-full;
|
||||
}
|
||||
.header-middle {
|
||||
@apply flex-grow;
|
||||
@apply flex-grow flex flex-row justify-start items-center h-full;
|
||||
}
|
||||
.header-right {
|
||||
@apply flex flex-row;
|
||||
@apply flex flex-row justify-start items-center h-full;
|
||||
}
|
||||
</style>
|
||||
|
6
middleware/title.js
Normal file
6
middleware/title.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default ({ route, store }) => {
|
||||
// Take the last value (latest route child)
|
||||
console.log(route.meta);
|
||||
const title = route.meta.reduce((title, meta) => meta.title || title, 'Damillora')
|
||||
store.commit('SET_TITLE', title)
|
||||
}
|
@ -17,7 +17,7 @@ module.exports = {
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
|
||||
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
|
||||
{ hid: 'description', name: 'description', content: 'Web developer, reviewer and content creator' }
|
||||
],
|
||||
link: [
|
||||
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
|
||||
@ -76,4 +76,7 @@ module.exports = {
|
||||
serverMiddleware: [
|
||||
|
||||
],
|
||||
router: {
|
||||
middleware: ['title']
|
||||
},
|
||||
}
|
||||
|
@ -12,6 +12,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
meta: {
|
||||
title: 'About Damillora',
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -14,7 +14,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
meta: {
|
||||
title: "Game Profile: Arcaea",
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -14,7 +14,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
meta: {
|
||||
title: "Game Profile: BanG Dream! Girls Band Party (JP)",
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -20,7 +20,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
meta: {
|
||||
title: "Game Profile: CUE!",
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -95,7 +95,9 @@ export default {
|
||||
components: {
|
||||
GameListItem,
|
||||
},
|
||||
|
||||
meta: {
|
||||
title: "Game Profile",
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<h1 class="title">Game Profile: Love Live! School Idol Festival (JP)<</h1>
|
||||
<h1 class="title">Game Profile: Love Live! School Idol Festival (JP)</h1>
|
||||
<p><a href="https://lovelive-sif.bushimo.jp/">Game Website</a></p>
|
||||
<h2>My Game ID</h2>
|
||||
<p>Player Name: Damillora</p>
|
||||
@ -14,7 +14,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
meta: {
|
||||
title: "Game Profile: Love Live! School Idol Festival (JP)",
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -20,7 +20,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
meta: {
|
||||
title: "Game Profile: Love Live! School idol festival ALL STARS",
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -14,7 +14,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
meta: {
|
||||
title: "Game Profile: maimai DX",
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -14,7 +14,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
meta: {
|
||||
title: "Game Profile: The IDOLM@STER Million Live: Theater Days",
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -14,7 +14,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
meta: {
|
||||
title: "Game Profile: Nogikoi",
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -14,7 +14,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
meta: {
|
||||
title: "Game Profile: SOUND VOLTEX VIVID WAVE",
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -14,7 +14,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
meta: {
|
||||
title: "Game Profile: Shadowverse",
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -14,7 +14,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
meta: {
|
||||
title: "Game Profile: THE IDOLM@STER: Shiny Colors",
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -14,7 +14,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
meta: {
|
||||
title: "Game Profile: Revue Starlight Re LIVE (EN)",
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -13,7 +13,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
meta: {
|
||||
title: "Game Profile: Tokyo 7th Sisters",
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -18,7 +18,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
meta: {
|
||||
title: "Game Profile: ",
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -19,7 +19,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
meta: {
|
||||
title: "Game Profile: 欅坂46・日向坂46 UNI'S ON AIR",
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -18,6 +18,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
meta: {
|
||||
title: 'Damillora',
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -24,6 +24,9 @@ export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
meta: {
|
||||
title: 'Social Media',
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
10
store/index.js
Normal file
10
store/index.js
Normal file
@ -0,0 +1,10 @@
|
||||
|
||||
export const state = () => ({
|
||||
title: 'Damillora'
|
||||
})
|
||||
|
||||
export const mutations = {
|
||||
SET_TITLE (state, title) {
|
||||
state.title = title
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user