mirror of https://github.com/fantasticit/think.git
fix: fix style
This commit is contained in:
parent
5735222778
commit
242afc277d
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -14,3 +14,9 @@
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 830px) {
|
||||||
|
.wrap {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -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 };
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue