diff --git a/src/components/catalog-row/catalog-row.module.css b/src/components/catalog-row/catalog-row.module.css
index 63e8128a..d28ba1c8 100644
--- a/src/components/catalog-row/catalog-row.module.css
+++ b/src/components/catalog-row/catalog-row.module.css
@@ -79,11 +79,36 @@
text-decoration: none;
}
+.postMenuBtnPadding {
+ left: 5px;
+ top: 5px;
+ position: relative;
+}
+
.postMenuBtn {
position: absolute;
- display: inline-block;
- padding-left: 5px;
+ bottom: 5px;
+ line-height: 1em;
+ color: var(--catalog-post-menu-btn-color);
+ opacity: 0;
+ transition: transform 0.1s;
+}
- width: 1em;
- height: 1em
+.post:hover .postMenuBtn {
+ opacity: var(--catalog-post-menu-btn-opacity);
+}
+
+.post:hover .postMenuBtn:hover {
+ cursor: pointer;
+ color: var(--catalog-post-menu-btn-hover-color);
+ opacity: var(--catalog-post-menu-btn-hover-opacity);
+}
+
+.postMenuBtn {
+ /* preserve unicode triangle for button, some browsers will use an emoji */
+ font-variant: normal;
+ font-feature-settings: "tnum";
+ -webkit-font-feature-settings: "tnum"; /* Chrome, Opera, and Safari */
+ -moz-font-feature-settings: "tnum"; /* Firefox */
+ font-variant-numeric: tabular-nums;
}
\ No newline at end of file
diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx
index 614969a7..3d0a7e99 100644
--- a/src/components/catalog-row/catalog-row.tsx
+++ b/src/components/catalog-row/catalog-row.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Comment } from '@plebbit/plebbit-react-hooks';
@@ -69,6 +70,8 @@ const CatalogPost = ({ post }: { post: Comment }) => {
);
+ const [menuBtnRotated, setMenuBtnRotated] = useState(false);
+
return (
{hasThumbnail ? (
@@ -91,8 +94,15 @@ const CatalogPost = ({ post }: { post: Comment }) => {
/ L: {linkCount}
)}
-
- ▶
+
+ setMenuBtnRotated(!menuBtnRotated)}
+ style={{ transform: menuBtnRotated ? 'rotate(90deg)' : 'rotate(0deg)' }}
+ >
+ ▶
+
diff --git a/src/themes.css b/src/themes.css
index 4d765322..540ae528 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -24,6 +24,12 @@
--body-font-family: arial, helvetica, sans-serif;
--body-font-size: 10pt;
+ /* catalog post */
+ --catalog-post-menu-btn-color: navy;
+ --catalog-post-menu-btn-hover-color: red;
+ --catalog-post-menu-btn-opacity: 0.5;
+ --catalog-post-menu-btn-hover-opacity: 1;
+
/* desktop buttons */
--button-desktop-text-color: #00e;
--button-desktop-text-color-hover: red;
@@ -150,6 +156,12 @@
--body-font-family: arial, helvetica, sans-serif;
--body-font-size: 10pt;
+ /* catalog post */
+ --catalog-post-menu-btn-color: navy;
+ --catalog-post-menu-btn-hover-color: #d00;
+ --catalog-post-menu-btn-opacity: 0.5;
+ --catalog-post-menu-btn-hover-opacity: 1;
+
/* homepage */
--homepage-infobox-text-color: #000;
--homepage-infobox-bar-text-color: #000;
@@ -270,6 +282,12 @@
--board-title-font-size: 32px;
--board-address-font-size: 10pt;
+ /* catalog post */
+ --catalog-post-menu-btn-color: navy;
+ --catalog-post-menu-btn-hover-color: red;
+ --catalog-post-menu-btn-opacity: 0.5;
+ --catalog-post-menu-btn-hover-opacity: 1;
+
/* desktop buttons */
--button-desktop-text-color: #00e;
--button-desktop-text-color-hover: red;
@@ -385,6 +403,12 @@
--homepage-box-bar-background-color: #98e;
--homepage-box-bar-text-color-hover: #fff;
+ /* catalog post */
+ --catalog-post-menu-btn-color: navy;
+ --catalog-post-menu-btn-hover-color: red;
+ --catalog-post-menu-btn-opacity: 0.5;
+ --catalog-post-menu-btn-hover-opacity: 1;
+
/* desktop buttons */
--button-desktop-text-color: #34345c;
--button-text-decoration: underline;
@@ -497,6 +521,12 @@
--board-title-font-family: Tahoma, sans-serif;
--board-address-font-size: x-small;
+ /* catalog post */
+ --catalog-post-menu-btn-color: #5f89ac;
+ --catalog-post-menu-btn-hover-color: #5f89ac;
+ --catalog-post-menu-btn-opacity: 0.5;
+ --catalog-post-menu-btn-hover-opacity: 1;
+
/* desktop buttons */
--button-desktop-text-color: #81a2be;
--button-desktop-text-color-hover: #5f89ac;
@@ -610,6 +640,12 @@
--board-title-text-color: #004a99;
--board-address-font-size: x-small;
+ /* catalog post */
+ --catalog-post-menu-btn-color: #f60;
+ --catalog-post-menu-btn-hover-color: #f30;
+ --catalog-post-menu-btn-opacity: 0.5;
+ --catalog-post-menu-btn-hover-opacity: 1;
+
/* desktop buttons */
--button-desktop-text-color: #f60;
--button-desktop-text-color-hover: #f30;