Fix UI issues
authorr <r@freesoftwareextremist.com>
Tue, 14 Apr 2020 09:32:53 +0000 (09:32 +0000)
committerr <r@freesoftwareextremist.com>
Tue, 14 Apr 2020 16:08:47 +0000 (16:08 +0000)
- Increase media preview size
- Fix z-index of more-actions poup
- Add left and top position for reply hover popup

static/fluoride.js
static/style.css

index 0ee3f30e86f22c0da4746b803b974f65cbe2bdc0..700d9807237a72f9182bc24a109e11b11041440f 100644 (file)
@@ -134,6 +134,11 @@ function handleReplyToLink(div) {
                } else {
                        var copy = status.cloneNode(true);
                        copy.id = "reply-to-popup";
+                       var ract = event.target.getBoundingClientRect();
+                       if (ract.top > window.innerHeight / 2) {
+                               copy.style.bottom = (window.innerHeight - 
+                                       window.scrollY - ract.top) + 'px';
+                       }
                        event.target.parentElement.appendChild(copy);
                }
        }
@@ -161,6 +166,11 @@ function handleReplyLink(div) {
                } else {
                        var copy = status.cloneNode(true);
                        copy.id = "reply-popup";
+                       var ract = event.target.getBoundingClientRect();
+                       if (ract.left > window.innerWidth / 2) {
+                               copy.style.right = (window.innerWidth -
+                                       ract.right - 12) + 'px';;
+                       }
                        event.target.parentElement.appendChild(copy);
                }
        }
index 2a1b6bb191e2f1e1366c5519c682785335cda3cd..838a3c453f2dec7e16dec306b9e5c67caf9caddd 100644 (file)
@@ -30,8 +30,8 @@
 .status-content img,
 .status-image,
 .status-video {
-       max-height: 180px;
-       max-width: 220px;
+       max-height: 240px;
+       max-width: 280px;
        width: auto;
        vertical-align: bottom;
 }
@@ -413,7 +413,7 @@ a:hover,
        border: 1px solid #aaaaaa;
        padding: 4px 8px;
        z-index: 3;
-       margin: 0 8px 0 8px;
+       margin: 0;
 }
 
 #reply-to-popup {
@@ -422,7 +422,7 @@ a:hover,
        border: 1px solid #aaaaaa;
        padding: 4px 8px;
        z-index: 3;
-       margin: 0 8px 0 8px;
+       margin: 0;
 }
 
 .search-form {
@@ -432,6 +432,7 @@ a:hover,
 .more-container {
        position: relative;
        display: inline-block;
+       z-index: 1;
 }
 
 .more-content {