blaisadmin/FlockPal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated timeline
Deploy / deploy-dev (push) Successful in 2m20s
Details
Deploy / deploy-prod (push) Has been skipped
Details

Browse Source
This commit is contained in:
Corey Blais
2026-07-01 17:52:40 -04:00
parent 14bc1c30a0
commit 35bd87b8b5
4 changed files with 42 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+20 -24
View File
@@ -1290,24 +1290,19 @@ const getBirdTimelineGraphLabel = (event: BirdTimelineEvent) => {
return event.locationLabel || 'Added to flock';
};
const getBirdTimelineGraphIcon = (item: BirdTimelineGraphItem) => {
if (item.eventType === 'hatch_date') {
return 'egg';
}
const renderBirdTimelineGraphIcon = (item: BirdTimelineGraphItem) => {
const iconName =
item.eventType === 'hatch_date'
? 'egg'
: item.eventType === 'owner_changed'
? 'move_location'
: item.eventType === 'manual_note'
? 'sticky_note_2'
: item.eventType === 'profile_created'
? 'map'
: 'move';
if (item.eventType === 'owner_changed') {
return 'manage_accounts';
}
if (item.eventType === 'transferred') {
return 'move';
}
if (item.eventType === 'manual_note') {
return 'sticky_note_2';
}
return 'map';
return <span className="bird-timeline-graph-icon" aria-hidden="true">{iconName}</span>;
};
const compactTimelineLocationPartMap: Record<string, string> = {
@@ -7513,9 +7508,7 @@ function App() {
aria-label="Timeline"
title="Timeline"
>
<span className="material-symbols-outlined timeline-tab-icon" aria-hidden="true">
timeline
</span>
<svg className="timeline-tab-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 6a2 2 0 0 0-1.93 2.51l-3.55 3.56A2.15 2.15 0 0 0 15 12c-.18 0-.36.02-.52.07l-2.55-2.55c.05-.16.07-.34.07-.52a2 2 0 1 0-4 0c0 .18.02.36.07.52l-4.56 4.55A2.03 2.03 0 0 0 3 14a2 2 0 1 0 1.93 1.49l4.55-4.56c.16.05.34.07.52.07s.36-.02.52-.07l2.55 2.55c-.05.16-.07.34-.07.52a2 2 0 1 0 4 0c0-.18-.02-.36-.07-.52l3.56-3.55A2 2 0 1 0 21 6Z" /></svg>
</button>
<button
className={`bird-detail-tab ${selectedBirdTab === 'audit' ? 'active' : ''}`}
@@ -8202,7 +8195,12 @@ function App() {
return timelineGraphItems.length ? (
<div className="bird-timeline-graph-card">
<div className="bird-timeline-graph" role="img" aria-label={`${selectedBird.name} location and owner timeline`}>
<div
className="bird-timeline-graph"
role="img"
aria-label={`${selectedBird.name} location and owner timeline`}
style={{ '--timeline-color': selectedBird.chartColor } as CSSProperties}
>
<div className="bird-timeline-graph-line" />
<div className="bird-timeline-graph-scale" aria-hidden="true">
{timelineGraphTicks.map((tick) => {
@@ -8239,9 +8237,7 @@ function App() {
>
<div className="bird-timeline-graph-connector" />
<div className="bird-timeline-graph-dot">
<span className="material-symbols-outlined bird-timeline-graph-icon">
{getBirdTimelineGraphIcon(timelineItem)}
</span>
{renderBirdTimelineGraphIcon(timelineItem)}
</div>
<div className="bird-timeline-graph-copy">
<strong>{timelineItem.label}</strong>
frontend/src/index.css
+22 -34
View File
@@ -1,3 +1,11 @@
@font-face {
font-family: "Material Symbols Outlined Local";
font-style: normal;
font-weight: 400;
src: url("/fonts/material-symbols-outlined-timeline.ttf") format("truetype");
}
:root {
--ink: #1f2a2a;
--muted: #5d5f59;
@@ -1352,7 +1360,7 @@ textarea {
top: 50%;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(39, 105, 179, 0.42), rgba(35, 138, 90, 0.88));
background: var(--timeline-color, var(--accent-green));
transform: translateY(-50%);
}
@@ -1409,11 +1417,11 @@ textarea {
z-index: 2;
display: grid;
place-items: center;
width: 26px;
height: 26px;
border: 4px solid var(--accent-green);
border-radius: 50%;
background: #fffdf9;
width: 34px;
height: 34px;
border: 0;
border-radius: 0;
background: transparent;
}
.bird-timeline-graph-point.above .bird-timeline-graph-dot {
@@ -1433,13 +1441,7 @@ textarea {
transform: translate(-50%, -50%);
}
.bird-timeline-graph-point.owner_changed .bird-timeline-graph-dot {
border-color: var(--accent-blue);
}
.bird-timeline-graph-point.transferred .bird-timeline-graph-dot {
border-color: var(--accent-red);
}
.bird-timeline-graph-point.hatch_date .bird-timeline-graph-dot {
width: 34px;
@@ -1480,9 +1482,11 @@ textarea {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--accent-green);
font-family: "Material Symbols Outlined";
font-size: 18px;
font-family: "Material Symbols Outlined Local";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 1;
@@ -1490,13 +1494,16 @@ textarea {
text-transform: none;
white-space: nowrap;
direction: ltr;
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
word-wrap: normal;
font-variant-ligatures: normal;
font-feature-settings: "liga";
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
.bird-timeline-graph-point.hatch_date .bird-timeline-graph-icon {
width: 34px;
height: 34px;
color: var(--accent-gold);
font-size: 34px;
}
@@ -1707,25 +1714,6 @@ textarea {
stroke: none;
}
.bird-detail-tab .timeline-tab-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
font-family: "Material Symbols Outlined";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 1;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
direction: ltr;
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
.bird-detail-tab:hover {
border-color: rgba(35, 138, 90, 0.28);
color: var(--ink);