More layout update

This commit is contained in:
Damillora 2020-02-02 03:26:13 +07:00
parent 562f1aa60c
commit ecd701555b
24 changed files with 101 additions and 31 deletions

View File

@ -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'];

View File

@ -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
View 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)
}

View File

@ -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']
},
} }

View File

@ -12,6 +12,9 @@ export default {
components: { components: {
}, },
meta: {
title: 'About Damillora',
}
} }
</script> </script>

View File

@ -14,7 +14,9 @@ export default {
components: { components: {
}, },
meta: {
title: "Game Profile: Arcaea",
}
} }
</script> </script>

View File

@ -14,7 +14,9 @@ export default {
components: { components: {
}, },
meta: {
title: "Game Profile: BanG Dream! Girls Band Party (JP)",
},
} }
</script> </script>

View File

@ -20,7 +20,9 @@ export default {
components: { components: {
}, },
meta: {
title: "Game Profile: CUE!",
},
} }
</script> </script>

View File

@ -95,7 +95,9 @@ export default {
components: { components: {
GameListItem, GameListItem,
}, },
meta: {
title: "Game Profile",
}
} }
</script> </script>

View File

@ -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>

View File

@ -20,7 +20,9 @@ export default {
components: { components: {
}, },
meta: {
title: "Game Profile: Love Live! School idol festival ALL STARS",
},
} }
</script> </script>

View File

@ -14,7 +14,9 @@ export default {
components: { components: {
}, },
meta: {
title: "Game Profile: maimai DX",
}
} }
</script> </script>

View File

@ -14,7 +14,9 @@ export default {
components: { components: {
}, },
meta: {
title: "Game Profile: The IDOLM@STER Million Live: Theater Days",
},
} }
</script> </script>

View File

@ -14,7 +14,9 @@ export default {
components: { components: {
}, },
meta: {
title: "Game Profile: Nogikoi",
},
} }
</script> </script>

View File

@ -14,7 +14,9 @@ export default {
components: { components: {
}, },
meta: {
title: "Game Profile: SOUND VOLTEX VIVID WAVE",
},
} }
</script> </script>

View File

@ -14,7 +14,9 @@ export default {
components: { components: {
}, },
meta: {
title: "Game Profile: Shadowverse",
}
} }
</script> </script>

View File

@ -14,7 +14,9 @@ export default {
components: { components: {
}, },
meta: {
title: "Game Profile: THE IDOLM@STER: Shiny Colors",
}
} }
</script> </script>

View File

@ -14,7 +14,9 @@ export default {
components: { components: {
}, },
meta: {
title: "Game Profile: Revue Starlight Re LIVE (EN)",
}
} }
</script> </script>

View File

@ -13,7 +13,9 @@ export default {
components: { components: {
}, },
meta: {
title: "Game Profile: Tokyo 7th Sisters",
},
} }
</script> </script>

View File

@ -18,7 +18,9 @@ export default {
components: { components: {
}, },
meta: {
title: "Game Profile: ",
},
} }
</script> </script>

View File

@ -19,7 +19,9 @@ export default {
components: { components: {
}, },
meta: {
title: "Game Profile: 欅坂46・日向坂46 UNI'S ON AIR",
},
} }
</script> </script>

View File

@ -18,6 +18,9 @@ export default {
components: { components: {
}, },
meta: {
title: 'Damillora',
}
} }
</script> </script>

View File

@ -24,6 +24,9 @@ export default {
components: { components: {
}, },
meta: {
title: 'Social Media',
}
} }
</script> </script>

10
store/index.js Normal file
View File

@ -0,0 +1,10 @@
export const state = () => ({
title: 'Damillora'
})
export const mutations = {
SET_TITLE (state, title) {
state.title = title
}
}