From 1582cd10e11ed78f8d9121f077ab5bf3e53d35d8 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sat, 13 Jan 2018 10:53:25 -0800 Subject: [PATCH] flesh out settings --- routes/_components/NotLoggedInHome.html | 3 +- routes/_utils/mastodon.js | 2 +- .../settings/_components/SettingsLayout.html | 8 +++ routes/settings/_components/SettingsNav.html | 70 ++++++++++++++----- .../settings/_components/SettingsNavItem.html | 24 +++++++ routes/settings/about.html | 4 +- routes/settings/index.html | 35 +++++++++- .../{add-instance.html => instances.html} | 8 +-- scss/theme-default.scss | 10 ++- 9 files changed, 134 insertions(+), 30 deletions(-) create mode 100644 routes/settings/_components/SettingsNavItem.html rename routes/settings/{add-instance.html => instances.html} (95%) diff --git a/routes/_components/NotLoggedInHome.html b/routes/_components/NotLoggedInHome.html index d49172c..798e1f2 100644 --- a/routes/_components/NotLoggedInHome.html +++ b/routes/_components/NotLoggedInHome.html @@ -7,7 +7,7 @@

Pinafore is a web client for Mastodon, optimized for speed and simplicity.

-

To get started, log in to an instance.

+

To get started, log in to an instance.

Don't have an instance? Join Mastodon!

@@ -15,6 +15,7 @@ .banner { display: flex; align-items: center; + margin: 0 0 30px; } svg { width: 70px; diff --git a/routes/_utils/mastodon.js b/routes/_utils/mastodon.js index 880c3ed..9542623 100644 --- a/routes/_utils/mastodon.js +++ b/routes/_utils/mastodon.js @@ -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' diff --git a/routes/settings/_components/SettingsLayout.html b/routes/settings/_components/SettingsLayout.html index 35022d1..4f2bb9b 100644 --- a/routes/settings/_components/SettingsLayout.html +++ b/routes/settings/_components/SettingsLayout.html @@ -5,6 +5,14 @@ + \ No newline at end of file diff --git a/routes/settings/_components/SettingsNavItem.html b/routes/settings/_components/SettingsNavItem.html new file mode 100644 index 0000000..56457fc --- /dev/null +++ b/routes/settings/_components/SettingsNavItem.html @@ -0,0 +1,24 @@ + + {{label}} + + + \ No newline at end of file diff --git a/routes/settings/about.html b/routes/settings/about.html index b9e6eeb..6e8f616 100644 --- a/routes/settings/about.html +++ b/routes/settings/about.html @@ -1,10 +1,10 @@ <:Head> - About + About Pinafore -

About

+

About Pinafore

Pinafore is open-source software created by Nolan Lawson.

diff --git a/routes/settings/index.html b/routes/settings/index.html index a1c5999..b1f7071 100644 --- a/routes/settings/index.html +++ b/routes/settings/index.html @@ -6,9 +6,13 @@

Settings

+ +
- \ No newline at end of file + + \ No newline at end of file diff --git a/routes/settings/add-instance.html b/routes/settings/instances.html similarity index 95% rename from routes/settings/add-instance.html rename to routes/settings/instances.html index 26f688d..812abb5 100644 --- a/routes/settings/add-instance.html +++ b/routes/settings/instances.html @@ -1,12 +1,12 @@ <:Head> - Instance Wizard + Instances - -

Add an instance

+ +

Instances

-

Log in to your instance to use Pinafore.

+

Connect to an instance to start using Pinafore.

diff --git a/scss/theme-default.scss b/scss/theme-default.scss index 99f545e..5960ef4 100644 --- a/scss/theme-default.scss +++ b/scss/theme-default.scss @@ -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%); } \ No newline at end of file