From 5b7f37aed8f70273c8d5fcd49abb6d4507476b86 Mon Sep 17 00:00:00 2001
From: Matt Baer <matt@write.as>
Date: Thu, 9 Jan 2020 11:16:26 -0500
Subject: [PATCH] Restyle Import page

- Changes Import link location in dropdown menu
- Makes design consistent with Invite People page (and extracts some
  common CSS into core.less)
- Selects the user's first blog by default in the dropdown
- Changes the copy a bit

Ref T609
---
 account_import.go                  |  2 +-
 less/core.less                     | 18 ++++++++++
 templates/user/import.tmpl         | 53 ++++++++++++++++++------------
 templates/user/include/header.tmpl |  4 +--
 templates/user/invite.tmpl         | 15 ++-------
 5 files changed, 55 insertions(+), 37 deletions(-)

diff --git a/account_import.go b/account_import.go
index 8d8a6e7..87882c6 100644
--- a/account_import.go
+++ b/account_import.go
@@ -18,7 +18,7 @@ import (
 
 func viewImport(app *App, u *User, w http.ResponseWriter, r *http.Request) error {
 	// Fetch extra user data
-	p := NewUserPage(app, r, u, "Import", nil)
+	p := NewUserPage(app, r, u, "Import Posts", nil)
 
 	c, err := app.db.GetCollections(u, app.Config().App.Host)
 	if err != nil {
diff --git a/less/core.less b/less/core.less
index 8844c84..c963e1a 100644
--- a/less/core.less
+++ b/less/core.less
@@ -1317,6 +1317,24 @@ form {
 		font-size: 0.86em;
 		line-height: 2;
 	}
+
+	&.prominent {
+		margin: 1em 0;
+
+		label {
+			font-weight: bold;
+		}
+		input, select {
+			width: 100%;
+		}
+		select {
+			font-size: 1em;
+			padding: 0.5rem;
+			display: block;
+			border-radius: 0.25rem;
+			margin: 0.5rem 0;
+		}
+	}
 }
 div.row {
 	display: flex;
diff --git a/templates/user/import.tmpl b/templates/user/import.tmpl
index 0fd8a93..2b6a4c3 100644
--- a/templates/user/import.tmpl
+++ b/templates/user/import.tmpl
@@ -1,37 +1,48 @@
 {{define "import"}}
 {{template "header" .}}
+	<style>
+		input[type=file] {
+			padding: 0;
+			font-size: 0.86em;
+			display: block;
+			margin: 0.5rem 0;
+		}
+		label {
+			display: block;
+			margin: 1em 0;
+		}
+	</style>
 
 <div class="snug content-container">
+	<h1 id="import-header">Import posts</h1>
 	{{if .Message}}
 	<div class="alert {{if .InfoMsg}}info{{else}}success{{end}}">
 		<p>{{.Message}}</p>
 	</div>
 	{{end}}
-	<h2 id="posts-header">Import</h2>
-	<p>Upload text or markdown files to import as posts.</p>
+	{{if .Flashes}}
+		<ul class="errors">
+			{{range .Flashes}}<li class="urgent">{{.}}</li>{{end}}
+		</ul>
+	{{end}}
+	<p>Publish plain text or Markdown files to your account by uploading them below.</p>
 	<div class="formContainer">
-		<form id="importPosts" class="import" enctype="multipart/form-data" action="/api/me/import" method="POST">
-			<label for="file" hidden>Browse files to upload</label>
-			<input class="fileInput" name="files" type="file" multiple accept="text/markdown, text/plain"/>
-			<br />
-			<label for="collection">Select a blog to import the posts under.</label>
-			<select name="collection">
-				{{range $i, $el := .Collections}}
-				<option value={{.Alias}}>
-					{{if .Title}}{{.Title}}{{else}}{{.Alias}}{{end}}
-				</option>
-				{{end}}
-				<option value="" selected>drafts</option>
-			</select>
-			<br />
+		<form id="importPosts" class="prominent" enctype="multipart/form-data" action="/api/me/import" method="POST">
+			<label>Select some files to import:
+				<input class="fileInput" name="files" type="file" multiple accept="text/markdown, text/plain"/>
+			</label>
+			<label>
+				Import these posts to:
+				<select name="collection">
+					{{range $i, $el := .Collections}}
+						<option value="{{.Alias}}" {{if eq $i 0}}selected{{end}}>{{.DisplayTitle}}</option>
+					{{end}}
+					<option value="">Drafts</option>
+				</select>
+			</label>
 			<input type="submit" value="Import" />
 		</form>
 	</div>
-	{{if .Flashes}}
-	<ul class="errors">
-		{{range .Flashes}}<li class="urgent">{{.}}</li>{{end}}
-	</ul>
-	{{end}}
 </div>
 
 {{template "footer" .}}
diff --git a/templates/user/include/header.tmpl b/templates/user/include/header.tmpl
index 3b57387..0704854 100644
--- a/templates/user/include/header.tmpl
+++ b/templates/user/include/header.tmpl
@@ -10,8 +10,8 @@
 						<li class="separator"><hr /></li>
 						{{if .IsAdmin}}<li><a href="/admin">Admin</a></li>{{end}}
 						<li><a href="/me/settings">Settings</a></li>
+						<li><a href="/me/import">Import posts</a></li>
 						<li><a href="/me/export">Export</a></li>
-						<li><a href="/me/import">Import</a></li>
 						<li class="separator"><hr /></li>
 						<li><a href="/me/logout">Log out</a></li>
 					</ul></li>
@@ -33,8 +33,8 @@
 				<ul><li><a>{{.Username}}</a> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /><ul>
 						{{if .IsAdmin}}<li><a href="/admin">Admin dashboard</a></li>{{end}}
 						<li><a href="/me/settings">Account settings</a></li>
+						<li><a href="/me/import">Import posts</a></li>
 						<li><a href="/me/export">Export</a></li>
-						<li><a href="/me/import">Import</a></li>
 						{{if .CanInvite}}<li><a href="/me/invites">Invite people</a></li>{{end}}
 						<li class="separator"><hr /></li>
 						<li><a href="/me/logout">Log out</a></li>
diff --git a/templates/user/invite.tmpl b/templates/user/invite.tmpl
index 1985bd5..4365e07 100644
--- a/templates/user/invite.tmpl
+++ b/templates/user/invite.tmpl
@@ -8,18 +8,7 @@
 	margin-left: 0.5em;
 	margin-right: 0;
 }
-label {
-	font-weight: bold;
-}
-select {
-	font-size: 1em;
-	width: 100%;
-	padding: 0.5rem;
-	display: block;
-	border-radius: 0.25rem;
-	margin: 0.5rem 0;
-}
-input, table.classy {
+table.classy {
 	width: 100%;
 }
 table.classy.export a {
@@ -34,7 +23,7 @@ table td {
 	<h1>Invite people</h1>
 	<p>Invite others to join <em>{{.SiteName}}</em> by generating and sharing invite links below.</p>
 
-	<form style="margin: 2em 0" action="/api/me/invites" method="post">
+	<form style="margin: 2em 0" class="prominent" action="/api/me/invites" method="post">
 		<div class="row">
 			<div class="half">
 				<label for="uses">Maximum number of uses:</label>