From d2cb70e8725371a72c0f9db36ad734041f4fb977 Mon Sep 17 00:00:00 2001
From: KushBlazingJudah <59340248+KushBlazingJudah@users.noreply.github.com>
Date: Wed, 18 Aug 2021 13:25:28 -0300
Subject: themeable popup
---
static/bottom.html | 23 ++++++++++++-----------
static/css/themes/default.css | 14 +++++++++++++-
static/css/themes/gruvbox.css | 20 ++++++++++++++++----
static/js/posts.js | 5 ++---
static/top.html | 4 ++--
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>
--
cgit v1.2.3