External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix styling and positioning of post menu

Browse Source
This commit is contained in:
Tom
2023-05-25 13:27:09 +02:00
parent e392a1e584
commit 52b7243035
3 changed files with 29 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/views/Board.styled.jsx
+23 -37
View File
@@ -1721,15 +1721,13 @@ export const BoardForm = styled.div`
} }
#post-menu { #post-menu {
ul { border-right: 1px solid #d9bfb7;
background-color: #f0e0d6; border-bottom: 2px solid #d9bfb7;
border: 1px solid #d9bfb7;
border-bottom: 1px solid #d9bfb7;
border-right-width: 2px;
}
li { li {
border-bottom: 1px solid #ccc; border: 1px solid #d9bfb7;
border-bottom: none;
background-color: #f0e0d6;
:hover { :hover {
background-color: #ffe; background-color: #ffe;
@@ -1746,14 +1744,13 @@ export const BoardForm = styled.div`
} }
#post-menu { #post-menu {
ul { border-right: 1px solid #b7c5d9;
background-color: #d6daf0; border-bottom: 2px solid #b7c5d9;
border: 1px solid #b7c5d9;
border-right-width: 2px;
}
li { li {
border-bottom: 1px solid #b7c5d9; border: 1px solid #b7c5d9;
border-bottom: none;
background-color: #d6daf0;
:hover { :hover {
background-color: #eef2ff; background-color: #eef2ff;
@@ -1768,14 +1765,11 @@ export const BoardForm = styled.div`
#post-menu { #post-menu {
font-size: 13px !important; font-size: 13px !important;
border: 1px solid #d9bfb7;
ul { border-bottom: none;
background-color: #f0e0d6;
border: 1px solid #d9bfb7;
border-bottom: none;
}
li { li {
background-color: #f0e0d6;
border-bottom: 1px solid #d9bfb7; border-bottom: 1px solid #d9bfb7;
:hover { :hover {
@@ -1791,14 +1785,11 @@ export const BoardForm = styled.div`
#post-menu { #post-menu {
font-size: 13px !important; font-size: 13px !important;
border: 1px solid #b7c5d9;
ul { border-bottom: none;
background-color: #d6daf0;
border: 1px solid #b7c5d9;
border-bottom: none;
}
li { li {
background-color: #d6daf0;
border-bottom: 1px solid #b7c5d9; border-bottom: 1px solid #b7c5d9;
:hover { :hover {
@@ -1814,21 +1805,18 @@ export const BoardForm = styled.div`
} }
#post-menu { #post-menu {
ul { border: 1px solid #000;
background-color: #282a2e; border-bottom: none;
border: 1px solid #000;
border-bottom: none;
}
li { li {
background-color: #282a2e;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
:hover { :hover {
background-color: #1d1f21; background-color: #1d1f21;
} }
} }
} }`;
`;
case 'Photon': case 'Photon':
return `.highlighted { return `.highlighted {
@@ -1837,13 +1825,11 @@ export const BoardForm = styled.div`
} }
#post-menu { #post-menu {
ul { border: 1px solid #ccc;
background-color: #ddd; border-bottom: none;
border: 1px solid #ccc;
border-bottom: none;
}
li { li {
background-color: #ddd;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
:hover { :hover {
src/components/views/Board.jsx
+1 -1
View File
@@ -835,7 +835,7 @@ const Board = () => {
onClick={() => { onClick={() => {
const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect(); const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
const menu = document.querySelector(`.post-menu-thread-${thread.cid}`); const menu = document.querySelector(`.post-menu-thread-${thread.cid}`);
menu.style.top = `calc(${rect.top}px + 17px)`; menu.style.top = `calc(${rect.top + window.scrollY}px - 258px)`;
menu.style.left = `${rect.left}px`; menu.style.left = `${rect.left}px`;
setRotatedStates(prevState => ({ setRotatedStates(prevState => ({
src/components/views/Thread.jsx
+2 -2
View File
@@ -796,7 +796,7 @@ const Thread = () => {
onClick={() => { onClick={() => {
const rect = threadMenuRefs.current[comment.cid].getBoundingClientRect(); const rect = threadMenuRefs.current[comment.cid].getBoundingClientRect();
const menu = document.querySelector(`.post-menu-thread-${comment.cid}`); const menu = document.querySelector(`.post-menu-thread-${comment.cid}`);
menu.style.top = `calc(${rect.top}px + 17px)`; menu.style.top = `calc(${rect.top + window.scrollY}px + 17px)`;
menu.style.left = `${rect.left}px`; menu.style.left = `${rect.left}px`;
setRotatedStates(prevState => ({ setRotatedStates(prevState => ({
@@ -968,7 +968,7 @@ const Thread = () => {
onClick={() => { onClick={() => {
const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect(); const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
const menu = document.querySelector(`.post-menu-reply-${reply.cid}`); const menu = document.querySelector(`.post-menu-reply-${reply.cid}`);
menu.style.top = `calc(${rect.top}px + 17px)`; menu.style.top = `calc(${rect.top + window.scrollY}px + 17px)`;
menu.style.left = `${rect.left}px`; menu.style.left = `${rect.left}px`;
setRotatedStates(prevState => ({ setRotatedStates(prevState => ({