fix: page scroll area (#2850)

This commit is contained in:
Aaryan Khandelwal 2023-11-23 18:22:25 +05:30 committed by sriram veeraghanta
parent bf525aa2c4
commit dfffa63151
5 changed files with 26 additions and 23 deletions

View File

@ -18,7 +18,7 @@ export const PageRenderer = (props: IPageRenderer) => {
} = props;
return (
<div className="h-full w-full overflow-y-auto pl-7 py-5">
<div className="w-full pl-7 pt-5 pb-64">
<h1 className="text-4xl font-bold break-all pr-5 -mt-2">
{documentDetails.title}
</h1>

View File

@ -44,7 +44,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
</button>
{!sidePeekVisible && (
<div
className="hidden group-hover/summary-popover:block z-10 h-80 w-64 shadow-custom-shadow-rg rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3"
className="hidden group-hover/summary-popover:block z-10 max-h-80 w-64 shadow-custom-shadow-rg rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3"
ref={setPopperElement}
style={summaryPopoverStyles.popper}
{...summaryPopoverAttributes.popper}

View File

@ -1,6 +1,6 @@
"use client";
import React, { useState } from "react";
import { cn, getEditorClassNames, useEditor } from "@plane/editor-core";
import { getEditorClassNames, useEditor } from "@plane/editor-core";
import { DocumentEditorExtensions } from "./extensions";
import {
IDuplicationConfig,
@ -126,8 +126,8 @@ const DocumentEditor = ({
archivedAt={pageArchiveConfig && pageArchiveConfig.archived_at}
documentDetails={documentDetails}
/>
<div className="h-full w-full flex overflow-hidden">
<div className="flex-shrink-0 h-full w-56 lg:w-80">
<div className="h-full w-full flex overflow-y-auto">
<div className="flex-shrink-0 h-full w-56 lg:w-80 sticky top-0">
<SummarySideBar
editor={editor}
markings={markings}

View File

@ -1,4 +1,4 @@
import { cn, getEditorClassNames, useReadOnlyEditor } from "@plane/editor-core";
import { getEditorClassNames, useReadOnlyEditor } from "@plane/editor-core";
import { useRouter } from "next/router";
import { useState, forwardRef, useEffect } from "react";
import { EditorHeader } from "../components/editor-header";
@ -91,8 +91,8 @@ const DocumentReadOnlyEditor = ({
documentDetails={documentDetails}
archivedAt={pageArchiveConfig && pageArchiveConfig.archived_at}
/>
<div className="h-full w-full flex overflow-hidden">
<div className="flex-shrink-0 h-full w-56 lg:w-80">
<div className="h-full w-full flex overflow-y-auto">
<div className="flex-shrink-0 h-full w-56 lg:w-80 sticky top-0">
<SummarySideBar
editor={editor}
markings={markings}

View File

@ -15,7 +15,7 @@ import { PageDetailsHeader } from "components/headers/page-details";
import { EmptyState } from "components/common";
// ui
import { DocumentEditorWithRef, DocumentReadOnlyEditorWithRef } from "@plane/document-editor";
import { Loader } from "@plane/ui";
import { Spinner } from "@plane/ui";
// assets
import emptyPage from "public/empty-state/page.svg";
// helpers
@ -179,19 +179,22 @@ const PageDetailsPage: NextPageWithLayout = () => {
handleSubmit(updatePage)().finally(() => setIsSubmitting("submitted"));
}, 1500);
if (error)
return (
<EmptyState
image={emptyPage}
title="Page does not exist"
description="The page you are looking for does not exist or has been deleted."
primaryButton={{
text: "View other pages",
onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/pages`),
}}
/>
);
return (
<>
{error ? (
<EmptyState
image={emptyPage}
title="Page does not exist"
description="The page you are looking for does not exist or has been deleted."
primaryButton={{
text: "View other pages",
onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/pages`),
}}
/>
) : pageDetails ? (
{pageDetails ? (
<div className="flex h-full flex-col justify-between">
<div className="h-full w-full overflow-hidden">
{pageDetails.is_locked || pageDetails.archived_at ? (
@ -267,9 +270,9 @@ const PageDetailsPage: NextPageWithLayout = () => {
</div>
</div>
) : (
<Loader className="p-8">
<Loader.Item height="200px" />
</Loader>
<div className="h-full w-full grid place-items-center">
<Spinner />
</div>
)}
</>
);