diff --git a/public/dark.css b/public/dark.css index 25c6d5b..fa2c393 100644 --- a/public/dark.css +++ b/public/dark.css @@ -1,4 +1,4 @@ -body { +body, .blockpopup { background-color: #262626; color: #ddd; } diff --git a/public/style.css b/public/style.css index 8f8a3df..f2d198e 100644 --- a/public/style.css +++ b/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 { - clear:left; - margin-right: 4px; - overflow:hidden; - min-width: 3px; - min-height: 38px; +.create_comment { + margin: 0 0 13px 0px; + overflow: hidden; } -.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; - left: 11px; - top: 3px; + font-size: 12px; + left: 12px; + 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; - height: 20px; - font-size: 12px; +} +#sidetoggle button { + background: unset; + 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) { - .wide .side { - display: none !important; +#search input { + width: 100%; + box-sizing: border-box; +} +#search { + overflow: hidden; +} + +@media (min-width: 578px) { + .entry { + overflow: hidden; + clear: unset; } - #sidetoggle button::before { - content: '[-]'; + .post .title { + min-height: unset; } - #sidetoggle.o button::before { - content: '[+]'; + main > .community { + margin: 20px 50px; } - .expando { - text-align: left; + .community .details { + 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; - position: relative; + margin-bottom: 8px; } 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; diff --git a/public/utils.js b/public/utils.js index 0b70ca8..561e9a8 100644 --- a/public/utils.js +++ b/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] - if (!side) return; + var body = document.getElementsByTagName("body")[0] + 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 (side.className == "side") { - side.className = "side hide" - form.classList.add("o") - if (main) { - main.className = "wide" - } + if (body.className == "sidetoggle") { + body.className = "" } else { - side.className = "side" - form.classList.remove("o") - if (main) { - main.className = "" - } + body.className = "sidetoggle" } } diff --git a/routes.go b/routes.go index d5cf09a..7d4ddb8 100644 --- a/routes.go +++ b/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{ diff --git a/templates/block.html b/templates/block.html index 4beaa8c..f03c9dd 100644 --- a/templates/block.html +++ b/templates/block.html @@ -3,16 +3,25 @@ {{ template "nav.html" . }} {{ end }}
+
+ block
- +
- {{ 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) }} +
+ + +
+ {{ end }} + {{ if and .Posts (not (index .Posts 0).Creator.Local) (ne (index .Posts 0).Creator.InstanceID .Community.CommunityView.Community.InstanceID) }}
{{ end }} + {{ if .Community }}
@@ -23,12 +32,25 @@
{{ end }} + {{ end }} +
+
+ report {{ if .Posts }}post{{ else }}comment{{ end }} + +
+
+
+ {{ if .Posts }} - + {{ else }} + + + {{ end }} +
diff --git a/templates/comment.html b/templates/comment.html index 7e8a846..c26b2ec 100644 --- a/templates/comment.html +++ b/templates/comment.html @@ -15,10 +15,10 @@
-{{- 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 -}} @@ -32,6 +32,9 @@ {{- if gt .P.Comment.Updated.ValueOrZero.Time.Unix .P.Comment.Published.Time.Unix -}} * (last edited {{ humanize .P.Comment.Updated.ValueOrZero.Time }}) {{ end }} + {{ if .P.Counts.ChildCount }} + ({{ .P.Counts.ChildCount }} children) + {{ end }}
{{- if eq .Op "edit" }} @@ -83,12 +86,16 @@
  • -
  • +
  • + block +
  • diff --git a/templates/create_comment.html b/templates/create_comment.html index 476a3f8..1fd93c9 100644 --- a/templates/create_comment.html +++ b/templates/create_comment.html @@ -8,15 +8,13 @@
  • -
    - -
    + {{- if eq .Op "edit" }} diff --git a/templates/frontpage.html b/templates/frontpage.html index e99e132..d38753b 100644 --- a/templates/frontpage.html +++ b/templates/frontpage.html @@ -8,7 +8,7 @@ {{- end }} - + @@ -16,7 +16,7 @@ {{- if and (not .ShowNSFW) .Community .Community.CommunityView.Community.NSFW }} {{ template "nsfw.html" }} {{- else }} - +
    {{ template "sidebar.html" . }} {{- if and (not .Community) .Tagline }}
    diff --git a/templates/main.html b/templates/main.html index 967e21b..5317e5e 100644 --- a/templates/main.html +++ b/templates/main.html @@ -8,7 +8,7 @@ {{- end }} - + @@ -16,7 +16,7 @@ {{- if and (not .ShowNSFW) .Community .Community.CommunityView.Community.NSFW }} {{ template "nsfw.html" }} {{- else }} - +
    {{- template "sidebar.html" . }} {{- if or (.Query) (.SearchType) (and (not .PostID) (not .User) (not .Activities) (eq .Op ""))}} {{ template "menu.html" . }} diff --git a/templates/nav.html b/templates/nav.html index faf9186..74a1dda 100644 --- a/templates/nav.html +++ b/templates/nav.html @@ -60,7 +60,7 @@ : search {{ end }}
      - {{- if eq .Op "block" }}
    • block
    • + {{- if eq .Op "block" }}
    • block
    • {{ else if and .User (not .Query)}}
    • overview
    • {{ if and .Session (eq .User.PersonView.Person.ID .Session.UserID) }} @@ -89,7 +89,7 @@ {{- end }}{{ end }} - +
    {{- end }} diff --git a/templates/post.html b/templates/post.html index 7da3256..db238e5 100644 --- a/templates/post.html +++ b/templates/post.html @@ -70,8 +70,8 @@ fedilink {{- if .State.Session }} block - {{- end }} + {{- end }} {{- if and .State.Session (eq .State.Session.UserID .Post.CreatorID) }} {{- if not .Post.Deleted }}edit{{end}} {{- end }}
    -
    +
    +
    +{{- if or ((and .Post.Body.IsValid (ne .Post.Body.String ""))) (isImage .Post.URL.String)}} + {{- if gt .Rank 0 }} +
    + {{- end }} + {{ if not .State.HideThumbnails }} +
    + {{ end }} +{{- end }} +
    {{- if (and .Post.Body.IsValid (ne .Post.Body.String "")) }}
    {{ markdown .State.Host .Post.Body.String }}
    {{- end }} @@ -125,6 +135,5 @@
    -
    {{- end -}} diff --git a/templates/sidebar.html b/templates/sidebar.html index 26cb139..d8d8c57 100644 --- a/templates/sidebar.html +++ b/templates/sidebar.html @@ -1,6 +1,6 @@ {{- $host := .Host }} -
    -
    +
    + {{- if eq .Listing "Local" }}