mirror of
https://github.com/kjanat/livegraphs-django.git
synced 2026-01-16 08:32:10 +01:00
Refactor HTML templates for improved readability and consistency
- Updated search_results_table.html to enhance formatting and maintain consistent indentation. - Refined search_results.html layout for better structure and clarity. - Improved upload.html for better organization and readability of the upload form and data source table. - Removed unnecessary lines in package.json and streamlined devDependencies section.
This commit is contained in:
@ -4,311 +4,311 @@
|
||||
|
||||
/* Dashboard grid layout */
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
|
||||
/* Slightly larger minmax for widgets */
|
||||
gap: 1.5rem;
|
||||
/* Slightly larger minmax for widgets */
|
||||
gap: 1.5rem;
|
||||
|
||||
/* Increased gap */
|
||||
/* Increased gap */
|
||||
}
|
||||
|
||||
/* Dashboard widget cards */
|
||||
.dashboard-widget {
|
||||
display: flex;
|
||||
display: flex;
|
||||
|
||||
/* Allow flex for content alignment */
|
||||
flex-direction: column;
|
||||
/* Allow flex for content alignment */
|
||||
flex-direction: column;
|
||||
|
||||
/* Stack header, body, footer vertically */
|
||||
height: 100%;
|
||||
/* Stack header, body, footer vertically */
|
||||
height: 100%;
|
||||
|
||||
/* Ensure widgets fill grid cell height */
|
||||
/* Ensure widgets fill grid cell height */
|
||||
}
|
||||
|
||||
.dashboard-widget .card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dashboard-widget .card-header .widget-title {
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.1rem;
|
||||
|
||||
/* Slightly larger widget titles */
|
||||
font-weight: 600;
|
||||
/* Slightly larger widget titles */
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dashboard-widget .card-header .widget-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.dashboard-widget .card-header .widget-actions .btn {
|
||||
width: 32px;
|
||||
width: 32px;
|
||||
|
||||
/* Slightly larger action buttons */
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.85rem;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
color: #6c757d;
|
||||
/* Slightly larger action buttons */
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.85rem;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.dashboard-widget .card-header .widget-actions .btn:hover {
|
||||
background-color: #f0f0f0;
|
||||
border-color: #e0e0e0;
|
||||
color: #333;
|
||||
background-color: #f0f0f0;
|
||||
border-color: #e0e0e0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.dashboard-widget .card-body {
|
||||
flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
|
||||
/* Allow card body to take available space */
|
||||
padding: 1.25rem;
|
||||
/* Allow card body to take available space */
|
||||
padding: 1.25rem;
|
||||
|
||||
/* Consistent padding */
|
||||
/* Consistent padding */
|
||||
}
|
||||
|
||||
/* Chart widgets */
|
||||
.chart-widget .card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chart-widget .chart-container {
|
||||
flex: 1;
|
||||
min-height: 250px;
|
||||
flex: 1;
|
||||
min-height: 250px;
|
||||
|
||||
/* Adjusted min-height */
|
||||
width: 100%;
|
||||
/* Adjusted min-height */
|
||||
width: 100%;
|
||||
|
||||
/* Ensure it takes full width of card body */
|
||||
/* Ensure it takes full width of card body */
|
||||
}
|
||||
|
||||
/* Stat widgets / Stat Cards */
|
||||
.stat-card {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
|
||||
/* Generous padding */
|
||||
/* Generous padding */
|
||||
}
|
||||
|
||||
.stat-card .stat-icon {
|
||||
font-size: 2.25rem;
|
||||
font-size: 2.25rem;
|
||||
|
||||
/* Larger icon */
|
||||
margin-bottom: 1rem;
|
||||
display: inline-block;
|
||||
width: 4.5rem;
|
||||
height: 4.5rem;
|
||||
line-height: 4.5rem;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background-color: #e9f2ff;
|
||||
/* Larger icon */
|
||||
margin-bottom: 1rem;
|
||||
display: inline-block;
|
||||
width: 4.5rem;
|
||||
height: 4.5rem;
|
||||
line-height: 4.5rem;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background-color: #e9f2ff;
|
||||
|
||||
/* Light blue background for icon */
|
||||
color: #007bff;
|
||||
/* Light blue background for icon */
|
||||
color: #007bff;
|
||||
|
||||
/* Primary color for icon */
|
||||
/* Primary color for icon */
|
||||
}
|
||||
|
||||
.stat-card .stat-value {
|
||||
font-size: 2.25rem;
|
||||
font-size: 2.25rem;
|
||||
|
||||
/* Larger stat value */
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
/* Larger stat value */
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
|
||||
/* Reduced margin */
|
||||
line-height: 1.1;
|
||||
color: #212529;
|
||||
/* Reduced margin */
|
||||
line-height: 1.1;
|
||||
color: #212529;
|
||||
|
||||
/* Darker color for value */
|
||||
/* Darker color for value */
|
||||
}
|
||||
|
||||
.stat-card .stat-label {
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.9rem;
|
||||
|
||||
/* Slightly larger label */
|
||||
color: #6c757d;
|
||||
margin-bottom: 0;
|
||||
/* Slightly larger label */
|
||||
color: #6c757d;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Dashboard theme variations */
|
||||
.dashboard-theme-light .card {
|
||||
background-color: #fff;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.dashboard-theme-dark {
|
||||
background-color: #212529;
|
||||
color: #f8f9fa;
|
||||
background-color: #212529;
|
||||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
.dashboard-theme-dark .card {
|
||||
background-color: #343a40;
|
||||
color: #f8f9fa;
|
||||
border-color: #495057;
|
||||
background-color: #343a40;
|
||||
color: #f8f9fa;
|
||||
border-color: #495057;
|
||||
}
|
||||
|
||||
.dashboard-theme-dark .card-header {
|
||||
background-color: #495057;
|
||||
border-bottom-color: #6c757d;
|
||||
background-color: #495057;
|
||||
border-bottom-color: #6c757d;
|
||||
}
|
||||
|
||||
.dashboard-theme-dark .stat-card .stat-label {
|
||||
color: #adb5bd;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
/* Time period selector */
|
||||
.time-period-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
|
||||
/* Increased gap */
|
||||
margin-bottom: 1.5rem;
|
||||
/* Increased gap */
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
/* Increased margin */
|
||||
/* Increased margin */
|
||||
}
|
||||
|
||||
.time-period-selector .btn-group {
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.time-period-selector .btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
|
||||
/* Bootstrap-like padding */
|
||||
font-size: 0.875rem;
|
||||
/* Bootstrap-like padding */
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Custom metric selector */
|
||||
.metric-selector {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.metric-selector .nav-link {
|
||||
white-space: nowrap;
|
||||
padding: 0.5rem 1rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
padding: 0.5rem 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.metric-selector .nav-link.active {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border-radius: 0.25rem;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* Dashboard loading states */
|
||||
.widget-placeholder {
|
||||
min-height: 300px;
|
||||
background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
|
||||
min-height: 300px;
|
||||
background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
|
||||
|
||||
/* Lighter gradient */
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.8s infinite ease-in-out;
|
||||
/* Lighter gradient */
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.8s infinite ease-in-out;
|
||||
|
||||
/* Smoother animation */
|
||||
border-radius: 0.5rem;
|
||||
/* Smoother animation */
|
||||
border-radius: 0.5rem;
|
||||
|
||||
/* Consistent with cards */
|
||||
/* Consistent with cards */
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dashboard empty states */
|
||||
.empty-state {
|
||||
padding: 2.5rem;
|
||||
padding: 2.5rem;
|
||||
|
||||
/* Increased padding */
|
||||
text-align: center;
|
||||
color: #6c757d;
|
||||
background-color: #f8f9fa;
|
||||
/* Increased padding */
|
||||
text-align: center;
|
||||
color: #6c757d;
|
||||
background-color: #f8f9fa;
|
||||
|
||||
/* Light background for empty state */
|
||||
border-radius: 0.5rem;
|
||||
border: 1px dashed #ced4da;
|
||||
/* Light background for empty state */
|
||||
border-radius: 0.5rem;
|
||||
border: 1px dashed #ced4da;
|
||||
|
||||
/* Dashed border */
|
||||
/* Dashed border */
|
||||
}
|
||||
|
||||
.empty-state .empty-state-icon {
|
||||
font-size: 3.5rem;
|
||||
font-size: 3.5rem;
|
||||
|
||||
/* Larger icon */
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0.4;
|
||||
/* Larger icon */
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.empty-state .empty-state-message {
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.2rem;
|
||||
|
||||
/* Slightly larger message */
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: 500;
|
||||
/* Slightly larger message */
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty-state .btn {
|
||||
margin-top: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (width <=767.98px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
.stat-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.stat-card .stat-icon {
|
||||
font-size: 1.5rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
.stat-card .stat-icon {
|
||||
font-size: 1.5rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.stat-card .stat-value {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.stat-card .stat-value {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Stat Boxes Alignment Fix (Bottom Align, No Overlap) --- */
|
||||
.stats-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
flex: 1 1 0;
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
flex: 1 1 0;
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
/* Push content to bottom */
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
/* Push content to bottom */
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* Remove min-height/height for natural stretch */
|
||||
/* Remove min-height/height for natural stretch */
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user