add a settings nav

This commit is contained in:
Nolan Lawson 2018-01-08 17:44:29 -08:00
parent 59e84ee830
commit f64792417b
8 changed files with 102 additions and 14 deletions

View File

@ -25,6 +25,7 @@ h1 {
a {
color: royalblue;
text-decoration: none;
}
a:visited {

View File

@ -1,4 +1,4 @@
<Nav page={{page}}/>
<Nav page={{page}} />
<main>
<slot></slot>

View File

@ -0,0 +1,14 @@
<SettingsNav page={{page}} />
<div class="settings">
<slot></slot>
</div>
<script>
import SettingsNav from './SettingsNav.html';
export default {
components: {
SettingsNav
}
};
</script>

View File

@ -0,0 +1,42 @@
<nav>
<ul>
<li>
<a class='{{page === "home" ? "selected" : ""}}' href='/settings'>
Settings
</a>
</li>
<li>
<a class='{{page === "about" ? "selected" : ""}}' href='/settings/about'>
About
</a>
</li>
<li>
<a class='{{page === "add-instance" ? "selected" : ""}}' href='/settings/add-instance'>
Add an instance
</a>
</li>
</ul>
</nav>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
li {
margin: 10px 15px 20px;
}
a {
font-size: 1.2em;
}
a.selected {
font-weight: bold;
}
</style>

View File

@ -0,0 +1,25 @@
<:Head>
<title>About</title>
</:Head>
<Layout page='settings'>
<SettingsLayout page='about'>
<h1>About</h1>
<p>Pinafore is open-source software created by Nolan Lawson.</p>
<p>Icon thanks to sailboat by Gregor Cresnar from the Noun Project.</p>
</SettingsLayout>
</Layout>
<script>
import Layout from '../_components/Layout.html';
import SettingsLayout from './_components/SettingsLayout.html'
export default {
components: {
Layout,
SettingsLayout
}
};
</script>

View File

@ -3,6 +3,7 @@
</:Head>
<Layout page='settings'>
<SettingsLayout page='add-instance'>
<h1>Add an instance</h1>
<p>Log in to your instance to use Pinafore.</p>
@ -14,6 +15,7 @@
</form>
<p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
</SettingsLayout>
</Layout>
<style>
@media (max-width: 767px) {
@ -40,6 +42,7 @@
</style>
<script>
import Layout from '../_components/Layout.html';
import SettingsLayout from './_components/SettingsLayout.html'
import { registerApplication, generateAuthLink, getAccessTokenFromAuthCode } from '../_utils/mastodon'
import { databasePromise } from '../_utils/database'
import { store } from '../_utils/store'
@ -57,7 +60,8 @@
}
},
components: {
Layout
Layout,
SettingsLayout
},
store: () => store,
methods: {

View File

@ -3,17 +3,20 @@
</:Head>
<Layout page='settings'>
<SettingsLayout page='home'>
<h1>Settings</h1>
<p>This is the 'settings' page. There's not much here.</p>
</SettingsLayout>
</Layout>
<script>
import Layout from '../_components/Layout.html';
import SettingsLayout from './_components/SettingsLayout.html'
export default {
components: {
Layout
Layout,
SettingsLayout
}
};
</script>

View File

@ -33,6 +33,5 @@
and anything else it needs to hydrate the app and
initialise the router -->
<script src='%sapper.main%'></script>
<!-- Icon thanks to sailboat by Gregor Cresnar from the Noun Project -->
</body>
</html>