millaguie/trenes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve dashboard
All checks were successful
Auto Tag on Merge to Main / auto-tag (push) Successful in 3s
Details
CI - Lint and Build / lint-backend (push) Successful in 17s
Details
CI - Lint and Build / lint-frontend (push) Successful in 12s
Details
CI - Lint and Build / build-frontend (push) Successful in 16s
Details
CI - Lint and Build / docker-build-test (push) Successful in 36s
Details

Browse Source
This commit is contained in:
Millaguie
2025-11-28 15:03:22 +01:00
parent 436a7e25d4
commit f979ad67a0
4 changed files with 1848 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

533
frontend/src/styles/index.css
View File

@@ -835,6 +835,522 @@ body {
font-size: 0.8em;
}
/* View Tabs */
.view-tabs {
display: flex;
gap: 8px;
background: white;
padding: 15px 20px;
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
flex-wrap: wrap;
}
.view-tab {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: none;
border-radius: 8px;
background: #f5f6fa;
color: #666;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.view-tab:hover {
background: #e0e0e0;
color: #333;
}
.view-tab.active {
background: #3498DB;
color: white;
}
/* Selector Container */
.selector-container {
position: relative;
margin-bottom: 20px;
}
.selector-button {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
max-width: 400px;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 8px;
background: white;
font-size: 1rem;
color: #333;
cursor: pointer;
transition: border-color 0.2s;
}
.selector-button:hover {
border-color: #3498DB;
}
.selector-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-width: 400px;
max-height: 300px;
overflow-y: auto;
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 100;
}
.selector-option {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
cursor: pointer;
transition: background 0.2s;
}
.selector-option:hover {
background: #f5f6fa;
}
.selector-option .line-code,
.selector-option .region-name {
font-weight: 600;
color: #3498DB;
}
.selector-option .line-nucleo,
.selector-option .region-lines {
color: #666;
font-size: 0.85rem;
}
.selector-option .line-trains,
.selector-option .region-trains {
margin-left: auto;
font-size: 0.85rem;
color: #999;
}
/* Selection View */
.selection-view {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.selection-view h2 {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.5rem;
color: #333;
margin-bottom: 20px;
}
.selection-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 15px;
margin-top: 20px;
}
.selection-card {
background: #f9f9f9;
border: 2px solid #e0e0e0;
border-radius: 10px;
padding: 15px;
transition: all 0.2s;
}
.selection-card.clickable {
cursor: pointer;
}
.selection-card.clickable:hover {
border-color: #3498DB;
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
}
.selection-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.selection-card-header .line-code,
.selection-card-header .region-name {
font-size: 1.1rem;
font-weight: 600;
color: #3498DB;
}
.selection-card-header .line-nucleo {
font-size: 0.85rem;
color: #666;
}
.selection-card-stats {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.mini-stat {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.85rem;
color: #666;
}
/* Detail View */
.detail-view {
padding: 10px 0;
}
.detail-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 25px;
}
.detail-header h2 {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.5rem;
color: #333;
margin: 0;
}
.detail-subtitle {
font-size: 1rem;
font-weight: 400;
color: #666;
margin-left: 10px;
}
.back-button {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border: none;
border-radius: 8px;
background: #f5f6fa;
color: #666;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s;
}
.back-button:hover {
background: #e0e0e0;
color: #333;
}
/* Stations List */
.stations-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.station-item {
display: grid;
grid-template-columns: 40px 1fr auto auto;
gap: 10px;
align-items: center;
padding: 10px;
background: #f9f9f9;
border-radius: 6px;
}
.station-rank {
font-weight: 600;
color: #999;
}
.station-code {
font-weight: 600;
color: #333;
}
.station-trains {
font-size: 0.85rem;
color: #666;
}
.station-delay {
font-weight: 600;
font-size: 0.9rem;
}
/* Region Lines List */
.region-lines-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.region-line-item {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 15px;
align-items: center;
padding: 12px;
background: #f9f9f9;
border-radius: 6px;
transition: all 0.2s;
}
.region-line-item.clickable {
cursor: pointer;
}
.region-line-item.clickable:hover {
background: #e8f4fc;
}
.region-line-item .line-code {
font-weight: 600;
color: #3498DB;
}
.region-line-item .line-trains {
font-size: 0.85rem;
color: #666;
}
.region-line-item .line-punctuality {
font-weight: 600;
}
/* Compare Setup */
.compare-setup {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
max-width: 600px;
}
.compare-setup h3 {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.3rem;
color: #333;
margin-bottom: 25px;
}
.date-range-picker {
margin-bottom: 20px;
}
.date-range-picker label {
display: block;
font-size: 0.9rem;
font-weight: 600;
color: #666;
margin-bottom: 8px;
}
.date-range-inputs {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.date-range-inputs input {
padding: 10px 12px;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 0.9rem;
transition: border-color 0.2s;
}
.date-range-inputs input:focus {
outline: none;
border-color: #3498DB;
}
.date-range-inputs span {
color: #666;
}
.compare-setup-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 30px;
}
.btn-primary,
.btn-secondary {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.btn-primary {
background: #3498DB;
color: white;
}
.btn-primary:hover {
background: #2980B9;
}
.btn-secondary {
background: #f5f6fa;
color: #666;
}
.btn-secondary:hover {
background: #e0e0e0;
}
/* Compare View */
.compare-ranges-info {
display: flex;
gap: 30px;
margin-bottom: 25px;
flex-wrap: wrap;
}
.compare-range-label {
font-size: 0.95rem;
color: #666;
}
.compare-range-label strong {
color: #333;
}
.compare-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.compare-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.compare-card.wide {
grid-column: 1 / -1;
}
.compare-card h3 {
font-size: 1rem;
color: #666;
margin-bottom: 15px;
}
.compare-values {
display: flex;
justify-content: space-between;
align-items: center;
}
.compare-value {
text-align: center;
}
.compare-label {
display: block;
font-size: 0.8rem;
color: #999;
margin-bottom: 5px;
}
.compare-number {
font-size: 1.5rem;
font-weight: 700;
color: #333;
}
.compare-diff {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
background: #f9f9f9;
border-radius: 8px;
}
.diff-value {
font-size: 1.2rem;
font-weight: 600;
}
.diff-value.positive {
color: #27AE60;
}
.diff-value.negative {
color: #E74C3C;
}
.diff-neutral {
color: #999;
}
.pct-change {
font-size: 0.8rem;
color: #666;
margin-top: 3px;
}
.compare-punctuality {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.compare-punctuality-side h4 {
font-size: 0.9rem;
color: #666;
margin-bottom: 15px;
text-align: center;
}
/* Clickable rows */
.lines-table-row.clickable {
cursor: pointer;
transition: background 0.2s;
}
.lines-table-row.clickable:hover {
background: #e8f4fc;
}
/* Responsive */
@media (max-width: 768px) {
.sidebar {
@@ -854,4 +1370,21 @@ body {
.timeline-container {
right: 20px;
}
.view-tabs {
flex-wrap: wrap;
}
.view-tab {
flex: 1 1 calc(50% - 4px);
justify-content: center;
}
.compare-punctuality {
grid-template-columns: 1fr;
}
.selection-grid {
grid-template-columns: 1fr;
}
}