Update Sprint & Task Management style
This commit is contained in:
@@ -1,51 +1,67 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="management-container task-management-container">
|
||||
<div class="page-container">
|
||||
<!-- Header Section -->
|
||||
<div class="management-header task-header">
|
||||
<h1><i class="ti ti-clipboard-list"></i> Task Management</h1>
|
||||
<div class="management-controls task-controls">
|
||||
<!-- Smart Search -->
|
||||
<div class="smart-search-container">
|
||||
<div class="smart-search-box">
|
||||
<input type="text" id="smart-search-input" class="smart-search-input" placeholder="Search tasks... (e.g., my-tasks priority:high, project:TimeTrack, overdue)">
|
||||
<button type="button" class="smart-search-clear" id="smart-search-clear" title="Clear search"><i class="ti ti-x"></i></button>
|
||||
</div>
|
||||
<div class="smart-search-suggestions" id="smart-search-suggestions" style="display: none;">
|
||||
<!-- Suggestions will be populated here -->
|
||||
</div>
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">
|
||||
<span class="page-icon"><i class="ti ti-clipboard-list"></i></span>
|
||||
Task Management
|
||||
</h1>
|
||||
<p class="page-subtitle">Manage and track all tasks across projects</p>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="management-actions task-actions">
|
||||
<button id="add-task-btn" class="btn btn-primary"><i class="ti ti-plus"></i> Add Task</button>
|
||||
<button id="refresh-tasks" class="btn btn-secondary"><i class="ti ti-refresh"></i> Refresh</button>
|
||||
<button id="toggle-archived" class="btn btn-outline" title="Show/Hide Archived Tasks"><i class="ti ti-archive"></i> Show Archived</button>
|
||||
<div class="header-actions">
|
||||
<button id="refresh-tasks" class="btn btn-secondary">
|
||||
<i class="ti ti-refresh"></i>
|
||||
Refresh
|
||||
</button>
|
||||
<button id="toggle-archived" class="btn btn-outline" title="Show/Hide Archived Tasks">
|
||||
<i class="ti ti-archive"></i>
|
||||
Show Archived
|
||||
</button>
|
||||
<button id="add-task-btn" class="btn btn-primary">
|
||||
<i class="ti ti-plus"></i>
|
||||
Add Task
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Section -->
|
||||
<div class="search-section">
|
||||
<div class="smart-search-container">
|
||||
<div class="smart-search-box">
|
||||
<input type="text" id="smart-search-input" class="smart-search-input" placeholder="Search tasks... (e.g., my-tasks priority:high, project:TimeTrack, overdue)">
|
||||
<button type="button" class="smart-search-clear" id="smart-search-clear" title="Clear search"><i class="ti ti-x"></i></button>
|
||||
</div>
|
||||
<div class="smart-search-suggestions" id="smart-search-suggestions" style="display: none;">
|
||||
<!-- Suggestions will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Task Statistics -->
|
||||
<div class="management-stats task-stats">
|
||||
<div class="stats-section">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number" id="total-tasks">0</div>
|
||||
<div class="stat-value" id="total-tasks">0</div>
|
||||
<div class="stat-label">Total Tasks</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number" id="completed-tasks">0</div>
|
||||
<div class="stat-value" id="completed-tasks">0</div>
|
||||
<div class="stat-label">Completed</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number" id="in-progress-tasks">0</div>
|
||||
<div class="stat-value" id="in-progress-tasks">0</div>
|
||||
<div class="stat-label">In Progress</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number" id="overdue-tasks">0</div>
|
||||
<div class="stat-value" id="overdue-tasks">0</div>
|
||||
<div class="stat-label">Overdue</div>
|
||||
</div>
|
||||
<div class="stat-card" id="archived-stat-card" style="display: none;">
|
||||
<div class="stat-number" id="archived-tasks">0</div>
|
||||
<div class="stat-value" id="archived-tasks">0</div>
|
||||
<div class="stat-label">Archived</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -129,12 +145,26 @@
|
||||
|
||||
<!-- Styles -->
|
||||
<style>
|
||||
/* Header adjustments for Task Management */
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Search Section */
|
||||
.search-section {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Smart Search Styles */
|
||||
.smart-search-container {
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.smart-search-box {
|
||||
@@ -237,71 +267,9 @@
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* Task Management Layout */
|
||||
.task-controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
/* Task Management specific styles removed - using common page styles */
|
||||
|
||||
.task-controls .smart-search-container {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
max-width: 600px;
|
||||
margin-bottom: 0; /* Remove margin to align with buttons */
|
||||
}
|
||||
|
||||
.task-controls .management-actions {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Ensure all buttons and search input have same height */
|
||||
.smart-search-input,
|
||||
.task-controls .btn {
|
||||
height: 38px; /* Standard height for consistency */
|
||||
}
|
||||
|
||||
.task-controls .btn {
|
||||
padding: 0.5rem 1rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap; /* Prevent button text from wrapping */
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 992px) {
|
||||
.task-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.task-controls .smart-search-container {
|
||||
max-width: 100%;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.task-controls .management-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.task-controls .management-actions {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.task-controls .btn {
|
||||
font-size: 0.875rem;
|
||||
padding: 0.4rem 0.8rem;
|
||||
}
|
||||
}
|
||||
/* Responsive adjustments handled by common page styles */
|
||||
|
||||
/* Subtask progress styles */
|
||||
.task-subtasks {
|
||||
@@ -336,18 +304,6 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.task-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.task-controls .smart-search-container {
|
||||
min-width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user