move the reply form into the to be replied post

This commit is contained in:
Ted Unangst 2019-07-06 13:48:31 -04:00
parent 663ee79877
commit e294b1978b
3 changed files with 24 additions and 12 deletions

View File

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

View File

@ -1,4 +1,4 @@
<p> <p id="honkformhost">
<button onclick="showhonkform(); return false"><a href="/newhonk">it's honking time</a></button> <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"> <form id="honkform" action="/honk" method="POST" enctype="multipart/form-data" style="display: none">
<p> <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"> <input type="submit" name="preview" value="preview">
</form> </form>
<script> <script>
function showhonkform(rid, hname) { function showhonkform(elem, rid, hname) {
var form = document.getElementById("honkform") var form = document.getElementById("honkform")
form.style = "display: block" 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 ridinput = document.getElementById("ridinput")
var honknoise = document.getElementById("honknoise") var honknoise = document.getElementById("honknoise")
if (rid) { if (rid) {
ridinput.value = rid ridinput.value = rid
honknoise.value = "@" + hname + " " honknoise.value = "@" + hname + " "
} }
document.getElementById("infobox").scrollIntoView() //document.getElementById("infobox").scrollIntoView()
} }
function updatedonker() { function updatedonker() {
var el = document.getElementById("donker") var el = document.getElementById("donker")

View File

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