Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Recent bots sort and update styles #7140

Merged
merged 11 commits into from
Apr 21, 2021
2 changes: 1 addition & 1 deletion Composer/packages/client/src/pages/home/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ const Home: React.FC<RouteComponentProps> = () => {
</div>
<div css={home.videosContainer}>
<div css={home.rowContainer}>
<Pivot aria-label="Videos and articles" linkSize={PivotLinkSize.large}>
<Pivot aria-label="Videos and articles" css={home.pivotContainer} linkSize={PivotLinkSize.large}>
{feed.tabs.map((tab, index) => (
<PivotItem key={index} headerText={tab.title}>
{tab.viewAllLinkText && (
Expand Down
6 changes: 1 addition & 5 deletions Composer/packages/client/src/pages/home/RecentBotList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,6 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element {
maxWidth: 200,
isRowHeader: true,
isResizable: true,
isSorted: true,
isSortedDescending: false,
sortAscendingAriaLabel: formatMessage('Sorted A to Z'),
sortDescendingAriaLabel: formatMessage('Sorted Z to A'),
data: 'string',
onRender: (item) => {
return (
Expand Down Expand Up @@ -131,7 +127,7 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element {
onRenderDetailsHeader={onRenderDetailsHeader}
/>
);
}, []);
}, [recentProjects]);

return (
<div css={home.detailListContainer} data-is-scrollable="true">
Expand Down
25 changes: 20 additions & 5 deletions Composer/packages/client/src/pages/home/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,21 +27,21 @@ export const page = css`

export const leftPage = css`
flex: 50%;
padding: 0 25px 25px 25px;
padding: 0 24px 24px 24px;
display: flex;
flex-direction: column;
`;

export const rightPage = css`
flex: 1;
padding-right: 25px;
padding-right: 24px;
display: flex;
flex-direction: column;
`;

export const title = css`
display: block;
padding: 25px 25px 0px 25px;
padding: 24px 24px 0px 24px;
font-size: ${FontSizes.xxLarge};
line-height: 36px;
font-weight: ${FontWeights.semibold};
Expand Down Expand Up @@ -77,6 +77,15 @@ export const videosContainer = css`
margin-top: 40px;
`;

export const pivotContainer = css`
button:first-of-type {
padding-left: 0;
:before {
left: 0;
}
}
`;

export const tabRowContainer = css`
flex-wrap: wrap;
display: flex;
Expand Down Expand Up @@ -176,6 +185,9 @@ export const cardItem = {
container: css`
font-size: ${fonts.medium.fontSize};
margin: 12px 0 0 12px;
&:first-child {
margin-left: 0;
}
padding: 12px;
min-width: ${ImageCoverWidth}px;
width: 17vw;
Expand Down Expand Up @@ -293,6 +305,9 @@ export const detailListContainer = css`
.ms-DetailsHeader-cellName {
font-weight: 400;
}
.ms-DetailsHeader-cell:hover {
background: none;
}
`;

export const detailListScrollWrapper = css`
Expand All @@ -305,9 +320,9 @@ export const detailListScrollWrapper = css`
export const whatsNewsContainer = css`
position: relative;
flex: 1;
padding: 20px 25px 25px 25px;
padding: 20px 24px 24px 24px;
border-radius: 5px;
margin: 20px 0 25px 0;
margin: 20px 0 24px 0;
background: #f6f6f6;
@media (max-width: 1416px) {
background: none;
Expand Down