Skip to content

Commit f2ad275

Browse files
ManukMinasyanManukMinasyan
committed
Refactor Kanban components: update styles and class names for consistency
1 parent 18d80d0 commit f2ad275

File tree

9 files changed

+1464
-160
lines changed

9 files changed

+1464
-160
lines changed

‎resources/css/flowforge.css‎

Lines changed: 161 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,164 @@
1-
@layer base {
2-
/* Base variables and theme configuration */
3-
:root {
4-
/* Base spacing */
5-
--kanban-base-spacing: 1rem;
6-
--kanban-spacing-xs: calc(var(--kanban-base-spacing) * 0.25); /* 0.25rem | 4px */
7-
--kanban-spacing-sm: calc(var(--kanban-base-spacing) * 0.5); /* 0.5rem | 8px */
8-
--kanban-spacing-md: var(--kanban-base-spacing); /* 1rem | 16px */
9-
--kanban-spacing-lg: calc(var(--kanban-base-spacing) * 1.5); /* 1.5rem | 24px */
10-
--kanban-spacing-xl: calc(var(--kanban-base-spacing) * 2); /* 2rem | 32px */
11-
12-
/* Column styling */
13-
--kanban-column-bg: theme('colors.gray.100');
14-
--kanban-column-header: theme('colors.gray.700');
15-
--kanban-column-border: #e5e7eb;
16-
--kanban-column-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
17-
18-
/* Card styling */
19-
--kanban-card-bg: theme('colors.white');
20-
--kanban-card-hover: theme('colors.gray.50');
21-
--kanban-card-border: #f1f1f1;
22-
--kanban-card-shadow-normal: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.05);
23-
--kanban-card-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
24-
25-
/* Priority indicators */
26-
--kanban-priority-high: #ef4444;
27-
--kanban-priority-medium: #f59e0b;
28-
--kanban-priority-low: #10b981;
29-
}
30-
31-
.dark {
32-
/* Dark mode column styling */
33-
--kanban-column-bg: rgba(31, 41, 55, 0.8);
34-
--kanban-column-header: theme('colors.gray.200');
35-
--kanban-column-border: #1f2937;
36-
--kanban-column-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
37-
38-
/* Dark mode card styling */
39-
--kanban-card-bg: rgba(43, 55, 73, 0.95);
40-
--kanban-card-hover: rgba(55, 65, 81, 0.95);
41-
--kanban-card-border: #374151;
42-
--kanban-card-shadow-normal: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.3);
43-
--kanban-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.25);
44-
45-
/* Dark mode priority indicators */
46-
--kanban-priority-high: #f87171;
47-
--kanban-priority-medium: #fbbf24;
48-
--kanban-priority-low: #34d399;
1+
/**
2+
* Card Component
3+
* Used for displaying content blocks throughout the kanban board
4+
* Supports interactive hover states and cursor variations based on edit permissions
5+
*/
6+
.ff-card {
7+
@apply mb-3 bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-gray-200 dark:border-gray-800 overflow-hidden transition-all duration-150 hover:shadow-md;
8+
9+
&__content {
10+
@apply p-3;
11+
}
12+
13+
&__title {
14+
@apply text-sm font-medium text-gray-900 dark:text-white;
15+
}
16+
17+
&__description {
18+
@apply mt-1 text-xs text-gray-500 dark:text-gray-400 line-clamp-2;
19+
}
20+
21+
&__attributes {
22+
@apply mt-3 flex flex-wrap gap-1.5;
23+
}
24+
25+
&--interactive {
26+
@apply cursor-pointer;
27+
}
28+
29+
&--non-interactive {
30+
@apply cursor-default;
31+
}
32+
}
33+
34+
/**
35+
* Card Badge Component
36+
* Used for displaying metadata, tags, and status indicators within cards
37+
* Supports various sizes, colors, and visual treatments
38+
*/
39+
.ff-badge {
40+
@apply inline-flex items-center transition-colors duration-150;
41+
42+
&--sm {
43+
@apply text-xs py-0 px-1.5;
44+
}
45+
46+
&--md {
47+
@apply text-xs py-0.5 px-2;
48+
}
49+
50+
&--lg {
51+
@apply text-sm py-1 px-2.5;
52+
}
53+
54+
&--rounded-md {
55+
@apply rounded-md;
56+
}
57+
58+
&--rounded-full {
59+
@apply rounded-full;
60+
}
61+
62+
&__label {
63+
@apply font-medium mr-0.5;
64+
}
65+
66+
&__value {
67+
/* Base styling for the value */
68+
}
69+
70+
&__count {
71+
@apply ml-1.5 flex items-center justify-center w-4 h-4 rounded-full bg-white bg-opacity-30 text-xs leading-none;
72+
}
73+
74+
&__icon {
75+
@apply flex-shrink-0;
76+
77+
&--sm {
78+
@apply w-3 h-3 mr-1;
79+
}
80+
81+
&--md {
82+
@apply w-3.5 h-3.5 mr-1.5;
83+
}
84+
85+
&--lg {
86+
@apply w-4 h-4 mr-1.5;
87+
}
88+
}
89+
}
90+
91+
/**
92+
* Column Component
93+
* Used for displaying vertical columns in the kanban board
94+
* Contains header with title and count, and scrollable content area
95+
*/
96+
.ff-column {
97+
@apply w-[300px] min-w-[300px] flex-shrink-0 border border-gray-200 dark:border-gray-700 shadow-sm dark:shadow-md rounded-xl flex flex-col max-h-full overflow-hidden;
98+
99+
&__header {
100+
@apply flex items-center justify-between py-3 px-4 border-b border-gray-200 dark:border-gray-700;
101+
}
102+
103+
&__title-container {
104+
@apply flex items-center;
105+
}
106+
107+
&__title {
108+
@apply text-sm font-medium text-gray-700 dark:text-gray-200;
109+
}
110+
111+
&__count {
112+
@apply ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
113+
}
114+
115+
&__content {
116+
@apply p-3 flex-1 overflow-y-auto overflow-x-hidden;
117+
max-height: calc(100vh - 13rem);
118+
}
119+
120+
&__loader {
121+
@apply py-3 text-center;
122+
}
123+
124+
&__loading-text {
125+
@apply text-xs text-primary-600 dark:text-primary-400;
126+
}
127+
128+
&__count-text {
129+
@apply text-xs text-gray-400;
130+
}
131+
}
132+
133+
/**
134+
* Empty Column Component
135+
* Used for displaying an empty state when a column has no cards
136+
*/
137+
.ff-empty-column {
138+
@apply p-3 flex flex-col items-center justify-center h-full min-h-[150px] rounded-lg border-2 border-dashed border-gray-200 dark:border-gray-800;
139+
140+
&__icon {
141+
@apply w-10 h-10 text-gray-400 dark:text-gray-600 mb-2;
142+
}
143+
144+
&__text {
145+
@apply text-sm text-gray-500 dark:text-gray-400;
146+
}
147+
}
148+
149+
/**
150+
* Board Component
151+
* Container for the entire kanban board
152+
*/
153+
.ff-board {
154+
@apply w-full h-full flex flex-col relative;
155+
156+
&__content {
157+
@apply flex-1 overflow-hidden;
158+
}
159+
160+
&__columns {
161+
@apply flex flex-row h-full overflow-x-auto overflow-y-hidden px-2 gap-5 pb-4;
49162
}
50163
}
51164

