From f64792417b302332d87df667815384074c591db6 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 8 Jan 2018 17:44:29 -0800
Subject: [PATCH] add a settings nav

---
 assets/global.css                             |  1 +
 routes/_components/Layout.html                |  2 +-
 .../settings/_components/SettingsLayout.html  | 14 +++++++
 routes/settings/_components/SettingsNav.html  | 42 +++++++++++++++++++
 routes/settings/about.html                    | 25 +++++++++++
 routes/settings/add-instance.html             | 22 ++++++----
 routes/settings/index.html                    |  9 ++--
 templates/2xx.html                            |  1 -
 8 files changed, 102 insertions(+), 14 deletions(-)
 create mode 100644 routes/settings/_components/SettingsLayout.html
 create mode 100644 routes/settings/_components/SettingsNav.html
 create mode 100644 routes/settings/about.html

diff --git a/assets/global.css b/assets/global.css
index a9befdb..5530eea 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -25,6 +25,7 @@ h1 {
 
 a {
 	color: royalblue;
+	text-decoration: none;
 }
 
 a:visited {
diff --git a/routes/_components/Layout.html b/routes/_components/Layout.html
index 64ac22e..d2476a4 100644
--- a/routes/_components/Layout.html
+++ b/routes/_components/Layout.html
@@ -1,4 +1,4 @@
-<Nav page={{page}}/>
+<Nav page={{page}} />
 
 <main>
 	<slot></slot>
diff --git a/routes/settings/_components/SettingsLayout.html b/routes/settings/_components/SettingsLayout.html
new file mode 100644
index 0000000..f0ffcdc
--- /dev/null
+++ b/routes/settings/_components/SettingsLayout.html
@@ -0,0 +1,14 @@
+<SettingsNav page={{page}} />
+
+<div class="settings">
+  <slot></slot>
+</div>
+<script>
+  import SettingsNav from './SettingsNav.html';
+
+  export default {
+    components: {
+      SettingsNav
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/routes/settings/_components/SettingsNav.html b/routes/settings/_components/SettingsNav.html
new file mode 100644
index 0000000..ab81f03
--- /dev/null
+++ b/routes/settings/_components/SettingsNav.html
@@ -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>
\ No newline at end of file
diff --git a/routes/settings/about.html b/routes/settings/about.html
new file mode 100644
index 0000000..b9e6eeb
--- /dev/null
+++ b/routes/settings/about.html
@@ -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>
\ No newline at end of file
diff --git a/routes/settings/add-instance.html b/routes/settings/add-instance.html
index ab52a03..2f42cdc 100644
--- a/routes/settings/add-instance.html
+++ b/routes/settings/add-instance.html
@@ -3,17 +3,19 @@
 </:Head>
 
 <Layout page='settings'>
-  <h1>Add an instance</h1>
+  <SettingsLayout page='add-instance'>
+    <h1>Add an instance</h1>
 
-  <p>Log in to your instance to use Pinafore.</p>
+    <p>Log in to your instance to use Pinafore.</p>
 
-  <form on:submit='handleSubmit(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>
+    <form on:submit='handleSubmit(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>
 
-  <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>
+  </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: {
diff --git a/routes/settings/index.html b/routes/settings/index.html
index ca0691f..a1c5999 100644
--- a/routes/settings/index.html
+++ b/routes/settings/index.html
@@ -3,17 +3,20 @@
 </:Head>
 
 <Layout page='settings'>
-  <h1>Settings</h1>
+  <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>
\ No newline at end of file
diff --git a/templates/2xx.html b/templates/2xx.html
index a92fd3e..6fa866c 100644
--- a/templates/2xx.html
+++ b/templates/2xx.html
@@ -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>
\ No newline at end of file