feat(web): compact homepage delivery matrix
This commit is contained in:
Your Name
@@ -1243,6 +1243,16 @@ export default function Home({ params }: { params: { locale: string } }) {
|
||||
tone: callbackTraceSummary && missingTraceRecent24h > 0 ? 'progress' : callbackTraceSummary ? 'live' : 'watching',
|
||||
},
|
||||
]
|
||||
const automationDeliveryMatrixRows = [
|
||||
...automationDeliveryItems.map(item => ({
|
||||
...item,
|
||||
group: tDashboard('automationDelivery.deliveredTitle'),
|
||||
})),
|
||||
...automationRemainingItems.map(item => ({
|
||||
...item,
|
||||
group: tDashboard('automationDelivery.remainingTitle'),
|
||||
})),
|
||||
]
|
||||
const productDiagramCards = [
|
||||
{
|
||||
key: 'c4Runtime',
|
||||
@@ -2602,109 +2612,136 @@ export default function Home({ params }: { params: { locale: string } }) {
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: dashboardGridTemplate, gap: compactViewport ? 10 : 14, padding: sectionPadding }}>
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, marginBottom: 8 }}>
|
||||
<h2 style={{ margin: 0, fontSize: 14, fontWeight: 800, color: '#141413' }}>
|
||||
{tDashboard('automationDelivery.deliveredTitle')}
|
||||
</h2>
|
||||
<a href={`/${locale}/awooop/work-items?project_id=awoooi`} style={{ fontSize: 11, fontWeight: 700, color: '#1f5b9b', textDecoration: 'none' }}>
|
||||
<div style={{ padding: sectionPadding }}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: compactViewport ? 'flex-start' : 'baseline',
|
||||
flexDirection: compactViewport ? 'column' : 'row',
|
||||
justifyContent: 'space-between',
|
||||
gap: 8,
|
||||
marginBottom: 8,
|
||||
}}>
|
||||
<h2 style={{ margin: 0, fontSize: 14, fontWeight: 850, color: '#141413' }}>
|
||||
{tDashboard('automationDelivery.matrix.title')}
|
||||
</h2>
|
||||
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
|
||||
<a href={`/${locale}/awooop/work-items?project_id=awoooi`} style={{ fontSize: 11, fontWeight: 750, color: '#1f5b9b', textDecoration: 'none' }}>
|
||||
{tDashboard('automationDelivery.openWorkItems')}
|
||||
</a>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gap: 8 }}>
|
||||
{automationDeliveryItems.map(item => {
|
||||
const tone = automationWorkToneStyle[item.tone]
|
||||
return (
|
||||
<a
|
||||
key={item.key}
|
||||
href={item.href}
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: workItemGridTemplate,
|
||||
gap: 10,
|
||||
padding: '10px 12px',
|
||||
border: '0.5px solid #e0ddd4',
|
||||
borderRadius: 8,
|
||||
background: '#fbfaf6',
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 800, color: '#141413' }}>{item.title}</div>
|
||||
<div style={{ marginTop: 4, fontSize: 11, lineHeight: 1.5, color: '#5f5b52' }}>{item.detail}</div>
|
||||
</div>
|
||||
<span style={{
|
||||
alignSelf: 'start',
|
||||
justifySelf: compactViewport ? 'start' : 'auto',
|
||||
border: `0.5px solid ${tone.border}`,
|
||||
background: tone.bg,
|
||||
color: tone.color,
|
||||
borderRadius: 999,
|
||||
padding: '2px 8px',
|
||||
fontSize: 10,
|
||||
fontWeight: 800,
|
||||
whiteSpace: 'nowrap',
|
||||
}}>
|
||||
{item.status}
|
||||
</span>
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, marginBottom: 8 }}>
|
||||
<h2 style={{ margin: 0, fontSize: 14, fontWeight: 800, color: '#141413' }}>
|
||||
{tDashboard('automationDelivery.remainingTitle')}
|
||||
</h2>
|
||||
<a href={`/${locale}/awooop/runs?project_id=awoooi`} style={{ fontSize: 11, fontWeight: 700, color: '#1f5b9b', textDecoration: 'none' }}>
|
||||
<a href={`/${locale}/awooop/runs?project_id=awoooi`} style={{ fontSize: 11, fontWeight: 750, color: '#1f5b9b', textDecoration: 'none' }}>
|
||||
{tDashboard('automationDelivery.openRuns')}
|
||||
</a>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gap: 8 }}>
|
||||
{automationRemainingItems.map(item => {
|
||||
const tone = automationWorkToneStyle[item.tone]
|
||||
return (
|
||||
<a
|
||||
key={item.key}
|
||||
href={item.href}
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: workItemGridTemplate,
|
||||
gap: 10,
|
||||
padding: '10px 12px',
|
||||
border: `0.5px solid ${tone.border}`,
|
||||
borderRadius: 8,
|
||||
background: tone.bg,
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 800, color: '#141413' }}>{item.title}</div>
|
||||
<div style={{ marginTop: 4, fontSize: 11, lineHeight: 1.5, color: '#5f5b52' }}>{item.detail}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gap: 1,
|
||||
border: '0.5px solid #e0ddd4',
|
||||
borderRadius: 8,
|
||||
background: '#e0ddd4',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
{!compactViewport && (
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'minmax(96px, 0.52fr) minmax(0, 1.42fr) minmax(90px, 0.42fr)',
|
||||
gap: 1,
|
||||
background: '#e0ddd4',
|
||||
}}>
|
||||
{[
|
||||
tDashboard('automationDelivery.matrix.columns.group'),
|
||||
tDashboard('automationDelivery.matrix.columns.capability'),
|
||||
tDashboard('automationDelivery.matrix.columns.status'),
|
||||
].map(label => (
|
||||
<div key={label} style={{
|
||||
background: '#faf9f3',
|
||||
padding: '7px 9px',
|
||||
fontSize: 10,
|
||||
fontWeight: 900,
|
||||
color: '#5f5b52',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.35,
|
||||
}}>
|
||||
{label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{automationDeliveryMatrixRows.map(item => {
|
||||
const tone = automationWorkToneStyle[item.tone]
|
||||
return (
|
||||
<a
|
||||
key={`matrix-${item.key}`}
|
||||
href={item.href}
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: compactViewport ? '1fr' : 'minmax(96px, 0.52fr) minmax(0, 1.42fr) minmax(90px, 0.42fr)',
|
||||
gap: compactViewport ? 6 : 1,
|
||||
background: compactViewport ? '#fff' : '#e0ddd4',
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
background: compactViewport ? tone.bg : '#fff',
|
||||
borderLeft: compactViewport ? `3px solid ${tone.color}` : 'none',
|
||||
padding: compactViewport ? '8px 9px 0' : '8px 9px',
|
||||
minWidth: 0,
|
||||
}}>
|
||||
<span style={{
|
||||
alignSelf: 'start',
|
||||
justifySelf: compactViewport ? 'start' : 'auto',
|
||||
display: 'inline-flex',
|
||||
maxWidth: '100%',
|
||||
border: `0.5px solid ${tone.border}`,
|
||||
background: '#fff',
|
||||
background: tone.bg,
|
||||
color: tone.color,
|
||||
borderRadius: 999,
|
||||
padding: '1px 7px',
|
||||
fontSize: 10,
|
||||
fontWeight: 850,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}>
|
||||
{item.group}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{
|
||||
background: '#fff',
|
||||
padding: compactViewport ? '2px 9px 0' : '8px 9px',
|
||||
minWidth: 0,
|
||||
}}>
|
||||
<div style={{ fontSize: 12, fontWeight: 850, color: '#141413', lineHeight: 1.3, overflowWrap: 'anywhere' }}>
|
||||
{item.title}
|
||||
</div>
|
||||
<div style={{ marginTop: 3, fontSize: 10, lineHeight: 1.45, color: '#5f5b52', overflowWrap: 'anywhere' }}>
|
||||
{item.detail}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{
|
||||
background: '#fff',
|
||||
padding: compactViewport ? '3px 9px 9px' : '8px 9px',
|
||||
minWidth: 0,
|
||||
}}>
|
||||
<span style={{
|
||||
display: 'inline-flex',
|
||||
maxWidth: '100%',
|
||||
border: `0.5px solid ${tone.border}`,
|
||||
background: tone.bg,
|
||||
color: tone.color,
|
||||
borderRadius: 999,
|
||||
padding: '2px 8px',
|
||||
fontSize: 10,
|
||||
fontWeight: 800,
|
||||
fontWeight: 850,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}>
|
||||
{item.status}
|
||||
</span>
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user