Skip to content

Commit

Permalink
Reduce column widths (#154)
Browse files Browse the repository at this point in the history
  • Loading branch information
obgibson authored Jul 25, 2024
1 parent bba13de commit abe6005
Show file tree
Hide file tree
Showing 11 changed files with 71 additions and 25 deletions.
2 changes: 0 additions & 2 deletions src/components/LogList/__tests__/LogList.test.cypress.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@ function generateLines(amount: number) {
const LIST_CONTAINER_CLASS = 'ReactVirtualized__List';

describe('LogActionBar', () => {


it('Should render message about empty preload when preload was empty or error and final fetch is not started', () => {
mount(
<TestWrapper>
Expand Down
1 change: 1 addition & 0 deletions src/components/StatusIndicator/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const StatusIndicator: React.FC<{ status: keyof RunStatus | TaskStatus }> = ({ s
const StatusColorIndicator = styled.div<{ status: string }>`
display: flex;
color: ${(p) => (p.status === 'failed' ? 'white' : colorByStatus(p.theme, p.status))};
justify-content: center;
`;

export default StatusIndicator;
2 changes: 1 addition & 1 deletion src/components/Structure/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import styled, { css } from 'styled-components';
export const Page = styled.div`
max-width: ${(p) => p.theme.layout.maxWidth}px;
margin: 0 auto 0 auto;
padding: 0 ${(p) => p.theme.layout.pagePaddingX}rem ${(p) => p.theme.layout.pagePaddingY}rem;
padding: 0 0 ${(p) => p.theme.layout.pagePaddingY}rem ${(p) => p.theme.layout.pagePaddingX}rem;
min-height: 100vh;
display: flex;
flex-direction: column;
Expand Down
15 changes: 14 additions & 1 deletion src/components/Trigger/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const Trigger: React.FC<Props> = ({ triggerEventsValue, className, showToolTip =
{link ? (
<TriggerLink to={link}>
<StyledIcon name="arrow" linkToRun={linkToRun} />
{showToolTip ? displayLabel : id}
<LabelWrapper>{showToolTip ? displayLabel : id}</LabelWrapper>
</TriggerLink>
) : (
<>
Expand Down Expand Up @@ -86,4 +86,17 @@ const StyledIcon = styled(Icon)<ArrowIconProps>`
}
`;

const LabelWrapper = styled.div`
vertical-align: middle;
display: inline-block;
white-space: nowrap;
@media (max-width: ${(p) => p.theme.breakpoint.sm}) {
text-overflow: ellipsis;
overflow: hidden;
width: 0;
min-width: 100%;
}
`;

export default Trigger;
5 changes: 4 additions & 1 deletion src/pages/Home/Content/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,10 @@ export default HomeContentArea;

const Content = styled.div`
position: relative;
margin-left: ${(p) => p.theme.layout.sidebarWidth + 1}rem;
margin-left: ${(p) => p.theme.layout.sidebarWidth.md + 1}rem;
@media (max-width: ${(p) => p.theme.breakpoint.sm}) {
margin-left: ${(p) => p.theme.layout.sidebarWidth.sm + 1}rem;
}
max-width: 100%;
display: flex;
flex-direction: column;
Expand Down
17 changes: 11 additions & 6 deletions src/pages/Home/ResultGroup/StartedAtCell.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,17 +41,18 @@ const StartedAtCell: React.FC<Props> = ({ run, link, timezone }) => {
fetchAllData: true,
});

const hasTrigger = Boolean(metadataRecord?.['execution-triggers']);
const triggerEventsValue = JSON.parse(metadataRecord?.['execution-triggers'] ?? '[]');
const hasTrigger = Boolean(triggerEventsValue);
const displayTime = getRunStartTime(run, timezone);
const [date, time] = displayTime ? displayTime.split(' ') : [null, null];

return (
<TDWithLink link={hasTrigger ? undefined : link}>
<DisplayDate>{date}</DisplayDate>
<DisplayTime>{time}</DisplayTime>
{hasTrigger ? (
<Triggers showMultiple triggerEventsValue={JSON.parse(metadataRecord?.['execution-triggers'] ?? '')} />
) : null}
<StartedAtWrapper>
<DisplayDate>{date}</DisplayDate>
<DisplayTime>{time}</DisplayTime>
{hasTrigger ? <Triggers showMultiple triggerEventsValue={triggerEventsValue} /> : null}
</StartedAtWrapper>
</TDWithLink>
);
};
Expand All @@ -65,4 +66,8 @@ const DisplayTime = styled.div`
word-break: break-word;
`;

const StartedAtWrapper = styled.div`
display: inline-block;
`;

export default StartedAtCell;
6 changes: 3 additions & 3 deletions src/pages/Home/ResultGroup/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,9 @@ const ResultGroup: React.FC<Props> = React.memo(
hidden: queryParams._group === 'user',
maxWidth: '12.5%',
},
{ label: t('fields.started-at'), sortable: true, key: 'ts_epoch', maxWidth: '170' },
{ label: t('fields.finished-at'), sortable: true, key: 'finished_at', maxWidth: '170' },
{ label: t('fields.duration'), sortable: true, key: 'duration', maxWidth: '130' },
{ label: t('fields.started-at'), sortable: true, key: 'ts_epoch' },
{ label: t('fields.finished-at'), sortable: true, key: 'finished_at' },
{ label: t('fields.duration'), sortable: true, key: 'duration' },
{ label: t('fields.user-tags'), key: 'tags' },
].filter((item) => !item.hidden);

Expand Down
26 changes: 19 additions & 7 deletions src/pages/Home/Sidebar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,7 @@ const HomeSidebar: React.FC<Props> = ({ handleParamChange, updateListValue, para
return (
<Sidebar className="sidebar">
{/* Add sidebar size to be 100% viewheight - (header size + 1 rem for padding) */}
<Scrollbars
style={{ height: `calc(100vh - ${HEADER_SIZE_REM + 1}rem)`, width: '15rem', paddingTop: '0.25rem' }}
autoHide
>
<StyledScrollbars autoHide>
<SidebarContent>
{FEATURE_FLAGS.RUN_GROUPS && (
<SidebarSectionWrapper>
Expand Down Expand Up @@ -161,7 +158,7 @@ const HomeSidebar: React.FC<Props> = ({ handleParamChange, updateListValue, para
</div>
)}
</SidebarContent>
</Scrollbars>
</StyledScrollbars>
</Sidebar>
);
};
Expand Down Expand Up @@ -191,18 +188,33 @@ const ButtonResetAll = styled(Button)`

const Sidebar = styled.div`
position: fixed;
width: ${(p) => p.theme.layout.sidebarWidth}rem;
width: ${(p) => p.theme.layout.sidebarWidth.md}rem;
@media (max-width: ${(p) => p.theme.breakpoint.sm}) {
width: ${(p) => p.theme.layout.sidebarWidth.sm}rem;
}
top: ${(p) => p.theme.layout.appbarHeight}rem;
font-size: 0.875rem;
padding-top: 6px;
`;

const SidebarContent = styled.div`
width: 14rem;
width: ${(p) => p.theme.layout.sidebarWidth.md}rem;
@media (max-width: ${(p) => p.theme.breakpoint.sm}) {
width: ${(p) => p.theme.layout.sidebarWidth.sm}rem;
}
padding-top: 0.5rem;
padding-left: 0.25rem;
`;

const StyledScrollbars = styled(Scrollbars)`
height: calc(100vh - ${HEADER_SIZE_REM + 1}rem) !important;
width: ${(p) => p.theme.layout.sidebarWidth.md + 1}rem !important;
@media (max-width: ${(p) => p.theme.breakpoint.sm}) {
width: ${(p) => p.theme.layout.sidebarWidth.sm + 1}rem !important;
}
padding-top: 0.25rem;
`;

export const SidebarSectionWrapper = styled.div`
margin: 0 0 1rem;
`;
Expand Down
9 changes: 8 additions & 1 deletion src/styled.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,14 @@ declare module 'styled-components' {
/** This value is used for horizontal padding in pages and pagewide floating elements (rem) */
pagePaddingX: number;
pagePaddingY: number;
sidebarWidth: number;
sidebarWidth: {
sm: number;
md: number;
};
};

breakpoint: {
sm: string;
};

spacer: {
Expand Down
9 changes: 8 additions & 1 deletion src/theme/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -104,11 +104,18 @@ const defaultTheme: DefaultTheme = {
appbarLogoHeight: 1.5,
pagePaddingX: spacer.ml,
pagePaddingY: spacer.lg,
sidebarWidth: 14,
sidebarWidth: {
md: 14,
sm: 12,
},
},

spacer,

breakpoint: {
sm: '1280px',
},

color: {
text: textColor,
bg: bgColor,
Expand Down
4 changes: 2 additions & 2 deletions src/translations/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,13 @@ const en = {
tag: 'Tag',
project: 'Project',
branch: 'Branch',
'user-tags': 'User tags',
'user-tags': 'Tags',
tasks: 'Tasks',
'filter-by': 'Filter by',
flow_id: 'Flow',

id: 'ID',
status: 'Status',
status: '',
'triggered-by': 'Triggered by',
'started-at': 'Started at',
'finished-at': 'Finished at',
Expand Down

0 comments on commit abe6005

Please sign in to comment.