aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorr <r@freesoftwareextremist.com>2020-11-08 13:13:05 +0000
committerr <r@freesoftwareextremist.com>2020-11-08 13:13:05 +0000
commit3a3a8672ba3c9c6fd6905e2273c72b4ab36db552 (patch)
tree8b99b4df24dfaf8a2c56d2e2b1844dd85a8f0c09
parent471e73d200074cbd3a06edec5d0bb8c271665aac (diff)
downloadbloat-3a3a8672ba3c9c6fd6905e2273c72b4ab36db552.tar.gz
bloat-3a3a8672ba3c9c6fd6905e2273c72b4ab36db552.zip
Fix CSS issues
- fix text wrapping on reply popup - fix margin for media links
-rw-r--r--static/fluoride.js20
-rw-r--r--static/style.css17
-rw-r--r--templates/status.tmpl12
3 files changed, 21 insertions, 28 deletions
diff --git a/static/fluoride.js b/static/fluoride.js
index e055b6d..c1eb06f 100644
--- a/static/fluoride.js
+++ b/static/fluoride.js
@@ -132,13 +132,13 @@ function isInView(el) {
return false;
}
-function handleReplyToLink(div) {
- if (!div)
+function handleReplyToLink(a) {
+ if (!a)
return;
- var id = div.firstElementChild.getAttribute("href");
+ var id = a.getAttribute("href");
if (!id || id[0] != "#")
return;
- div.firstElementChild.onmouseenter = function(event) {
+ a.onmouseenter = function(event) {
var id = event.target.getAttribute("href");
var status = document.querySelector(id);
if (!status)
@@ -156,7 +156,7 @@ function handleReplyToLink(div) {
event.target.parentElement.appendChild(copy);
}
}
- div.firstElementChild.onmouseleave = function(event) {
+ a.onmouseleave = function(event) {
var popup = document.getElementById("reply-to-popup");
if (popup) {
event.target.parentElement.removeChild(popup);
@@ -168,8 +168,8 @@ function handleReplyToLink(div) {
}
}
-function handleReplyLink(div) {
- div.firstElementChild.onmouseenter = function(event) {
+function handleReplyLink(a) {
+ a.onmouseenter = function(event) {
var id = event.target.getAttribute("href");
var status = document.querySelector(id);
if (!status)
@@ -187,7 +187,7 @@ function handleReplyLink(div) {
event.target.parentElement.appendChild(copy);
}
}
- div.firstElementChild.onmouseleave = function(event) {
+ a.onmouseleave = function(event) {
var popup = document.getElementById("reply-popup");
if (popup) {
event.target.parentElement.removeChild(popup);
@@ -219,10 +219,10 @@ document.addEventListener("DOMContentLoaded", function() {
var retweetForm = s.querySelector(".status-retweet");
handleRetweetForm(id, retweetForm);
- var replyToLink = s.querySelector(".status-reply-to");
+ var replyToLink = s.querySelector(".status-reply-to-link");
handleReplyToLink(replyToLink);
- var replyLinks = s.querySelectorAll(".status-reply");
+ var replyLinks = s.querySelectorAll(".status-reply-link");
for (var j = 0; j < replyLinks.length; j++) {
handleReplyLink(replyLinks[j]);
}
diff --git a/static/style.css b/static/style.css
index 9d4c94c..095b46e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -41,7 +41,6 @@
max-width: 280px;
vertical-align: bottom;
object-fit: contain;
- margin-bottom: 5px;
}
.status-media-container {
@@ -49,6 +48,11 @@
overflow: auto;
}
+.status-media-container>a {
+ margin-bottom: 5px;
+ display: inline-block;
+}
+
.status-profile-img-container {
margin-right: 8px;
display: inline-block;
@@ -187,16 +191,12 @@
margin-left: 8px;
}
-.status-reply-to {
- display: inline-block;
-}
-
.status-reply-to-link {
font-size: 10pt
}
.status-reply-container {
- word-break: break-all;
+ overflow-wrap: break-word;
}
.status-reply-container .fa {
@@ -209,10 +209,6 @@
font-size: 10pt;
}
-.status-reply {
- display: inline-block;
-}
-
.status-reply-link {
font-size: 10pt;
}
@@ -256,6 +252,7 @@
}
.user-profile-decription {
+ overflow-wrap: break-word;
margin: 8px 0;
}
diff --git a/templates/status.tmpl b/templates/status.tmpl
index 432c9a6..4cdb459 100644
--- a/templates/status.tmpl
+++ b/templates/status.tmpl
@@ -70,19 +70,15 @@
</div>
<div class="status-reply-container">
{{if .InReplyToID}}
- <div class="status-reply-to">
- <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}}
- </a>
- </div>
+ <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}}
+ </a>
{{if index .IDReplies .ID}} <span class="status-reply-info-divider"> - </span> {{end}}
{{end}}
{{if .ShowReplies}}
{{if index .IDReplies .ID}} <span class="status-reply-text"> replies: </span> {{end}}
{{range index .IDReplies .ID}}
- <div class="status-reply">
- <a class="status-reply-link" href="#status-{{.ID}}">#{{.Number}}</a>
- </div>
+ <a class="status-reply-link" href="#status-{{.ID}}">#{{.Number}}</a>
{{end}}
{{end}}
</div>