lashman/openpylon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: apply density factor to card, column, and board spacing

Browse Source
This commit is contained in:
Your Name
2026-02-15 20:25:34 +02:00
parent 683f14f2ae
commit 1353ccb720
3 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/board/BoardView.tsx
View File

@@ -296,7 +296,7 @@ export function BoardView() {
items={columnIds} items={columnIds}
strategy={horizontalListSortingStrategy} strategy={horizontalListSortingStrategy}
> >
<div className="flex h-full gap-6 overflow-x-auto p-6"> <div className="flex h-full overflow-x-auto" style={{ gap: `calc(1.5rem * var(--density-factor))`, padding: `calc(1.5rem * var(--density-factor))` }}>
{board.columns.map((column) => ( {board.columns.map((column) => (
<KanbanColumn <KanbanColumn
key={column.id} key={column.id}

6
src/components/board/CardThumbnail.tsx
View File

@@ -1,3 +1,4 @@
import React from "react";
import { format, isPast, isToday } from "date-fns"; import { format, isPast, isToday } from "date-fns";
import { motion, useReducedMotion } from "framer-motion"; import { motion, useReducedMotion } from "framer-motion";
import { useSortable } from "@dnd-kit/sortable"; import { useSortable } from "@dnd-kit/sortable";
@@ -28,10 +29,11 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
data: { type: "card", columnId }, data: { type: "card", columnId },
}); });
const style = { const style: React.CSSProperties = {
transform: CSS.Transform.toString(transform), transform: CSS.Transform.toString(transform),
transition, transition,
opacity: isDragging ? 0.3 : undefined, opacity: isDragging ? 0.3 : undefined,
padding: `calc(0.75rem * var(--density-factor))`,
}; };
const hasDueDate = card.dueDate != null; const hasDueDate = card.dueDate != null;
@@ -47,7 +49,7 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
ref={setNodeRef} ref={setNodeRef}
style={style} style={style}
onClick={handleClick} onClick={handleClick}
className="w-full rounded-lg bg-pylon-surface p-3 shadow-sm text-left transition-all duration-200 hover:-translate-y-px hover:shadow-md" className="w-full rounded-lg bg-pylon-surface shadow-sm text-left transition-all duration-200 hover:-translate-y-px hover:shadow-md"
initial={prefersReducedMotion ? false : { opacity: 0, y: -8 }} initial={prefersReducedMotion ? false : { opacity: 0, y: -8 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ type: "spring", stiffness: 300, damping: 25 }} transition={{ type: "spring", stiffness: 300, damping: 25 }}

2
src/components/board/KanbanColumn.tsx
View File

@@ -84,7 +84,7 @@ export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
strategy={verticalListSortingStrategy} strategy={verticalListSortingStrategy}
> >
<ScrollArea className="flex-1 overflow-y-auto"> <ScrollArea className="flex-1 overflow-y-auto">
<ul ref={setDroppableNodeRef} className="flex min-h-[40px] list-none flex-col gap-2 p-2"> <ul ref={setDroppableNodeRef} className="flex min-h-[40px] list-none flex-col" style={{ gap: `calc(0.5rem * var(--density-factor))`, padding: `calc(0.5rem * var(--density-factor))` }}>
{column.cardIds.map((cardId) => { {column.cardIds.map((cardId) => {
const card = board?.cards[cardId]; const card = board?.cards[cardId];
if (!card) return null; if (!card) return null;