From f6bb683cc96716ffc4dc0a4011abd680854eb675 Mon Sep 17 00:00:00 2001
From: Wim Brand <fornax@fornaxian.com>
Date: Mon, 13 Aug 2018 22:02:07 +0200
Subject: [PATCH] make forms responsive. some accessibility fixes, fix panic in
 list viewer

---
 res/static/res/style/layout.css            | 14 +++++++++++---
 res/template/account/register.html         |  5 +++++
 res/template/fragments/api/filesystem.html |  5 +++++
 webcontroller/listViewer.go                |  2 +-
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/res/static/res/style/layout.css b/res/static/res/style/layout.css
index d166f9d..72203c1 100644
--- a/res/static/res/style/layout.css
+++ b/res/static/res/style/layout.css
@@ -109,7 +109,7 @@ body{
 .highlight_light  {background-color: var(--accent_color_light);  border-color: var(--accent_color_light_border);}
 .highlight_green  {background-color: rgba(0, 255, 0, 0.05);  border-color: #00d000;}
 .highlight_blue   {background-color: rgba(32, 32, 255, 0.2); border-color: rgb(54, 54, 255);}
-.highlight_red    {background-color: rgba(255, 0, 0, 0.05);  border-color: #B00000;}
+.highlight_red    {background-color: rgba(255, 0, 0, 0.1);  border-color: #B00000;}
 
 .border_top    {border-top-width:    1px; border-top-style:    solid;}
 .border_bottom {border-bottom-width: 1px; border-bottom-style: solid;}
@@ -141,11 +141,19 @@ a:hover {color: var(--highlight_color); text-decoration: underline;}
 	margin-left: auto;
 	margin-right: auto;
 	text-align: left;
-	max-width: 30em;
+	max-width: 35em;
 }
 table:not(.form) {border-collapse: collapse; width: 100%;}
 tr:not(.form)    {border-bottom: 1px var(--accent_color_medium_border) solid;}
-tr > td          {padding: 6px;}
+tr > td          {padding: 0.5em;}
+@media(max-width: 28em) {
+	tr > td {
+		box-sizing: border-box;
+		float: left;
+		width: 100%;
+		padding: 0.5em;
+	}
+}
 
 pre{
 	padding: 2px;
diff --git a/res/template/account/register.html b/res/template/account/register.html
index dc62de4..6c5c74a 100644
--- a/res/template/account/register.html
+++ b/res/template/account/register.html
@@ -103,6 +103,11 @@
 						resultDiv.innerHTML = resultHtml;
 					}
 
+					// On small screens the whole form won't fit on the screen,
+					// so we need to scroll up to show the user the result of
+					// the form submission
+					window.scrollTo(0, 0);
+
 					console.log(response);
 				}
 			}
diff --git a/res/template/fragments/api/filesystem.html b/res/template/fragments/api/filesystem.html
index 2ae4353..11e3a71 100644
--- a/res/template/fragments/api/filesystem.html
+++ b/res/template/fragments/api/filesystem.html
@@ -8,6 +8,11 @@
 		</p>
 
 		<h3>Parameters</h3>
+		<p>
+			The form parameters <b>must</b> be sent in the order displayed below
+			for the realtime error checking to work. If 'name' comes after
+			'file' it will be ignored.
+		</p>
 		<table>
 			<tr>
 				<td>Param</td>
diff --git a/webcontroller/listViewer.go b/webcontroller/listViewer.go
index 0abc9ff..09365af 100644
--- a/webcontroller/listViewer.go
+++ b/webcontroller/listViewer.go
@@ -15,7 +15,7 @@ func (wc *WebController) serveListViewer(w http.ResponseWriter, r *http.Request,
 	var api = pixelapi.New(wc.conf.APIURLInternal, "")
 	var list, err = api.GetList(p.ByName("id"))
 	if err != nil {
-		if (err.(pixelapi.Error)).ReqError {
+		if (err.(*pixelapi.Error)).ReqError {
 			log.Error("API request error occurred: %s", (err.(pixelapi.Error)).Value)
 		}
 		wc.serveNotFound(w, r)