@@ -881,6 +881,7 @@ export const lightTheme = { | |||
[15, 20, 24, -4, ...COLORS.blueGrey[700], 0.1], | |||
[0, 8, 8, -4, ...COLORS.blueGrey[700], 0.06], | |||
], | |||
scrolling: [[0, 0, 8, 0, ...COLORS.blueGrey[700], 0.2]], | |||
}, | |||
// predefined borders |
@@ -1095,7 +1095,7 @@ export class App extends React.PureComponent<Props, State> { | |||
className="issues-nav-bar sw-overflow-y-auto issue-filters-list" | |||
style={{ height: `calc((100vh - ${top}px) - 60px)` }} // 60px (footer) | |||
> | |||
<div className="sw-w-[300px] lg:sw-w-[390px]"> | |||
<div className="sw-w-[300px] lg:sw-w-[390px] sw-h-full"> | |||
<A11ySkipTarget | |||
anchor="issues_sidebar" | |||
label={ | |||
@@ -1107,7 +1107,7 @@ export class App extends React.PureComponent<Props, State> { | |||
/> | |||
{openIssue ? ( | |||
<div> | |||
<div className="sw-h-full"> | |||
{warning && <div className="sw-py-4">{warning}</div>} | |||
<SubnavigationIssuesList |
@@ -40,7 +40,7 @@ export default function IssueLocation(props: Props) { | |||
useEffect(() => { | |||
if (selected && node.current) { | |||
node.current.scrollIntoView({ | |||
block: 'center', | |||
block: 'nearest', | |||
behavior: 'smooth', | |||
}); | |||
} |
@@ -18,7 +18,7 @@ | |||
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | |||
*/ | |||
import styled from '@emotion/styled'; | |||
import { themeBorder, themeColor } from 'design-system'; | |||
import { themeBorder, themeColor, themeShadow } from 'design-system'; | |||
import * as React from 'react'; | |||
import ListFooter from '../../../components/controls/ListFooter'; | |||
import { Issue, Paging } from '../../../types/types'; | |||
@@ -54,7 +54,7 @@ export default function SubnavigationIssuesList(props: Props) { | |||
return ( | |||
<StyledWrapper> | |||
<SubnavigationIssuesListHeader loading={loading} paging={paging} /> | |||
<StyledList> | |||
<StyledList className="sw-overflow-auto sw-flex-auto"> | |||
{issues.map((issue, index) => { | |||
const previousIssue = index > 0 ? issues[index - 1] : undefined; | |||
const displayComponentName = | |||
@@ -82,7 +82,7 @@ export default function SubnavigationIssuesList(props: Props) { | |||
})} | |||
</StyledList> | |||
{paging && paging.total > 0 && ( | |||
<ListFooter | |||
<StyledFooter | |||
className="sw-my-0 sw-py-4" | |||
count={issues.length} | |||
loadMore={props.fetchMoreIssues} | |||
@@ -103,4 +103,11 @@ const StyledList = styled.ul` | |||
const StyledWrapper = styled.div` | |||
background-color: ${themeColor('filterbar')}; | |||
height: inherit; | |||
display: flex; | |||
flex-direction: column; | |||
`; | |||
const StyledFooter = styled(ListFooter)` | |||
box-shadow: ${themeShadow('scrolling')}; | |||
`; |
@@ -18,7 +18,7 @@ | |||
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | |||
*/ | |||
import styled from '@emotion/styled'; | |||
import { Spinner, SubnavigationHeading, themeBorder } from 'design-system'; | |||
import { Spinner, SubnavigationHeading, themeShadow } from 'design-system'; | |||
import * as React from 'react'; | |||
import { Paging } from '../../../types/types'; | |||
import IssuesCounter from '../components/IssuesCounter'; | |||
@@ -32,14 +32,12 @@ export default function SubnavigationIssuesListHeader(props: Props) { | |||
const { loading, paging } = props; | |||
return ( | |||
<StyledHeader> | |||
<StyledHeader className="sw-z-normal"> | |||
<Spinner loading={loading}>{paging && <IssuesCounter total={paging.total} />}</Spinner> | |||
</StyledHeader> | |||
); | |||
} | |||
const StyledHeader = styled(SubnavigationHeading)` | |||
position: sticky; | |||
top: 0; | |||
border-bottom: ${themeBorder('default', 'filterbarBorder')}; | |||
box-shadow: ${themeShadow('scrolling')}; | |||
`; |
@@ -106,7 +106,7 @@ export default function ListFooter(props: ListFooterProps) { | |||
ref={rootNode} | |||
className={classNames( | |||
'list-footer', // .list-footer is only used by Selenium tests; we should find a way to remove it. | |||
'sw-body-sm sw-mt-4 sw-flex sw-items-center sw-justify-center', | |||
'sw-body-sm sw-flex sw-items-center sw-justify-center', | |||
{ 'sw-opacity-50 sw-duration-500 sw-ease-in-out': !ready }, | |||
className, | |||
)} | |||
@@ -133,4 +133,6 @@ export default function ListFooter(props: ListFooterProps) { | |||
const StyledDiv = styled.div` | |||
color: ${themeColor('pageContentLight')}; | |||
margin-top: 1rem /* 16px */; | |||
`; |