flesh out settings

This commit is contained in:
Nolan Lawson 2018-01-13 10:53:25 -08:00
parent 101575c0f8
commit 1582cd10e1
9 changed files with 134 additions and 30 deletions

View File

@ -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/add-instance">log in to an instance</a>.</p>
<p>To get started, <a href="/settings/instances">log in to an instance</a>.</p>
<p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
</FreeTextLayout>
@ -15,6 +15,7 @@
.banner {
display: flex;
align-items: center;
margin: 0 0 30px;
}
svg {
width: 70px;

View File

@ -1,5 +1,5 @@
const WEBSITE = 'https://pinafore.social'
const REDIRECT_URI = (typeof location !== 'undefined' ? location.origin : 'https://pinafore.social') + '/settings/add-instance'
const REDIRECT_URI = (typeof location !== 'undefined' ? location.origin : 'https://pinafore.social') + '/settings/instances'
const SCOPES = 'read write follow'
const CLIENT_NAME = 'Pinafore'

View File

@ -5,6 +5,14 @@
<slot></slot>
</FreeTextLayout>
</div>
<style>
.settings {
margin-top: 20px;
}
:global(.settings .free-text h1) {
margin-bottom: 30px;
}
</style>
<script>
import SettingsNav from './SettingsNav.html';
import FreeTextLayout from '../../_components/FreeTextLayout'

View File

@ -1,20 +1,10 @@
<nav>
<ul>
{{#each navItems as navItem}}
<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>
<SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}"/>
</li>
{{/each}}
</ul>
</nav>
@ -28,15 +18,57 @@
}
li {
margin: 10px 15px 20px;
margin: 10px 0;
font-size: 1em;
}
a {
font-size: 1.2em;
li::after {
content: '>';
margin: 0 15px;
color: var(--anchor-text);
}
a.selected {
font-weight: bold;
li:last-child::after {
content: '';
margin-left: 0;
font-size: 1em;
}
</style>
<script>
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'
}
}
export default {
components: {
SettingsNavItem
},
computed: {
navItems: page => {
let res = [NAV_ITEMS.home]
if (page === 'home') {
return res
}
res.push(NAV_ITEMS[page])
return res
}
}
}
</script>

View File

@ -0,0 +1,24 @@
<a class='{{getCurrentClass(page, name)}}' aria-label='{{getAriaLabel(page, name, label)}}' href='{{href}}'>
{{label}}
</a>
<style>
a {
font-size: 1.2em;
}
a.selected {
font-weight: 600;
}
</style>
<script>
export default {
helpers: {
getCurrentClass(page, name) {
return page === name ? "selected" : ""
},
getAriaLabel(page, name, label) {
return page === name ? "Current page" : label
}
}
}
</script>

View File

@ -1,10 +1,10 @@
<:Head>
<title>About</title>
<title>About Pinafore</title>
</:Head>
<Layout page='settings'>
<SettingsLayout page='about'>
<h1>About</h1>
<h1>About Pinafore</h1>
<p>Pinafore is open-source software created by Nolan Lawson.</p>

View File

@ -6,9 +6,13 @@
<SettingsLayout page='home'>
<h1>Settings</h1>
<ul>
<li><a href="/settings/instances">Instances</a></li>
<li><a href="/settings/about">About Pinafore</a></li>
</ul>
</SettingsLayout>
</Layout>
<script>
import Layout from '../_components/Layout.html';
import SettingsLayout from './_components/SettingsLayout.html'
@ -20,3 +24,30 @@
}
};
</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>

View File

@ -1,12 +1,12 @@
<:Head>
<title>Instance Wizard</title>
<title>Instances</title>
</:Head>
<Layout page='settings'>
<SettingsLayout page='add-instance'>
<h1>Add an instance</h1>
<SettingsLayout page='instances'>
<h1>Instances</h1>
<p>Log in to your instance to use Pinafore.</p>
<p>Connect to an instance to start using Pinafore.</p>
<form on:submit='onSubmit(event)'>
<label for="instanceInput">Instance name:</label>

View File

@ -1,5 +1,6 @@
:root {
$main-theme-color: royalblue; // also: crimson, forestgreen, hotpink
$anchor-color: $main-theme-color;
$main-text-color: #333;
$border-color: #dadada;
$main-bg-color: white;
@ -18,7 +19,7 @@
--button-bg-hover: darken($main-bg-color, 5%);
--input-border: $border-color;
--anchor-text: $main-theme-color;
--anchor-text: $anchor-color;
--main-bg: $main-bg-color;
--body-bg: lighten($main-theme-color, 38%);
--body-text-color: $main-text-color;
@ -45,4 +46,11 @@
--action-button-fill-color: lighten($main-theme-color, 15%);
--action-button-fill-color-hover: lighten($main-theme-color, 20%);
--action-button-fill-color-active: lighten($main-theme-color, 5%);
--settings-list-item-bg: $main-bg-color;
--settings-list-item-text: $main-theme-color;
--settings-list-item-text-hover: $main-theme-color;
--settings-list-item-border: $border-color;
--settings-list-item-bg-active: darken($main-bg-color, 10%);
--settings-list-item-bg-hover: darken($main-bg-color, 2%);
}