theme newpost at top of page

5 files changed, 167 insertions, 75 deletions

diff --git a/static/css/themes/default.css b/static/css/themes/default.css
index fa76b50..2df2921 100644
--- a/static/css/themes/default.css
+++ b/static/css/themes/default.css
@@ -83,3 +83,31 @@ a.reply {
 	color: #000080;
 	font-size: 0.8em;
 }
+
+#newpostbtn {
+	text-align: center;
+	margin-top: 80px;
+}
+
+#postForm {
+  margin: auto;
+}
+
+#postForm tr > td:first-child {
+	background-color: #98e;
+  border: 1px black;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+
+#postForm input[type="text"],
+#postForm textarea {
+  box-sizing: border-box;
+  -webkit-box-sizing:border-box;
+  -moz-box-sizing: border-box;
+}
+
+#postForm #captcha {
+  display: block;
+  width: 100%;
+}
diff --git a/static/css/themes/gruvbox.css b/static/css/themes/gruvbox.css
index fb39ea4..a23d7f4 100644
--- a/static/css/themes/gruvbox.css
+++ b/static/css/themes/gruvbox.css
@@ -61,3 +61,38 @@ h1,h2,h3,h4,h5,h6 {
 	color: #83a598;
 	font-size: 0.8em;
 }
+
+#newpostbtn {
+	text-align: center;
+	margin-top: 80px;
+}
+
+input[type="text"] {
+  -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;
+}
+
+#postForm input[type="text"],
+#postForm textarea {
+  box-sizing: border-box;
+  -webkit-box-sizing:border-box;
+  -moz-box-sizing: border-box;
+}
+
+#postForm #captcha {
+  display: block;
+  width: 100%;
+}
diff --git a/static/js/posts.js b/static/js/posts.js
index 455e7ea..75244fa 100644
--- a/static/js/posts.js
+++ b/static/js/posts.js
@@ -2,29 +2,16 @@ function startNewPost(){
     var el = document.getElementById("newpostbtn");
     el.style="display:none;";
     el.setAttribute("state", "1");
-    document.getElementById("newpost").style = "display: block;";
+    document.getElementById("newpost").style = "";
+    sessionStorage.setItem("newpostState", true);
 }
 
 function stopNewPost(){
     var el = document.getElementById("newpostbtn");
     el.style="display:block;";
     el.setAttribute("state", "0");
-    document.getElementById("newpost").style = "display: hidden;";
-}
-
-function newpost()
-{
-    var state = document.getElementById("newpostbtn").getAttribute("state");
-    if(state === "0")
-    {
-        startNewPost();
-        sessionStorage.setItem("newpostState", true);
-    }
-    else
-    {
-        stopNewPost();
-        sessionStorage.setItem("newpostState", false);
-    }
+    document.getElementById("newpost").style = "display: none;";
+    sessionStorage.setItem("newpostState", false);
 }
 
 function shortURL(actorName, url)
diff --git a/static/nposts.html b/static/nposts.html
index 6def8b2..46d8bb1 100644
--- a/static/nposts.html
+++ b/static/nposts.html
@@ -15,33 +15,35 @@
 {{ define "content" }}
 {{ $board := .Board }}
 <hr>
-<ul style="margin: 0; padding: 0; display: inline">
-  <li style="display: inline"><a href="/{{ $board.Name }}/catalog">[Catalog]</a></li>
+<div class="navlinks">
+  [<a href="/{{ $board.Name }}/catalog">Catalog</a>]
   {{ if showArchive }}
-  <li style="display: inline"><a href="/{{ $board.Name }}/archive">[Archive]</a></li>
+  [<a href="/{{ $board.Name }}/archive">Archive</a>]
   {{ end }}
-  <li style="display: inline"><a href="#bottom">[Bottom]</a></li>
-  <li style="display: inline"><a href="javascript:location.reload()">[Refresh]</a></li>
-</ul>
+  [<a href="#bottom">Bottom</a>]
+  [<a href="javascript:location.reload()">Refresh</a>]
+</div>
 
 {{ template "posts" . }}
 
 <hr>
