alyssa
/
bloat
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix CSS issues 

- fix text wrapping on reply popup
- fix margin for media links
This commit is contained in:
r 2020-11-08 13:13:05 +00:00
parent 471e73d200
commit 856fe9e8c7
3 changed files with 21 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
static/fluoride.js
View File

@ -132,13 +132,13 @@ function isInView(el) {
return false; return false;
} }
function handleReplyToLink(div) { function handleReplyToLink(a) {
if (!div) if (!a)
return; return;
var id = div.firstElementChild.getAttribute("href"); var id = a.getAttribute("href");
if (!id || id[0] != "#") if (!id || id[0] != "#")
return; return;
div.firstElementChild.onmouseenter = function(event) { a.onmouseenter = function(event) {
var id = event.target.getAttribute("href"); var id = event.target.getAttribute("href");
var status = document.querySelector(id); var status = document.querySelector(id);
if (!status) if (!status)
@ -156,7 +156,7 @@ function handleReplyToLink(div) {
event.target.parentElement.appendChild(copy); event.target.parentElement.appendChild(copy);
} }
} }
div.firstElementChild.onmouseleave = function(event) { a.onmouseleave = function(event) {
var popup = document.getElementById("reply-to-popup"); var popup = document.getElementById("reply-to-popup");
if (popup) { if (popup) {
event.target.parentElement.removeChild(popup); event.target.parentElement.removeChild(popup);
@ -168,8 +168,8 @@ function handleReplyToLink(div) {
} }
} }
function handleReplyLink(div) { function handleReplyLink(a) {
div.firstElementChild.onmouseenter = function(event) { a.onmouseenter = function(event) {
var id = event.target.getAttribute("href"); var id = event.target.getAttribute("href");
var status = document.querySelector(id); var status = document.querySelector(id);
if (!status) if (!status)
@ -187,7 +187,7 @@ function handleReplyLink(div) {
event.target.parentElement.appendChild(copy); event.target.parentElement.appendChild(copy);
} }
} }
div.firstElementChild.onmouseleave = function(event) { a.onmouseleave = function(event) {
var popup = document.getElementById("reply-popup"); var popup = document.getElementById("reply-popup");
if (popup) { if (popup) {
event.target.parentElement.removeChild(popup); event.target.parentElement.removeChild(popup);
@ -219,10 +219,10 @@ document.addEventListener("DOMContentLoaded", function() {
var retweetForm = s.querySelector(".status-retweet"); var retweetForm = s.querySelector(".status-retweet");
handleRetweetForm(id, retweetForm); handleRetweetForm(id, retweetForm);
var replyToLink = s.querySelector(".status-reply-to"); var replyToLink = s.querySelector(".status-reply-to-link");
handleReplyToLink(replyToLink); handleReplyToLink(replyToLink);
var replyLinks = s.querySelectorAll(".status-reply"); var replyLinks = s.querySelectorAll(".status-reply-link");
for (var j = 0; j < replyLinks.length; j++) { for (var j = 0; j < replyLinks.length; j++) {
handleReplyLink(replyLinks[j]); handleReplyLink(replyLinks[j]);
} }

18
static/style.css
View File

@ -41,7 +41,6 @@
max-width: 280px; max-width: 280px;
vertical-align: bottom; vertical-align: bottom;
object-fit: contain; object-fit: contain;
margin-bottom: 5px;
} }
.status-media-container { .status-media-container {
@ -49,6 +48,11 @@
overflow: auto; overflow: auto;
} }
.status-media-container>a {
margin-bottom: 5px;
display: inline-block;
}
.status-profile-img-container { .status-profile-img-container {
margin-right: 8px; margin-right: 8px;
display: inline-block; display: inline-block;
@ -187,16 +191,12 @@
margin-left: 8px; margin-left: 8px;
} }
.status-reply-to {
display: inline-block;
}
.status-reply-to-link { .status-reply-to-link {
font-size: 10pt font-size: 10pt
} }
.status-reply-container { .status-reply-container {
word-break: break-all; overflow-wrap: break-word;
} }
.status-reply-container .fa { .status-reply-container .fa {
@ -209,10 +209,6 @@
font-size: 10pt; font-size: 10pt;
} }
.status-reply {
display: inline-block;
}
.status-reply-link { .status-reply-link {
font-size: 10pt; font-size: 10pt;
} }
@ -256,6 +252,7 @@
} }
.user-profile-decription { .user-profile-decription {
overflow-wrap: break-word;
margin: 8px 0; margin: 8px 0;
} }
@ -315,7 +312,6 @@ a:hover,
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
margin-bottom: 5px;
} }
.img-link:hover .status-nsfw-overlay { .img-link:hover .status-nsfw-overlay {

12
templates/status.tmpl
View File

@ -70,19 +70,15 @@
</div> </div>
<div class="status-reply-container"> <div class="status-reply-container">
{{if .InReplyToID}} {{if .InReplyToID}}
<div class="status-reply-to"> <a class="status-reply-to-link" href="{{if not .ShowReplies}}/thread/{{.InReplyToID}}{{end}}#status-{{.InReplyToID}}">
<a class="status-reply-to-link" href="{{if not .ShowReplies}}/thread/{{.InReplyToID}}{{end}}#status-{{.InReplyToID}}"> in reply to {{if .IDNumbers}}#{{index .IDNumbers .InReplyToID}}{{end}} {{if .Pleroma.InReplyToAccountAcct}}@{{.Pleroma.InReplyToAccountAcct}}{{else if not .IDNumbers}}{{.InReplyToID}}{{end}}
in reply to {{if .IDNumbers}}#{{index .IDNumbers .InReplyToID}}{{end}} {{if .Pleroma.InReplyToAccountAcct}}@{{.Pleroma.InReplyToAccountAcct}}{{else if not .IDNumbers}}{{.InReplyToID}}{{end}} </a>
</a>
</div>
{{if index .IDReplies .ID}} <span class="status-reply-info-divider"> - </span> {{end}} {{if index .IDReplies .ID}} <span class="status-reply-info-divider"> - </span> {{end}}
{{end}} {{end}}
{{if .ShowReplies}} {{if .ShowReplies}}
{{if index .IDReplies .ID}} <span class="status-reply-text"> replies: </span> {{end}} {{if index .IDReplies .ID}} <span class="status-reply-text"> replies: </span> {{end}}
{{range index .IDReplies .ID}} {{range index .IDReplies .ID}}
<div class="status-reply"> <a class="status-reply-link" href="#status-{{.ID}}">#{{.Number}}</a>
<a class="status-reply-link" href="#status-{{.ID}}">#{{.Number}}</a>
</div>
{{end}} {{end}}
{{end}} {{end}}
</div> </div>