fix: Improve list view on mobile

vriteio · Aug 11, 2023 · 29cb1da · 29cb1da
1 parent 2f9c55b
commit 29cb1da
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 9 deletions.
diff --git a/apps/web/src/layout/toolbar/breadcrumb.tsx b/apps/web/src/layout/toolbar/breadcrumb.tsx
@@ -114,6 +114,8 @@ const Breadcrumb: Component<{
               group: "shared",
               ghostClass: "!hidden",
               filter: ".locked",
+              delayOnTouchOnly: true,
+              delay: 500,
               onAdd(evt) {
                 const el = evt.item;
 
@@ -171,6 +173,8 @@ const Breadcrumb: Component<{
                     group: "shared",
                     ghostClass: "!hidden",
                     filter: ".locked",
+                    delayOnTouchOnly: true,
+                    delay: 500,
                     onAdd(evt) {
                       const el = evt.item;
 

diff --git a/apps/web/src/views/dashboard/views/kanban/content-group-column.tsx b/apps/web/src/views/dashboard/views/kanban/content-group-column.tsx
@@ -212,6 +212,8 @@ const ContentGroupColumn: Component<ContentGroupColumnProps> = (props) => {
                     );
                   }
                 },
+                delayOnTouchOnly: true,
+                delay: 500,
                 disabled: !hasPermission("manageDashboard"),
                 ghostClass: "!hidden",
                 revertOnSpill: true,

diff --git a/apps/web/src/views/dashboard/views/list/content-group-row.tsx b/apps/web/src/views/dashboard/views/list/content-group-row.tsx
@@ -129,7 +129,7 @@ const ContentGroupRow: Component<ContentGroupRowProps> = (props) => {
   });
 
   return (
-    <Card class="m-0 border-x-0 border-t-0 rounded-none flex justify-start items-center hover:bg-gray-200 dark:hover:bg-gray-700 hover:cursor-pointer pl-4">
+    <Card class="m-0 border-x-0 border-t-0 rounded-none flex justify-start items-center @hover:bg-gray-200 dark:@hover:bg-gray-700 @hover:cursor-pointer pl-4">
       <div
         class="flex flex-1 justify-center items-center cursor-pointer overflow-x-hidden"
         ref={(el) => {
@@ -143,6 +143,8 @@ const ContentGroupRow: Component<ContentGroupRowProps> = (props) => {
                 );
               }
             },
+            delayOnTouchOnly: true,
+            delay: 500,
             disabled: !hasPermission("manageDashboard"),
             ghostClass: "!hidden",
             revertOnSpill: true,
@@ -259,7 +261,7 @@ const ContentGroupRow: Component<ContentGroupRowProps> = (props) => {
           </div>
           <MiniEditor
             class={clsx(
-              "!text-base inline-flex text-start flex-1 overflow-x-auto content-group-name scrollbar-hidden hover:cursor-text",
+              "!text-base inline-flex text-start flex-1 overflow-x-auto content-group-name scrollbar-hidden @hover:cursor-text",
               highlight() && "highlight-text"
             )}
             content="paragraph"

diff --git a/apps/web/src/views/dashboard/views/list/content-piece-row.tsx b/apps/web/src/views/dashboard/views/list/content-piece-row.tsx
@@ -2,7 +2,6 @@ import { Component } from "solid-js";
 import { mdiEye, mdiFileOutline, mdiPencil } from "@mdi/js";
 import { useNavigate } from "@solidjs/router";
 import SortableLib from "sortablejs";
-import clsx from "clsx";
 import { Card, IconButton, Tooltip } from "#components/primitives";
 import { App, hasPermission, useLocalStorage, useSharedState } from "#context";
 import { breakpoints } from "#lib/utils";
@@ -21,10 +20,7 @@ const ContentPieceRow: Component<ContentPieceRowProps> = (props) => {
   const { setStorage, storage } = useLocalStorage();
   const navigate = useNavigate();
   const createSharedSignal = useSharedState();
-  const [activeDraggablePiece, setActiveDraggablePiece] = createSharedSignal(
-    "activeDraggablePiece",
-    null
-  );
+  const [, setActiveDraggablePiece] = createSharedSignal("activeDraggablePiece", null);
   const editedArticleId = (): string => storage().contentPieceId || "";
 
   return (
@@ -40,7 +36,7 @@ const ContentPieceRow: Component<ContentPieceRowProps> = (props) => {
     >
       <Card
         color="contrast"
-        class="m-0 border-x-0 border-t-0 rounded-none justify-start items-center hover:bg-gray-200 dark:hover:bg-gray-700 hover:cursor-pointer pl-4 flex bg-transparent"
+        class="m-0 border-x-0 border-t-0 rounded-none justify-start items-center @hover:bg-gray-200 dark:@hover:bg-gray-700 @hover:cursor-pointer pl-4 flex bg-transparent"
       >
         <div
           class="flex flex-1 justify-center items-center cursor-pointer overflow-hidden rounded-lg"
@@ -50,6 +46,8 @@ const ContentPieceRow: Component<ContentPieceRowProps> = (props) => {
                 name: "shared",
                 put: () => false
               },
+              delayOnTouchOnly: true,
+              delay: 500,
               disabled: !hasPermission("manageDashboard"),
               ghostClass: "!hidden",
               revertOnSpill: true,
@@ -76,7 +74,7 @@ const ContentPieceRow: Component<ContentPieceRowProps> = (props) => {
               hover={false}
               badge
             />
-            {props.contentPiece.title}
+            <span class="clamp-1 text-start">{props.contentPiece.title}</span>
           </div>
         </div>
         <Tooltip text="Open in editor" side="left" wrapperClass="mr-4" class="-ml-1">