66 lines
1.6 KiB
HTML
66 lines
1.6 KiB
HTML
|
<: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}}
|
|||
|
|
<div class="hashtag-banner">
|
|||
|
|
<h1 class="hashtag-title">{{'#' + params.tagName}}</h1>
|
|||
|
|
<a href="#" class="hashtag-go-back" on:click="onGoBack(event)">Back</a>
|
|||
|
|
</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>
|
|||
|
|
.hashtag-banner {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin: 0 20px 20px;
|
|||
|
|
}
|
|||
|
|
h1.hashtag-title {
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
a.hashtag-go-back {
|
|||
|
|
font-size: 1.3em;
|
|||
|
|
}
|
|||
|
|
a.hashtag-go-back::before {
|
|||
|
|
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>
|