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

add post menu UI, mod logic, styling to catalog

Browse Source
This commit is contained in:
Tom
2023-05-25 13:42:58 +02:00
parent 52b7243035
commit cfa1489b16
3 changed files with 492 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/GlobalStyle.styled.jsx
+40
View File
@@ -54,4 +54,44 @@ export const GlobalStyle = createGlobalStyle`
max-height: 100% !important;
}
}
.post-menu-catalog {
position: absolute;
font-size: 12px;
line-height: 1.3em;
list-style: none;
ul {
padding: 0;
margin: 0;
white-space: nowrap;
}
li {
cursor: pointer;
position: relative;
padding: 2px 4px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
left: 100%;
top: 0;
}
.dropdown:hover .dropdown-menu {
display: block;
}
a {
text-decoration: none;
color: inherit;
}
}
`;
src/components/styled/views/Catalog.styled.jsx
+167
View File
@@ -77,4 +77,171 @@ export const Threads = styled.div`
display: block;
padding: 0 15px;
}
`;
export const PostMenuCatalog = styled.div`
.post-menu-catalog {
position: relative;
font-size: 12px;
padding: 0;
li {
cursor: pointer;
position: relative;
padding: 2px 4px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
}
.dropdown:hover .dropdown-menu {
display: block;
}
a {
text-decoration: none;
color: inherit;
}
}
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':
return `.highlighted {
background-color: #f0c0b0 !important;
border: 1px solid #d99f91 !important;
border-left: none !important;
border-top: none !important;
}
.post-menu-catalog {
border-right: 1px solid #d9bfb7;
border-bottom: 2px solid #d9bfb7;
li {
border: 1px solid #d9bfb7;
border-bottom: none;
background-color: #f0e0d6;
:hover {
background-color: #ffe;
}
}
}`;
case 'Yotsuba-B':
return `.highlighted {
background-color: #d6bad0 !important;
border: 1px solid #ba9dbf !important;
border-left: none !important;
border-top: none !important;
}
.post-menu-catalog {
border-right: 1px solid #b7c5d9;
border-bottom: 2px solid #b7c5d9;
li {
border: 1px solid #b7c5d9;
border-bottom: none;
background-color: #d6daf0;
:hover {
background-color: #eef2ff;
}
}
}`;
case 'Futaba':
return `.highlighted {
background-color: #f0c0b0 !important;
}
.post-menu-catalog {
font-size: 13px !important;
border: 1px solid #d9bfb7;
border-bottom: none;
li {
background-color: #f0e0d6;
border-bottom: 1px solid #d9bfb7;
:hover {
background-color: #ffe;
}
}
}`;
case 'Burichan':
return `.highlighted {
background-color: #d6bad0 !important;
}
.post-menu-catalog {
font-size: 13px !important;
border: 1px solid #b7c5d9;
border-bottom: none;
li {
background-color: #d6daf0;
border-bottom: 1px solid #b7c5d9;
:hover {
background-color: #eef2ff;
}
}
}`;
case 'Tomorrow':
return `.highlighted {
background-color: #1d1d21 !important;
border: 1px solid #111 !important;
}
.post-menu-catalog {
border: 1px solid #000;
border-bottom: none;
li {
background-color: #282a2e;
border-bottom: 1px solid #000;
:hover {
background-color: #1d1f21;
}
}
}`;
case 'Photon':
return `.highlighted {
background-color: #ccc !important;
border: 1px solid #ccc !important;
}
.post-menu-catalog {
border: 1px solid #ccc;
border-bottom: none;
li {
background-color: #ddd;
border-bottom: 1px solid #ccc;
:hover {
background-color: #eee;
}
}
}`;
default:
return '';
}
}}
`;