Fix CSS issues
authorr <r@freesoftwareextremist.com>
Sun, 8 Nov 2020 13:13:05 +0000 (13:13 +0000)
committerr <r@freesoftwareextremist.com>
Wed, 11 Nov 2020 11:15:47 +0000 (11:15 +0000)
- fix text wrapping on reply popup
- fix margin for media links

static/fluoride.js
static/style.css
templates/status.tmpl

index e055b6d637b8935370e884ce10953f0aa853079b..c1eb06ff11fa6b4cfb52aafe00505c233793c848 100644 (file)
@@ -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]);
                }
index 9d4c94cb2593f853d45e6511ed1d446db219aae1..cd37067c99c96706d82fecac67e3673de31c035f 100644 (file)
@@ -41,7 +41,6 @@
        max-width: 280px;
        vertical-align: bottom;
        object-fit: contain;
-       margin-bottom: 5px;
 }
 
 .status-media-container {
        overflow: auto;
 }
 
+.status-media-container>a {
+       margin-bottom: 5px;
+       display: inline-block;
+}
+
 .status-profile-img-container {
        margin-right: 8px;
        display: inline-block;
        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 {
        font-size: 10pt;
 }
 
-.status-reply {
-       display: inline-block;
-}
-
 .status-reply-link {
        font-size: 10pt;
 }
 }
 
 .user-profile-decription {
+       overflow-wrap: break-word;
        margin: 8px 0;
 }
 
@@ -315,7 +312,6 @@ a:hover,
        bottom: 0;
        left: 0;
        right: 0;
-       margin-bottom: 5px;
 }
 
 .img-link:hover .status-nsfw-overlay {
index 432c9a6934da7e09eaf53191a1df7400123789fe..4cdb459b42be8842eab4f20132ea21df76764c4f 100644 (file)
                        </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>