73 lines
1.8 KiB
HTML
73 lines
1.8 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="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>
|
||
</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>
|
||
.dynamic-page-banner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 0 20px 20px;
|
||
}
|
||
h1.dynamic-page-title {
|
||
margin: 0;
|
||
}
|
||
button.dynamic-page-go-back {
|
||
font-size: 1.3em;
|
||
color: var(--anchor-text);
|
||
border: 0;
|
||
padding: 0;
|
||
background: none;
|
||
}
|
||
button.dynamic-page-go-back:hover {
|
||
text-decoration: underline;
|
||
}
|
||
button.dynamic-page-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> |