fix: fix style

This commit is contained in:
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> </div>
</header> </header>
<main> <main>
<div style={{ marginBottom: 12 }}> <div
style={{
marginBottom: 12,
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
}}
>
<Text strong>{document.title}</Text> <Text strong>{document.title}</Text>
</div> </div>
<div> <div>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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