aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorr <r@freesoftwareextremist.com>2020-04-14 09:32:53 +0000
committerr <r@freesoftwareextremist.com>2020-04-14 16:08:47 +0000
commitccdb5ef051bfcc9e96f4b0ce98a32735eb48d1c4 (patch)
tree37f1b1014a32375dd785260d275cc8c905ca6bb5
parent402c976ec87228c6261f2b8f25b968e95871dca9 (diff)
downloadbloat-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.js10
-rw-r--r--static/style.css9
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 {