-<ul style="margin: 0; padding: 0; display: inline">
-  <li style="display: inline"><a href="/{{ $board.Name }}/catalog">[Catalog]</a></li>
+
+<div class="navlinks">
+  [<a href="/{{ $board.Name }}/catalog">Catalog</a>]
   {{ if showArchive }}
-  <li style="display: inline"><a href="/{{ $board.Name }}/archive">[Archive]</a></li>
+  [<a href="/{{ $board.Name }}/archive">Archive</a>]
   {{ end }}
-  <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>
+  [<a href="#top" id="bottom">Top</a>]
+  [<a href="javascript:location.reload()">Refresh</a>]
+</div>
+
 <hr>
 {{ if gt .TotalPage 0 }}
 {{ $totalPage := .TotalPage }}
 <ul style="float: right; margin: 0; padding: 0; display: inline">
   {{ $page := .CurrentPage }}
   {{ if gt $page 0 }}
-  <li style="display: inline"><a href="/{{ $board.Name }}?page={{ sub $page 1 }}">[ < ]</a></li>
+  <li style="display: inline"><a href="/{{ $board.Name }}?page={{ sub $page 1 }}">[ &lt; ]</a></li>
   {{ end }}
   {{ range $i, $e := .Pages }}
   {{ if eq $i $page}}
@@ -51,7 +53,7 @@
   {{ end }}
   {{ end }}
   {{ if lt .CurrentPage .TotalPage }}
-  <li style="display: inline"><a href="/{{ $board.Name }}?page={{ add $page 1 }}">[ > ]</a></li>
+  <li style="display: inline"><a href="/{{ $board.Name }}?page={{ add $page 1 }}">[ &gt; ]</a></li>
   {{ end }}
 </ul>
 {{ end }}
diff --git a/static/top.html b/static/top.html
index e37f221..1460d96 100644
--- a/static/top.html
+++ b/static/top.html
@@ -5,35 +5,55 @@
   {{ $len := len .Posts }}
   {{ if eq $len 0 }}
   {{ if .Board.InReplyTo }}
-  <h3 id="newpostbtn"  state="0" style="text-align: center; margin-top: 80px; display: none;"><a href="javascript:newpost()">[Post a Reply]</a></h3>
+  <h3 id="newpostbtn"  state="0" style="display: none;"><a href="javascript:startNewPost()">[Post a Reply]</a></h3>
   {{ else  }}
-  <h3 id="newpostbtn"  state="0" style="text-align: center; margin-top: 80px; display: none;"><a href="javascript:newpost()">[Start a New Thread]</a></h3>
+  <h3 id="newpostbtn"  state="0" style="display: none;"><a href="javascript:startNewPost()">[Start a New Thread]</a></h3>
   {{ end }} <!-- end if inreplyto-->
   <div id="newpost">
