2018-01-22 05:02:32 +01:00
|
|
|
|
<:Head>
|
|
|
|
|
<title>Pinafore – #{{params.tagName}}</title>
|
|
|
|
|
</:Head>
|
|
|
|
|
|
|
|
|
|
<Layout page='tags'
|
|
|
|
|
dynamicPage="{{params.tagName}}"
|
|
|
|
|
dynamicHref="/tags/{{params.tagName}}"
|
|
|
|
|
dynamicLabel="{{'#' + params.tagName}}"
|
|
|
|
|
dynamicIcon="#fa-hashtag" >
|
|
|
|
|
{{#if $isUserLoggedIn}}
|
2018-01-22 17:30:36 +01:00
|
|
|
|
<div class="dynamic-page-banner">
|
|
|
|
|
<h1 class="dynamic-page-title">{{'#' + params.tagName}}</h1>
|
|
|
|
|
<button type="button" class="dynamic-page-go-back" on:click="onGoBack(event)">Back</button>
|
2018-01-22 05:02:32 +01:00
|
|
|
|
</div>
|
|
|
|
|
<LazyTimeline timeline='tag/{{params.tagName}}' />
|
|
|
|
|
{{else}}
|
|
|
|
|
<HiddenFromSSR>
|
|
|
|
|
<FreeTextLayout>
|
|
|
|
|
<h1>#{{params.tagName}}</h1>
|
|
|
|
|
|
|
|
|
|
<p>A hashtag timeline will appear here when logged in.</p>
|
|
|
|
|
</FreeTextLayout>
|
|
|
|
|
</HiddenFromSSR>
|
|
|
|
|
{{/if}}
|
|
|
|
|
</Layout>
|
|
|
|
|
<style>
|
2018-01-22 17:30:36 +01:00
|
|
|
|
.dynamic-page-banner {
|
2018-01-22 05:02:32 +01:00
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin: 0 20px 20px;
|
|
|
|
|
}
|
2018-01-22 17:30:36 +01:00
|
|
|
|
h1.dynamic-page-title {
|
2018-01-22 05:02:32 +01:00
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
2018-01-22 17:30:36 +01:00
|
|
|
|
button.dynamic-page-go-back {
|
2018-01-22 05:02:32 +01:00
|
|
|
|
font-size: 1.3em;
|
2018-01-22 17:30:36 +01:00
|
|
|
|
color: var(--anchor-text);
|
|
|
|
|
border: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
background: none;
|
2018-01-22 05:02:32 +01:00
|
|
|
|
}
|
2018-01-22 17:30:36 +01:00
|
|
|
|
button.dynamic-page-go-back:hover {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
button.dynamic-page-go-back::before {
|
2018-01-22 05:02:32 +01:00
|
|
|
|
content: '<';
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
import Layout from '../_components/Layout.html'
|
|
|
|
|
import LazyTimeline from '../_components/LazyTimeline.html'
|
|
|
|
|
import FreeTextLayout from '../_components/FreeTextLayout.html'
|
|
|
|
|
import { store } from '../_utils/store.js'
|
|
|
|
|
import HiddenFromSSR from '../_components/HiddenFromSSR'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
store: () => store,
|
|
|
|
|
components: {
|
|
|
|
|
Layout,
|
|
|
|
|
LazyTimeline,
|
|
|
|
|
FreeTextLayout,
|
|
|
|
|
HiddenFromSSR
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
onGoBack(e) {
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
window.history.back();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|