diff options
| -rw-r--r-- | static/archive.html | 26 | ||||
| -rw-r--r-- | static/bottom.html | 11 | ||||
| -rw-r--r-- | static/css/themes/default.css | 59 | ||||
| -rw-r--r-- | static/css/themes/gruvbox.css | 103 | ||||
| -rw-r--r-- | static/js/posts.js | 6 | ||||
| -rw-r--r-- | static/main.html | 12 | ||||
| -rw-r--r-- | static/ncatalog.html | 24 | ||||
| -rw-r--r-- | static/npost.html | 46 | ||||
| -rw-r--r-- | 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 }} |