move the reply form into the to be replied post

views/honk.html

@@ -68,7 +68,7 @@ in reply to: <a href="{{ .RID }}" rel=noreferrer>{{ .RID }}</a>
 {{ else }}
 <button disabled>nope</button>
 {{ end }}
-<button onclick="showhonkform('{{ .Honk.XID }}', '{{ .Honk.Handle }}');">tonk</button>
+<button onclick="showhonkform(this, '{{ .Honk.XID }}', '{{ .Honk.Handle }}');">tonk</button>
 <button onclick="muteit(this, '{{ .Honk.Convoy }}');">mute</button>
 <button onclick="zonkit(this, '{{ .Honk.XID }}');">zonk</button>
 </div>

views/honkform.html

@@ -1,4 +1,4 @@
-<p>
+<p id="honkformhost">
 <button onclick="showhonkform(); return false"><a href="/newhonk">it's honking time</a></button>
 <form id="honkform" action="/honk" method="POST" enctype="multipart/form-data" style="display: none">
 <p>
@@ -13,16 +13,23 @@ in reply to: <input type="text" name="rid" id="ridinput" value="" autocomplete=o
 <input type="submit" name="preview" value="preview">
 </form>
 <script>
-function showhonkform(rid, hname) {
+function showhonkform(elem, rid, hname) {
 	var form = document.getElementById("honkform")
 	form.style = "display: block"
+	if (elem) {
+		form.remove()
+		elem.parentElement.insertAdjacentElement('beforebegin', form)
+	} else {
+		elem = document.getElementById("honkformhost")
+		elem.insertAdjacentElement('afterend', form)
+	}
 	var ridinput = document.getElementById("ridinput")
 	var honknoise = document.getElementById("honknoise")
 	if (rid) {
 		ridinput.value = rid
 		honknoise.value = "@" + hname + " "
 	}
-	document.getElementById("infobox").scrollIntoView()
+	//document.getElementById("infobox").scrollIntoView()
 }
 function updatedonker() {
 	var el = document.getElementById("donker")

views/style.css

@@ -65,7 +65,7 @@ main {
 	margin-top 1em;
 	margin-bottom: 1em;
 }
-.info label, button, form input[type=submit], select {
+label, button, form input[type=submit], select {
 	font-size: 16px;
 	font-family: monospace;
 	color: #dde;
@@ -76,10 +76,10 @@ main {
 button a {
 	text-decoration: none;
 }
-.info form {
+form {
 	margin-top: 1em;
 }
-.info textarea {
+textarea {
 	padding: 0.5em;
 	font-size: 1em;
 	background: #305;
@@ -90,20 +90,20 @@ button a {
 	box-sizing: border-box;
 	max-width: 100%;
 }
-.info input[type="checkbox"] {
+input[type="checkbox"] {
 	position: fixed;
 	top: -9999px;
 }
-.info input[type="checkbox"] + span:after {
+input[type="checkbox"] + span:after {
 	content: "no";
 }
-.info input[type="checkbox"]:checked + span:after {
+input[type="checkbox"]:checked + span:after {
 	content: "yes";
 }
-.info input[type="checkbox"]:focus + span:after {
+input[type="checkbox"]:focus + span:after {
 	outline: 1px solid #dde;
 }
-.info input[type=file] {
+input[type=file] {
 	display: none;
 }
 
@@ -118,6 +118,11 @@ button a {
 	padding-right: 1em;
 	padding-top: 0;
 }
+.honk form {
+	padding: 1em;
+	border: 1px solid #dde;
+}
+
 .honk a {
 	color: #dde;
 }