mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
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:
parent
80044b53b4
commit
920bbe4bac
5 changed files with 81 additions and 3 deletions
|
@ -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 />
|
||||
|
|
|
@ -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` }),
|
||||
|
|
|
@ -185,7 +185,7 @@
|
|||
}
|
||||
|
||||
.project-list-main-react {
|
||||
max-width: 100%;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
padding: @content-margin-vertical @grid-gutter-width / 2;
|
||||
}
|
||||
|
|
|
@ -1 +1,2 @@
|
|||
@import 'account-settings';
|
||||
@import 'project-list-react';
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue