Merge pull request #54 from KushBlazingJudah/development

themes fixup

10 files changed, 112 insertions, 46 deletions

diff --git a/client.go b/client.go
index 09db0bf..8230765 100644
--- a/client.go
+++ b/client.go
@@ -156,7 +156,7 @@ func IndexGet(w http.ResponseWriter, r *http.Request, db *sql.DB) {
 
 func NewsGet(w http.ResponseWriter, r *http.Request, db *sql.DB, timestamp int) {
 	t := template.Must(template.New("").Funcs(template.FuncMap{
-		"sub":            mod,
+		"sub":            sub,
 		"unixtoreadable": unixToReadable}).ParseFiles("./static/main.html", "./static/news.html"))
 
 	actor := GetActorFromDB(db, Domain)
diff --git a/main.go b/main.go
index abce30d..922d74d 100644
--- a/main.go
+++ b/main.go
@@ -96,7 +96,7 @@ func main() {
 	}
 
 	for _, f := range themes {
-		if f.Name() == "default" {
+		if f.Name() == "default.css" {
 			continue
 		}
 
diff --git a/static/anews.html b/static/anews.html
index 5ebe1cc..355f310 100644
--- a/static/anews.html
+++ b/static/anews.html
@@ -1,6 +1,6 @@
 {{ define "header" }}
 <title>{{ .Title }}</title>
-<meta name="description" content="{{ .PreferredUsername }} is a federated image board based on ActivityPub. The current version of the code running on the server is still a work-in-progress product, expect a bumpy ride for the time being. Get the server code here: https://github.com/FChannel0.">    
+<meta name="description" content="{{ .PreferredUsername }} is a federated image board based on ActivityPub. The current version of the code running on the server is still a work-in-progress product, expect a bumpy ride for the time being. Get the server code here: https://github.com/FChannel0.">
 
 <meta property="og:locale" content="en_US" />
 <meta property="og:type" content="website" />
@@ -21,23 +21,17 @@
 <div style="text-align: center; max-width: 800px; margin: 0 auto;">
   <h1>{{ .Title }}</h1>
 
-  <div style="margin-top:50px;">
-  <table style="text-align: left;">
-    
+  <div class="newsbox" style="margin-top:50px;padding-top:0;">
     {{ range $i, $e := .NewsItems }}
-    <tr>
-      <td>
-        <div class="box" style="width:800px; padding: 25px; margin-bottom: 25px;">
-          {{ if $.Board.ModCred }}<a href="/{{ $.Key }}/newsdelete/{{ $e.Time }}">[Delete] </a>{{end}}
-          <a href="/news/{{.Time}}">{{unixtoreadable $e.Time}} - {{$e.Title}}</a>
-          <br><p style="margin-left: 25px;">{{$e.Content}}</p>
-        </div>
-      </td>
-    </tr>
+    <div class="newsbox-news">
+      <h3><a href="/news/{{.Time}}">{{unixtoreadable $e.Time}} - {{$e.Title}}</a>{{ if $.Board.ModCred }} <a href="/{{ $.Key }}/newsdelete/{{ $e.Time }}">[Delete] </a>{{end}}</h3>
+      <br>
+
+      <p>{{$e.Content}}</p>
+    </div>
     {{ end }}
-  </table>
   </div>
-  
+
 </div>
 {{ end }}
 {{ define "bottom" }}{{ end }}
diff --git a/static/css/themes/default.css b/static/css/themes/default.css
index 24e85e6..8b93e51 100644
--- a/static/css/themes/default.css
+++ b/static/css/themes/default.css
@@ -126,7 +126,8 @@ a.reply {
 }
 
 .popup-box {
-	position: absolute;
+	position: fixed;
+	min-width: 300px;
 	width: min-content;
 	z-index: 9;
 	display: block;
@@ -151,7 +152,6 @@ a.reply {
 
 .newsbox-news {
     text-align: left;
-    margin-left: 25px; 
     margin-top: 25px;
     padding: 25px;
 }
@@ -160,3 +160,38 @@ a.reply {
 .newsbox-news h3 {
     margin: 0;
 }
+
+#stopTablePost {
+	float: right;
+	display: none;
+}
+
+#boardGrid {
+	display: grid;
+	grid-auto-columns: 1fr;
+	border: 4px solid #820404;
+	background-color: #f9f9e0;
+}
+
+#boardGridHeader {
+	border-bottom: 2px solid #820404;
+	display: inline-grid;
+}
+
+.boardGridCell {
+	white-space: nowrap;
+	display: inline-grid;
+	text-align: left;
+	padding: 5px;
+	border-top: 2px solid #820404;
+	border-left: 2px solid #820404;
+}
+
+/* these may or may not work. my CSS is poor so i just kinda did stuff until it worked. */
+.boardGridCell:nth-child(-n+4) {
+	border-top: none;
+}
+
+.boardGridCell:nth-child(3n+2) {
+	border-left: none;
+}
diff --git a/static/css/themes/gruvbox.css b/static/css/themes/gruvbox.css
index fb40267..b534bed 100644
--- a/static/css/themes/gruvbox.css
+++ b/static/css/themes/gruvbox.css
@@ -103,7 +103,8 @@ input[type="text"] {
 }
 
 .popup-box {
-	position: absolute;
+	position: fixed;
+	min-width: 300px;
 	width: min-content;
 	z-index: 9;
 	display: block;
@@ -129,7 +130,6 @@ input[type="text"] {
 .newsbox-news {
     text-align: left;
     background-color: #504945;
-    margin-left: 25px; 
     margin-top: 25px;
     padding: 25px;
 }
@@ -138,3 +138,38 @@ input[type="text"] {
 .newsbox-news h3 {
     margin: 0;
 }
+
+#stopTablePost {
+	float: right;
+	display: none;
+}
+
+#boardGrid {
+	display: grid;
+	grid-auto-columns: 1fr;
+	border: 4px solid #928374;
+	background-color: #3c3836;
+}
+
+#boardGridHeader {
+	border-bottom: 2px solid #928374;
+	display: inline-grid;
+}
+
+.boardGridCell {
+	white-space: nowrap;
+	display: inline-grid;
+	text-align: left;
+	padding: 5px;
+	border-top: 2px solid #928374;
+	border-left: 2px solid #928374;
+}
+
+/* these may or may not work. my CSS is poor so i just kinda did stuff until it worked. */
+.boardGridCell:nth-child(-n+4) {
+	border-top: none;
+}
+
+.boardGridCell:nth-child(3n+2) {
+	border-left: none;
+}
diff --git a/static/index.html b/static/index.html
index 8f1d53b..d45dd77 100644
--- a/static/index.html
+++ b/static/index.html
@@ -25,20 +25,20 @@
   {{ if .Boards }}
   {{ $l := len .Boards }}
   <div style="margin-top:50px;">
-    <div style="display: grid;border-right: 2px solid #820404;">
+    <div id="boardGrid">
       {{ if lt $l 2 }}
-      <div style="display: inline-grid; border-bottom: 2px solid #820404;border-left: 2px solid #820404;border-top: 2px solid #820404;"><span style="font-size: 1.5em;font-weight: bold;">Local boards</span></div>
+      <div id="boardGridHeader"><span style="font-size: 1.5em;font-weight: bold;">Local boards</span></div>
       {{ else if eq $l 2 }}
-      <div style="display: inline-grid; grid-column: 1 / 3; border-bottom: 2px solid #820404;border-left: 2px solid #820404;border-top: 2px solid #820404;"><span style="font-size: 1.5em;font-weight: bold;">Local boards</span></div>
+      <div id="boardGridHeader" style="grid-column: 1 / 3;"><span style="font-size: 1.5em;font-weight: bold;">Local boards</span></div>
       {{ else }}
-      <div style="display: inline-grid;grid-column: 1 / 4;border-bottom: 2px solid #820404;border-left: 2px solid #820404;border-top: 2px solid #820404;"><span style="font-size: 1.5em;font-weight: bold;">Local boards</span></div>
+      <div id="boardGridHeader" style="grid-column: 1 / 4;"><span style="font-size: 1.5em;font-weight: bold;">Local boards</span></div>
       {{ end }}
       {{ range .Boards }}
-      <div style="whitespace: nowrap;display: inline-grid;text-align: left;padding: 5px;border-bottom: 2px solid #820404;border-left: 2px solid #820404;"><a href="{{.Location}}"><b>/{{.Name}}/</b> - {{.PrefName}} {{ if not .Restricted }} [NSFW] {{ end }}</a></div>
+      <div class="boardGridCell"><a href="{{.Location}}"><b>/{{.Name}}/</b> - {{.PrefName}} {{ if not .Restricted }} [NSFW] {{ end }}</a></div>
       {{ end }}
       {{ if gt $l 2 }}
       {{ range .BoardRemainer }}
-      <div style="whitespace: nowrap;display: inline-grid;text-align: left;padding: 5px;border-bottom: 2px solid #820404;border-left: 2px solid #820404;"></div>
+      <div class="boardGridCell"></div>
       {{ end }}
       {{ end }}
     </div>
@@ -54,10 +54,8 @@
       <br>
 
       <p>{{$e.Content}}</p>
-      </td>
     </div>
     {{ end }}
-  </table>
   </div>
   {{ end }}
 
diff --git a/static/js/posts.js b/static/js/posts.js
index 30f4893..29541c0 100644
--- a/static/js/posts.js
+++ b/static/js/posts.js
@@ -3,12 +3,13 @@ function startNewPost(){
     el.style="display:none;";
     el.setAttribute("state", "1");
     document.getElementById("newpost").style = "";
+    document.getElementById("stopTablePost").style = "display:unset;";
     sessionStorage.setItem("newpostState", true);
 }
 
 function stopNewPost(){
     var el = document.getElementById("newpostbtn");
-    el.style="display:block;";
+    el.style="display:block;margin-bottom:100px;";
     el.setAttribute("state", "0");
     document.getElementById("newpost").style = "display: none;";
     sessionStorage.setItem("newpostState", false);
diff --git a/static/main.html b/static/main.html
index 794a602..3e29053 100644
--- a/static/main.html
+++ b/static/main.html
@@ -10,7 +10,7 @@
     <link rel="icon" type="image/png"  href="/static/favicon.png">
     <link rel="stylesheet" type="text/css" href="/static/css/themes/default.css" title="default">
     {{ range .Themes }}
-    <link rel="alternate stylesheet" type="text/css" href="/static/css/themes/{{.}}.css" title="{{.}}">
+    <link rel="alternate stylesheet" type="text/css" href="/static/css/themes/{{.}}.css" title="{{.}}" disabled>
     {{ end }}
     {{ template "header" . }}
   </head>
@@ -41,20 +41,21 @@
 
     {{ template "bottom" . }}
 
+    <div align="center" style="width: 500px; margin:0 auto; margin-top: 50px;">
+      <a href="/">[Home]</a><a href="/static/rules.html">[Rules]</a><a href="/static/faq.html">[FAQ]</a>
+      <p>All trademarks and copyrights on this page are owned by their respective parties.</p>
+    </div>
+
     <div style="float: right;">
       Theme:
       <select id="themeSwitcher" onchange="setTheme(this.options[this.selectedIndex].value)">
+        <option value="default">default</option>
         {{ range .Themes }}
         <option value="{{.}}">{{.}}</option>
         {{ end }}
       </select>
     </div>
 
-    <div align="center" style="width: 500px; margin:0 auto; margin-top: 50px;">
-      <a href="/">[Home]</a><a href="/static/rules.html">[Rules]</a><a href="/static/faq.html">[FAQ]</a>
-      <p>All trademarks and copyrights on this page are owned by their respective parties.</p>
-    </div>
-
     <script src="/static/js/themes.js"></script>
 {{ template "script" . }}
   </body>
diff --git a/static/news.html b/static/news.html
index 65ae410..a83c406 100644
--- a/static/news.html
+++ b/static/news.html
@@ -1,6 +1,6 @@
 {{ define "header" }}
 <title>{{ .Title }}</title>
-<meta name="description" content="{{ .PreferredUsername }} is a federated image board based on ActivityPub. The current version of the code running on the server is still a work-in-progress product, expect a bumpy ride for the time being. Get the server code here: https://github.com/FChannel0.">    
+<meta name="description" content="{{ .PreferredUsername }} is a federated image board based on ActivityPub. The current version of the code running on the server is still a work-in-progress product, expect a bumpy ride for the time being. Get the server code here: https://github.com/FChannel0.">
 
 <meta property="og:locale" content="en_US" />
 <meta property="og:type" content="website" />
@@ -18,12 +18,14 @@
 
 {{ define "top" }}{{ end }}
 {{ define "content" }}
-<div style="text-align: left; max-width: 800px; margin: 0 auto;">
+<div class="newsbox" style="text-align: left; max-width: 800px; margin: 0 auto;margin-top: 50px;padding-top:0;">
 
   {{ range .NewsItems }}
+  <div class="newsbox-news">
   <p><h1>{{unixtoreadable .Time}} - {{.Title}}</h1><br>{{.Content}}</p>
+  </div>
   {{ end }}
-  
+
 </div>
 {{ end }}
 {{ define "bottom" }}{{ end }}
diff --git a/static/top.html b/static/top.html
index 94abad7..0e265d8 100644
--- a/static/top.html
+++ b/static/top.html
@@ -1,13 +1,13 @@
 {{ define "top" }}
-<div style="margin: 0 auto; width: 700px; margin-bottom: 100px;">
+<div style="margin: 0 auto; width: 700px;">
   <h1 style="text-align: center;">/{{ .Board.Name }}/ - {{ .Board.PrefName }}</h1>
   <p style="text-align: center;">{{ .Board.Summary }}</p>
   {{ $len := len .Posts }}
   {{ if eq $len 0 }}
   {{ if .Board.InReplyTo }}
-  <h3 id="newpostbtn"  state="0" style="display: none;"><a href="javascript:startNewPost()">[Post a Reply]</a></h3>
+  <h3 id="newpostbtn"  state="0" style="display: none; margin-bottom:100px;"><a href="javascript:startNewPost()">[Post a Reply]</a></h3>
   {{ else  }}
-  <h3 id="newpostbtn"  state="0" style="display: none;"><a href="javascript:startNewPost()">[Start a New Thread]</a></h3>
+  <h3 id="newpostbtn"  state="0" style="display: none; margin-bottom:100px;"><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">
@@ -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 id="stopTablePost" onclick="stopNewPost()">[X]</a>
             </td>
           </tr>
           <tr>
@@ -61,9 +61,9 @@
 
   {{ 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:startNewPost()">[Post a Reply]</a></h3>
+  <h3 id="newpostbtn"  state="0" style="text-align: center; margin-top: 80px; display: none; margin-bottom:100px;"><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:startNewPost()">[Start a New Thread]</a></h3>
+  <h3 id="newpostbtn"  state="0" style="text-align: center; margin-top: 80px; display: none; margin-bottom:100px;"><a href="javascript:startNewPost()">[Start a New Thread]</a></h3>
   {{ end }} <!-- end if inreplyto-->
   {{ $len := len .Posts }}
   <div id="newpost">
@@ -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 id="stopTablePost" onclick="stopNewPost()">[X]</a>
           </tr>
           <tr>
             <td><label for="options">Options:</label></td>