mirror of
https://github.com/TurTaskProject/TurTaskWeb.git
synced 2025-12-19 22:14:07 +01:00
Change card Style
This commit is contained in:
parent
36958d5256
commit
145f19f49b
@ -25,6 +25,10 @@ export function TaskCard({ task, deleteTask, updateTask }) {
|
|||||||
|
|
||||||
// ---- DESC AND TAG ---- */
|
// ---- DESC AND TAG ---- */
|
||||||
|
|
||||||
|
if (task.tags === undefined) {
|
||||||
|
task.tags = [];
|
||||||
|
}
|
||||||
|
|
||||||
// Tags
|
// Tags
|
||||||
const tags =
|
const tags =
|
||||||
task.tags.length > 0 ? (
|
task.tags.length > 0 ? (
|
||||||
@ -32,8 +36,8 @@ export function TaskCard({ task, deleteTask, updateTask }) {
|
|||||||
{task.tags.map((tag, index) => (
|
{task.tags.map((tag, index) => (
|
||||||
<div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
className={`text-xs inline-flex items-center font-bold leading-sm uppercase px-2 py-1 bg-${tag.color}-200 text-${tag.color}-700 rounded-full`}>
|
className={`inline-flex items-center font-bold leading-sm uppercase w-1/3 h-3 p-2 mr-1 bg-${tag.color}-200 text-${tag.color}-700 rounded`}>
|
||||||
{tag.label}
|
<p className="text-[9px] truncate">{tag}</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@ -42,7 +46,7 @@ export function TaskCard({ task, deleteTask, updateTask }) {
|
|||||||
// difficulty?
|
// difficulty?
|
||||||
const difficultyTag = task.difficulty ? (
|
const difficultyTag = task.difficulty ? (
|
||||||
<span
|
<span
|
||||||
className={`text-[10px] inline-flex items-center font-bold leading-sm uppercase px-2 py-1 rounded-full ${
|
className={`text-[9px] inline-flex items-center font-bold leading-sm uppercase px-2 py-1 rounded-full ${
|
||||||
task.difficulty === 1
|
task.difficulty === 1
|
||||||
? "bg-blue-200 text-blue-700"
|
? "bg-blue-200 text-blue-700"
|
||||||
: task.difficulty === 2
|
: task.difficulty === 2
|
||||||
@ -50,8 +54,8 @@ export function TaskCard({ task, deleteTask, updateTask }) {
|
|||||||
: task.difficulty === 3
|
: task.difficulty === 3
|
||||||
? "bg-yellow-200 text-yellow-700"
|
? "bg-yellow-200 text-yellow-700"
|
||||||
: task.difficulty === 4
|
: task.difficulty === 4
|
||||||
? "bg-purple-200 text-purple-700"
|
? "bg-red-200 text-red-700"
|
||||||
: "bg-red-200 text-red-700"
|
: "bg-purple-200 text-purple-700"
|
||||||
}`}>
|
}`}>
|
||||||
difficulty
|
difficulty
|
||||||
</span>
|
</span>
|
||||||
@ -93,7 +97,7 @@ export function TaskCard({ task, deleteTask, updateTask }) {
|
|||||||
|
|
||||||
// Subtask count
|
// Subtask count
|
||||||
const subtaskCountTag = task.subtaskCount ? (
|
const subtaskCountTag = task.subtaskCount ? (
|
||||||
<span className="bg-green-200 text-green-600 text-[10px] font-xl font-bold me-2 px-2.5 py-0.5 rounded">
|
<span className="flex flex-row items-center bg-green-200 text-green-600 text-[10px] font-xl font-bold me-2 px-2.5 py-0.5 rounded">
|
||||||
<GoChecklist /> {task.subtaskCount}
|
<GoChecklist /> {task.subtaskCount}
|
||||||
</span>
|
</span>
|
||||||
) : null;
|
) : null;
|
||||||
@ -124,6 +128,7 @@ export function TaskCard({ task, deleteTask, updateTask }) {
|
|||||||
challenge={task.challenge}
|
challenge={task.challenge}
|
||||||
importance={task.importance}
|
importance={task.importance}
|
||||||
updateTask={updateTask}
|
updateTask={updateTask}
|
||||||
|
completed={task.completed}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* -------- Task Card -------- */}
|
{/* -------- Task Card -------- */}
|
||||||
@ -138,7 +143,8 @@ export function TaskCard({ task, deleteTask, updateTask }) {
|
|||||||
}}
|
}}
|
||||||
onMouseLeave={() => {
|
onMouseLeave={() => {
|
||||||
setMouseIsOver(false);
|
setMouseIsOver(false);
|
||||||
}}>
|
}}
|
||||||
|
onClick={() => document.getElementById(`task_detail_modal_${task.id}`).showModal()}>
|
||||||
{/* -------- Task Content -------- */}
|
{/* -------- Task Content -------- */}
|
||||||
{/* Tags */}
|
{/* Tags */}
|
||||||
{tags}
|
{tags}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user