From 7835f24687abaa1e5254c5c78d985d4bb78abcfc Mon Sep 17 00:00:00 2001
From: KushBlazingJudah <59340248+KushBlazingJudah@users.noreply.github.com>
Date: Mon, 11 Oct 2021 13:15:11 -0300
Subject: couple of style changes + reply at footer is back

---
 static/archive.html           |  26 +++++------
 static/bottom.html            |  11 +++--
 static/css/themes/default.css |  59 ++++++++++++++++++++++--
 static/css/themes/gruvbox.css | 103 +++++++++++++++++++++++++++++++++---------
 static/js/posts.js            |   6 ++-
 static/main.html              |  12 ++---
 static/ncatalog.html          |  24 +++++-----
 static/npost.html             |  46 ++++++++++---------
 static/nposts.html            |  24 +++++-----
 9 files changed, 215 insertions(+), 96 deletions(-)

diff --git a/static/archive.html b/static/archive.html
index f9e13da..e5476ea 100644
--- a/static/archive.html
+++ b/static/archive.html
@@ -29,11 +29,11 @@
 {{ $board := .Board }}
 
 <hr>
-<ul style="margin: 0; padding: 0; display: inline;">
-  <li style="display: inline">[<a href="/{{ $board.Name }}">Return</a>]</li>
-  <li style="display: inline">[<a href="/{{ $board.Name }}/catalog">Catalog</a>]</li>
-  <li style="display: inline">[<a href="#bottom">Bottom</a>]</li>
-  <li style="display: inline">[<a href="javascript:location.reload()">Refresh</a>]</li>
+<ul id="navlinks">
+  <li>[<a href="/{{ $board.Name }}">Return</a>]</li>
+  <li>[<a href="/{{ $board.Name }}/catalog">Catalog</a>]</li>
+  <li>[<a href="#bottom">Bottom</a>]</li>
+  <li>[<a href="javascript:location.reload()">Refresh</a>]</li>
 </ul>
 <hr>
 
@@ -70,14 +70,14 @@
 </table>
 
 <hr>
-<div style="height: 22px;">
-     <ul style="position: absolute; left: 5px;  margin: 0; padding: 0; display: inline;">
-       <li style="display: inline">[<a href="/{{ $board.Name }}">Return</a>]</li>
-       <li style="display: inline">[<a href="/{{ $board.Name }}/catalog">Catalog</a>]</li>
-       <li style="display: inline">[<a id="bottom" href="#top">Top</a>]</li>
-       <li style="display: inline">[<a href="javascript:location.reload()">Refresh</a>]</li>
-     </ul>
-</div>
+
+<ul id="navlinks">
+  <li>[<a href="/{{ $board.Name }}">Return</a>]</li>
+  <li>[<a href="/{{ $board.Name }}/catalog">Catalog</a>]</li>
+  <li>[<a id="bottom" href="#top">Top</a>]</li>
+  <li>[<a href="javascript:location.reload()">Refresh</a>]</li>
+</ul>
+
 <hr>
 
 {{ end }}
diff --git a/static/bottom.html b/static/bottom.html
index ab8d88d..d48db20 100644
--- a/static/bottom.html
+++ b/static/bottom.html
@@ -1,10 +1,13 @@
 {{ define "bottom" }}
 <div id="reply-box" class="popup-box" style="display: none;">
-  <div id="reply-header" style="display: inline-block; z-index: 0; cursor: move;"></div><div id="reply-close" style="display: inline-block; float: right;"><a href="javascript:closeReply()">[X]</a></div>
+  <div id="reply-header">
+    <span id="reply-header-text">...</span>
+    <div id="reply-close" style="display: inline-block; float: right;"><a href="javascript:closeReply()">[X]</a></div>
+  </div>
   <form onsubmit="sessionStorage.setItem('element-closed-reply', true)"  id="reply-post" action="/post" method="post" enctype="multipart/form-data">
