126 lines
2.2 KiB
Vue
126 lines
2.2 KiB
Vue
<template>
|
|
<header>
|
|
<h2>{{ prettify }}</h2>
|
|
<h3>{{ subtitle }}</h3>
|
|
|
|
<router-link
|
|
v-if="shortList"
|
|
:to="urlify"
|
|
class="view-more"
|
|
:aria-label="`View all ${title}`"
|
|
>
|
|
View All
|
|
</router-link>
|
|
|
|
<div v-else-if="info">
|
|
<div v-if="info instanceof Array" class="flex flex-direction-column">
|
|
<span v-for="item in info" :key="item" class="info">{{ item }}</span>
|
|
</div>
|
|
|
|
<span v-else class="info">{{ info }}</span>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
subtitle: {
|
|
type: String,
|
|
required: false,
|
|
default: null
|
|
},
|
|
info: {
|
|
type: [String, Array],
|
|
required: false
|
|
},
|
|
link: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
shortList: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
computed: {
|
|
urlify: function () {
|
|
return `/list/${this.title.toLowerCase().replace(" ", "_")}`;
|
|
},
|
|
prettify: function () {
|
|
return this.title.includes("_")
|
|
? this.title.split("_").join(" ")
|
|
: this.title;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "src/scss/variables";
|
|
@import "src/scss/media-queries";
|
|
@import "src/scss/main";
|
|
|
|
header {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.5rem 0.75rem;
|
|
background-color: $background-color;
|
|
|
|
position: sticky;
|
|
position: -webkit-sticky;
|
|
top: $header-size;
|
|
z-index: 1;
|
|
|
|
h2 {
|
|
font-size: 1.4rem;
|
|
font-weight: 300;
|
|
text-transform: capitalize;
|
|
line-height: 1.4rem;
|
|
margin: 0;
|
|
color: $text-color;
|
|
}
|
|
|
|
.view-more {
|
|
font-size: 0.9rem;
|
|
font-weight: 300;
|
|
letter-spacing: 0.5px;
|
|
color: $text-color-70;
|
|
text-decoration: none;
|
|
transition: color 0.5s ease;
|
|
cursor: pointer;
|
|
|
|
&:after {
|
|
content: " →";
|
|
}
|
|
&:hover {
|
|
color: $text-color;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
font-size: 13px;
|
|
font-weight: 300;
|
|
letter-spacing: 0.5px;
|
|
color: $text-color;
|
|
text-decoration: none;
|
|
text-align: right;
|
|
}
|
|
|
|
@include tablet-min {
|
|
padding-left: 1.25rem;
|
|
}
|
|
|
|
@include desktop-lg-min {
|
|
padding-left: 1.75rem;
|
|
}
|
|
}
|
|
</style>
|