aboutsummaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
Diffstat (limited to 'static')
-rw-r--r--static/fluoride.js60
-rw-r--r--static/main.css13
2 files changed, 53 insertions, 20 deletions
diff --git a/static/fluoride.js b/static/fluoride.js
index 3c0d7f2..6be61c0 100644
--- a/static/fluoride.js
+++ b/static/fluoride.js
@@ -112,47 +112,71 @@ function handleRetweetForm(id, f) {
}
}
-function handleReplyToLink(link) {
- if (!link) {
+function isInView(el) {
+ var ract = el.getBoundingClientRect();
+ if (ract.top > 0 && ract.bottom < window.innerHeight) {
+ return true;
+ }
+ return false;
+}
+
+function handleReplyToLink(div) {
+ if (!div) {
return;
}
- var id = link.firstElementChild.getAttribute('href');
+ var id = div.firstElementChild.getAttribute('href');
if (!id || id[0] != '#') {
return;
}
- link.onmouseenter = function(event) {
- var id = event.target.firstElementChild.getAttribute('href');
+ div.firstElementChild.onmouseenter = function(event) {
+ var id = event.target.getAttribute('href');
var status = document.querySelector(id);
if (!status) {
return;
}
- var copy = status.cloneNode(true);
- copy.id = "reply-to-popup";
- link.appendChild(copy);
+ if (isInView(status)) {
+ status.classList.add("highlight");
+ } else {
+ var copy = status.cloneNode(true);
+ copy.id = "reply-to-popup";
+ event.target.parentElement.appendChild(copy);
+ }
}
- link.onmouseleave = function(event) {
+ div.firstElementChild.onmouseleave = function(event) {
var popup = document.getElementById("reply-to-popup");
if (popup) {
- event.target.removeChild(popup);
+ event.target.parentElement.removeChild(popup);
+ } else {
+ var id = event.target.getAttribute('href');
+ document.querySelector(id)
+ .classList.remove("highlight");
}
}
}
-function handleReplyLink(link) {
- link.onmouseenter = function(event) {
- var id = event.target.firstElementChild.getAttribute('href');
+function handleReplyLink(div) {
+ div.firstElementChild.onmouseenter = function(event) {
+ var id = event.target.getAttribute('href');
var status = document.querySelector(id);
if (!status) {
return;
}
- var copy = status.cloneNode(true);
- copy.id = "reply-popup";
- link.appendChild(copy);
+ if (isInView(status)) {
+ status.classList.add("highlight");
+ } else {
+ var copy = status.cloneNode(true);
+ copy.id = "reply-popup";
+ event.target.parentElement.appendChild(copy);
+ }
}
- link.onmouseleave = function(event) {
+ div.firstElementChild.onmouseleave = function(event) {
var popup = document.getElementById("reply-popup");
if (popup) {
- event.target.removeChild(popup);
+ event.target.parentElement.removeChild(popup);
+ } else {
+ var id = event.target.getAttribute('href');
+ document.querySelector(id)
+ .classList.remove("highlight");
}
}
}
diff --git a/static/main.css b/static/main.css
index acbca05..602f2ef 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,6 +1,6 @@
.status-container-container {
- margin: 16px 0 16px -4px;
- padding: 0 4px;
+ margin: 12px 0 12px -4px;
+ padding: 4px;
border-left: 4px solid transparent;
}
@@ -8,6 +8,10 @@
border-color: #777777;
}
+.status-container-container.highlight {
+ background-color: #cccccc;
+}
+
.status-container {
display: flex;
}
@@ -468,3 +472,8 @@
background-color: #222222;
border-color: #444444;
}
+
+.dark .status-container-container.highlight {
+ background-color: #333333;
+}
+