-    <input id="reply-name" name="name" size="43" type="text" placeholder="Name" maxlength="100">
-    <input id="reply-options" name="options" size="43" type="text" placeholder="Options" maxlength="100">
-    <textarea id="reply-comment" name="comment" rows="12" cols="54" style="width: 396px;" maxlength="2000" oninput="sessionStorage.setItem('element-reply-comment', document.getElementById('reply-comment').value)"></textarea>
+    <input id="reply-name" name="name" type="text" placeholder="Name" maxlength="100">
+    <input id="reply-options" name="options" type="text" placeholder="Options" maxlength="100">
+    <textarea id="reply-comment" name="comment" maxlength="2000" oninput="sessionStorage.setItem('element-reply-comment', document.getElementById('reply-comment').value)"></textarea>
     <input id="reply-file" name="file" type="file">
     <input id="reply-submit" type="submit" value="Reply" style="float: right;">
     <input type="hidden" id="inReplyTo-box" name="inReplyTo" value="{{ .Board.InReplyTo }}">
diff --git a/static/css/themes/default.css b/static/css/themes/default.css
index a0692f9..504f51c 100644
--- a/static/css/themes/default.css
+++ b/static/css/themes/default.css
@@ -21,7 +21,7 @@ body.nsfw {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    color: #af0a0f;
+	color: #af0a0f;
 }
 
 .popup-box {
@@ -81,7 +81,7 @@ h1, h2, h3, h4, h5, h6 {
 
 a.reply {
 	color: #af0a0f;
-    text-decoration: underline;
+	text-decoration: underline;
 }
 
 .replyLink {
@@ -117,13 +117,39 @@ a.reply {
   -moz-box-sizing: border-box;
 }
 
+#postForm input[type="text"],
+#postForm textarea,
 #reply-name, #reply-options, #reply-comment {
+  box-sizing: border-box;
+  -webkit-box-sizing:border-box;
+  -moz-box-sizing: border-box;
+}
+
+#reply-comment {
+	min-width: 300px;
+	width: 396px;
+	height: 200px;
+}
+
+#reply-name {
+	width: 75%;
+	float: left;
+}
+
+#reply-options {
+	width: 25%;
+	float: right;
+}
+
+#reply-header {
+	display: inline-block;
 	width: 100%;
+	cursor: move;
 }
 
 #postForm #captcha {
-  display: block;
-  width: 100%;
+	display: block;
+	width: 100%;
 }
 
 .popup-box {
@@ -196,3 +222,28 @@ a.reply {
 .boardGridCell:nth-child(3n+2) {
 	border-left: none;
 }
+
+#threadfooter {
+	width: 100%;
+	table-layout: fixed;
+	border-collapse: collapse;
+}
+
+#threadfooter td {
+	padding: 0;
+	margin: 0;
+}
+
+#threadfooter #threadStats {
+	float: right;
+}
+
+#navlinks, #boardlinks {
+	padding: 0;
+	margin: 0;
+}
+
+#navlinks > li,
+#boardlinks > li {
+	display: inline;
+}
diff --git a/static/css/themes/gruvbox.css b/static/css/themes/gruvbox.css
index 16465f3..c3f1abd 100644
--- a/static/css/themes/gruvbox.css
+++ b/static/css/themes/gruvbox.css
@@ -69,38 +69,68 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 input[type="text"] {
-  -webkit-appearance: none;
-  -webkit-border-radius: 0;
+	-webkit-appearance: none;
+	-webkit-border-radius: 0;
 }
 
 #postForm {
 	border: 4px solid #928374;
 	background-color: #3c3836;
 	margin: auto;
-
 }
 
 #postForm tr > td:first-child {
-  background-color: #504945;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
+	background-color: #504945;
+	padding-left: 0.5em;
+	padding-right: 0.5em;
 }
 
 #postForm input[type="text"],
 #postForm textarea,
 #reply-name, #reply-options, #reply-comment {
-  box-sizing: border-box;
-  -webkit-box-sizing:border-box;
-  -moz-box-sizing: border-box;
+	background-color: #504945;
+	color: #ebdbb2;
+	border: 0;
+	border-bottom: 2px solid #3c3836;
+	font-family: monospace, sans-serif;
+
+	box-sizing: border-box;
+	-webkit-box-sizing:border-box;
+	-moz-box-sizing: border-box;
 }
 
-#reply-name, #reply-options, #reply-comment {
+#postForm input[type="text"]:focus,
+#postForm textarea:focus,
+#reply-name:focus, #reply-options:focus, #reply-comment:focus {
+	outline: none;
+}
+
+#reply-comment {
+	min-width: 300px;
+	width: 396px;
+	height: 200px;
+}
+
+#reply-name {
+	width: 75%;
+	float: left;
+}
+
+#reply-options {
+	width: 25%;
+	border-left: 2px solid #3c3836;
+	float: right;
+}
+
+#reply-header {
+	display: inline-block;
 	width: 100%;
