flesh out settings more
This commit is contained in:
parent
af8cf63caa
commit
b7d2a51ee7
|
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
<p>Pinafore is a web client for <a href="https://joinmastodon.org">Mastodon</a>, optimized for speed and simplicity.</p>
|
||||
|
||||
<p>To get started, <a href="/settings/instances">log in to an instance</a>.</p>
|
||||
<p>To get started, <a href="/settings/instances/add">log in to an instance</a>.</p>
|
||||
|
||||
<p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
|
||||
</FreeTextLayout>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const WEBSITE = 'https://pinafore.social'
|
||||
const REDIRECT_URI = (typeof location !== 'undefined' ? location.origin : 'https://pinafore.social') + '/settings/instances'
|
||||
const REDIRECT_URI = (typeof location !== 'undefined' ? location.origin : 'https://pinafore.social') + '/settings/instances/add'
|
||||
const SCOPES = 'read write follow'
|
||||
const CLIENT_NAME = 'Pinafore'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<SettingsNav page={{page}} />
|
||||
<SettingsNav :page :label/>
|
||||
|
||||
<div class="settings">
|
||||
<FreeTextLayout>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<ul>
|
||||
<slot></slot>
|
||||
</ul>
|
||||
<style>
|
||||
ul {
|
||||
list-style: none;
|
||||
width: 80%;
|
||||
border: 1px solid var(--settings-list-item-border);
|
||||
margin: 20px auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<li><a :href>{{label}}</a></li>
|
||||
<style>
|
||||
li {
|
||||
border: 1px solid var(--settings-list-item-border);
|
||||
font-size: 1.3em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
a, a:visited {
|
||||
color: var(--settings-list-item-text);
|
||||
background: var(--settings-list-item-bg);
|
||||
padding: 20px;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
background: var(--settings-list-item-bg-hover);
|
||||
color: var(--settings-list-item-text-hover);
|
||||
}
|
||||
a:active {
|
||||
background: var(--settings-list-item-bg-active);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,9 +2,12 @@
|
|||
<ul>
|
||||
{{#each navItems as navItem}}
|
||||
<li>
|
||||
<SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}"/>
|
||||
<SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}" />
|
||||
</li>
|
||||
{{/each}}
|
||||
<li>
|
||||
<SettingsNavItem :page name="{{page}}" href="/{{page}}" :label />
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
|
@ -39,21 +42,10 @@
|
|||
import SettingsNavItem from './SettingsNavItem.html'
|
||||
|
||||
const NAV_ITEMS = {
|
||||
home: {
|
||||
name: 'home',
|
||||
href: '/settings',
|
||||
label: 'Settings'
|
||||
},
|
||||
about: {
|
||||
name: 'about',
|
||||
href: '/settings/about',
|
||||
label: 'About Pinafore'
|
||||
},
|
||||
instances: {
|
||||
name: 'instances',
|
||||
href: '/settings/instances',
|
||||
label: 'Instances'
|
||||
}
|
||||
'settings': 'Settings',
|
||||
'settings/about': 'About Pinafore',
|
||||
'settings/instances': 'Instances',
|
||||
'settings/instances/add': 'Add an instance',
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
@ -62,11 +54,19 @@
|
|||
},
|
||||
computed: {
|
||||
navItems: page => {
|
||||
let res = [NAV_ITEMS.home]
|
||||
if (page === 'home') {
|
||||
return res
|
||||
let res = []
|
||||
let breadcrumbs = page.split('/')
|
||||
let path = ''
|
||||
for (let i = 0; i < breadcrumbs.length - 1; i++) {
|
||||
let currentPage = breadcrumbs[i]
|
||||
path += currentPage
|
||||
res.push({
|
||||
label: NAV_ITEMS[path],
|
||||
href: `/${path}`,
|
||||
name: path
|
||||
})
|
||||
path += '/'
|
||||
}
|
||||
res.push(NAV_ITEMS[page])
|
||||
return res
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
</:Head>
|
||||
|
||||
<Layout page='settings'>
|
||||
<SettingsLayout page='about'>
|
||||
<SettingsLayout page='settings/about' label="About Pinafore">
|
||||
<h1>About Pinafore</h1>
|
||||
|
||||
<p>Pinafore is open-source software created by Nolan Lawson.</p>
|
||||
|
|
|
|||
|
|
@ -3,51 +3,28 @@
|
|||
</:Head>
|
||||
|
||||
<Layout page='settings'>
|
||||
<SettingsLayout page='home'>
|
||||
<SettingsLayout page='settings' label="Settings">
|
||||
<h1>Settings</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="/settings/instances">Instances</a></li>
|
||||
<li><a href="/settings/about">About Pinafore</a></li>
|
||||
</ul>
|
||||
<SettingsList>
|
||||
<SettingsListItem href="/settings/instances" label="Instances"/>
|
||||
<SettingsListItem href="/settings/about" label="About Pinafore"/>
|
||||
</SettingsList>
|
||||
|
||||
</SettingsLayout>
|
||||
</Layout>
|
||||
<script>
|
||||
import Layout from '../_components/Layout.html';
|
||||
import SettingsLayout from './_components/SettingsLayout.html'
|
||||
import SettingsList from './_components/SettingsList.html'
|
||||
import SettingsListItem from './_components/SettingsListItem.html'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Layout,
|
||||
SettingsLayout
|
||||
SettingsLayout,
|
||||
SettingsList,
|
||||
SettingsListItem
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
ul {
|
||||
list-style: none;
|
||||
width: 80%;
|
||||
border: 1px solid var(--settings-list-item-border);
|
||||
margin: 20px auto;
|
||||
}
|
||||
li {
|
||||
border: 1px solid var(--settings-list-item-border);
|
||||
font-size: 1.3em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
a, a:visited {
|
||||
color: var(--settings-list-item-text);
|
||||
background: var(--settings-list-item-bg);
|
||||
padding: 20px;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
background: var(--settings-list-item-bg-hover);
|
||||
color: var(--settings-list-item-text-hover);
|
||||
}
|
||||
a:active {
|
||||
background: var(--settings-list-item-bg-active);
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<:Head>
|
||||
<title>{{params.instanceName}}</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='settings'>
|
||||
<SettingsLayout page='settings/instances/{{params.instanceName}}' label="{{params.instanceName}}">
|
||||
<h1>{{params.instanceName}}</h1>
|
||||
</SettingsLayout>
|
||||
</Layout>
|
||||
<script>
|
||||
import { store } from '../../_utils/store'
|
||||
import Layout from '../../_components/Layout.html'
|
||||
import SettingsLayout from '../_components/SettingsLayout.html'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Layout,
|
||||
SettingsLayout
|
||||
},
|
||||
store: () => store
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,33 +1,25 @@
|
|||
<:Head>
|
||||
<title>Instances</title>
|
||||
<title>Add an Instance</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='settings'>
|
||||
<SettingsLayout page='instances'>
|
||||
<h1>Instances</h1>
|
||||
<SettingsLayout page='settings/instances/add' label="Add an Instance">
|
||||
<h1>Add an Instance</h1>
|
||||
|
||||
{{#if $isUserLoggedIn}}
|
||||
<ul class="instances-list">
|
||||
{{#each $loggedInInstancesAsList as instance}}
|
||||
<li class="instance-card">
|
||||
<span>{{instance.name}}</span>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
<p>Connect to an instance to log in.</p>
|
||||
{{else}}
|
||||
<p>Connect to an instance to start using Pinafore.</p>
|
||||
<p>Log in to an instance to start using Pinafore.</p>
|
||||
{{/if}}
|
||||
|
||||
{{#if !$isUserLoggedIn}}
|
||||
<form class="add-new-instance" on:submit='onSubmit(event)'>
|
||||
<label for="instanceInput">Instance name:</label>
|
||||
<input type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''>
|
||||
<button class="primary" type="submit" id="submitButton">Add instance</button>
|
||||
</form>
|
||||
{{/if}}
|
||||
<form class="add-new-instance" on:submit='onSubmit(event)'>
|
||||
<label for="instanceInput">Instance name:</label>
|
||||
<input type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''>
|
||||
<button class="primary" type="submit" id="submitButton">Add instance</button>
|
||||
</form>
|
||||
|
||||
{{#if !$isUserLoggedIn}}
|
||||
<p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
|
||||
<p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
|
||||
{{/if}}
|
||||
</SettingsLayout>
|
||||
</Layout>
|
||||
|
|
@ -55,11 +47,11 @@
|
|||
}
|
||||
</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'
|
||||
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'
|
||||
import { goto } from 'sapper/runtime.js'
|
||||
|
||||
export default {
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<:Head>
|
||||
<title>Instances</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='settings'>
|
||||
<SettingsLayout page='settings/instances' label="Instances">
|
||||
<h1>Instances</h1>
|
||||
|
||||
{{#if $isUserLoggedIn}}
|
||||
<p>Instances you've connected to:</p>
|
||||
<SettingsList>
|
||||
{{#each $loggedInInstancesAsList as instance}}
|
||||
<SettingsListItem href="/settings/instances/{{instance.name}}" label="{{instance.name}}"/>
|
||||
{{/each}}
|
||||
</SettingsList>
|
||||
<p><a href="/settings/instances/add">Add an instance</a></p>
|
||||
{{else}}
|
||||
<p><a href="/settings/instances/add">Connect to an instance</a> to start using Pinafore.</p>
|
||||
{{/if}}
|
||||
</SettingsLayout>
|
||||
</Layout>
|
||||
<script>
|
||||
import { store } from '../../_utils/store'
|
||||
import Layout from '../../_components/Layout.html'
|
||||
import SettingsLayout from '../_components/SettingsLayout.html'
|
||||
import SettingsList from '../_components/SettingsList.html'
|
||||
import SettingsListItem from '../_components/SettingsListItem.html'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Layout,
|
||||
SettingsLayout,
|
||||
SettingsList,
|
||||
SettingsListItem
|
||||
},
|
||||
store: () => store
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue