fedi/mlmym
1
0
Fork 0
mirror of https://github.com/rystaf/mlmym.git synced 2024-11-05 06:43:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

endless scrolling, style fixes

Browse source
This commit is contained in:
Ryan Stafford 2023-07-07 12:30:07 -04:00
parent 2a9a54f595
commit 4fcfda174d
6 changed files with 104 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
public/style.css
View file

@ -74,10 +74,11 @@ summary {
color: #646464; color: #646464;
} }
.comment .score { .comment .score {
margin-right: 2px; margin-right: 4px;
overflow:hidden; overflow:hidden;
} }
.comment .content { .comment .content {
line-height: 20px;
overflow:hidden; overflow:hidden;
max-width: 840px; max-width: 840px;
} }
@ -108,7 +109,6 @@ summary {
top: 2px; top: 2px;
} }
.title a { .title a {
color: #0000ff;
font-size: medium; font-size: medium;
text-decoration: none; text-decoration: none;
} }
@ -116,12 +116,15 @@ summary {
display: inline; display: inline;
} }
.post.distinguished .title a { .post.distinguished .title a {
color: #f1641e; color: #228822;
font-weight: bold; font-weight: bold;
} }
.dark .title a { .dark .title a {
color: #dedede; color: #dedede;
} }
.dark .title a:visited {
color: #a6a6a6
}
.post.deleted .title a { .post.deleted .title a {
text-decoration: line-through; text-decoration: line-through;
} }
@ -159,9 +162,6 @@ summary {
.message b { .message b {
color: #000; color: #000;
} }
.meta {
color: #888;
}
.dark .meta { .dark .meta {
color: #b4b4b4; color: #b4b4b4;
} }
@ -214,7 +214,7 @@ summary {
} }
.comment .meta { .comment .meta {
font-size: 10px; font-size: 10px;
margin-bottom: 3px; margin-bottom: 6px;
} }
.meta a { .meta a {
color: #369; color: #369;
@ -236,7 +236,7 @@ summary {
padding: 0px 2px; padding: 0px 2px;
} }
.comment .meta a.distinguished { .comment .meta a.distinguished {
background-color: #f1641e; background-color: #228822;
color: white; color: white;
font-weight: bold; font-weight: bold;
border-radius: 3px; border-radius: 3px;
@ -250,8 +250,8 @@ summary {
border-top: 1px dotted gray; border-top: 1px dotted gray;
font-size: 12px; font-size: 12px;
} }
.savecomment { .comment form.savecomment {
margin: 10px; margin: 0px 0px 10px 10px;
} }
.savecomment textarea { .savecomment textarea {
width: 500px; width: 500px;
@ -264,6 +264,7 @@ summary {
} }
.comment.hidden { .comment.hidden {
margin-bottom: 10px; margin-bottom: 10px;
padding-left: 26px;
} }
.comment.hidden .meta a { .comment.hidden .meta a {
color: gray; color: gray;
@ -379,8 +380,12 @@ form.nsfw div {
color: #369; color: #369;
} }
#loadmore { #loadmore {
visibility: hidden;
margin: 10px 0px; margin: 10px 0px;
} }
#loadmore[disabled] {
visibility: visible;
}
.buttons li { .buttons li {
display: inline; display: inline;
} }
@ -389,8 +394,11 @@ form.nsfw div {
font-size: 10px; font-size: 10px;
padding: 0; padding: 0;
} }
.comment .textarea {
width: 100%;
}
.comment .buttons { .comment .buttons {
margin: 8px 0px 3px 0px; margin: 3px 0px 10px 0px;
} }
.comment.hidden .buttons { .comment.hidden .buttons {
display: none; display: none;
@ -404,7 +412,7 @@ form.nsfw div {
text-decoration: none; text-decoration: none;
color: #888; color: #888;
display: inline-block; display: inline-block;
margin-right: 8px !important; margin-right: 5px !important;
} }
.buttons a:hover, .title a:hover, .buttons form input:hover, .comment .buttons form input:hover { .buttons a:hover, .title a:hover, .buttons form input:hover, .comment .buttons form input:hover {
text-decoration: underline; text-decoration: underline;
@ -460,7 +468,8 @@ form.nsfw div {
} }
.expando { .expando {
display: none; display: none;
max-width: 587px; max-width: 870px;
margin-top: 5px;
position: relative; position: relative;
color: #000; color: #000;
} }
@ -468,10 +477,11 @@ form.nsfw div {
display: block; display: block;
} }
.expando .image { .expando .image {
display: inline-block; display: block;
overflow: hidden; overflow: hidden;
resize: both; resize: both;
max-width: 100%; max-width: 578px;
margin: 0 auto;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
background-position: top left; background-position: top left;
@ -485,7 +495,8 @@ form.nsfw div {
border: 1px solid #369; border: 1px solid #369;
border-radius: 7px; border-radius: 7px;
padding: 5px 10px; padding: 5px 10px;
margin: 5px 0px; margin: 5px auto;
max-width: 578px;
font-size: 14px; font-size: 14px;
overflow: auto; overflow: auto;
} }
@ -495,6 +506,7 @@ form.nsfw div {
.dark .expando .md { .dark .expando .md {
background-color: #262626; background-color: #262626;
color: #ddd; color: #ddd;
border-color: #666;
} }
.expando p, .comment p, .message p { .expando p, .comment p, .message p {
margin-top: 0; margin-top: 0;
@ -607,17 +619,17 @@ main {
} }
.create a div { .create a div {
margin: 5px 0px; margin: 5px 0px;
background-color: #EFFFEF; background-color: #EFF7FF;
text-align: center; text-align: center;
padding: 5px; padding: 5px;
border: 1px solid #008909; border: 1px solid #369;
} }
.dark .create a div { .dark .create a div {
background-color: #444444; background-color: #444444;
border: 0; border: 0;
} }
.create a div:hover { .create a div:hover {
background-color: #0f7d1b; background-color: #369;
} }
.dark .create a div:hover { .dark .create a div:hover {
background-color: #333333; background-color: #333333;
@ -626,7 +638,7 @@ main {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
font-size: 13px; font-size: 13px;
color: #0f7d1b; color: #369;
} }
.dark .create a { .dark .create a {
color: white; color: white;
@ -788,12 +800,16 @@ nav .icon img {
height:100%; height:100%;
} }
nav .tabs {
overflow-x: auto;
}
nav ul { nav ul {
white-space: nowrap; white-space: nowrap;
list-style: none; list-style: none;
margin: 5px 2.5px 0px 2.5px; margin: 5px 2.5px 0px 2.5px;
padding: 0; padding: 0;
display: inline; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
} }
@ -806,13 +822,14 @@ nav li {
} }
nav ul a { nav ul a {
color: #369;
background-color: #eff7ff; background-color: #eff7ff;
text-decoration: none; text-decoration: none;
padding: 2px 6px 0 6px; padding: 2px 6px 0 6px;
} }
.dark nav ul a { .dark nav ul a {
background-color: #262626; background-color: #262626;
color: #dadada; color: #ddd;
} }
.selected { .selected {
@ -851,7 +868,7 @@ nav .right a.mailbox {
color: gray; color: gray;
} }
nav .right a, .right input[type=submit] { nav .right a, .right input[type=submit] {
color: #006414; color: #369;
text-decoration: none; text-decoration: none;
} }
.dark nav .right a, .dark .right input[type=submit]{ .dark nav .right a, .dark .right input[type=submit]{
@ -900,10 +917,16 @@ nav .right form input, .comment .buttons input, form.link-btn input {
padding: 5px 10px; padding: 5px 10px;
margin: 5px 10px; margin: 5px 10px;
} }
.dark .warning {
background-color: #544400;
}
.highlight { .highlight {
background-color: #ffc; background-color: #ffc;
padding-left: 5px; padding-left: 5px;
} }
.dark .highlight{
background-color: #4c4c4c;
}
form.create { form.create {
width: 520px; width: 520px;
@ -912,7 +935,7 @@ form.create {
form.create div { form.create div {
margin: 10px 0px; margin: 10px 0px;
padding: 5px 5px 10px 5px; padding: 5px 5px 10px 5px;
background-color: #9ad59b; background-color: #cee3f8;
border-radius: 4px; border-radius: 4px;
} }
.dark form.create div { .dark form.create div {

12
public/utils.js
View file

@ -102,7 +102,7 @@ function loadMore(e) {
urlParams.set("page", page) urlParams.set("page", page)
request(window.location.origin+window.location.pathname+"?"+urlParams.toString(), "", function(res){ request(window.location.origin+window.location.pathname+"?"+urlParams.toString(), "", function(res){
if (res.trim()) { if (res.trim()) {
e.target.outerHTML = res + '<div id="loadmore"><input type="submit" data-page="'+(parseInt(page)+1)+'" value="load more" onclick="loadMore(event)"></div>' e.target.outerHTML = res + '<input id="loadmore" type="submit" data-page="'+(parseInt(page)+1)+'" value="load more" onclick="loadMore(event)">'
} }
else { else {
e.target.outerHTML = "" e.target.outerHTML = ""
@ -172,3 +172,13 @@ for (var i = 0; i < posts.length; i++) {
} }
} }
} }
window.onscroll = function(ev) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
var loadmore = document.getElementById("loadmore")
if (loadmore) {
loadmore.click()
}
}
};

68
templates/comment.html
View file

@ -22,7 +22,7 @@
{{ end }} {{ end }}
</a> </a>
<a {{ if .P.Comment.Distinguished}}class="distinguished"{{ else if .Submitter }}class="submitter"{{end}} href="/{{.State.Host}}/u/{{fullname .P.Creator}}">{{fullname .P.Creator}}</a> <a {{ if .P.Comment.Distinguished}}class="distinguished"{{ else if .Submitter }}class="submitter"{{end}} href="/{{.State.Host}}/u/{{fullname .P.Creator}}">{{fullname .P.Creator}}</a>
{{.P.Counts.Score}} points <span title="{{.P.Comment.Published.Time}}">{{ humanize .P.Comment.Published.Time }}</span> <b>{{.P.Counts.Score}} points</b> <span title="{{.P.Comment.Published.Time}}">{{ humanize .P.Comment.Published.Time }}</span>
{{- if gt .P.Comment.Updated.Time.Unix .P.Comment.Published.Time.Unix -}} {{- if gt .P.Comment.Updated.Time.Unix .P.Comment.Published.Time.Unix -}}
* (last edited <span title="{{.P.Comment.Updated.Time}}">{{ humanize .P.Comment.Updated.Time }}</span>) * (last edited <span title="{{.P.Comment.Updated.Time}}">{{ humanize .P.Comment.Updated.Time }}</span>)
{{ end }} {{ end }}
@ -37,53 +37,55 @@
<input type="submit" value="save"> <input type="submit" value="save">
</form> </form>
{{ else }} {{ else }}
<div class="content{{ if and .Selected}} highlight{{end}}">{{if .P.Comment.Deleted}}[removed]{{else}}{{ markdown .State.Host .P.Comment.Content }}{{end}}</div> <div class="content{{ if and .Selected}} highlight{{end}}">
{{if .P.Comment.Deleted}}[removed]{{else}}{{ markdown .State.Host .P.Comment.Content }}{{end}}
{{ if eq .Op "source" }} {{ if eq .Op "source" }}
<div><textarea>{{.P.Comment.Content}}</textarea></div> <div><textarea>{{.P.Comment.Content}}</textarea></div>
{{end}} {{end}}
{{ end }} {{ end }}
<ul class="buttons"> <ul class="buttons">
<li><a href="/{{.State.Host}}/comment/{{.P.Comment.ID}}">permalink</a></li> <li><a href="/{{.State.Host}}/comment/{{.P.Comment.ID}}">permalink</a></li>
{{ if ne .Op "source"}} {{ if ne .Op "source"}}
<li><a class="source" for="c{{.P.Comment.ID}}" href="/{{.State.Host}}/comment/{{.P.Comment.ID}}?source">source</a></li> <li><a class="source" for="c{{.P.Comment.ID}}" href="/{{.State.Host}}/comment/{{.P.Comment.ID}}?source">source</a></li>
{{ else }} {{ else }}
<li><a class="source" for="c{{.P.Comment.ID}}" href="/{{.State.Host}}/comment/{{.P.Comment.ID}}?">hide source</a></li> <li><a class="source" for="c{{.P.Comment.ID}}" href="/{{.State.Host}}/comment/{{.P.Comment.ID}}?">hide source</a></li>
{{ end }} {{ end }}
{{ if .State.Session }} {{ if .State.Session }}
{{ if and (eq .P.Comment.CreatorID .State.Session.UserID) (ne .Op "edit") }} {{ if and (eq .P.Comment.CreatorID .State.Session.UserID) (ne .Op "edit") }}
<li><a class="edit" for="c{{.P.Comment.ID}}" href="/{{.State.Host}}/comment/{{.P.Comment.ID}}?edit">edit</a></li> <li><a class="edit" for="c{{.P.Comment.ID}}" href="/{{.State.Host}}/comment/{{.P.Comment.ID}}?edit">edit</a></li>
<li> <li>
<form class="delete" method="POST"> <form class="delete" method="POST">
<input type="hidden" name="commentid" value="{{.P.Comment.ID}}"> <input type="hidden" name="commentid" value="{{.P.Comment.ID}}">
<input type="hidden" name="op" value="delete_comment"> <input type="hidden" name="op" value="delete_comment">
<input type="submit" value="delete"> <input type="submit" value="delete">
</form> </form>
</li> </li>
{{ end }} {{ end }}
<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="commentid" value="{{.P.Comment.ID}}">
<input type="hidden" name="op" value="save_comment"> <input type="hidden" name="op" value="save_comment">
{{ if .P.Saved }} {{ if .P.Saved }}
<input type="submit" name="submit" value="unsave"> <input type="submit" name="submit" value="unsave">
{{ else }} {{ else }}
<input type="submit" name="submit" value="save"> <input type="submit" name="submit" value="save">
{{ end }} {{ end }}
</form> </form>
</li> </li>
{{ if ne .Op "reply" }} {{ if ne .Op "reply" }}
<li> <li>
<a class="reply" for="c{{.P.Comment.ID}}" href="/{{.State.Host}}/comment/{{.P.Comment.ID}}?reply"> <a class="reply" for="c{{.P.Comment.ID}}" href="/{{.State.Host}}/comment/{{.P.Comment.ID}}?reply">
reply reply
</a> </a>
</li> </li>
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ if gt .ChildCount 0 }} {{ if gt .ChildCount 0 }}
<li><a class="hidechildren" for="c{{.P.Comment.ID}}" href=""><span class="hide">hide</span><span class="show">show {{ .ChildCount }}</span> child comments</a></li> <li><a class="hidechildren" for="c{{.P.Comment.ID}}" href=""><span class="hide">hide</span><span class="show">show {{ .ChildCount }}</span> child comments</a></li>
{{ end }} {{ end }}
</ul> </ul>
</div>
<div class="children"> <div class="children">
{{ if and (eq .State.Op "reply") (eq .State.CommentID .P.Comment.ID)}} {{ if and (eq .State.Op "reply") (eq .State.CommentID .P.Comment.ID)}}
<form class="savecomment" method="POST"> <form class="savecomment" method="POST">

6
templates/frontpage.html
View file

@ -2,7 +2,7 @@
<head> <head>
<title>{{ if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title> <title>{{ if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title>
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg"> <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
<link rel="stylesheet" href="/_/static/style.css?v=10"> <link rel="stylesheet" href="/_/static/style.css?v=11">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
</head> </head>
<body {{ if .Dark }}class="dark"{{end}}> <body {{ if .Dark }}class="dark"{{end}}>
@ -49,12 +49,12 @@
<div class="pager"> <div class="pager">
view more: {{if gt .Page 1 }}<a href="{{ .PrevPage }}">‹ prev</a>{{ end }} <a href="{{ .NextPage }}">next ›</a> view more: {{if gt .Page 1 }}<a href="{{ .PrevPage }}">‹ prev</a>{{ end }} <a href="{{ .NextPage }}">next ›</a>
</div> </div>
<div id="loadmore"><input type="submit" value="load more" onclick="loadMore(event)" data-page="2"></div> <input id="loadmore" type="submit" value="load more" onclick="loadMore(event)" data-page="2">
{{ end }} {{ end }}
{{ template "sidebar.html" . }} {{ template "sidebar.html" . }}
</main> </main>
{{ end }} {{ end }}
<script src="/_/static/utils.js?v=4"></script> <script src="/_/static/utils.js?v=5"></script>
</body> </body>
</html> </html>

8
templates/main.html
View file

@ -3,7 +3,7 @@
<title>{{if and .Posts .PostID }}{{ (index .Posts 0).Post.Name}} : {{.CommunityName}}{{else if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title> <title>{{if and .Posts .PostID }}{{ (index .Posts 0).Post.Name}} : {{.CommunityName}}{{else if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg"> <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
<link rel="stylesheet" href="/_/static/style.css?v=10"> <link rel="stylesheet" href="/_/static/style.css?v=11">
</head> </head>
<body{{ if .Dark }} class="dark"{{end}}> <body{{ if .Dark }} class="dark"{{end}}>
<noscript> <noscript>
@ -120,14 +120,14 @@
{{ end }} {{ end }}
{{ if or .Query (eq .SearchType "Communities") (eq (len .Posts) 25) (and .Comments (gt (index .Posts 0).Counts.Comments .CommentCount)) (and .User (or (gt .User.PersonView.Counts.CommentCount 10) (gt .User.PersonView.Counts.PostCount 10))) }} {{ if or .Query (eq .SearchType "Communities") (eq (len .Posts) 25) (and .Comments (gt (index .Posts 0).Counts.Comments .CommentCount) (not .CommentID)) (and .User (or (gt .User.PersonView.Counts.CommentCount 10) (gt .User.PersonView.Counts.PostCount 10))) }}
<div class="pager"> <div class="pager">
view more: {{if gt .Page 1 }}<a href="{{ .PrevPage }}">‹ prev</a>{{ end }} <a href="{{ .NextPage }}">next ›</a> view more: {{if gt .Page 1 }}<a href="{{ .PrevPage }}">‹ prev</a>{{ end }} <a href="{{ .NextPage }}">next ›</a>
</div> </div>
<div id="loadmore"><input type="submit" value="load more" onclick="loadMore(event)" data-page="2"></div> <input id="loadmore" type="submit" value="load more" onclick="loadMore(event)" data-page="2">
{{ end }} {{ end }}
<script src="/_/static/utils.js?v=4"></script> <script src="/_/static/utils.js?v=5"></script>
{{ template "sidebar.html" . }} {{ template "sidebar.html" . }}
</main> </main>
{{ end }} {{ end }}

8
templates/post.html
View file

@ -37,7 +37,7 @@
by by
<a href="/{{ .State.Host }}/u/{{ fullname .Creator }}">{{ fullname .Creator }}</a> <a href="/{{ .State.Host }}/u/{{ fullname .Creator }}">{{ fullname .Creator }}</a>
to to
<a href="/{{ .State.Host }}/c/{{ fullcname .Community }}">c/{{ fullcname .Community}}</a> <a href="/{{ .State.Host }}/c/{{ fullcname .Community }}">{{ fullcname .Community}}</a>
</div> </div>
<div class="buttons"> <div class="buttons">
{{ if .Post.NSFW }}<span class="nsfw">NSFW</span>{{end}} {{ if .Post.NSFW }}<span class="nsfw">NSFW</span>{{end}}
@ -70,6 +70,9 @@
<a class="hidechildren" onclick="hideAllChildComments(event)" href="">hide all child comments</a> <a class="hidechildren" onclick="hideAllChildComments(event)" href="">hide all child comments</a>
{{ end }} {{ end }}
</div> </div>
</div>
<div></div>
<div class="clearleft"></div>
<div class="expando {{ if eq .Rank 0 }}open{{ end}}"> <div class="expando {{ if eq .Rank 0 }}open{{ end}}">
{{ if (and .Post.Body.IsValid (ne .Post.Body.String "")) }} {{ if (and .Post.Body.IsValid (ne .Post.Body.String "")) }}
<div class="md">{{ markdown .State.Host .Post.Body.String }}</div> <div class="md">{{ markdown .State.Host .Post.Body.String }}</div>
@ -81,8 +84,5 @@
{{ end }} {{ end }}
<div class="embed"></div> <div class="embed"></div>
</div> </div>
</div>
<div></div>
<div class="clearleft"></div>
</div> </div>
{{ end }} {{ end }}