styling, display children count on minimize, block comments, reports

public/dark.css

@@ -1,4 +1,4 @@
-body {
+body, .blockpopup {
   background-color: #262626;
   color: #ddd;
 }

public/style.css

@@ -24,7 +24,8 @@ summary {
   transform: scale(1.03);
 }
 .post {
-  margin: 8px 0px;
+  margin: 4px 0px;
+  overflow: hidden;
 }
 .post .thumb {
   height: 52px;
@@ -38,7 +39,7 @@ summary {
   height: 52px;
   width: 70px;
   background-repeat: no-repeat;
-  background-size: contain;
+  background-size: cover;
   background-position: center;
 }
 .rank {
@@ -53,25 +54,43 @@ summary {
   font-size: 12px;
   font-weight: 700;
   text-align: center;
-  min-width: 42px;
 }
-.comment .score {
+.create_comment {
-  clear:left;
+  margin: 0 0 13px 0px;
-  margin-right: 4px;
+  overflow: hidden;
-  overflow:hidden;
-  min-width: 3px;
-  min-height: 38px;
 }
-.comment .content, .expando .md {
+.expando .thumb, .expando .rank {
+  display: none;
+}
+.comment .content, .expando .md, .expando > div {
+  margin: 5px 0px 0px 6px;
   line-height: 20px;
   overflow:hidden;
   max-width: 840px;
 }
 .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;
+}
+.post .score {
+  min-width: 33px;
+  padding: 0 5px;
 }
 .score form.link-btn input {
   display: inline-block;
@@ -132,6 +151,7 @@ summary {
 }
 .activity .post {
   margin-bottom: 10px;
+  min-height: 50px;
 }
 .activity .comment {
   padding-bottom: 1px;
@@ -148,10 +168,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 +179,6 @@ summary {
 .comment img {
   max-height: 300px;
 }
-.comment .comment {
-}
 .comment .comment,
 .comment .comment .comment .comment,
 .comment .comment .comment .comment .comment .comment,
@@ -176,7 +194,7 @@ summary {
 }
 .comment .meta {
   font-size: 10px;
-  margin-bottom: 6px;
+  overflow: hidden;
 }
 .preview h3 {
   background-color: #f0f3fc;
@@ -232,20 +250,23 @@ summary {
 .commentmenu div {
   border-top: 1px dotted gray;
   font-size: 12px;
+  padding-top: 3px;
 }
 form.savecomment {
   margin: 0px 0px 10px 0px;
-  width: 500px;
+  max-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 +291,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 +305,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 +447,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 +456,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,25 +467,30 @@ 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 {
   color: #888;
-  overflow:hidden;
+  overflow: hidden;
+  min-height: 52px;
+  margin-bottom: 4px;
 }
-.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;
 }
@@ -479,20 +515,21 @@ 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;
 }
 .expando-button:hover{
   background-color: #466599;
@@ -518,9 +555,9 @@ form.blockpost {
 .expando {
   display: none;
   max-width: 900px;
-  margin-top: 5px;
   position: relative;
   color: #000;
+  margin-top:4px;
 }
 #mycommunities, #settingspopup {
   background-color: white;
@@ -573,7 +610,7 @@ form.blockpost {
   border: 1px solid #369;
   border-radius: 7px;
   padding: 5px 10px;
-  margin: 5px auto;
+  margin: 5px 0;
   font-size: 14px;
   overflow: auto;
 }
@@ -613,44 +650,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 +681,78 @@ 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: 578px) {
+  .entry {
+    overflow: hidden;
+    clear: unset;
   }
-  #sidetoggle button::before {
+  .post .title {
-    content: '[-]';
+    min-height: unset;
   }
-  #sidetoggle.o button::before {
+  main > .community {
-    content: '[+]';
+    margin: 20px 50px;
   }
-  .expando {
+  .community .details {
-    text-align: left;
+    margin-left: 36px;
+  }
+}
+@media (min-width: 800px) {
+  .side {
+    float:right;
+    width: 300px;
+  }
+  main {
+    margin-right: 0px;
+    margin-left: 10px;
+  }
+  main > .comment, .commentmenu, #tagline, .menu, .activity, .expando {
+    margin-right: 10px;
+  }
+  .expando .thumb, .expando .rank {
+    display: block;
   }
   .expando .image {
     max-width: 578px;
   }
+  .expando {
+    padding-left: 45px;
+  }
+}
+@media (min-width: 1064px) {
+  .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 +845,7 @@ h1, h2 {
   color: #369;
 }
 main > .community {
-  margin: 20px 50px;
+  margin: 20px 5px;
   max-width: 840px;
   position: relative;
 }
@@ -795,15 +859,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 +896,7 @@ nav .communities a {
   text-decoration: none;
   color: black;
 }
-nav .title a:hover {
+nav .title:hover {
   text-decoration: underline;
 }
 
@@ -870,7 +931,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 +963,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 +1001,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 +1011,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 +1024,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;

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">

templates/create_comment.html

@@ -8,7 +8,6 @@
             <input class="imgupload" type="file" name="file" accept="image/*">
             </label>
           </div>
-          <div>
           <textarea name="content" {{ if .XHR }}autofocus{{ end }}>
           {{- if .Content }}
           {{- .Content -}}
@@ -16,7 +15,6 @@
           {{- (index .Comments 0).P.Comment.Content -}}
           {{ end -}}
           </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/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

@@ -70,8 +70,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 +115,17 @@
             </form>
           {{- end }}
           </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"></div>
+        {{- end }}
+        {{ 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 +135,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">