More layout update
This commit is contained in:
parent
562f1aa60c
commit
ecd701555b
@ -6,7 +6,7 @@
|
|||||||
</a>
|
</a>
|
||||||
<nuxt-link :to="link" v-else>
|
<nuxt-link :to="link" v-else>
|
||||||
<i class="material-icons md-24">{{ icon }}</i>
|
<i class="material-icons md-24">{{ icon }}</i>
|
||||||
<p class="header-link">{{ text }}</p>
|
<p>{{ text }}</p>
|
||||||
</nuxt-link>
|
</nuxt-link>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -15,7 +15,7 @@ export default {
|
|||||||
props: [ 'link', 'text','external', 'icon' ],
|
props: [ 'link', 'text','external', 'icon' ],
|
||||||
methods: {
|
methods: {
|
||||||
getCurrentClasses() {
|
getCurrentClasses() {
|
||||||
if(this.link == this.$nuxt.$route.path) {
|
if(this.$nuxt.$route.path.startsWith(this.link)) {
|
||||||
return ['footer-nav','selected'];
|
return ['footer-nav','selected'];
|
||||||
}
|
}
|
||||||
return ['footer-nav'];
|
return ['footer-nav'];
|
||||||
|
@ -1,16 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<header>
|
<header>
|
||||||
<div class="header-left">
|
<div class="header-left" v-if="needsBackButton">
|
||||||
<nuxt-link to="/"><p class="header-link">Damillora</p></nuxt-link>
|
<nuxt-link class="header-link" to="/"><i class="material-icons">arrow_back</i></nuxt-link>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-middle">
|
<div class="header-middle">
|
||||||
|
<p class="text-lg">{{ title }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-right">
|
<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>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
</div>
|
</div>
|
||||||
@ -18,7 +15,20 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
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>
|
</script>
|
||||||
|
|
||||||
@ -27,15 +37,15 @@ header {
|
|||||||
@apply h-16 w-full z-10 flex flex-row justify-start items-center px-4;
|
@apply h-16 w-full z-10 flex flex-row justify-start items-center px-4;
|
||||||
}
|
}
|
||||||
.header-link {
|
.header-link {
|
||||||
@apply text-white text-lg mx-2;
|
@apply mx-2 h-6 w-6 cursor-pointer;
|
||||||
}
|
}
|
||||||
.header-left {
|
.header-left {
|
||||||
|
@apply flex flex-row justify-start items-center h-full;
|
||||||
}
|
}
|
||||||
.header-middle {
|
.header-middle {
|
||||||
@apply flex-grow;
|
@apply flex-grow flex flex-row justify-start items-center h-full;
|
||||||
}
|
}
|
||||||
.header-right {
|
.header-right {
|
||||||
@apply flex flex-row;
|
@apply flex flex-row justify-start items-center h-full;
|
||||||
}
|
}
|
||||||
</style>
|
</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: [
|
meta: [
|
||||||
{ charset: 'utf-8' },
|
{ charset: 'utf-8' },
|
||||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
|
{ 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: [
|
link: [
|
||||||
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
|
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
|
||||||
@ -76,4 +76,7 @@ module.exports = {
|
|||||||
serverMiddleware: [
|
serverMiddleware: [
|
||||||
|
|
||||||
],
|
],
|
||||||
|
router: {
|
||||||
|
middleware: ['title']
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
@ -12,6 +12,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: 'About Damillora',
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -14,7 +14,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: "Game Profile: Arcaea",
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -14,7 +14,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: "Game Profile: BanG Dream! Girls Band Party (JP)",
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -20,7 +20,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: "Game Profile: CUE!",
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -95,7 +95,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
GameListItem,
|
GameListItem,
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: "Game Profile",
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page">
|
<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>
|
<p><a href="https://lovelive-sif.bushimo.jp/">Game Website</a></p>
|
||||||
<h2>My Game ID</h2>
|
<h2>My Game ID</h2>
|
||||||
<p>Player Name: Damillora</p>
|
<p>Player Name: Damillora</p>
|
||||||
@ -14,7 +14,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: "Game Profile: Love Live! School Idol Festival (JP)",
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -20,7 +20,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: "Game Profile: Love Live! School idol festival ALL STARS",
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -14,7 +14,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: "Game Profile: maimai DX",
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -14,7 +14,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: "Game Profile: The IDOLM@STER Million Live: Theater Days",
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -14,7 +14,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: "Game Profile: Nogikoi",
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -14,7 +14,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: "Game Profile: SOUND VOLTEX VIVID WAVE",
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -14,7 +14,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: "Game Profile: Shadowverse",
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -14,7 +14,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: "Game Profile: THE IDOLM@STER: Shiny Colors",
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -14,7 +14,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: "Game Profile: Revue Starlight Re LIVE (EN)",
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -13,7 +13,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: "Game Profile: Tokyo 7th Sisters",
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -18,7 +18,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: "Game Profile: ",
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -19,7 +19,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: "Game Profile: 欅坂46・日向坂46 UNI'S ON AIR",
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -18,6 +18,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: 'Damillora',
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -24,6 +24,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
meta: {
|
||||||
|
title: 'Social Media',
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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