‎resources/dist/flowforge.css‎

Lines changed: 1191 additions & 1 deletion
Large diffs are not rendered by default.

‎resources/dist/flowforge.js‎

Lines changed: 64 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/views/livewire/card-badge.blade.php‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,16 @@
1111

1212
@php
1313
$badgeClasses = [
14-
'inline-flex items-center transition-colors duration-150',
15-
'text-xs' => $size === 'sm' || $size === 'md',
16-
'text-sm' => $size === 'lg',
17-
'font-medium',
14+
'ff-badge',
15+
'ff-badge--' . $size,
16+
'ff-badge--rounded-' . $rounded,
1817
'kanban-color-' . $color,
19-
'rounded-full' => $rounded === 'full',
20-
'rounded-md' => $rounded === 'md',
21-
'py-0.5 px-2' => $size === 'md',
22-
'py-0 px-1.5' => $size === 'sm',
23-
'py-1 px-2.5' => $size === 'lg',
2418
'group' => $icon,
2519
];
2620
2721
$iconClasses = [
28-
'w-3 h-3' => $size === 'sm',
29-
'w-3.5 h-3.5' => $size === 'md',
30-
'w-4 h-4' => $size === 'lg',
31-
'mr-1' => $size === 'sm',
32-
'mr-1.5' => $size === 'md' || $size === 'lg',
33-
'flex-shrink-0',
22+
'ff-badge__icon',
23+
'ff-badge__icon--' . $size,
3424
];
3525
@endphp
3626

@@ -40,15 +30,15 @@
4030
@endif
4131

4232
@if($label)
43-
<span class="font-medium mr-0.5">{{ $label }}@if($value):@endif</span>
33+
<span class="ff-badge__label">{{ $label }}@if($value):@endif</span>
4434
@endif
4535

4636
@if($value)
47-
<span>{{ $value }}</span>
37+
<span class="ff-badge__value">{{ $value }}</span>
4838
@endif
4939

5040
@if($badge)
51-
<span class="ml-1.5 flex items-center justify-center w-4 h-4 rounded-full bg-white bg-opacity-30 text-xs leading-none">
41+
<span class="ff-badge__count">
5242
{{ $badge }}
5343
</span>
5444
@endif

‎resources/views/livewire/card.blade.php‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,25 @@
22

33
<div
44
@class([
5-
'kanban-card mb-3 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden transition-all duration-150 hover:shadow-md',
6-
'cursor-pointer' => $this->editAction() && ($this->editAction)(['record' => $record['id']])->isVisible(),
7-
'cursor-default' => !$this->editAction()
5+
'ff-card kanban-card',
6+
'ff-card--interactive' => $this->editAction() && ($this->editAction)(['record' => $record['id']])->isVisible(),
7+
'ff-card--non-interactive' => !$this->editAction()
88
])
99
x-sortable-handle
1010
x-sortable-item="{{ $record['id'] }}"
1111
@if($this->editAction() && ($this->editAction)(['record' => $record['id']])->isVisible())
1212
wire:click="mountAction('edit', {record: {{ $record['id'] }}})"
1313
@endif
1414
>
15-
<div class="p-3">
16-
<h4 class="text-sm font-medium text-gray-900 dark:text-white card-title">{{ $record['title'] }}</h4>
15+
<div class="ff-card__content">
16+
<h4 class="ff-card__title">{{ $record['title'] }}</h4>
1717

1818
@if(!empty($record['description']))
19-
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">{{ $record['description'] }}</p>
19+
<p class="ff-card__description">{{ $record['description'] }}</p>
2020
@endif
2121

2222
@if(collect($record['attributes'] ?? [])->filter(fn($attribute) => !empty($attribute['value']))->isNotEmpty())
23-
24-
<div class="mt-3 flex flex-wrap gap-1.5">
23+
<div class="ff-card__attributes">
2524
@foreach($record['attributes'] as $attribute => $data)
2625
@if(isset($data) && !empty($data['value']))
2726
<x-flowforge::card-badge

0 commit comments

Comments
 (0)