Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

fix: Recent bots sort and update styles #7140

Merged
beyackle merged 11 commits into from
Apr 21, 2021
Merged

fix: Recent bots sort and update styles #7140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
21085dc
update styles
zhixzhan Apr 20, 2021
99dd746
recent bots list
zhixzhan Apr 20, 2021
996d681
lint
zhixzhan Apr 20, 2021
38a35c8
Merge branch 'main' into zhixzhan/homepage-botlist
zhixzhan Apr 20, 2021
9e90516
Merge branch 'main' into zhixzhan/homepage-botlist
beyackle Apr 20, 2021
ca8c8ce
Merge branch 'main' into zhixzhan/homepage-botlist
beyackle Apr 20, 2021
1c27c8b
no hover color for table header
zhixzhan Apr 21, 2021
170e97f
Merge branch 'main' into zhixzhan/homepage-botlist
zhixzhan Apr 21, 2021
0ab84a9
Merge branch 'main' into zhixzhan/homepage-botlist
zhixzhan Apr 21, 2021
1bdde5a
Merge branch 'main' into zhixzhan/homepage-botlist
zhixzhan Apr 21, 2021
d6bf71a
Merge branch 'main' into zhixzhan/homepage-botlist
zhixzhan Apr 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Composer/packages/client/src/pages/home/Home.tsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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