-    <form onsubmit="sessionStorage.setItem('element-closed-reply', true)" id="new-post" action="/post" method="post" enctype="multipart/form-data" style="margin-left: 180px;">
-      <label for="name">Name:</label><br>
-      <input type="text" id="name" name="name" placeholder="Anonymous" maxlength="100"><br>
-      <label for="options">Options:</label><br>
-      <input type="text" id="options" name="options" maxlength="100" style="margin-right:10px">{{ if .Board.InReplyTo }}<input type="submit" value="Post">{{ end }}<br>
-      {{ if eq .Board.InReplyTo "" }}
-      <label for="subject">Subject:</label><br>
-      <input type="text" id="subject" name="subject" maxlength="100" style="margin-right:10px"><input type="submit" value="Post"><br>
-      {{ end }}
-      <label for="comment">Comment:</label><br>
-      <textarea rows="10" cols="50" id="comment" name="comment" maxlength="2000"></textarea><br>
+    <form onsubmit="sessionStorage.setItem('element-closed-reply', true)" id="new-post" action="/post" method="post" enctype="multipart/form-data">
+      <table id="postForm">
+        <tr>
+          <tr>
+            <td><label for="name">Name:</label></td>
+            <td><input type="text" id="name" name="name" placeholder="Anonymous" maxlength="100">
+                <a onclick="stopNewPost()" style="float: right;">X</a>
+            </td>
+          </tr>
+          <tr>
+            <td><label for="options">Options:</label></td>
+            <td><input type="text" id="options" name="options" maxlength="100" style="margin-right:10px">{{ if .Board.InReplyTo }}<input type="submit" value="Post">{{ end }}</td>
+          </tr>
+          {{ if eq .Board.InReplyTo "" }}
+          <tr>
+            <td><label for="subject">Subject:</label></td>
+            <td><input type="text" id="subject" name="subject" maxlength="100" style="margin-right:10px"><input type="submit" value="Post"></td>
+          </tr>
+          {{ end }}
+          <tr>
+            <td><label for="comment">Comment:</label></td>
+            <td><textarea rows="10" cols="50" id="comment" name="comment" maxlength="2000"></textarea></td>
+          </tr>
+          <tr>
+            <td><label for="file">Image</label></td>
+            <td><input type="file" id="file" name="file" {{ if gt $len 1 }} required {{ else }} {{ if eq $len 0 }} required {{ end }} {{ end }} >
+                <br><input type="checkbox" name="sensitive">Mark sensitive</input></td>
+          </tr>
+          <tr>
+            <td><label for="captcha">Captcha:</label></td>
+            <td>
+              <div style="height: 65px; display: inline;">
+                <img src="{{ .Board.Captcha }}">
+              </div>
+              <input type="text" id="captcha" name="captcha" autocomplete="off">
+            </td>
+          </tr>
+      </table>
+
       <input type="hidden" id="inReplyTo" name="inReplyTo" value="{{ .Board.InReplyTo }}">
       <input type="hidden" id="sendTo" name="sendTo" value="{{ .Board.To }}">
       <input type="hidden" id="boardName" name="boardName" value="{{ .Board.Name }}">
       <input type="hidden" id="captchaCode" name="captchaCode" value="{{ .Board.CaptchaCode }}">
       <input type="hidden" id="returnTo" name="returnTo" value="{{ .ReturnTo }}">
-      <input type="file" id="file" name="file" {{ if gt $len 1 }} required {{ else }} {{ if eq $len 0 }} required {{ end }} {{ end }} ><br><br>
-      <input type="checkbox" name="sensitive"><span>Mark attachment as sensitive</span><br><br>
-      <label stye="display: inline-block;" for="captcha">Captcha:</label>
-      <br>
-      <input style="display: inline-block;"  type="text" id="captcha" name="captcha" autocomplete="off"><br>
-      <div style="height: 65px;">
-        <img src="{{ .Board.Captcha }}">
-      </div>
     </form>
   </div>
 
@@ -41,37 +61,57 @@
 
   {{ if eq (index .Posts 0).Type "Note" }}
   {{ if .Board.InReplyTo }}
-  <h3 id="newpostbtn"  state="0" style="text-align: center; margin-top: 80px; display: none;"><a href="javascript:newpost()">[Post a Reply]</a></h3>
+  <h3 id="newpostbtn"  state="0" style="text-align: center; margin-top: 80px; display: none;"><a href="javascript:startNewPost()">[Post a Reply]</a></h3>
   {{ else  }}
-  <h3 id="newpostbtn"  state="0" style="text-align: center; margin-top: 80px; display: none;"><a href="javascript:newpost()">[Start a New Thread]</a></h3>
+  <h3 id="newpostbtn"  state="0" style="text-align: center; margin-top: 80px; display: none;"><a href="javascript:startNewPost()">[Start a New Thread]</a></h3>
   {{ end }} <!-- end if inreplyto-->
   {{ $len := len .Posts }}
   <div id="newpost">
