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(-)
(limited to 'static')
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