diff --git a/public/dark.css b/public/dark.css index 25c6d5b..100f070 100644 --- a/public/dark.css +++ b/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; } diff --git a/public/link.png b/public/link.png index 0daeb9c..0233fc2 100644 Binary files a/public/link.png and b/public/link.png differ diff --git a/public/photo.png b/public/photo.png index 96eec15..b5a755f 100644 Binary files a/public/photo.png and b/public/photo.png differ diff --git a/public/style.css b/public/style.css index 8f8a3df..db495c3 100644 --- a/public/style.css +++ b/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; - width: 70px; - margin: 0px 8px 0px 0px; + margin: 2px 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 { - clear:left; - margin-right: 4px; - overflow:hidden; - min-width: 3px; - min-height: 38px; +.post .score div div { + margin: 18px 2px; } -.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; - 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 +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; - 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; + 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; - 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 +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) { - .wide .side { - display: none !important; +#search input { + width: 100%; + box-sizing: border-box; +} +#search { + overflow: hidden; +} +@media (min-width: 600px) { + main > .community { + margin: 20px 50px; } - #sidetoggle button::before { - content: '[-]'; + .community .details { + margin-left: 36px; } - #sidetoggle.o button::before { - content: '[+]'; + .side { + float:right; + width: 300px; } - .expando { - text-align: left; + main { + 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; - position: relative; + margin-bottom: 8px; } 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; - padding-right: 60px; + position: absolute; + 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; diff --git a/public/text.png b/public/text.png index 4dc1246..1b83da0 100644 Binary files a/public/text.png and b/public/text.png differ 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..b7d4ea8 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 +
  • @@ -107,7 +114,7 @@
  • {{- end }} {{- if and .State.PostID (gt (add .P.Counts.ChildCount .ChildCount) 0) }} -
  • hideshow {{add .P.Counts.ChildCount .ChildCount }} child comments
  • +
  • hideshow {{add .P.Counts.ChildCount .ChildCount }} child comments
  • {{- end }}
    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/login.html b/templates/login.html index 7ce4439..3bb5480 100644 --- a/templates/login.html +++ b/templates/login.html @@ -27,7 +27,7 @@
    - {{ host .Host}} - sign up or login + {{ host .Host}} {{ if .Alert }} @@ -41,7 +41,7 @@