data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

improve SSR hiding

Browse source
This commit is contained in:
Nolan Lawson 2018-01-20 20:30:49 -08:00
parent aa888500ec
commit 73fbbad0cc
6 changed files with 60 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
routes/_components/HiddenFromSSR.html Normal file
View file

@ -0,0 +1,13 @@
<div class="{{hidden ? 'hidden' : ''}}">
<slot></slot>
</div>
<script>
export default {
data: () => ({
hidden: true
}),
oncreate () {
this.set({hidden: !process.browser})
}
}
</script>

40
routes/_components/NotLoggedInHome.html
View file

@ -1,18 +1,20 @@
<FreeTextLayout> <HiddenFromSSR>
<div class="not-logged-in-home {{hidden ? 'hidden' : ''}}"> <FreeTextLayout>
<div class="banner"> <div class="not-logged-in-home">
<svg aria-hidden="true" class="logo"> <div class="banner">
<use xlink:href="#pinafore-logo" /> <svg aria-hidden="true" class="logo">
</svg> <use xlink:href="#pinafore-logo" />
<h1>Pinafore</h1> </svg>
<h1>Pinafore</h1>
</div>
<p>Pinafore is a web client for <a rel="noopener" target="_blank" href="https://joinmastodon.org">Mastodon</a>, optimized for speed and simplicity.</p>
<p>To get started, <a href="/settings/instances/add">log in to an instance</a>.</p>
<p>Don't have an instance? <a rel="noopener" target="_blank" href="https://joinmastodon.org">Join Mastodon!</a></p>
</div> </div>
<p>Pinafore is a web client for <a rel="noopener" target="_blank" href="https://joinmastodon.org">Mastodon</a>, optimized for speed and simplicity.</p> </FreeTextLayout>
</HiddenFromSSR>
<p>To get started, <a href="/settings/instances/add">log in to an instance</a>.</p>
<p>Don't have an instance? <a rel="noopener" target="_blank" href="https://joinmastodon.org">Join Mastodon!</a></p>
</div>
</FreeTextLayout>
<style> <style>
.not-logged-in-home { .not-logged-in-home {
margin: 10px; margin: 10px;
@ -43,16 +45,12 @@
</style> </style>
<script> <script>
import FreeTextLayout from './FreeTextLayout.html' import FreeTextLayout from './FreeTextLayout.html'
import HiddenFromSSR from './HiddenFromSSR.html'
export default { export default {
components: { components: {
FreeTextLayout FreeTextLayout,
}, HiddenFromSSR
data: () => ({
hidden: true
}),
oncreate: function () {
this.set({hidden: !process.browser})
} }
} }
</script> </script>

14
routes/federated.html
View file

@ -6,11 +6,13 @@
{{#if $isUserLoggedIn}} {{#if $isUserLoggedIn}}
<LazyTimeline timeline='federated' /> <LazyTimeline timeline='federated' />
{{else}} {{else}}
<FreeTextLayout> <HiddenFromSSR>
<h1>Federated</h1> <FreeTextLayout>
<h1>Federated</h1>
<p>Your federated timeline will appear here when logged in.</p> <p>Your federated timeline will appear here when logged in.</p>
</FreeTextLayout> </FreeTextLayout>
</HiddenFromSSR>
{{/if}} {{/if}}
</Layout> </Layout>
@ -19,13 +21,15 @@
import LazyTimeline from './_components/LazyTimeline.html' import LazyTimeline from './_components/LazyTimeline.html'
import FreeTextLayout from './_components/FreeTextLayout.html' import FreeTextLayout from './_components/FreeTextLayout.html'
import { store } from './_utils/store.js' import { store } from './_utils/store.js'
import HiddenFromSSR from './_components/HiddenFromSSR'
export default { export default {
store: () => store, store: () => store,
components: { components: {
Layout, Layout,
LazyTimeline, LazyTimeline,
FreeTextLayout FreeTextLayout,
HiddenFromSSR
} }
} }
</script> </script>

14
routes/local.html
View file

@ -6,11 +6,13 @@
{{#if $isUserLoggedIn}} {{#if $isUserLoggedIn}}
<LazyTimeline timeline='local' /> <LazyTimeline timeline='local' />
{{else}} {{else}}
<FreeTextLayout> <HiddenFromSSR>
<h1>Local</h1> <FreeTextLayout>
<h1>Local</h1>
<p>Your local timeline will appear here when logged in.</p> <p>Your local timeline will appear here when logged in.</p>
</FreeTextLayout> </FreeTextLayout>
</HiddenFromSSR>
{{/if}} {{/if}}
</Layout> </Layout>
@ -19,13 +21,15 @@
import LazyTimeline from './_components/LazyTimeline.html' import LazyTimeline from './_components/LazyTimeline.html'
import FreeTextLayout from './_components/FreeTextLayout.html' import FreeTextLayout from './_components/FreeTextLayout.html'
import { store } from './_utils/store.js' import { store } from './_utils/store.js'
import HiddenFromSSR from './_components/HiddenFromSSR'
export default { export default {
store: () => store, store: () => store,
components: { components: {
Layout, Layout,
LazyTimeline, LazyTimeline,
FreeTextLayout FreeTextLayout,
HiddenFromSSR
} }
} }
</script> </script>

14
routes/notifications.html
View file

@ -3,21 +3,25 @@
</:Head> </:Head>
<Layout page='notifications'> <Layout page='notifications'>
<FreeTextLayout> <HiddenFromSSR>
<h1>Notifications</h1> <FreeTextLayout>
<h1>Notifications</h1>
<p>Your notifications will appear here when logged in.</p> <p>Your notifications will appear here when logged in.</p>
</FreeTextLayout> </FreeTextLayout>
</HiddenFromSSR>
</Layout> </Layout>
<script> <script>
import Layout from './_components/Layout.html'; import Layout from './_components/Layout.html';
import FreeTextLayout from './_components/FreeTextLayout.html' import FreeTextLayout from './_components/FreeTextLayout.html'
import HiddenFromSSR from './_components/HiddenFromSSR'
export default { export default {
components: { components: {
Layout, Layout,
FreeTextLayout FreeTextLayout,
HiddenFromSSR
}, },
}; };
</script> </script>

2
templates/2xx.html
View file

@ -18,7 +18,7 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
<noscript> <noscript>
<style> <style>
.not-logged-in-home.hidden { .hidden {
opacity: 1; opacity: 1;
} }
</style> </style>