-    <form onsubmit="sessionStorage.setItem('element-closed-reply', true)" id="new-post" action="/post" method="post" enctype="multipart/form-data" style="margin-left: 180px;">
-      <label for="name">Name:</label><br>
-      <input type="text" id="name" name="name" placeholder="Anonymous" maxlength="100"><br>
-      <label for="options">Options:</label><br>
-      <input type="text" id="options" name="options" maxlength="100" style="margin-right:10px">{{ if .Board.InReplyTo }}<input type="submit" value="Post">{{ end }}<br>
-      {{ if eq .Board.InReplyTo "" }}
-      <label for="subject">Subject:</label><br>
-      <input type="text" id="subject" name="subject" maxlength="100" style="margin-right:10px"><input type="submit" value="Post"><br>
-      {{ end }}
-      <label for="comment">Comment:</label><br>
-      <textarea rows="10" cols="50" id="comment" name="comment" maxlength="2000"></textarea><br>
+    <form onsubmit="sessionStorage.setItem('element-closed-reply', true)" id="new-post" action="/post" method="post" enctype="multipart/form-data">
+      <table id="postForm">
+        <tr>
+          <tr>
+            <td><label for="name">Name:</label></td>
+            <td><input type="text" id="name" name="name" placeholder="Anonymous" maxlength="100">
+                <a onclick="stopNewPost()" style="float: right;">X</a>
+          </tr>
+          <tr>
+            <td><label for="options">Options:</label></td>
+            <td><input type="text" id="options" name="options" maxlength="100" style="margin-right:10px">{{ if .Board.InReplyTo }}<input type="submit" value="Post">{{ end }}</td>
+          </tr>
+          {{ if eq .Board.InReplyTo "" }}
+          <tr>
+            <td><label for="subject">Subject:</label></td>
+            <td><input type="text" id="subject" name="subject" maxlength="100" style="margin-right:10px"><input type="submit" value="Post"></td>
+          </tr>
+          {{ end }}
+          <tr>
+            <td><label for="comment">Comment:</label></td>
+            <td><textarea rows="10" cols="50" id="comment" name="comment" maxlength="2000"></textarea></td>
+          </tr>
+          <tr>
+            <td><label for="file">Image</label></td>
+            <td><input type="file" id="file" name="file" {{ if gt $len 1 }} required {{ else }} {{ if eq $len 0 }} required {{ end }} {{ end }} >
+                <br><input type="checkbox" name="sensitive">Mark sensitive</input></td>
+          </tr>
+          <tr>
+            <td><label for="captcha">Captcha:</label></td>
+            <td>
+              <div style="height: 65px; display: inline;">
+                <img src="{{ .Board.Captcha }}">
+              </div>
+              <input type="text" id="captcha" name="captcha" autocomplete="off">
+            </td>
+          </tr>
+      </table>
+
       <input type="hidden" id="inReplyTo" name="inReplyTo" value="{{ .Board.InReplyTo }}">
       <input type="hidden" id="sendTo" name="sendTo" value="{{ .Board.To }}">
       <input type="hidden" id="boardName" name="boardName" value="{{ .Board.Name }}">
       <input type="hidden" id="captchaCode" name="captchaCode" value="{{ .Board.CaptchaCode }}">
-      <input type="hidden" id="returnTo" name="returnTo" value="{{ .ReturnTo }}">
-      <input type="file" id="file" name="file" {{ if gt $len 1 }} required {{ else }} {{ if eq $len 0 }} required {{ end }} {{ end }} ><br><br>
-      <input type="checkbox" name="sensitive"><span>Mark attachment as sensitive</span><br><br>
-      <label stye="display: inline-block;" for="captcha">Captcha:</label>
-      <br>
-      <input style="display: inline-block;"  type="text" id="captcha" name="captcha" autocomplete="off"><br>
-      <div style="height: 65px;">
-        <img src="{{ .Board.Captcha }}">
-      </div>
-    </form>
+      <input type="hidden" id="returnTo" name="returnTo" value="{{ .ReturnTo }}">    </form>
+  </div>
+
   </div>
   {{ else }}
   <h1 style="text-align: center;">Archived Post</h1>