mirror of
https://github.com/nolanlawson/pinafore
synced 2024-12-12 02:07:26 +01:00
54 lines
1.6 KiB
HTML
54 lines
1.6 KiB
HTML
|
<!--
|
||
|
|
Same as TimelinePage.html, but needs to manage visibility of ComposeBox itself
|
||
|
|
without a div wrapper due to sticky-positioned compose button.
|
||
|
|
TODO: this is a bit hacky due to code duplication
|
||
|
|
-->
|
||
|
|
<div class="timeline-home-page" aria-busy="{{hideTimeline}}">
|
||
|
|
{{#if hidePage}}
|
||
|
|
<LoadingPage />
|
||
|
|
{{/if}}
|
||
|
|
{{#if $currentVerifyCredentials }}
|
||
|
|
<ComposeBox realm="home" hidden="{{hidePage}}"/>
|
||
|
|
{{/if}}
|
||
|
|
<div class="timeline-home-anchor-container">
|
||
|
|
{{#if !hidePage && hideTimeline}}
|
||
|
|
<LoadingPage />
|
||
|
|
{{/if}}
|
||
|
|
<div class="timeline-home-reveal-container {{hideTimeline ? 'hidden' : ''}}">
|
||
|
|
<LazyTimeline timeline="home" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<style>
|
||
|
|
.timeline-home-page, .timeline-home-anchor-container {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.timeline-home-reveal-container {
|
||
|
|
transition: opacity 0.2s linear; /* main page reveal */
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
|
||
|
|
import { store } from '.././_store/store.js'
|
||
|
|
import LoadingPage from '../_components/LoadingPage.html'
|
||
|
|
import ComposeBox from '../_components/compose/ComposeBox.html'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
oncreate () {
|
||
|
|
this.store.set({
|
||
|
|
timelineInitialized: false,
|
||
|
|
timelinePreinitialized: false
|
||
|
|
})
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
hidePage: ($timelineInitialized, $timelinePreinitialized) => !$timelineInitialized && !$timelinePreinitialized,
|
||
|
|
hideTimeline: ($timelineInitialized) => !$timelineInitialized,
|
||
|
|
},
|
||
|
|
store: () => store,
|
||
|
|
components: {
|
||
|
|
LazyTimeline,
|
||
|
|
LoadingPage,
|
||
|
|
ComposeBox
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|