themeable popup

5 files changed, 45 insertions, 21 deletions

diff --git a/static/bottom.html b/static/bottom.html
index 9d920c0..023deeb 100644
--- a/static/bottom.html
+++ b/static/bottom.html
@@ -1,20 +1,20 @@
 {{ define "bottom" }}
 <div id="reply-box" class="popup-box" style="display: none;">
-  <div id="reply-header" style="display: inline-block; width: 370px; 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" 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>
   <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>
+    <textarea id="reply-comment" name="comment" rows="12" cols="54" 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;"><br><br>
+    <input id="reply-submit" type="submit" value="Reply" style="float: right;">
     <input type="hidden" id="inReplyTo-box" 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="checkbox" name="sensitive"><span>Mark attachment as sensitive</span><br><br>    
+    <input type="hidden" id="returnTo" name="returnTo" value="{{ .ReturnTo }}"><br>
+    <input type="checkbox" name="sensitive"><span>Mark attachment as sensitive</span><br>
     <div style="width: 202px; margin: 0 auto; padding-top: 12px;">
-      <label for="captcha">Captcha:</label><br>      
+      <label for="captcha">Captcha:</label><br>
       <input style="display: inline-block;"  type="text" id="captcha" name="captcha" autocomplete="off"><br>
     </div>
     <div style="width: 230px; margin: 0 auto;">
@@ -23,19 +23,20 @@
   </form>
 </div>
 
-<div id="report-box" class="popup-box" style="display: none; ">
-  <div id="report-header" style="text-align: center; display: inline-block; width: 370px; z-index: 0; cursor: move;"></div><div id="report-close" style="display: inline-block; float: right;"><a href="javascript:closeReport()">[X]</a></div>
+<div id="report-box" class="popup-box" style="display: none;">
+  <div id="report-header" style="text-align: center; display: inline-block; z-index: 0; cursor: move;"></div><div id="report-close" style="display: inline-block; float: right;"><a href="javascript:closeReport()">[X]</a></div>
   <form onsubmit="sessionStorage.setItem('element-closed-report', true)" id="report-post" action="/report" method="post">
-    <label for="comment">Reason:</label>
+    <label for="comment">Reason:</label><br>
     <textarea id="report-comment" name="comment" rows="12" cols="54" style="width: 396px;" maxlength="100" oninput="sessionStorage.setItem('element-report-comment', document.getElementById('report-comment').value)"></textarea>
+    <br>
     <input id="report-submit" type="submit" value="Report" style="float: right;">
     <input type="hidden" id="report-inReplyTo-box" name="id" value="{{ .Board.InReplyTo }}">
     <input type="hidden" id="sendTo" name="sendTo" value="{{ .Board.To }}">
     <input type="hidden" id="boardName" name="board" value="{{ .Board.Name }}">
-    <input type="hidden" name="close" value="0">    
+    <input type="hidden" name="close" value="0">
     <input type="hidden" id="captchaCode" name="captchaCode" value="{{ .Board.CaptchaCode }}">
     <div style="width: 202px; margin: 0 auto; padding-top: 12px;">
-      <label for="captcha">Captcha:</label><br>      
+      <label for="captcha">Captcha:</label><br>
       <input style="display: inline-block;"  type="text" id="captcha" name="captcha" autocomplete="off"><br>
     </div>
     <div style="width: 230px; margin: 0 auto;">
diff --git a/static/css/themes/default.css b/static/css/themes/default.css
index 2df2921..07e960e 100644
--- a/static/css/themes/default.css
+++ b/static/css/themes/default.css
@@ -101,13 +101,25 @@ a.reply {
 }
 
 #postForm input[type="text"],
-#postForm textarea {
+#postForm textarea,
+#reply-name, #reply-options, #reply-comment {
   box-sizing: border-box;
   -webkit-box-sizing:border-box;
   -moz-box-sizing: border-box;
 }
 
+#reply-name, #reply-options, #reply-comment {
+	width: 100%;
+}
+
 #postForm #captcha {
   display: block;
   width: 100%;
 }
+
+.popup-box {
+	position: absolute;
+	width: min-content;
+	z-index: 9;
+	display: block;
+}
diff --git a/static/css/themes/gruvbox.css b/static/css/themes/gruvbox.css
index a23d7f4..ff9c596 100644
--- a/static/css/themes/gruvbox.css
+++ b/static/css/themes/gruvbox.css
@@ -70,29 +70,41 @@ h1,h2,h3,h4,h5,h6 {
 input[type="text"] {
   -webkit-appearance: none;
   -webkit-border-radius: 0;
-
 }
 
 #postForm {
 	border: 4px solid #928374;
 	background-color: #3c3836;
-  margin: auto;
+	margin: auto;
+
 }
 
 #postForm tr > td:first-child {
-	background-color: #504945;
+  background-color: #504945;
   padding-left: 0.5em;
   padding-right: 0.5em;
 }
 
 #postForm input[type="text"],
-#postForm textarea {
+#postForm textarea,
+#reply-name, #reply-options, #reply-comment {
   box-sizing: border-box;
   -webkit-box-sizing:border-box;
   -moz-box-sizing: border-box;
 }
 
+#reply-name, #reply-options, #reply-comment {
+	width: 100%;
+}
+
 #postForm #captcha {
   display: block;
   width: 100%;
 }
+
+.popup-box {
+	position: absolute;
+	width: min-content;
+	z-index: 9;
+	display: block;
+}
diff --git a/static/js/posts.js b/static/js/posts.js
index 75244fa..30f4893 100644
--- a/static/js/posts.js
+++ b/static/js/posts.js
@@ -169,7 +169,7 @@ function quote(actorName, opid, id)
         var h = document.getElementById(id + "-content").offsetTop - 348;
     }
 
-    const boxStyle = "display: block; position: absolute; width: 400px; height: 600px; z-index: 9; top: " + h + "px; left: " + w + "px; padding: 5px;";
+    const boxStyle = "top: " + h + "px; left: " + w + "px;";
     box.setAttribute("style", boxStyle);
     sessionStorage.setItem("element-reply-style", boxStyle);
     sessionStorage.setItem("reply-top", h);
@@ -189,7 +189,6 @@ function quote(actorName, opid, id)
     sessionStorage.setItem("element-reply-comment", comment.value);
 
     dragElement(header);
-
 }
 
 function report(actorName, id)
@@ -203,7 +202,7 @@ function report(actorName, id)
     var w = window.innerWidth / 2 - 200;
     var h = document.getElementById(id + "-content").offsetTop - 348;
 
-    const boxStyle = "display: block; position: absolute; width: 400px; height: 480px; z-index: 9; top: " + h + "px; left: " + w + "px; padding: 5px;";
+    const boxStyle = "top: " + h + "px; left: " + w + "px;";
     box.setAttribute("style", boxStyle);
     sessionStorage.setItem("element-report-style", boxStyle);
     sessionStorage.setItem("report-top", h);
diff --git a/static/top.html b/static/top.html
index 1460d96..94abad7 100644
--- a/static/top.html
+++ b/static/top.html
@@ -16,7 +16,7 @@
           <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>
+                <a onclick="stopNewPost()" style="float: right;">[X]</a>
             </td>
           </tr>
           <tr>
@@ -73,7 +73,7 @@
           <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>
+                <a onclick="stopNewPost()" style="float: right;">[X]</a>
           </tr>
           <tr>
             <td><label for="options">Options:</label></td>