Fix glitchy looking dragging item overdrag borders (aeharding#5)

* Fix glitchy looking dragging item overdrag borders * Fix grey bg hack
fpcuriosity · Jun 23, 2023 · 354fc51 · 354fc51
1 parent 2704978
commit 354fc51
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 10 deletions.
diff --git a/src/features/comment/Comment.tsx b/src/features/comment/Comment.tsx
@@ -213,12 +213,13 @@ export default function Comment({
   }
 
   return (
-    <AnimateHeight
-      duration={200}
-      height={fullyCollapsed ? 0 : "auto"}
-      className={className}
-    >
-      <DraggingVote onVote={onVote} currentVote={currentVote} onReply={onReply}>
+    <AnimateHeight duration={200} height={fullyCollapsed ? 0 : "auto"}>
+      <DraggingVote
+        onVote={onVote}
+        currentVote={currentVote}
+        onReply={onReply}
+        className={className}
+      >
         <CustomIonItem
           routerLink={routerLink}
           href={undefined}

diff --git a/src/features/post/inFeed/Post.tsx b/src/features/post/inFeed/Post.tsx
@@ -227,6 +227,7 @@ export default function Post({ post, communityMode, className }: PostProps) {
         if (!jwt) return login({ presentingElement: pageContext.page });
         else reply({ presentingElement: pageContext.page });
       }}
+      className={className}
     >
       {/* href=undefined: Prevent drag failure on firefox */}
       <CustomIonItem
@@ -235,7 +236,6 @@ export default function Post({ post, communityMode, className }: PostProps) {
           `/c/${getHandle(post.community)}/comments/${post.post.id}`
         )}
         href={undefined}
-        className={className}
       >
         <Container>
           <div>

diff --git a/src/features/shared/DraggingVote.tsx b/src/features/shared/DraggingVote.tsx
@@ -10,6 +10,10 @@ import {
 import { arrowDownSharp, arrowUndo, arrowUpSharp } from "ionicons/icons";
 import React, { useEffect, useRef, useState } from "react";
 
+const StyledIonItemSliding = styled(IonItemSliding)`
+  --ion-item-border-color: transparent;
+`;
+
 const Action = styled(IonIcon)<{ active: boolean }>`
   display: flex;
   align-items: center;
@@ -97,7 +101,7 @@ export default function DraggingVote({
   }
 
   return (
-    <IonItemSliding
+    <StyledIonItemSliding
       onIonDrag={async (e) => {
         dragRef.current = e;
         const ratio = await e.target.getSlidingRatio();
@@ -130,6 +134,6 @@ export default function DraggingVote({
         </IonItemOption>
       </IonItemOptions>
       {children}
-    </IonItemSliding>
+    </StyledIonItemSliding>
   );
 }
diff --git a/src/index.css b/src/index.css
@@ -22,7 +22,7 @@ ion-tab-button {
   .ios .grey-bg {
     --ion-background-color: var(--ion-color-step-50, #f2f2f7);
   }
-  .ios body:has(.grey-bg:not([aria-hidden="true"])) {
+  .ios body:has(.grey-bg:not([aria-hidden="true"]):not([style*="pointer"])) {
     --ion-background-color: var(--ion-color-step-50, #f2f2f7);
   }
   .ios .grey-bg ion-header {