+	cursor: move;
 }
 
 #postForm #captcha {
-  display: block;
-  width: 100%;
+	display: block;
+	width: 100%;
 }
 
 .popup-box {
@@ -118,26 +148,26 @@ input[type="text"] {
 }
 
 .newsbox {
-    padding: 25px;
-    border: 4px solid #928374;
-    background-color: #3c3836;
+	padding: 25px;
+	border: 4px solid #928374;
+	background-color: #3c3836;
 }
 
 .newsbox h2 {
-    margin: 0;
-    padding: 0;
+	margin: 0;
+	padding: 0;
 }
 
 .newsbox-news {
-    text-align: left;
-    background-color: #504945;
-    margin-top: 25px;
-    padding: 25px;
+	text-align: left;
+	background-color: #504945;
+	margin-top: 25px;
+	padding: 25px;
 }
 
 .newsbox-news p,
 .newsbox-news h3 {
-    margin: 0;
+	margin: 0;
 }
 
 #stopTablePost {
@@ -174,3 +204,32 @@ input[type="text"] {
 .boardGridCell:nth-child(3n+2) {
 	border-left: none;
 }
+
+#threadfooter {
+	width: 100%;
+	table-layout: fixed;
+	border-collapse: collapse;
+}
+
+#threadfooter td {
+	padding: 0;
+	margin: 0;
+}
+
+#threadfooter #threadStats {
+	float: right;
+}
+
+#navlinks, #boardlinks {
+	padding: 0;
+	margin: 0;
+}
+
+#navlinks > li,
+#boardlinks > li {
+	display: inline;
+}
+
+hr {
+	border: 1px solid #928374;
+}
diff --git a/static/js/posts.js b/static/js/posts.js
index b9e9706..87f6228 100644
--- a/static/js/posts.js
+++ b/static/js/posts.js
@@ -160,6 +160,7 @@ function quote(actorName, opid, id)
     sessionStorage.setItem("element-closed-reply", false);
     var box = document.getElementById("reply-box");
     var header = document.getElementById("reply-header");
+    var header_text = document.getElementById("reply-header-text");
     var comment = document.getElementById("reply-comment");
     var inReplyTo = document.getElementById("inReplyTo-box");
 
@@ -176,7 +177,7 @@ function quote(actorName, opid, id)
     if (inReplyTo.value != opid)
         comment.value = "";
 
-    header.innerText = "Replying to Thread No. " + shortURL(actorName, opid);
+    header_text.innerText = "Replying to Thread No. " + shortURL(actorName, opid);
     inReplyTo.value = opid;
     sessionStorage.setItem("element-reply-actor", actorName);
     sessionStorage.setItem("element-reply-id", inReplyTo.value);
