From 46dbb10433392a53abe715013a01ea63a0589d7a Mon Sep 17 00:00:00 2001
From: Matt Baer <matt@write.as>
Date: Tue, 25 Feb 2020 14:28:34 -0500
Subject: [PATCH] Make Admin Settings page more user-friendly

- Add a description to each config item
- Change item names to make more sense

Ref T694
---
 less/admin.less                        |  29 +++++
 less/core.less                         |  14 ---
 templates/user/admin/app-settings.tmpl | 147 ++++++++++++++++++-------
 3 files changed, 137 insertions(+), 53 deletions(-)

diff --git a/less/admin.less b/less/admin.less
index ec49292..d9d659e 100644
--- a/less/admin.less
+++ b/less/admin.less
@@ -54,4 +54,33 @@ nav#admin {
 		font-family: @sansFont;
 		font-size: 0.86em;
 	}
+}
+
+.features {
+	margin: 1em 0;
+
+	div {
+		&:first-child {
+			font-weight: bold;
+		}
+		&+div {
+			padding-left: 1em;
+		}
+
+		p {
+			font-weight: normal;
+			margin: 0.5rem 0;
+			font-size: 0.86em;
+			color: #666;
+		}
+	}
+}
+
+@media (max-width: 600px) {
+	div.row.features {
+		align-items: start;
+	}
+	.features div + div {
+		padding-left: 0;
+	}
 }
\ No newline at end of file
diff --git a/less/core.less b/less/core.less
index 231f373..7232660 100644
--- a/less/core.less
+++ b/less/core.less
@@ -868,20 +868,6 @@ input {
 			text-align: center;
 		}
 	}
