From 856fe9e8c74e7c8096f7fb04d7b0932171223752 Mon Sep 17 00:00:00 2001 From: r Date: Sun, 8 Nov 2020 13:13:05 +0000 Subject: Fix CSS issues - fix text wrapping on reply popup - fix margin for media links --- static/fluoride.js | 20 ++++++++++---------- static/style.css | 18 +++++++----------- 2 files changed, 17 insertions(+), 21 deletions(-) (limited to 'static') 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..cd37067 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; } @@ -315,7 +312,6 @@ a:hover, bottom: 0; left: 0; right: 0; - margin-bottom: 5px; } .img-link:hover .status-nsfw-overlay { -- cgit v1.2.3