feat: show comment menu when hover

OI-wiki · Sep 11, 2024 · b24ffd3 · b24ffd3
1 parent 619d5b1
commit b24ffd3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/frontend/lib/main.ts b/frontend/lib/main.ts
@@ -671,7 +671,10 @@ const _renderComments = (comments: Comment[]) => {
       const commenter = commentEl.querySelector(
         ".comment_commenter",
       )! as HTMLAnchorElement;
-      commenter.textContent = comment.commenter.name;
+      if (comment.commenter.name) {
+        commenter.textContent = comment.commenter.name;
+        commenter.title = comment.commenter.name;
+      }
 
       const userAvatar = commentEl.querySelector(
         ".comment_user_avatar",

diff --git a/frontend/lib/style.css b/frontend/lib/style.css
@@ -331,24 +331,38 @@
   }
 
   & .comment_header {
-    display: flex;
+    display: grid;
     align-items: center;
 
-    flex-wrap: wrap;
+    grid-template-columns: fit-content(40%) max-content auto;
 
     gap: 3px 10px;
 
     font-size: 12px;
 
     user-select: none;
 
+    & .comment_commenter {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     & .comment_time {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 
       color: var(--review-secondary-text-color);
     }
+
+    & .comment_actions {
+      display: none;
+    }
+
+    &:hover .comment_actions {
+      display: flex;
+    }
   }
 
   & .comment.comment_pending {