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/index.html
-1
View File
@@ -8,7 +8,6 @@
type="image/svg+xml" type="image/svg+xml"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='featherFill' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23cb3a35'/%3E%3Cstop offset='30%25' stop-color='%23f0b63f'/%3E%3Cstop offset='58%25' stop-color='%23238a5a'/%3E%3Cstop offset='100%25' stop-color='%232769b3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50.8 10.4C37.9 10.3 27 18.5 22.7 31.1c-3.1 9.1-2.1 18.5-8.6 24.8c-1.5 1.5-0.2 4 1.9 3.6c8.4-1.5 14.6-6.7 18.6-13.7c1 0.5 2.2 0.8 3.4 0.8c3.5 0 6.5-2.3 7.5-5.4c1.9-0.4 3.7-1.3 5.1-2.7c2-2 3-4.6 3.1-7.2c3.3-5.8 4.9-12.9 1.4-20.2c-0.7-1.3-2-0.7-4.3-0.7Z' fill='url(%23featherFill)'/%3E%3Cpath d='M18 56c8.5-3.4 14.2-9.8 18.1-17.8M26.9 48.9c6.9-7.2 13.5-14.8 20.3-22.1M31.8 41.2c6.4-1.3 12.1-4.6 16.5-9.4M36.8 33.8c4.9-0.9 9.2-3.4 12.6-7.1' fill='none' stroke='%23fff8ef' stroke-linecap='round' stroke-width='2.6'/%3E%3Cpath d='M18 56c8.5-3.4 14.2-9.8 18.1-17.8' fill='none' stroke='%2363562d' stroke-linecap='round' stroke-width='2.2'/%3E%3C/svg%3E" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='featherFill' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23cb3a35'/%3E%3Cstop offset='30%25' stop-color='%23f0b63f'/%3E%3Cstop offset='58%25' stop-color='%23238a5a'/%3E%3Cstop offset='100%25' stop-color='%232769b3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50.8 10.4C37.9 10.3 27 18.5 22.7 31.1c-3.1 9.1-2.1 18.5-8.6 24.8c-1.5 1.5-0.2 4 1.9 3.6c8.4-1.5 14.6-6.7 18.6-13.7c1 0.5 2.2 0.8 3.4 0.8c3.5 0 6.5-2.3 7.5-5.4c1.9-0.4 3.7-1.3 5.1-2.7c2-2 3-4.6 3.1-7.2c3.3-5.8 4.9-12.9 1.4-20.2c-0.7-1.3-2-0.7-4.3-0.7Z' fill='url(%23featherFill)'/%3E%3Cpath d='M18 56c8.5-3.4 14.2-9.8 18.1-17.8M26.9 48.9c6.9-7.2 13.5-14.8 20.3-22.1M31.8 41.2c6.4-1.3 12.1-4.6 16.5-9.4M36.8 33.8c4.9-0.9 9.2-3.4 12.6-7.1' fill='none' stroke='%23fff8ef' stroke-linecap='round' stroke-width='2.6'/%3E%3Cpath d='M18 56c8.5-3.4 14.2-9.8 18.1-17.8' fill='none' stroke='%2363562d' stroke-linecap='round' stroke-width='2.2'/%3E%3C/svg%3E"
/> />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=egg,manage_accounts,map,move,move_location,sticky_note_2,timeline" />
<title>FlockPal</title> <title>FlockPal</title>
</head> </head>
<body> <body>
frontend/public/fonts/material-symbols-outlined-timeline.ttf
BIN
View File
Binary file not shown.
frontend/src/App.tsx
+20 -24
View File
@@ -1290,24 +1290,19 @@ const getBirdTimelineGraphLabel = (event: BirdTimelineEvent) => {
return event.locationLabel || 'Added to flock'; return event.locationLabel || 'Added to flock';
}; };
const getBirdTimelineGraphIcon = (item: BirdTimelineGraphItem) => { const renderBirdTimelineGraphIcon = (item: BirdTimelineGraphItem) => {
if (item.eventType === 'hatch_date') { const iconName =
return 'egg'; 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 <span className="bird-timeline-graph-icon" aria-hidden="true">{iconName}</span>;
return 'manage_accounts';
}
if (item.eventType === 'transferred') {
return 'move';
}
if (item.eventType === 'manual_note') {
return 'sticky_note_2';
}
return 'map';
}; };
const compactTimelineLocationPartMap: Record<string, string> = { const compactTimelineLocationPartMap: Record<string, string> = {
@@ -7513,9 +7508,7 @@ function App() {
aria-label="Timeline" aria-label="Timeline"
title="Timeline" title="Timeline"
> >
<span className="material-symbols-outlined timeline-tab-icon" aria-hidden="true"> <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>
timeline
</span>
</button> </button>
<button <button
className={`bird-detail-tab ${selectedBirdTab === 'audit' ? 'active' : ''}`} className={`bird-detail-tab ${selectedBirdTab === 'audit' ? 'active' : ''}`}
@@ -8202,7 +8195,12 @@ function App() {
return timelineGraphItems.length ? ( return timelineGraphItems.length ? (
<div className="bird-timeline-graph-card"> <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-line" />
<div className="bird-timeline-graph-scale" aria-hidden="true"> <div className="bird-timeline-graph-scale" aria-hidden="true">
{timelineGraphTicks.map((tick) => { {timelineGraphTicks.map((tick) => {
@@ -8239,9 +8237,7 @@ function App() {
> >
<div className="bird-timeline-graph-connector" /> <div className="bird-timeline-graph-connector" />
<div className="bird-timeline-graph-dot"> <div className="bird-timeline-graph-dot">
<span className="material-symbols-outlined bird-timeline-graph-icon"> {renderBirdTimelineGraphIcon(timelineItem)}
{getBirdTimelineGraphIcon(timelineItem)}
</span>
</div> </div>
<div className="bird-timeline-graph-copy"> <div className="bird-timeline-graph-copy">
<strong>{timelineItem.label}</strong> <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 { :root {
--ink: #1f2a2a; --ink: #1f2a2a;
--muted: #5d5f59; --muted: #5d5f59;
@@ -1352,7 +1360,7 @@ textarea {
top: 50%; top: 50%;
height: 4px; height: 4px;
border-radius: 999px; 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%); transform: translateY(-50%);
} }
@@ -1409,11 +1417,11 @@ textarea {
z-index: 2; z-index: 2;
display: grid; display: grid;
place-items: center; place-items: center;
width: 26px; width: 34px;
height: 26px; height: 34px;
border: 4px solid var(--accent-green); border: 0;
border-radius: 50%; border-radius: 0;
background: #fffdf9; background: transparent;
} }
.bird-timeline-graph-point.above .bird-timeline-graph-dot { .bird-timeline-graph-point.above .bird-timeline-graph-dot {
@@ -1433,13 +1441,7 @@ textarea {
transform: translate(-50%, -50%); 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 { .bird-timeline-graph-point.hatch_date .bird-timeline-graph-dot {
width: 34px; width: 34px;
@@ -1480,9 +1482,11 @@ textarea {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 24px;
height: 24px;
color: var(--accent-green); color: var(--accent-green);
font-family: "Material Symbols Outlined"; font-family: "Material Symbols Outlined Local";
font-size: 18px; font-size: 20px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: 1; line-height: 1;
@@ -1490,13 +1494,16 @@ textarea {
text-transform: none; text-transform: none;
white-space: nowrap; white-space: nowrap;
direction: ltr; direction: ltr;
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; word-wrap: normal;
font-variant-ligatures: normal;
font-feature-settings: "liga"; font-feature-settings: "liga";
-webkit-font-feature-settings: "liga"; -webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.bird-timeline-graph-point.hatch_date .bird-timeline-graph-icon { .bird-timeline-graph-point.hatch_date .bird-timeline-graph-icon {
width: 34px;
height: 34px;
color: var(--accent-gold); color: var(--accent-gold);
font-size: 34px; font-size: 34px;
} }
@@ -1707,25 +1714,6 @@ textarea {
stroke: none; 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 { .bird-detail-tab:hover {
border-color: rgba(35, 138, 90, 0.28); border-color: rgba(35, 138, 90, 0.28);
color: var(--ink); color: var(--ink);