fix: fix style

pull/8/head
fantasticit 2022-03-12 17:52:19 +08:00
parent 5735222778
commit 242afc277d
10 changed files with 53 additions and 19 deletions

View File

@ -49,7 +49,14 @@ export const DocumentCard: React.FC<{ document: IDocument }> = ({ document }) =>
</div>
</header>
<main>
<div style={{ marginBottom: 12 }}>
<div
style={{
marginBottom: 12,
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
}}
>
<Text strong>{document.title}</Text>
</div>
<div>

View File

@ -14,6 +14,7 @@ import {
import { IconChevronLeft, IconArticle } from '@douyinfe/semi-icons';
import { useUser } from 'data/user';
import { useDocumentDetail } from 'data/document';
import { useWindowSize } from 'hooks/useWindowSize';
import { Seo } from 'components/seo';
import { Theme } from 'components/theme';
import { DataRender } from 'components/data-render';
@ -34,7 +35,7 @@ interface IProps {
export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
if (!documentId) return null;
const { width: windowWith } = useWindowSize();
const { width, fontSize } = useDocumentStyle();
const editorWrapClassNames = useMemo(() => {
return width === 'standardWidth' ? styles.isStandardWidth : styles.isFullWidth;
@ -70,7 +71,7 @@ export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
/>
}
normalContent={() => (
<Text ellipsis={{ showTooltip: true }} style={{ width: 120 }}>
<Text ellipsis={{ showTooltip: true }} style={{ width: ~~(windowWith / 4) }}>
{document.title}
</Text>
)}

View File

@ -21,6 +21,7 @@ import { DocumentCollaboration } from 'components/document/collaboration';
import { DocumentStyle } from 'components/document/style';
import { CommentEditor } from 'components/document/comments';
import { useDocumentStyle } from 'hooks/useDocumentStyle';
import { useWindowSize } from 'hooks/useWindowSize';
import { useUser } from 'data/user';
import { useDocumentDetail } from 'data/document';
import { DocumentSkeleton } from 'components/tiptap';
@ -37,6 +38,7 @@ interface IProps {
export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
if (!documentId) return null;
const { width: windowWidth } = useWindowSize();
const { width, fontSize } = useDocumentStyle();
const editorWrapClassNames = useMemo(() => {
return width === 'standardWidth' ? styles.isStandardWidth : styles.isFullWidth;
@ -73,7 +75,11 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
/>
}
normalContent={() => (
<Text strong ellipsis={{ showTooltip: true }} style={{ width: 120 }}>
<Text
strong
ellipsis={{ showTooltip: true }}
style={{ width: ~~(windowWidth / 4) }}
>
{document.title}
</Text>
)}

View File

@ -20,6 +20,7 @@ import { DocumentStyle } from 'components/document/style';
import { User } from 'components/user';
import { Theme } from 'components/theme';
import { useDocumentStyle } from 'hooks/useDocumentStyle';
import { useWindowSize } from 'hooks/useWindowSize';
import { usePublicDocument } from 'data/document';
import { DocumentSkeleton } from 'components/tiptap';
import { DocumentContent } from '../content';
@ -38,7 +39,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
if (!documentId) return null;
const { data, loading, error, query } = usePublicDocument(documentId);
const { width: windowWidth } = useWindowSize();
const { width, fontSize } = useDocumentStyle();
const editorWrapClassNames = useMemo(() => {
return width === 'standardWidth' ? styles.isStandardWidth : styles.isFullWidth;
@ -105,7 +106,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
/>
}
normalContent={() => (
<Text strong ellipsis={{ showTooltip: true }} style={{ width: 120 }}>
<Text strong ellipsis={{ showTooltip: true }} style={{ width: ~~(windowWidth / 4) }}>
{data.title}
</Text>
)}

View File

@ -14,3 +14,9 @@
margin-left: 4px;
}
}
@media (max-width: 830px) {
.wrap {
display: none !important;
}
}

View File

@ -72,7 +72,14 @@ export const TemplateCard: React.FC<IProps> = ({
</div>
</header>
<main>
<div style={{ marginBottom: 12 }}>
<div
style={{
marginBottom: 12,
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
}}
>
<Text strong>{template.title}</Text>
</div>
<div>

View File

@ -30,6 +30,7 @@ import { DataRender } from 'components/data-render';
import { User } from 'components/user';
import { DocumentStyle } from 'components/document/style';
import { useDocumentStyle } from 'hooks/useDocumentStyle';
import { useWindowSize } from 'hooks/useWindowSize';
import { safeJSONParse } from 'helpers/json';
import styles from './index.module.scss';
@ -53,7 +54,7 @@ export const Editor: React.FC<IProps> = ({
deleteTemplate,
}) => {
if (!user) return null;
const { width: windowWidth } = useWindowSize();
const provider = useMemo(() => {
return getProvider({
targetId: data.id,
@ -116,7 +117,11 @@ export const Editor: React.FC<IProps> = ({
style={{ marginRight: 16 }}
/>
</Tooltip>
<Text strong ellipsis={{ showTooltip: true }} style={{ width: 120 }}>
<Text
strong
ellipsis={{ showTooltip: true }}
style={{ width: ~~(windowWidth / 4) }}
>
{data.title}
</Text>
</>

View File

@ -17,18 +17,18 @@ const Title = Node.create({
parseHTML() {
return [
{
tag: 'h1[class=title]',
tag: 'div[class=title]',
},
];
},
renderHTML({ HTMLAttributes }) {
return ['h1', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
},
});
const TitledDocument = Document.extend({
content: 'title block+',
content: 'title block*',
});
export { Document, Title, TitledDocument };

View File

@ -20,12 +20,13 @@
align-items: center;
justify-content: space-between;
width: 100%;
padding: 4px 16px;
padding: 8px 16px;
.leftWrap {
display: flex;
align-items: center;
color: var(--semi-color-primary);
padding-left: 8px;
svg {
fill: var(--semi-color-primary);

View File

@ -103,32 +103,32 @@
h1 {
font-size: 1.87em;
margin: 26px 0 14px 0;
margin: 26px 0 12px 0;
}
h2 {
font-size: 1.6em;
margin: 21px 0 14px 0;
margin: 21px 0 12px 0;
}
h3 {
font-size: 1.3em;
margin: 16px 0 14px 0;
margin: 16px 0 12px 0;
}
h4 {
font-size: 1.1em;
margin: 14px 0 14px 0;
margin: 14px 0 12px 0;
}
h5 {
font-size: 1em;
margin: 5px 0 14px 0;
margin: 5px 0 12px 0;
}
h6 {
font-size: 1em;
margin: 0 0 14px 0;
margin: 0 0 12px 0;
}
h1:first-child,