Merge pull request #18527 from overleaf/ii-bs5-projects-structure

[web] Create the sidebar and projects columns in dashboard page (BS5)

GitOrigin-RevId: 9096d6932980c10816411fc18570ad88df68a6d6
This commit is contained in:
ilkin-overleaf 2024-05-29 15:23:50 +03:00 committed by Copybot
parent 80044b53b4
commit 920bbe4bac
5 changed files with 81 additions and 3 deletions

View file

@ -26,6 +26,8 @@ import { useEffect } from 'react'
import withErrorBoundary from '../../../infrastructure/error-boundary'
import { GenericErrorBoundaryFallback } from '../../../shared/components/generic-error-boundary-fallback'
import { SplitTestProvider } from '@/shared/context/split-test-context'
import { bsVersion } from '@/features/utils/bootstrap-5'
import classnames from 'classnames'
function ProjectListRoot() {
const { isReady } = useWaitForI18n()
@ -79,7 +81,12 @@ function ProjectListPageContent() {
<>
<SystemMessages />
<div className="project-list-wrapper clearfix container mx-0 px-0">
<div
className={classnames(
'project-list-wrapper',
bsVersion({ bs3: 'clearfix container mx-0 px-0' })
)}
>
{totalProjectsCount > 0 ? (
<>
<Sidebar />

View file

@ -3,6 +3,8 @@ import SidebarFilters from './sidebar-filters'
import AddAffiliation, { useAddAffiliation } from '../add-affiliation'
import SurveyWidget from '../survey-widget'
import { usePersistedResize } from '../../../../shared/hooks/use-resize'
import { bsVersion } from '@/features/utils/bootstrap-5'
import classnames from 'classnames'
function Sidebar() {
const { show: showAddAffiliationWidget } = useAddAffiliation()
@ -12,7 +14,10 @@ function Sidebar() {
return (
<div
className="project-list-sidebar-wrapper-react hidden-xs"
className={classnames(
'project-list-sidebar-wrapper-react',
bsVersion({ bs5: 'd-none d-md-block', bs3: 'hidden-xs' })
)}
{...getTargetProps({
style: {
...(mousePos?.x && { flexBasis: `${mousePos.x}px` }),

View file

@ -185,7 +185,7 @@
}
.project-list-main-react {
max-width: 100%;
flex: 1;
overflow-x: hidden;
padding: @content-margin-vertical @grid-gutter-width / 2;
}

View file

@ -1 +1,2 @@
@import 'account-settings';
@import 'project-list-react';

View file

@ -0,0 +1,65 @@
.project-list-react {
body > &.content {
padding-top: $header-height;
padding-bottom: 0;
min-height: calc(100vh - #{$header-height});
display: flex;
flex-direction: column;
}
.project-list-wrapper {
display: flex;
align-items: stretch;
width: 100%;
min-height: calc(100vh - #{$header-height});
}
.project-list-sidebar-wrapper-react {
position: relative;
background-color: var(--bg-dark-secondary);
flex: 0 0 15%;
min-height: calc(100vh - #{$header-height});
max-width: 320px;
min-width: 200px;
.project-list-sidebar-subwrapper {
display: flex;
flex-direction: column;
height: 100%;
.project-list-sidebar-react {
flex-grow: 1;
padding-left: var(--spacing-06);
padding-right: var(--spacing-06);
-ms-overflow-style: -ms-autohiding-scrollbar;
padding-top: var(--spacing-08);
padding-bottom: var(--spacing-08);
color: var(--neutral-40);
.small {
color: var(--neutral-40);
}
button {
white-space: normal;
word-wrap: anywhere;
// prevents buttons from expanding sidebar width
}
> .dropdown {
width: 100%;
.new-project-button {
width: 100%;
}
}
}
}
}
.project-list-main-react {
flex: 1;
overflow-x: hidden;
padding: var(--spacing-08) var(--spacing-06);
}
}