Refactor: pull site header into its own component

parent 3cc67398
<template>
<b-modal :active.sync='isActive' @close='onClose' :width='300' scroll='keep'>
<b-modal :active.sync='modalIsActive' @close='onClose' :width='300' scroll='keep'>
<div class='card'>
<div class='card-image'>
<figure class='image is-fullwidth'>
......@@ -35,6 +35,14 @@ export default {
computed: {
name () { return this.$store.state.name },
bio () { return this.$store.state.bio },
// Use a computed property so we don’t bind :active.sync to the
// isActive prop directly (as Vue complains about props if they’re
// written to from within components).
modalIsActive: {
get: function () { return this.isActive },
set: function () { /* do nothing; required to silence Vue warning */ }
}
},
methods: {
onClose () {
......
<template>
<div>
<header class='page-header'>
<div class='header-material'>
<button id='follow-button' @click='followButtonPress' class='button'>Follow</button>
<img class='profile-image' src='/profile-image.jpg' alt='Profile image'>
<h1>{{name}}</h1>
<h2>{{bio}}</h2>
</div>
</header>
<div class='shade'></div>
</div>
</template>
<script>
export default {
computed: {
name () { return this.$store.state.name },
bio () { return this.$store.state.bio },
},
methods: {
followButtonPress () {
this.$emit('followButtonPress')
}
}
}
</script>
<style>
.page-header {
/* background-image: url('/background-image.jpg'); */
/* background-color: red; */
/* background-color: white; */
/* background-color: black; */
background-color: lightblue;
background-size: cover;
height: 26vmax;
display: flex;
align-items: center;
justify-content: center;
line-height: 0.2;
color: white;
}
.header-material {
text-align: center;
z-index: 2;
}
header h2 {
font-size: 2vmax;
font-weight: 400;
margin-top: 3vmax;
}
.shade {
background-color: rgba(0,0,0,0.55);
height: 9vmax;
top: -9vmax;
margin-bottom: -9vmax;
position: relative;
z-index: 1;
}
.profile-image {
width: 14vmax;
/* margin-top: 1vmax; */
margin-bottom: 4vmax;
/* Make the image circular with a white border */
margin-left: auto;
margin-right: auto;
display: block;
border-radius: 50%;
overflow: hidden;
border: 0.4vmax solid white;
}
</style>
<template>
<div>
<header class='page-header'>
<div class='header-material'>
<button id='follow-button' @click='followModalActive = !followModalActive' class='button'>Follow</button>
<img class='profile-image' src='/profile-image.jpg' alt='Profile image'>
<h1>{{name}}</h1>
<h2>{{bio}}</h2>
</div>
</header>
<div class='shade'></div>
<!-- Site header -->
<indieHeader @followButtonPress='followModalActive = true' />
<!-- Tabs with hard-coded content in first. -->
<b-tabs position="is-centered" class="block">
......@@ -101,7 +93,7 @@
</b-tabs>
<!-- Follow modal -->
<follow-modal :isActive='followModalActive' @close='followModalActive = false'></follow-modal>
<follow-modal :isActive='followModalActive' @close='followModalActive = false' />
</div>
</template>
......@@ -110,10 +102,12 @@
import 'font-awesome/css/font-awesome.min.css'
import indieHeader from '~/components/indieHeader'
import followModal from '~/components/followModal'
export default {
components: {
indieHeader,
followModal
},
......@@ -247,10 +241,6 @@ nav {
z-index: 9001;
}
.header-material {
text-align: center;
z-index: 2;
}
.tab-content {
margin-top: 2vmax;
......@@ -265,51 +255,12 @@ section {
font-size: 2vmax;
}
.profile-image, .profile-image-small {
width: 14vmax;
/* margin-top: 1vmax; */
margin-bottom: 4vmax;
/* Make the image circular with a white border */
margin-left: auto;
margin-right: auto;
display: block;
border-radius: 50%;
overflow: hidden;
border: 0.4vmax solid white;
}
.metadata {
text-align: right;
font-size: 1.5vmax;
font-style: italic;
}
.profile-image-small {
width: 3.5vmax;
margin-top: -1vmax;
margin-bottom: 0;
margin-left: 0;
margin-right: 1vmax;
display: inline;
vertical-align: middle;
}
.settings-button {
width: 3vmax;
position: absolute;
top: 22.5vmax;
right: 1vmax;
}
.shade {
background-color: rgba(0,0,0,0.55);
height: 9vmax;
top: -9vmax;
margin-bottom: -9vmax;
position: relative;
z-index: 1;
}
h1 {
font-size: 5vmax;
......@@ -320,26 +271,7 @@ h2 {
font-size: 3.5vmax;
}
header h2 {
font-size: 2vmax;
font-weight: 400;
margin-top: 3vmax;
}
.page-header {
/* background-image: url('/background-image.jpg'); */
/* background-color: red; */
/* background-color: white; */
/* background-color: black; */
background-color: lightblue;
background-size: cover;
height: 26vmax;
display: flex;
align-items: center;
justify-content: center;
line-height: 0.2;
color: white;
}
article h1 {
font-size: 4vmax;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment