github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-29 00:23:43 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #9838 from overleaf/jel-dash-scrolling

Browse source 
[web] React dash scrolling

GitOrigin-RevId: 80d8fe8756df717c19c05e6ad848c32d03e487fc
This commit is contained in:
Jessica Lawshe 2022-10-06 09:37:44 -05:00 committed by Copybot
parent f789492720
commit 6f007a9703
2 changed files with 105 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

137
services/web/frontend/js/features/project-list/components/project-list-root.tsx
View file

@ -45,81 +45,84 @@ 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"> {totalProjectsCount > 0 ? (
{error ? <DashApiError /> : ''} <>
{totalProjectsCount > 0 ? ( <div className="project-list-sidebar-wrapper-react hidden-xs">
<> <div className="project-list-sidebar-subwrapper">
<div className="project-list-sidebar-wrapper hidden-xs"> <aside className="project-list-sidebar-react">
<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>
<Row> <div className="project-list-main-react">
<Col xs={12}> {error ? <DashApiError /> : ''}
<UserNotifications /> <Row>
</Col> <Col xs={12}>
</Row> <UserNotifications />
<Row> </Col>
<Col md={7} className="hidden-xs"> </Row>
<SearchForm <Row>
inputValue={searchText} <Col md={7} className="hidden-xs">
setInputValue={setSearchText} <SearchForm
/> inputValue={searchText}
</Col> setInputValue={setSearchText}
<Col md={5}> />
<div className="project-tools"> </Col>
<div className="hidden-xs"> <Col md={5}>
{selectedProjects.length === 0 ? ( <div className="project-tools">
<CurrentPlanWidget /> <div className="hidden-xs">
) : ( {selectedProjects.length === 0 ? (
<ProjectTools />
)}
</div>
<div className="visible-xs">
<CurrentPlanWidget /> <CurrentPlanWidget />
</div> ) : (
<ProjectTools />
)}
</div>
<div className="visible-xs">
<CurrentPlanWidget />
</div> </div>
</Col>
</Row>
<div className="visible-xs mt-1">
<div role="toolbar" className="projects-toolbar">
<ProjectsDropdown />
<SortByDropdown />
</div> </div>
</Col>
</Row>
<div className="visible-xs mt-1">
<div role="toolbar" className="projects-toolbar">
<ProjectsDropdown />
<SortByDropdown />
</div> </div>
<Row className="row-spaced">
<Col xs={12}>
<div className="card project-list-card">
<div className="visible-xs pt-2 pb-3">
<div className="clearfix">
<NewProjectButton
id="new-project-button-projects-table"
className="pull-left me-2"
/>
<SearchForm
inputValue={searchText}
setInputValue={setSearchText}
className="overflow-hidden"
formGroupProps={{ className: 'mb-0' }}
/>
</div>
</div>
<ProjectListTable />
</div>
</Col>
</Row>
<Row className="row-spaced">
<Col xs={12}>
<LoadMore />
</Col>
</Row>
</div> </div>
</> <Row className="row-spaced">
) : ( <Col xs={12}>
<div className="card project-list-card">
<div className="visible-xs pt-2 pb-3">
<div className="clearfix">
<NewProjectButton
id="new-project-button-projects-table"
className="pull-left me-2"
/>
<SearchForm
inputValue={searchText}
setInputValue={setSearchText}
className="overflow-hidden"
formGroupProps={{ className: 'mb-0' }}
/>
</div>
</div>
<ProjectListTable />
</div>
</Col>
</Row>
<Row className="row-spaced">
<Col xs={12}>
<LoadMore />
</Col>
</Row>
</div>
</>
) : (
<div className="project-list-welcome-wrapper">
{error ? <DashApiError /> : ''}
<Row className="row-spaced"> <Row className="row-spaced">
<Col <Col
xs={8} xs={8}
@ -131,8 +134,8 @@ function ProjectListPageContent() {
<WelcomeMessage /> <WelcomeMessage />
</Col> </Col>
</Row> </Row>
)} </div>
</div> )}
</div> </div>
) )
} }

63
services/web/frontend/stylesheets/app/project-list-react.less
View file

@ -24,40 +24,53 @@
} }
} }
.project-list-row { .project-list-wrapper {
height: 100%; display: flex;
align-items: stretch;
min-height: calc(~'100vh -' @header-height); min-height: calc(~'100vh -' @header-height);
} }
.project-list-wrapper { .project-list-sidebar-wrapper-react {
position: absolute; background-color: @sidebar-bg;
width: 100%; flex: 0 0 15%;
height: 100%; min-height: calc(~'100vh -' @header-height);
}
.project-list-sidebar-wrapper { .project-list-sidebar-subwrapper {
float: left; display: flex;
position: static; flex-direction: column;
width: 15%; height: 100%;
min-width: 160px;
.project-list-sidebar { .project-list-sidebar-react {
> .dropdown { height: 100%;
width: 100%; padding-left: 15px;
padding-right: 15px;
overflow-x: hidden;
overflow-y: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
padding-top: @content-margin-vertical;
padding-bottom: @content-margin-vertical;
color: @sidebar-color;
.small {
color: @sidebar-color;
}
.new-project-button { > .dropdown {
width: 100%; width: 100%;
.new-project-button {
width: 100%;
}
} }
} }
} }
} }
.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 {
@ -570,12 +583,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;