diff options
| author | r <r@freesoftwareextremist.com> | 2020-04-14 09:32:53 +0000 |
|---|---|---|
| committer | r <r@freesoftwareextremist.com> | 2020-04-14 16:08:47 +0000 |
| commit | ccdb5ef051bfcc9e96f4b0ce98a32735eb48d1c4 (patch) | |
| tree | 37f1b1014a32375dd785260d275cc8c905ca6bb5 | |
| parent | 402c976ec87228c6261f2b8f25b968e95871dca9 (diff) | |
| download | bloat-ccdb5ef051bfcc9e96f4b0ce98a32735eb48d1c4.tar.gz bloat-ccdb5ef051bfcc9e96f4b0ce98a32735eb48d1c4.zip | |
Fix UI issues
- Increase media preview size
- Fix z-index of more-actions poup
- Add left and top position for reply hover popup
| -rw-r--r-- | static/fluoride.js | 10 | ||||
| -rw-r--r-- | static/style.css | 9 |
2 files changed, 15 insertions, 4 deletions
diff --git a/static/fluoride.js b/static/fluoride.js index 0ee3f30..700d980 100644 --- a/static/fluoride.js +++ b/static/fluoride.js @@ -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); } } diff --git a/static/style.css b/static/style.css index 2a1b6bb..838a3c4 100644 --- a/static/style.css +++ b/static/style.css @@ -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 { |