-	div.features {
-		margin-top: 1.5em;
-		text-align: center;
-		font-size: 0.86em;
-		ul {
-			text-align: left;
-			max-width: 26em;
-			margin-left: auto !important;
-			margin-right: auto !important;
-			li.soon, span.soon {
-				color: lighten(#111, 40%);
-			}
-		}
-	}
 	div.blurbs {
 		>h2 {
 			text-align: center;
diff --git a/templates/user/admin/app-settings.tmpl b/templates/user/admin/app-settings.tmpl
index 4af6a44..3e0fdf7 100644
--- a/templates/user/admin/app-settings.tmpl
+++ b/templates/user/admin/app-settings.tmpl
@@ -24,55 +24,124 @@ p.docs {
 
 	{{if .ConfigMessage}}<p class="success" style="text-align: center">{{.ConfigMessage}}</p>{{end}}
 
-	<p class="docs">Read more in the <a href="https://writefreely.org/docs/{{.OfficialVersion}}/admin/config">configuration docs</a>.</p>
-
 	<form action="/admin/update/config" method="post">
-	<div class="ui attached table segment">
-		<dl class="dl-horizontal admin-dl-horizontal">
-			<dt{{if .Config.SingleUser}} class="invisible"{{end}}>Site Name</dt>
-			<dd{{if .Config.SingleUser}} class="invisible"{{end}}><input type="text" name="site_name" id="site_name" class="inline" value="{{.Config.SiteName}}" style="width: 14em;" /></dd>
-			<dt{{if .Config.SingleUser}} class="invisible"{{end}}>Site Description</dt>
-			<dd{{if .Config.SingleUser}} class="invisible"{{end}}><input type="text" name="site_desc" id="site_desc" class="inline" value="{{.Config.SiteDesc}}" style="width: 14em;" /></dd>
-			<dt>Host</dt>
-			<dd>{{.Config.Host}}</dd>
-			<dt>User Mode</dt>
-			<dd>{{if .Config.SingleUser}}Single user{{else}}Multiple users{{end}}</dd>
-			<dt{{if .Config.SingleUser}} class="invisible"{{end}}>Landing Page</dt>
-			<dd{{if .Config.SingleUser}} class="invisible"{{end}}><input type="text" name="landing" id="landing" class="inline" value="{{.Config.Landing}}" style="width: 14em;" /></dd>
-			<dt{{if .Config.SingleUser}} class="invisible"{{end}}><label for="open_registration">Open Registrations</label></dt>
-			<dd{{if .Config.SingleUser}} class="invisible"{{end}}><input type="checkbox" name="open_registration" id="open_registration" {{if .Config.OpenRegistration}}checked="checked"{{end}} /></dd>
-			<dt><label for="min_username_len">Minimum Username Length</label></dt>
-			<dd><input type="number" name="min_username_len" id="min_username_len" class="inline" min="1" max="100" value="{{.Config.MinUsernameLen}}" /></dd>
-			<dt{{if .Config.SingleUser}} class="invisible"{{end}}><label for="max_blogs">Maximum Blogs per User</label></dt>
-			<dd{{if .Config.SingleUser}} class="invisible"{{end}}><input type="number" name="max_blogs" id="max_blogs" class="inline" min="1" value="{{.Config.MaxBlogs}}" /></dd>
-			<dt><label for="federation">Federation</label></dt>
-			<dd><input type="checkbox" name="federation" id="federation" {{if .Config.Federation}}checked="checked"{{end}} /></dd>
-			<dt><label for="public_stats">Public Stats</label></dt>
-			<dd><input type="checkbox" name="public_stats" id="public_stats" {{if .Config.PublicStats}}checked="checked"{{end}} /></dd>
-			<dt><label for="private">Private Instance</label></dt>
-			<dd><input type="checkbox" name="private" id="private" {{if .Config.Private}}checked="checked"{{end}} /></dd>
-			<dt{{if .Config.SingleUser}} class="invisible"{{end}}><label for="local_timeline">Local Timeline</label></dt>
-			<dd{{if .Config.SingleUser}} class="invisible"{{end}}><input type="checkbox" name="local_timeline" id="local_timeline" {{if .Config.LocalTimeline}}checked="checked"{{end}} /></dd>
-			<dt{{if .Config.SingleUser}} class="invisible"{{end}}><label for="user_invites">Allow sending invitations by</label></dt>
-			<dd{{if .Config.SingleUser}} class="invisible"{{end}}>
+		<div class="features row">
+			<div{{if .Config.SingleUser}} class="invisible"{{end}}>
+				Site Title
+				<p>Your public site name.</p>
+			</div>
+			<div{{if .Config.SingleUser}} class="invisible"{{end}}><input type="text" name="site_name" id="site_name" class="inline" value="{{.Config.SiteName}}" style="width: 14em;"/></div>
+		</div>
+		<div class="features row">
+			<div{{if .Config.SingleUser}} class="invisible"{{end}}>
+				Site Description
+				<p>Describe your site &mdash; this shows in your site's metadata.</p>
+			</div>
+			<div{{if .Config.SingleUser}} class="invisible"{{end}}><input type="text" name="site_desc" id="site_desc" class="inline" value="{{.Config.SiteDesc}}" style="width: 14em;"/></div>
+		</div>
+		<div class="features row">
+			<div>
+				Host
+				<p>The address where your site lives.</p>
+			</div>
+			<div>{{.Config.Host}}</div>
+		</div>
+		<div class="features row">
+			<div>
+				Community Mode
+				<p>Whether your site is made for one person or many.</p>
+			</div>
+			<div>{{if .Config.SingleUser}}Single user{{else}}Multiple users{{end}}</div>
+		</div>
+		<div class="features row">
+			<div{{if .Config.SingleUser}} class="invisible"{{end}}>
+				Landing Page
+				<p>The page that logged-out visitors will see first. This should be a path, e.g. <code>/read</code></p>
+			</div>
+			<div{{if .Config.SingleUser}} class="invisible"{{end}}><input type="text" name="landing" id="landing" class="inline" value="{{.Config.Landing}}" style="width: 14em;"/></div>
+		</div>
+		<div class="features row">
+			<div{{if .Config.SingleUser}} class="invisible"{{end}}><label for="open_registration">
+					Open Registrations
+					<p>Whether or not registration is open to anyone who visits the site.</p>
+				</label></div>
+			<div{{if .Config.SingleUser}} class="invisible"{{end}}><input type="checkbox" name="open_registration" id="open_registration" {{if .Config.OpenRegistration}}checked="checked"{{end}} />
+			</div>
+		</div>
+		<div class="features row">
+			<div><label for="min_username_len">
+					Minimum Username Length
+					<p>The minimum number of characters allowed in a username. (Recommended: 2 or more.)</p>
+				</label></div>
+			<div><input type="number" name="min_username_len" id="min_username_len" class="inline" min="1" max="100" value="{{.Config.MinUsernameLen}}"/></div>
+		</div>
+		<div class="features row">
+			<div{{if .Config.SingleUser}} class="invisible"{{end}}><label for="max_blogs">
+					Maximum Blogs per User
+					<p>Keep things simple by setting this to <strong>1</strong>, unlimited by setting to <strong>0</strong>, or pick another amount.</p>
+				</label></div>
+			<div{{if .Config.SingleUser}} class="invisible"{{end}}><input type="number" name="max_blogs" id="max_blogs" class="inline" min="0" value="{{.Config.MaxBlogs}}"/></div>
+		</div>
+		<div class="features row">
+			<div><label for="federation">
+					Federation
+					<p>Enable accounts on this site to propagate their posts via the ActivityPub protocol.</p>
+				</label></div>
+			<div><input type="checkbox" name="federation" id="federation" {{if .Config.Federation}}checked="checked"{{end}} /></div>
+		</div>
+		<div class="features row">
+			<div><label for="public_stats">
+					Public Stats
+					<p>Publicly display the number of users and posts on your <strong>About</strong> page.</p>
+				</label></div>
+			<div><input type="checkbox" name="public_stats" id="public_stats" {{if .Config.PublicStats}}checked="checked"{{end}} /></div>
+		</div>
+		<div class="features row">
+			<div><label for="private">
+					Private Instance
+					<p>Make this instance accessible only to those with an account.</p>
+				</label></div>
+			<div><input type="checkbox" name="private" id="private" {{if .Config.Private}}checked="checked"{{end}} /></div>
+		</div>
+		<div class="features row">
+			<div{{if .Config.SingleUser}} class="invisible"{{end}}><label for="local_timeline">
+					Reader
+					<p>Show a feed of user posts for anyone who chooses to share there.</p>
+				</label></div>
+			<div{{if .Config.SingleUser}} class="invisible"{{end}}><input type="checkbox" name="local_timeline" id="local_timeline" {{if .Config.LocalTimeline}}checked="checked"{{end}} /></div>
+		</div>
+		<div class="features row">
+			<div{{if .Config.SingleUser}} class="invisible"{{end}}><label for="user_invites">
+					Allow invitations from...
+					<p>Choose who on this instance can invite new people.</p>
+				</label></div>
+			<div{{if .Config.SingleUser}} class="invisible"{{end}}>
 				<select name="user_invites" id="user_invites">
 					<option value="none" {{if eq .Config.UserInvites ""}}selected="selected"{{end}}>No one</option>
-					<option value="user" {{if eq .Config.UserInvites "user"}}selected="selected"{{end}}>Users</option>
-					<option value="admin" {{if eq .Config.UserInvites "admin"}}selected="selected"{{end}}>Admins</option>
+					<option value="admin" {{if eq .Config.UserInvites "admin"}}selected="selected"{{end}}>Only Admins</option>
+					<option value="user" {{if eq .Config.UserInvites "user"}}selected="selected"{{end}}>All Users</option>
 				</select>
-			</dd>
-			<dt{{if .Config.SingleUser}} class="invisible"{{end}}><label for="default_visibility">Default blog visibility</label></dt>
-			<dd{{if .Config.SingleUser}} class="invisible"{{end}}>
+			</div>
+		</div>
+		<div class="features row">
+			<div{{if .Config.SingleUser}} class="invisible"{{end}}><label for="default_visibility">
+					Default blog visibility
+					<p>The default setting for new accounts and blogs.</p>
+				</label></div>
+			<div{{if .Config.SingleUser}} class="invisible"{{end}}>
 				<select name="default_visibility" id="default_visibility">
 					<option value="unlisted" {{if eq .Config.DefaultVisibility "unlisted"}}selected="selected"{{end}}>Unlisted</option>
 					<option value="public" {{if eq .Config.DefaultVisibility "public"}}selected="selected"{{end}}>Public</option>
 					<option value="private" {{if eq .Config.DefaultVisibility "private"}}selected="selected"{{end}}>Private</option>
 				</select>
-			</dd>
-		</dl>
-		<input type="submit" value="Save Settings" />
-	</div>
+			</div>
+		</div>
+		<div class="features row">
+			<input type="submit" value="Save Settings" />
+		</div>
 	</form>
+
+	<p class="docs">Still have questions? Read more details in the <a href="https://writefreely.org/docs/{{.OfficialVersion}}/admin/config">configuration docs</a>.</p>
 </div>
 
 <script>