display children count on minimize, block comments, reports, improved responsiveness. fixes #41

public/dark.css

@@ -1,4 +1,4 @@
-body {
+body, .blockpopup {
   background-color: #262626;
   color: #ddd;
 }
@@ -16,6 +16,9 @@ input[type=text], input[type=password], textarea {
 .post .score {
   color: #646464;
 }
+.post .thumb {
+  background-color: #424242;
+}
 .score form.link-btn input {
   color: #646464;
 }

public/style.css

@@ -24,54 +24,84 @@ summary {
   transform: scale(1.03);
 }
 .post {
-  margin: 8px 0px;
+  margin: 6px 0px;
+  overflow: hidden;
+}
+.post .p {
+  overflow:hidden;
 }
 .post .thumb {
-  height: 52px;
+  margin: 2px 8px 0px 0px;
-  width: 70px;
-  margin: 0px 8px 0px 0px;
   position: relative;
   overflow: hidden;
-  --background-color: #e7e7e7;
+  background-color: #f0f0f0;
+}
+.post .thumb, .post .thumb div {
+  height: 47px;
+  width: 70px;
 }
 .post .thumb div {
-  height: 52px;
-  width: 70px;
   background-repeat: no-repeat;
-  background-size: contain;
+  background-size: cover;
   background-position: center;
 }
 .rank {
   color: #c6c6c6;
   font-size: 14px;
-  margin-top: 17px;
+  margin: 16px 0 0 0;
   text-align: right;
-  min-width: 21px;
+  min-width: 19px;
 }
 .post .score {
   color: #c6c6c6;
   font-size: 12px;
   font-weight: 700;
+}
+.post .score div div,
+.post .score form {
   text-align: center;
-  min-width: 42px;
+  margin: 0 4px;
+  width: 38px;
 }
-.comment .score {
+.post .score div div {
-  clear:left;
+  margin: 18px 2px;
-  margin-right: 4px;
-  overflow:hidden;
-  min-width: 3px;
-  min-height: 38px;
 }
-.comment .content, .expando .md {
+.create_comment {
+  margin: 0 0 10px 0px;
+  overflow: hidden;
+}
+.expando .thumb, .expando .score, .expando .rank {
+  display: none;
+  background-color: unset !important;
+}
+.comment .content, .expando .md, .expando > div {
   line-height: 20px;
   overflow:hidden;
   max-width: 840px;
+  text-align: left;
+}
+.expando > div {
+  text-align: center;
 }
 .comment.hidden {
   padding-bottom:5px;
+  padding-left: 4px;
+}
+.comment.hidden .score form input {
+  display: none;
+}
+.comment .score {
+  min-height: 32px;
+  min-width: 4px;
 }
 .comment.hidden .score {
-  visibility: hidden;
+  min-height: 1px;
+}
+.comment .score form {
+  margin-right: 2px;
+  min-width: 20px;
+  position: relative;
+  bottom: 2px;
 }
 .score form.link-btn input {
   display: inline-block;
@@ -113,7 +143,6 @@ summary {
 .post .title  {
   color: #888;
   font-size: 10px;
-  margin-bottom: 2px;
 }
 .post .title.visited a {
   color: #551A8B;
@@ -132,6 +161,7 @@ summary {
 }
 .activity .post {
   margin-bottom: 10px;
+  min-height: 50px;
 }
 .activity .comment {
   padding-bottom: 1px;
@@ -148,10 +178,10 @@ summary {
 .comment {
   overflow: hidden;
   font-size: 14px;
-  margin: 0px 0px 10px 0px;
+  margin: 5px 0px 8px 0px;
   border: 1px solid #e6e6e6;
   border-radius: 3px;
-  padding: 10px 10px 0px 7px;
+  padding: 7px 8px 0px 4px;
 }
 .activity .comment {
   border: 0px;
@@ -159,8 +189,6 @@ summary {
 .comment img {
   max-height: 300px;
 }
-.comment .comment {
-}
 .comment .comment,
 .comment .comment .comment .comment,
 .comment .comment .comment .comment .comment .comment,
@@ -176,7 +204,8 @@ summary {
 }
 .comment .meta {
   font-size: 10px;
-  margin-bottom: 6px;
+  overflow: hidden;
+  margin-bottom: 2px;
 }
 .preview h3 {
   background-color: #f0f3fc;
@@ -232,20 +261,22 @@ summary {
 .commentmenu div {
   border-top: 1px dotted gray;
   font-size: 12px;
+  padding-top: 3px;
 }
 form.savecomment {
-  margin: 0px 0px 10px 0px;
+  max-width: 500px;
-  width: 500px;
+  padding: 0 4px;
 }
 .comment > .children > form.savecomment {
   margin: 0px 0px 10px 20px;
 }
 .comment .children {
-  margin: 5px 0px 5px 15px;
+  margin: 3px 0px 5px 21px;
 }
 .savecomment textarea {
   margin: 5px 0px;
   width: 100%;
+  box-sizing: border-box;
   height: 100px;
 }
 
@@ -270,8 +301,11 @@ form.savecomment {
 .savecomment .right a {
   line-height: 28px;
   font-size: 10px;
+  margin-right: 4px;
+}
+.comment.hidden .meta span, .comment.hidden .meta b {
+  font-style: italic;
 }
-
 .comment .meta a.minimize {
   color: #369;
   font-size: 10px;
@@ -281,15 +315,21 @@ form.savecomment {
   color: gray;
   font-weight: 400;
 }
-.comment.hidden .meta a:last-child {
+.numChildren {
+  display: none;
+  color: gray;
+  font-style: italic;
+}
+.comment.hidden .numChildren {
+  display: inline
+}
+.comment.hidden .meta a.creator {
   font-style: italic;
   font-weight: 700;
 }
 .comment.hidden .content, .comment.hidden .children, .comment.hidden .morecomments {
   display: none;
 }
-.children .morecomments {
-}
 .morecomments {
   height: 15px;
   clear: left;
@@ -417,7 +457,7 @@ form.nsfw div {
 .buttons li {
   display: inline;
 }
-.buttons, .buttons > form input, .buttons li form input {
+.buttons, .buttons > form input, .buttons li > form input {
   font-weight: bold;
   font-size: 10px;
   padding: 0;
@@ -426,7 +466,8 @@ form.nsfw div {
   width: 100%;
 }
 .comment .buttons {
-  margin: 3px 0px 0px 0px;
+  margin: 3px 0px 2px 0px;
+  line-height: 16px;
 }
 .comment.hidden .buttons {
   display: none;
@@ -436,28 +477,39 @@ form.nsfw div {
   border-left: 2px solid #c5c1ad;
   padding: 0 8px;
 }
-.buttons a, .buttons > form input, .comment .buttons form input {
+.buttons a, .buttons > form input, .comment .buttons li > form input {
   text-decoration: none;
   color: #888;
   display: inline-block;
   margin-right: 5px !important;
 }
-.buttons a:hover, .buttons > form input:hover, .comment .buttons form input:hover {
+.buttons a:hover, .buttons > form input:hover, .comment .buttons li > form input:hover {
   text-decoration: underline;
 }
 .entry {
+  display: inline-block;
   color: #888;
-  overflow:hidden;
+  overflow: hidden;
+  padding: 4px 0 0 0;
 }
-.entry .buttons .blockpopup {
+.blockpopup {
   display: inline-block;
   position: absolute;
   z-index: 100;
   background-color: white;
 }
+.blockpopup fieldset {
+  border-color: gray;
+}
 .entry .meta {
   margin: -1px 0px 1px 0px;
 }
+.entry .meta > span {
+  white-space: nowrap;
+}
+.entry > div:last-child {
+  overflow: hidden;
+}
 form.blockpost {
   padding: 2px;
   border: 1px solid #888;
@@ -479,20 +531,22 @@ form.blockpost {
   float: left;
   position: relative;
   color: #fff;
-  font-size: 16px;
+  font-size: 12px;
-  left: 11px;
+  left: 12px;
-  top: 3px;
+  top: 7px;
 }
 .open.expando-button {
   border-radius: 30px;
 }
 .open.expando-button::before {
-  content: "x";
+  content: "✖";
   color: #fff;
-  left: 7px;
-  top: 0px;
   font-weight: bold;
   font-family: sans-serif;
+  left: 5px;
+  top: 1px;
+  font-size: 15px;
+  line-height: 22px;
 }
 .expando-button:hover{
   background-color: #466599;
@@ -506,7 +560,7 @@ form.blockpost {
 .hidechildren.hidden .show {
   display: inline;
 }
-.hidechildren.hidden .hide {
+.hidechildren.hidden span:first-child {
   display: none;
 }
 .hidechildren span {
@@ -518,7 +572,6 @@ form.blockpost {
 .expando {
   display: none;
   max-width: 900px;
-  margin-top: 5px;
   position: relative;
   color: #000;
 }
@@ -563,17 +616,19 @@ form.blockpost {
 }
 .expando.open{
   display: block;
+  clear: left;
 }
 .expando .image {
   max-width: 100%;
   cursor: nwse-resize;
+  margin-top:4px;
 }
 .expando .md {
+  margin-top:4px;
   background-color: #fafafa;
   border: 1px solid #369;
   border-radius: 7px;
   padding: 5px 10px;
-  margin: 5px auto;
   font-size: 14px;
   overflow: auto;
 }
@@ -613,44 +668,30 @@ form.blockpost {
   white-space: nowrap;
 }
 
-#sidetoggle button::before {
-  content: '[+]';
-  visibility: visible;
-  cursor: pointer;
-  position: relative;
-  top: 12px;
-}
-#sidetoggle.o button::before {
-  content: '[-]';
-  visibility: visible;
-  cursor: pointer;
-  position: relative;
-  top: 12px;
-}
-#sidetoggle button {
-  visibility: hidden;
-  width: 10px;
-  margin-right: 16px;
-  background: unset;
-  border: unset;
-}
 #sidetoggle {
   position: absolute;
-  cursor: pointer;
   right: 0;
-  display: inline-flex;
+}
-  align-items: end;
+#sidetoggle button {
-  height: 20px;
+  background: unset;
-  font-size: 12px;
+  border: unset;
   cursor: pointer;
 }
+#sidetoggle span:last-child {
+  display: none;
+}
+.sidetoggle #sidetoggle span:last-child {
+  display: inline
+}
+.sidetoggle #sidetoggle span:first-child {
+  display: none
+}
 .side {
   display: none;
   margin: 0 auto;
   font-size: 12px;
-  width: 300px;
   padding: 0 5px 0 10px;
-  margin-bottom: 10px;
+  margin: 0px auto;
   border-radius: 0px 0px 0px 4px;
 }
 .side img, .md img{
@@ -658,37 +699,80 @@ form.blockpost {
 }
 main {
   position: relative;
-  margin: 0px 10px;
+  margin: 0px 5px;
 }
-.wide .side {
+.sidetoggle .side {
   display: block !important;
+  margin: 0 auto;
 }
-@media (min-width: 900px) {
+#search input {
-  .wide .side {
+  width: 100%;
-    display: none !important;
+  box-sizing: border-box;
+}
+#search {
+  overflow: hidden;
+}
+@media (min-width: 600px) {
+  main > .community {
+    margin: 20px 50px;
   }
-  #sidetoggle button::before {
+  .community .details {
-    content: '[-]';
+    margin-left: 36px;
   }
-  #sidetoggle.o button::before {
+  .side {
-    content: '[+]';
+    float:right;
+    width: 300px;
   }
-  .expando {
+  main {
-    text-align: left;
+    margin-right: 0px;
+    margin-left: 10px;
+  }
+  main > .comment, .commentmenu, #tagline, .menu, .activity, .expando {
+    margin-right: 10px;
+  }
+  .entry {
+    display: block;
+  }
+}
+@media (min-width: 800px) {
+  .expando .thumb, .expando .score, .expando .rank {
+    display: block;
   }
   .expando .image {
     max-width: 578px;
   }
+  .expando > div {
+    text-align: left;
+  }
+}
+@media (min-width: 1064px) {
+  .signup > div:first-child {
+    position: unset !important;
+  }
+  .signup > div:first-child {
+    border-right: 1px solid #e0e0e0;
+    padding-right: 60px;
+  }
+  .sidetoggle .side {
+    display: none !important;
+  }
+  #sidetoggle span:last-child {
+    display: inline
+  }
+  #sidetoggle span:first-child {
+    display: none
+  }
+  .sidetoggle #sidetoggle span:last-child {
+    display: none;
+  }
+  .sidetoggle #sidetoggle span:first-child {
+    display: inline;
+  }
+
   .side {
     display: block;
-    float:right;
-  }
-  main {
-    margin-right: 0px;
-  }
-  main > .comment {
-    margin-right: 10px;
   }
+
 }
 .side form {
   margin: 0px 0px 5px 0px;
@@ -781,7 +865,7 @@ h1, h2 {
   color: #369;
 }
 main > .community {
-  margin: 20px 50px;
+  margin: 20px 5px;
   max-width: 840px;
   position: relative;
 }
@@ -795,15 +879,12 @@ main > .community {
   max-height: 170px;
   overflow: auto;
 }
-.community .details {
-  margin-left: 36px;
-}
 nav {
+  position: relative;
   border-bottom: 1px solid #00a846;
   background-color: #9ad59b;
   z-index: 99;
-  margin-bottom: 5px;
+  margin-bottom: 8px;
-  position: relative;
 }
 nav .communities {
  background-color: #f0f0f0;
@@ -835,7 +916,7 @@ nav .communities a {
   text-decoration: none;
   color: black;
 }
-nav .title a:hover {
+nav .title:hover {
   text-decoration: underline;
 }
 
@@ -870,7 +951,7 @@ nav .space a {
 nav .icon {
   height: 54px;
   width: 60px;
-  margin: 2px 5px;
+  margin: 2px 3px;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center bottom;
@@ -902,6 +983,10 @@ nav li {
   font-weight: 700;
 }
 
+nav li:nth-last-child(2) {
+  margin-right: 26px;
+}
+
 nav ul a {
   color: #369;
   background-color: #eff7ff;
@@ -936,6 +1021,7 @@ body nav .right a.mailbox {
   position: relative;
   top: 4px;
   color: gray;
+  line-height: 0;
 }
 nav .right a, nav .right input[type=submit] {
   color: #369;
@@ -945,7 +1031,7 @@ nav .right form, .comment form, form.link-btn {
   display: inline-block;
   margin: 0;
 }
-nav .right form input, .comment .buttons input, form.link-btn input {
+nav .right form input, .comment .buttons li > form input, form.link-btn input {
   background-color: rgba(0, 0, 0, 0);
   border: 0px;
   font-size: unset;
@@ -958,6 +1044,10 @@ nav .right form input, .comment .buttons input, form.link-btn input {
   overflow: hidden;
   font-size: 12px;
   font-weight: bold;
+  background-color: #fffcd4;
+  color: #000;
+  margin-bottom: 5px;
+  padding: 0px 5px;
 }
 .menu {
   border-bottom: 1px dotted gray;
@@ -1042,7 +1132,7 @@ form.create input[type=file], form.create select {
 .signup {
   margin: 0px 30px;
 }
-.signup h2 {
+.signup h1 {
   margin-bottom: 10px;
 }
 .signup > div {
@@ -1050,8 +1140,8 @@ form.create input[type=file], form.create select {
   margin: 30px;
 }
 .signup > div:first-child {
-  border-right: 1px solid #e0e0e0;
+  position: absolute;
-  padding-right: 60px;
+  top: 316px;
 }
 .root label, .signup label {
   font-size: 15px;
@@ -1073,7 +1163,10 @@ form.create input[type=file], form.create select {
 }
 .signup input[type=submit] {
   margin-top: 20px;
-  float: right;
+  display: block;
+}
+.signup figure {
+  margin: 16px 0 4px 0;
 }
 .signup .question {
   max-width: 500px;

public/utils.js

@@ -27,7 +27,6 @@ function postClick(e) {
     btn.className = "expando-button"
     targ.getElementsByClassName("embed")[0].innerHTML = ""
   } else {
-    if (window.innerWidth <= 800) targ.appendChild(bdy);
     bdy.className = 'expando open';
     btn.className = "expando-button open"
     var url = targ.getElementsByClassName("url")[0].href
@@ -68,13 +67,12 @@ function commentClick(e) {
   var targ = e.currentTarget || e.srcElement || e;
   if (targ.nodeType == 3) targ = targ.parentNode;
   if (e.target.name=="submit") {
-    e.preventDefault()
     var form = uptil(e.target, function(el){ return el.tagName == "FORM" })
     if (form) {
       data = new FormData(form)
       data.set(e.target.name, e.target.value)
       data.set("xhr", 1)
-      if (("c"+data.get("commentid")) == targ.id) {
+      if (("c"+data.get("commentid")) == targ.id && data.get("op") != "block_comment") {
         targ.action = form.action
         if (e.target.value == "preview") {
           targ = form
@@ -82,6 +80,8 @@ function commentClick(e) {
       } else if (("c"+data.get("parentid")) == targ.id) {
         targ = form
       } else { return }
+      e.preventDefault()
+      e.target.style.cursor = 'wait'
       e.target.disabled = "disabled"
       if (data.get("op") == "delete_comment") {
         if (!confirm("Are you sure?")) {
@@ -120,7 +120,7 @@ function commentClick(e) {
       btn.innerHTML = "[+]"
     } else {
       targ.className = "comment"
-      btn.innerHTML = "[-]"
+      btn.innerHTML = "[–]"
     }
     return false
   }
@@ -506,6 +506,10 @@ function setup() {
   var comments = document.getElementsByClassName("comment")
   for (var i = 0; i < comments.length; i++) {
     comments[i].addEventListener("click", commentClick)
+    var forms = comments[i].getElementsByTagName("form")
+    for (var f = 0; f < forms.length; f++) {
+      forms[f].addEventListener("submit", formSubmit)
+    }
   }
   var links = document.getElementsByTagName("a")
   for (var i = 0; i < links.length; i++) {
@@ -521,8 +525,8 @@ function setup() {
 function sideToggle(e) {
   e.preventDefault();
   var side = document.getElementsByClassName("side")[0]
-  var main = document.getElementsByTagName("main")[0]
+  var body = document.getElementsByTagName("body")[0]
-  if (!side) return;
+  if (!side || !body) return;
   var form = e.target
   if (form.tagName != "FORM") {
     form = uptil(e.target, function(el){ return el.tagName == "FORM" })
@@ -530,19 +534,10 @@ function sideToggle(e) {
   var data = new FormData(form)
   data.append("xhr", "1")
   request(form.target, data)
-console.log(e)
+  if (body.className == "sidetoggle") {
-  if (side.className == "side") {
+    body.className = ""
-    side.className = "side hide"
-    form.classList.add("o")
-    if (main) {
-      main.className = "wide"
-    }
   } else {
-    side.className = "side"
+    body.className = "sidetoggle"
-    form.classList.remove("o")
-    if (main) {
-      main.className = ""
-    }
   }
 
 }

routes.go

@@ -134,9 +134,9 @@ var funcMap = template.FuncMap{
 	},
 	"thumbnail": func(p lemmy.Post) string {
 		if pictrs.MatchString(p.ThumbnailURL.String()) {
-			return p.ThumbnailURL.String() + "?format=jpg&thumbnail=64"
+			return p.ThumbnailURL.String() + "?format=jpg&thumbnail=96"
 		} else if pictrs.MatchString(p.URL.String()) {
-			return p.URL.String() + "?format=jpg&thumbnail=64"
+			return p.URL.String() + "?format=jpg&thumbnail=96"
 		}
 		if imgur.MatchString(p.URL.String()) {
 			return imgur.ReplaceAllString(p.URL.String(), "https://i.imgur.com/${2}s.jpg")
@@ -661,10 +661,16 @@ func GetComment(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 	}
 	commentid, _ := strconv.ParseInt(ps.ByName("commentid"), 10, 64)
 	state.GetComment(commentid)
+	if ps.ByName("op") == "block" {
+		state.Op = "block"
+		Render(w, "block.html", state)
+		return
+	}
 	if state.XHR && len(m["content"]) > 0 {
 		Render(w, "create_comment.html", state)
 		return
 	}
+
 	state.GetPost(state.PostID)
 	Render(w, "index.html", state)
 }
@@ -1058,7 +1064,7 @@ func UserOp(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 		}
 		state.Client.BlockPerson(context.Background(), lemmy.BlockPerson{
 			PersonID: personId,
-			Block:    r.FormValue("submit") == "block",
+			Block:    r.FormValue("submit") != "unblock",
 		})
 		if r.FormValue("xhr") == "1" {
 			w.Write([]byte{})
@@ -1337,6 +1343,43 @@ func UserOp(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 				Block:      true,
 			})
 		}
+		if reason := r.FormValue("reason"); reason != "" {
+			state.Client.CreatePostReport(context.Background(), lemmy.CreatePostReport{
+				PostID: postid,
+				Reason: reason,
+			})
+		}
+		if r.FormValue("xhr") != "" {
+			w.Write([]byte{})
+			return
+		}
+	case "block_comment":
+		commentid, _ := strconv.ParseInt(r.FormValue("commentid"), 10, 64)
+		state.GetComment(commentid)
+		if r.FormValue("blockuser") != "" && len(state.Comments) > 0 {
+			fmt.Println("blockuser")
+			state.Client.BlockPerson(context.Background(), lemmy.BlockPerson{
+				PersonID: state.Comments[0].P.Creator.ID,
+				Block:    true,
+			})
+		}
+		if r.FormValue("blockuserinstance") != "" && len(state.Comments) > 0 {
+			fmt.Println("blockuserinstance")
+			state.Client.BlockInstance(context.Background(), lemmy.BlockInstance{
+				InstanceID: state.Comments[0].P.Creator.InstanceID,
+				Block:      true,
+			})
+		}
+		if reason := r.FormValue("reason"); reason != "" {
+			state.Client.CreateCommentReport(context.Background(), lemmy.CreateCommentReport{
+				CommentID: commentid,
+				Reason:    r.FormValue("reason"),
+			})
+		}
+		if r.FormValue("xhr") != "" {
+			w.Write([]byte{})
+			return
+		}
 	case "read_post":
 		postid, _ := strconv.ParseInt(r.FormValue("postid"), 10, 64)
 		post := lemmy.MarkPostAsRead{

templates/block.html

@@ -3,16 +3,25 @@
   {{ template "nav.html" . }}
 {{ end }}
 <form method="POST" class="blockpost"{{ if not .XHR }} action="./"{{ end }}>
+  <fieldset>
+    <legend>block</legend>
   <div>
     <input type="checkbox" id="blockuser" name="blockuser" checked>
-    <label for="blockuser">u/{{ fullname (index .Posts 0).Creator }}</label>
+    <label for="blockuser">u/{{ if .Posts }}{{ fullname (index .Posts 0).Creator }}{{ else }}{{ fullname (index .Comments 0).P.Creator }}{{ end }}</label>
   </div>
-  {{ if and (not (index .Posts 0).Creator.Local) (ne (index .Posts 0).Creator.InstanceID .Community.CommunityView.Community.InstanceID) }}
+  {{ if and .Comments (not (index .Comments 0).P.Creator.Local) }}
+  <div>
+    <input type="checkbox" id="blockuserinstance" name="blockuserinstance">
+    <label for="blockuserinstance">{{ instance (index .Comments 0).P.Creator.ActorID }}</label>
+  </div>
+  {{ end }}
+  {{ if and .Posts (not (index .Posts 0).Creator.Local) (ne (index .Posts 0).Creator.InstanceID .Community.CommunityView.Community.InstanceID) }}
   <div>
     <input type="checkbox" id="blockuserinstance" name="blockuserinstance">
     <label for="blockuserinstance">{{ instance (index .Posts 0).Creator.ActorID }}</label>
   </div>
   {{ end }}
+  {{ if .Community }}
   <div>
     <input type="checkbox" id="blockcommunity" name="blockcommunity">
     <label for="blockcommunity">c/{{ fullcname .Community.CommunityView.Community }}</label>
@@ -23,12 +32,25 @@
     <label for="blockpostinstance">{{ instance .Community.CommunityView.Community.ActorID }}</label>
   </div>
   {{ end }}
+  {{ end }}
+</fieldset>
   <div>
+    <fieldset>
+      <legend>report {{ if .Posts }}post{{ else }}comment{{ end }}</legend>
+    <textarea name="reason"></textarea>
+  </fieldset>
+  </div>
+  <div>
+    {{ if .Posts }}
     <input type="hidden" name="op" value="block_post">
     <input type="hidden" name="postid" value="{{(index .Posts 0).Post.ID}}">
     <input type="hidden" name="userinstanceid" value="{{(index .Posts 0).Creator.InstanceID}}">
     <input type="hidden" name="postinstanceid" value="{{.Community.CommunityView.Community.InstanceID}}">
-    <input type="submit" value="block" name="submit">
+    {{ else }}
+    <input type="hidden" name="op" value="block_comment">
+    <input type="hidden" name="commentid" value="{{(index .Comments 0).P.Comment.ID}}">
+    {{ end }}
+    <input type="submit" value="submit" name="submit">
     <input type="submit" value="cancel" name="submit">
   </div>
 </form>

templates/comment.html

@@ -15,10 +15,10 @@
         </div>
         <div class="meta">
           <a class="minimize" href="" for="c{{.P.Comment.ID}}">
-{{- if or (lt .P.Counts.Score -5) .P.Comment.Deleted -}}
+{{- if or (lt .P.Counts.Score -5) .P.Comment.Deleted .P.Comment.Removed -}}
             [+]
 {{- else -}}
-            [-]
+            [–]
 {{- end -}}
           </a>
           <a class="creator{{ if .P.Comment.Distinguished}}{{if false}} admin{{end}} distinguished{{ else if .Submitter }} submitter{{end}}" href="/{{.State.Host}}/u/{{fullname .P.Creator}}">
@@ -32,6 +32,9 @@
                 {{- if gt .P.Comment.Updated.ValueOrZero.Time.Unix .P.Comment.Published.Time.Unix -}}
                 * (last edited <span title="{{.P.Comment.Updated.ValueOrZero.Time}}">{{ humanize .P.Comment.Updated.ValueOrZero.Time }}</span>)
                 {{ end }}
+                {{ if .P.Counts.ChildCount }}
+                <span class="numChildren">({{ .P.Counts.ChildCount }} children)</span>
+                {{ end }}
         </div>
         <div class="content">
 {{- if eq .Op "edit" }}
@@ -83,12 +86,16 @@
               </form>
             </li>
             <li>
-              <form class="link-btn" method="POST">
+              <!--form class="link-btn" method="POST">
                 <input type="hidden" name="commentid" value="{{.P.Comment.ID}}">
                 <input type="hidden" name="op" value="block_user">
                 <input type="hidden" name="user_id" value="{{.P.Creator.ID}}">
                 <input type="submit" name="submit" value="block">
-              </form>
+              </form-->
+            </li>
+            <li>
+              <a href="/{{ .State.Host }}/comment/{{ .P.Comment.ID }}/block" rel="xhr" target="block{{ .P.Comment.ID }}">block</a>
+              <span class="blockpopup" name="block{{.P.Comment.ID}}"></span>
             </li>
             <li>
               <a class="reply" for="c{{.P.Comment.ID}}" href="/{{.State.Host}}/comment/{{.P.Comment.ID}}?reply">
@@ -107,7 +114,7 @@
             </li>
 {{- end }}
 {{- if and .State.PostID (gt (add .P.Counts.ChildCount .ChildCount) 0) }}
-            <li><a class="hidechildren" for="c{{.P.Comment.ID}}" href=""><span class="hide">hide</span><span class="show">show {{add .P.Counts.ChildCount .ChildCount }}</span> child comments</a></li>
+            <li><a class="hidechildren" for="c{{.P.Comment.ID}}" href=""><span>hide</span><span class="show">show {{add .P.Counts.ChildCount .ChildCount }}</span> child comments</a></li>
 {{- end }}
           </ul>
         </div>

templates/create_comment.html

@@ -8,15 +8,13 @@
             <input class="imgupload" type="file" name="file" accept="image/*">
             </label>
           </div>
-          <div>
+          <textarea name="content" {{ if .XHR }}autofocus{{ end }}>
-            <textarea name="content" {{ if .XHR }}autofocus{{ end }}>
+          {{- if .Content }}
-            {{- if .Content }}
+          {{- .Content -}}
-            {{- .Content -}}
+          {{ else if and (eq .Op "edit") .Comments }}
-            {{ else if and (eq .Op "edit") .Comments }}
+          {{- (index .Comments 0).P.Comment.Content -}}
-            {{- (index .Comments 0).P.Comment.Content -}}
+          {{ end -}}
-            {{ end -}}
+          </textarea>
-            </textarea>
-          </div>
         {{- if eq .Op "edit" }}
           <input type="hidden" name="op" value="edit_comment">
           <input type="hidden" name="commentid" value="{{.CommentID}}">

templates/frontpage.html

@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="/_/static/dark.css?v={{ .Version }}" {{ if not .Dark }}media="(prefers-color-scheme:dark)"{{ end }}>
     {{- end }}
   </head>
-  <body>
+  <body{{ if .HideSidebar  }} class="sidetoggle"{{ end }}>
     <noscript>
       <link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}">
     </noscript>
@@ -16,7 +16,7 @@
     {{- if and (not .ShowNSFW) .Community .Community.CommunityView.Community.NSFW }}
       {{ template "nsfw.html" }}
     {{- else }}
-    <main{{ if .HideSidebar  }} class="wide"{{ end }}>
+    <main>
       {{ template "sidebar.html" . }}
       {{- if and (not .Community) .Tagline }}
       <div id="tagline">

templates/login.html

@@ -27,7 +27,7 @@
           <img class="icon" src="{{ if and .Site .Site.SiteView.Site.Icon.IsValid }}{{ shrink .Site.SiteView.Site.Icon.String }}{{else}}/{{ .Host}}/icon.jpg{{end}}">
         </a>
       </div>
-      <a class="title" href="/{{.Host}}">{{ host .Host}}</a><span class="title"> - sign up or login</span>
+      <a class="title" href="/{{.Host}}">{{ host .Host}}</a>
       <span class="spacer"></span>
     </nav>
 {{ if .Alert }}
@@ -41,7 +41,7 @@
     <div class="signup">
 {{ if ne .Op "2fa" }}
     <div>
-      <h2>create a new account</h2>
+      <h1>create a new account</h1>
       <form method="POST" action="/{{ .Host}}/login">
         <label>
           username
@@ -69,8 +69,9 @@
         </label>
         {{ end }}
         {{ if and .Site .Site.SiteView.LocalSite.CaptchaEnabled .Captcha }}
-        <figure><img src="data:image/png;base64,{{ .Captcha.PNG }}"></figure>
+        <figure>
-        <figure><audio controls src="data:audio/wav;base64,{{ .Captcha.WAV }}"></audio></figure>
+          <img src="data:image/png;base64,{{ .Captcha.PNG }}">
+          <figcaption><audio controls src="data:audio/wav;base64,{{ .Captcha.WAV }}"></audio></figcaption></figure>
         <label>
           enter code
           <div><input required name="captchaanswer" type="text"></div>
@@ -88,7 +89,7 @@
     </div>
 {{ end }}
     <div>
-      <h2>login</h2>
+      <h1>login</h1>
       <form method="POST" action="/{{ .Host}}/login">
         <label>
           username

templates/main.html

@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="/_/static/dark.css?v={{ .Version }}" {{ if not .Dark }}media="(prefers-color-scheme:dark)"{{ end }}>
     {{- end }}
   </head>
-  <body>
+  <body{{ if .HideSidebar  }} class="sidetoggle"{{ end }}>
     <noscript>
       <link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}">
     </noscript>
@@ -16,7 +16,7 @@
     {{- if and (not .ShowNSFW) .Community .Community.CommunityView.Community.NSFW }}
       {{ template "nsfw.html" }}
     {{- else }}
-    <main{{ if .HideSidebar  }} class="wide"{{ end }}>
+    <main>
     {{- template "sidebar.html" . }}
     {{- if or (.Query) (.SearchType) (and (not .PostID) (not .User) (not .Activities) (eq .Op ""))}}
       {{ template "menu.html" . }}

templates/nav.html

@@ -60,7 +60,7 @@
       <span>: search</span>
       {{ end }}
       <ul>
-        {{- if eq .Op "block" }}<li class="selected"><a href="/{{ .Host }}/post/{{ (index .Posts 0).Post.ID}}">block</a></li>
+        {{- if eq .Op "block" }}<li class="selected"><a href="/{{ .Host }}{{ if .Posts }}/post/{{ (index .Posts 0).Post.ID}}{{ end}}">block</a></li>
         {{ else if and .User (not .Query)}}
         <li {{if eq .Op "" }}class="selected"{{end}}><a href="?">overview</a></li>
           {{ if and .Session (eq .User.PersonView.Person.ID .Session.UserID) }}
@@ -89,7 +89,7 @@
         {{- end }}{{ end }}
         <form id="sidetoggle" class="link-btn{{ if .HideSidebar }} o{{end}}" method="POST">
           <input type="hidden" name="op" value="sidetoggle">
-          <button title="Toggle Sidebar">{{ if .HideSidebar }}[+]{{ else }}[-]{{ end }}</button>
+          <button title="Toggle Sidebar"><span>[+]</span><span>[–]</span></button>
         </form>
       </ul>
       {{- end }}

templates/post.html

@@ -3,6 +3,7 @@
   {{- if gt .Rank 0 }}
         <div class="rank"> {{ .Rank }} </div>
   {{- end }}
+        <div class="p"> 
         <div class="score">
 {{- end }}
 {{- if or (ne .State.Op "save_post") (eq .State.Op "vote_post") }}
@@ -18,7 +19,7 @@
             <input type="submit" name="vote" value="▼"> 
           </form>
 {{- else }}
-          <div style="margin-top: 19px;">{{ .Counts.Score }}</div>
+          <div><div>{{ .Counts.Score }}</div></div>
 {{- end }}
 {{- end }}
 {{- if and (ne .State.Op "vote_post") (ne .State.Op "save_post") }}
@@ -31,7 +32,6 @@
           </a>
         </div>
         {{ end }}
-        <div class="entry">
           <div class="title{{ if .Read}} visited{{end}}">
             <a class="url" href="{{ if .Post.URL.IsValid }}{{ .Post.URL }}{{ else }}/{{ .State.Host }}/post/{{ .Post.ID }}{{ end }}"
               {{- if .State.LinksInNewWindow }} target="_blank" {{ end }}>
@@ -39,29 +39,32 @@
             </a>
             ({{ domain . }})
           </div>
+        <div class="entry">
           <div class="expando-button{{ if and (not (and .Post.Body.IsValid .Post.Body.String )) (not (isImage .Post.URL.String)) (not (isYoutube .Post.URL.String)) }} hidden{{else if eq .Rank 0}} open{{ end }}"></div>
+          <div>
           <div class="meta">
+            <span>
             submitted
-            <span title="{{.Post.Published.Time}}">{{ humanize .Post.Published.Time -}}</span>
+            <span title="{{.Post.Published.Time}}">{{ humanize .Post.Published.Time -}}</span></span>
             {{- if gt .Post.Updated.ValueOrZero.Time.Unix .Post.Published.Time.Unix -}}
-            * (last edited <span title="{{.Post.Updated.ValueOrZero.Time}}">{{ humanize .Post.Updated.ValueOrZero.Time }}</span>)
+            <span>* (last edited <span title="{{.Post.Updated.ValueOrZero.Time}}">{{ humanize .Post.Updated.ValueOrZero.Time }}</span>)</span>
             {{ end }}
-            by
+            <span>by
             <a class="submitter{{ if false}} admin{{end}}" href="/{{ .State.Host }}/u/{{ fullname .Creator }}">
               {{- if .State.HideInstanceNames -}}
               {{ .Creator.Name }}
               {{- else -}}
               {{ fullname .Creator }}
               {{- end -}}
-            </a>
+            </a></span>
-            to
+            <span>to
             <a class="community" href="/{{ .State.Host }}/c/{{ fullcname .Community }}">
               c/{{ if .State.HideInstanceNames -}}
               {{ .Community.Name }}
               {{ else -}}
               {{ fullcname .Community }}
               {{ end }}
-            </a>
+            </a></span>
           </div>
           <div class="buttons">
             {{- if .Post.NSFW }}
@@ -70,8 +73,8 @@
             <a href="{{ .Post.ApID}}">fedilink</a>
             {{- if .State.Session }}
             <a href="/{{ .State.Host }}/post/{{ .Post.ID }}/block" rel="xhr" target="block{{ .Post.ID }}">block</a>
-            {{- end }}
             <span class="blockpopup" name="block{{.Post.ID}}"></span>
+            {{- end }}
           {{- if and .State.Session (eq .State.Session.UserID .Post.CreatorID) }}
             {{- if not .Post.Deleted }}<a href="/{{ .State.Host }}/post/{{ .Post.ID }}?edit">edit</a>{{end}}
             <form class="link-btn" method="POST">
@@ -115,7 +118,20 @@
             </form>
           {{- end }}
           </div>
-          <div class="expando{{ if eq .Rank 0 }} open{{ end}}">
+          </div>
+        </div>
+        </div>
+        <div class="expando{{ if eq .Rank 0 }} open{{ end}}">
+{{- if or ((and .Post.Body.IsValid (ne .Post.Body.String ""))) (isImage .Post.URL.String)}}
+        {{- if gt .Rank 0 }}
+          <div class="rank">&nbsp;</div>
+        {{- end }}
+          <div class="score"><div><div>&nbsp;</div></div></div>
+        {{ if not .State.HideThumbnails }}
+          <div class="thumb"></div>
+        {{ end }}
+{{- end }}
+          <div>
 {{- if (and .Post.Body.IsValid (ne .Post.Body.String "")) }}
             <div class="md">{{ markdown .State.Host .Post.Body.String }}</div>
 {{- end }}
@@ -125,6 +141,5 @@
             <div class="embed"></div>
           </div>
         </div>
-        <div class="clearleft"></div>
       </div>
 {{- end -}}

templates/sidebar.html

@@ -1,6 +1,6 @@
 {{- $host := .Host }}
-    <div class="{{ if .User }}user {{end}}side{{ if .HideSidebar  }} hide{{ end }}">
+    <div class="{{ if .User }}user {{end}}side">
-      <form method="GET" action="/{{.Host}}/search">
+      <form id="search" method="GET" action="/{{.Host}}/search">
         <input type="text" placeholder="search" name="q" value="">
   {{- if eq .Listing "Local" }}
         <input type="hidden" placeholder="search" name="listingType" value="Local">