Merge pull request #9559 from overleaf/jel-dash-scroll

[web] Project dashboard scrolling

GitOrigin-RevId: bd427f29e411d57dbc7c5e79c79195cee664ff88
This commit is contained in:
Jessica Lawshe 2022-10-03 08:19:53 -05:00 committed by Copybot
parent 51806703b7
commit 9b09f8426d
2 changed files with 82 additions and 98 deletions

View file

@ -45,19 +45,18 @@ function ProjectListPageContent() {
<LoadingBranded loadProgress={loadProgress} /> <LoadingBranded loadProgress={loadProgress} />
</div> </div>
) : ( ) : (
<div className="project-list-row fill">
<div className="project-list-wrapper clearfix"> <div className="project-list-wrapper clearfix">
{error ? <DashApiError /> : ''} {error ? <DashApiError /> : ''}
{totalProjectsCount > 0 ? ( {totalProjectsCount > 0 ? (
<> <>
<div className="project-list-sidebar-wrapper hidden-xs"> <div className="project-list-sidebar-wrapper-react hidden-xs">
<aside className="project-list-sidebar"> <aside className="project-list-sidebar">
<NewProjectButton id="new-project-button-sidebar" /> <NewProjectButton id="new-project-button-sidebar" />
<SidebarFilters /> <SidebarFilters />
</aside> </aside>
<SurveyWidget /> <SurveyWidget />
</div> </div>
<div className="project-list-main"> <div className="project-list-main-react">
<Row> <Row>
<Col xs={12}> <Col xs={12}>
<UserNotifications /> <UserNotifications />
@ -120,6 +119,7 @@ function ProjectListPageContent() {
</div> </div>
</> </>
) : ( ) : (
<div className="project-list-welcome-wrapper">
<Row className="row-spaced"> <Row className="row-spaced">
<Col <Col
xs={8} xs={8}
@ -131,8 +131,8 @@ function ProjectListPageContent() {
<WelcomeMessage /> <WelcomeMessage />
</Col> </Col>
</Row> </Row>
)}
</div> </div>
)}
</div> </div>
) )
} }

View file

@ -24,23 +24,13 @@
} }
} }
.project-list-row {
height: 100%;
min-height: calc(~'100vh -' @header-height);
}
.project-list-wrapper { .project-list-wrapper {
position: absolute; display: flex;
width: 100%; align-items: stretch;
height: 100%;
} }
.project-list-sidebar-wrapper { .project-list-sidebar-wrapper-react {
float: left; flex: 0 0 15%;
position: static;
width: 15%;
min-width: 160px;
.project-list-sidebar { .project-list-sidebar {
> .dropdown { > .dropdown {
width: 100%; width: 100%;
@ -52,12 +42,12 @@
} }
} }
.project-list-main { .project-list-welcome-wrapper {
position: static; width: 100%;
overflow: auto; }
padding-left: @grid-gutter-width / 2;
padding-right: @grid-gutter-width / 2; .project-list-main-react {
margin-left: initial; padding: @content-margin-vertical @grid-gutter-width / 2;
} }
ul.folders-menu { ul.folders-menu {
@ -574,12 +564,6 @@
} }
} }
.project-list-react.container,
.project-list-react .project-list-sidebar-wrapper,
.project-list-react .project-list-main {
height: 100%;
}
.current-plan { .current-plan {
vertical-align: middle; vertical-align: middle;
line-height: @line-height-base; line-height: @line-height-base;