@@ -305,12 +306,13 @@ const stateLoadHandler = function(event){
     if(sessionStorage.getItem("element-closed-reply") === "false"){
         var box = document.getElementById("reply-box");
         var header = document.getElementById("reply-header");
+        var header_text = document.getElementById("reply-header-text");
         var comment = document.getElementById("reply-comment");
         var inReplyTo = document.getElementById("inReplyTo-box");
 
         header.onmousedown = dragMouseDown;
         inReplyTo.value = parseInt(sessionStorage.getItem("element-reply-id"));
-        header.innerText = "Replying to Thread No. " + shortURL(sessionStorage.getItem("element-reply-actor"), sessionStorage.getItem("element-reply-id"));
+        header_text.innerText = "Replying to Thread No. " + shortURL(sessionStorage.getItem("element-reply-actor"), sessionStorage.getItem("element-reply-id"));
         comment.value = sessionStorage.getItem("element-reply-comment");
 
         pos1 = parseInt(sessionStorage.getItem("pos1"));
diff --git a/static/main.html b/static/main.html
index 76f7a1e..1f7cc2f 100644
--- a/static/main.html
+++ b/static/main.html
@@ -19,18 +19,18 @@
     {{ template "header" . }}
   </head>
   <body {{ if not .Board.Restricted }}class="nsfw"{{ end }} onload="applyTheme()">
-    <ul style="display: inline; padding:0;">
+    <ul id="boardlinks">
       {{ $l := len .Boards }}
-      <li style="display: inline;">[<a href="/">Home</a>]</li>
+      <li>[<a href="/">Home</a>]</li>
       {{range $i, $e := .Boards}}
       {{ if eq (sub $l 1) 0 }}
-      <li style="display: inline;">[ <a href="{{.Location}}">{{$e.Name}} </a>]</li>
+      <li>[ <a href="{{.Location}}">{{$e.Name}} </a>]</li>
       {{ else if eq $i 0 }}
-      <li style="display: inline;">[<a href="{{.Location}}">{{$e.Name}} </a>/</li>
+      <li>[<a href="{{.Location}}">{{$e.Name}} </a>/</li>
       {{ else if eq $i (sub $l 1) }}
-      <li style="display: inline;"><a href="{{.Location}}">{{$e.Name}}</a>]</li>
+      <li><a href="{{.Location}}">{{$e.Name}}</a>]</li>
       {{ else }}
-      <li style="display: inline;"><a href="{{.Location}}">{{$e.Name}} </a>/</li>
+      <li><a href="{{.Location}}">{{$e.Name}} </a>/</li>
       {{ end }}
       {{end}}
     </ul>
diff --git a/static/ncatalog.html b/static/ncatalog.html
index ec8afd5..6a830d0 100644
--- a/static/ncatalog.html
+++ b/static/ncatalog.html
@@ -18,14 +18,14 @@
 {{ $board := .Board }}
 <hr>
 
-<div class="navlinks">
-  [<a href="/{{ $board.Name }}/">Return</a>]
+<ul id="navlinks">
+  <li>[<a href="/{{ $board.Name }}/">Return</a>]</li>
   {{ if showArchive }}
-  [<a href="/{{ $board.Name }}/archive">Archive</a>]
+  <li>[<a href="/{{ $board.Name }}/archive">Archive</a>]</li>
   {{ end }}
-  [<a href="#bottom">Bottom</a>]
-  [<a href="javascript:location.reload()">Refresh</a>]
-</div>
+  <li>[<a href="#bottom">Bottom</a>]</li>
+  <li>[<a href="javascript:location.reload()">Refresh</a>]</li>
+</ul>
 
 <hr>
 
@@ -96,14 +96,14 @@
 </div>
 <hr>
 
-<div class="navlinks">
-  [<a href="/{{ $board.Name }}/">Return</a>]
+<ul id="navlinks">
+  <li>[<a href="/{{ $board.Name }}/">Return</a>]</li>
   {{ if showArchive }}
-  [<a href="/{{ $board.Name }}/archive">Archive</a>]
+  <li>[<a href="/{{ $board.Name }}/archive">Archive</a>]</li>
   {{ end }}
-  [<a href="#top">Top</a>]
-  [<a href="javascript:location.reload()">Refresh</a>]
-</div>
+  <li>[<a href="#top">Top</a>]</li>
+  <li>[<a href="javascript:location.reload()">Refresh</a>]</li>
+</ul>
 
 <hr>
 {{ end }}
diff --git a/static/npost.html b/static/npost.html
index 38a8950..cf78db7 100644
--- a/static/npost.html
+++ b/static/npost.html
@@ -21,11 +21,11 @@
 {{ $board := .Board }}
 
 <hr>
-<ul style="margin: 0; padding: 0; display: inline">
-  <li style="display: inline">[<a href="/{{ $board.Name }}">Return</a>]</li>
-  <li style="display: inline">[<a href="/{{ $board.Name }}/catalog">Catalog</a>]</li>
-  <li style="display: inline">[<a href="#bottom">Bottom</a>]</li>
-  <li style="display: inline">[<a href="javascript:location.reload()">Refresh</a>]</li>
+<ul id="navlinks">
+  <li>[<a href="/{{ $board.Name }}">Return</a>]</li>
+  <li>[<a href="/{{ $board.Name }}/catalog">Catalog</a>]</li>
+  <li>[<a href="#bottom">Bottom</a>]</li>
+  <li>[<a href="javascript:location.reload()">Refresh</a>]</li>
 </ul>
 <hr>
 
@@ -33,24 +33,28 @@
 
 <hr>
 
-<ul style="margin: 0; padding: 0; display: inline">
-  <li style="display: inline">[<a href="/{{ $board.Name }}">Return</a>]</li>
-  <li style="display: inline">[<a href="/{{ $board.Name }}/catalog">Catalog</a>]</li>
-  <li style="display: inline">[<a id="bottom" href="#top">Top</a>]</li>
-  <li style="display: inline">[<a href="javascript:location.reload()">Refresh</a>]</li>
-  <li style="display: inline"><input id="autoreload-checkbox" type="checkbox" onclick="autoTimer()"> Auto refresh <span id="autoreload-countdown" style="visibility: hidden;">0</span></li>
-</ul>
+<table id="threadfooter"><tr>
+	<td>
+		<ul id="navlinks">
+			<li>[<a href="/{{ $board.Name }}">Return</a>]</li>
+			<li>[<a href="/{{ $board.Name }}/catalog">Catalog</a>]</li>
+			<li>[<a id="bottom" href="#top">Top</a>]</li>
+			<li>[<a href="javascript:location.reload()">Refresh</a>]</li>
+			<li><input id="autoreload-checkbox" type="checkbox" onclick="autoTimer()"> Auto refresh <span id="autoreload-countdown" style="visibility: hidden;">0</span></li>
+		</ul>
+	</td>
 
-{{ $replies := (index .Posts 0).Replies }}
-<span style="float: right;">{{ $replies.TotalItems }} / {{ $replies.TotalImgs }}</span>
+	{{ if eq (index .Posts 0).Type "Note" }}
+	<td style="text-align: center;">
+		<span>[<a id="reply-content" href="javascript:quote('{{ $board.Actor.Id }}', '{{ (index .Posts 0).Id }}', 'reply')">Post a Reply</a>]</span>
+	</td>
+	{{ end }}
 
-<!--
-<div style="width: 500px; height: 22px;  margin: 0 auto; text-align: center;">
-{{ if eq (index .Posts 0).Type "Note" }}
-<span ><a id="reply-content" href="javascript:quote('{{ $board.Actor.Id }}', '{{ (index .Posts 0).Id }}', 'reply')">[Post a Reply]</a></span>
-{{ end }}
-</div>
--->
+	<td>
+		{{ $replies := (index .Posts 0).Replies }}
+		<span id="threadStats" data-total="{{ $replies.TotalItems }}" data-imgs="{{ $replies.TotalImgs }}">{{ $replies.TotalItems }} / {{ $replies.TotalImgs }}</span>
+	</td>
+</tr></table>
 
 <hr>
 {{ end }}
diff --git a/static/nposts.html b/static/nposts.html
index 998152e..336edb6 100644
--- a/static/nposts.html
+++ b/static/nposts.html
@@ -15,27 +15,27 @@
 {{ define "content" }}
 {{ $board := .Board }}
 <hr>
-<div class="navlinks">
-  [<a href="/{{ $board.Name }}/catalog">Catalog</a>]
+<ul id="navlinks">
+  <li>[<a href="/{{ $board.Name }}/catalog">Catalog</a>]</li>
   {{ if showArchive }}
-  [<a href="/{{ $board.Name }}/archive">Archive</a>]
+  <li>[<a href="/{{ $board.Name }}/archive">Archive</a>]</li>
   {{ end }}
-  [<a href="#bottom">Bottom</a>]
-  [<a href="javascript:location.reload()">Refresh</a>]
-</div>
+  <li>[<a href="#bottom">Bottom</a>]</li>
+  <li>[<a href="javascript:location.reload()">Refresh</a>]</li>
+</ul>
 
 {{ template "posts" . }}
 
 <hr>
 
-<div class="navlinks">
-  [<a href="/{{ $board.Name }}/catalog">Catalog</a>]
+<ul id="navlinks">
+  <li>[<a href="/{{ $board.Name }}/catalog">Catalog</a>]</li>
   {{ if showArchive }}
-  [<a href="/{{ $board.Name }}/archive">Archive</a>]
+  <li>[<a href="/{{ $board.Name }}/archive">Archive</a>]</li>
   {{ end }}
-  [<a href="#top" id="bottom">Top</a>]
-  [<a href="javascript:location.reload()">Refresh</a>]
-</div>
+  <li>[<a href="#top" id="bottom">Top</a>]</li>
+  <li>[<a href="javascript:location.reload()">Refresh</a>]</li>
+</ul>
 
 <hr>
 {{ if gt .TotalPage 0 }}
-- 
cgit v1.2.3