3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-05 13:17:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(v2): make little better doc details info UI (#4865)

Browse source
This commit is contained in:
Alexey Pyltsyn 2021-06-02 17:19:41 +03:00 • committed by GitHub
parent 15d451942c
commit d2e4e60cd5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 56 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
View file

@ -82,8 +82,7 @@ function DocItem(props: Props): JSX.Element {
</div> </div>
</article> </article>
{(editUrl || lastUpdatedAt || lastUpdatedBy) && ( {(editUrl || lastUpdatedAt || lastUpdatedBy) && (
<div className="margin-vert--xl"> <div className={clsx('row', styles.docUpdateDetails)}>
<div className="row">
<div className="col"> <div className="col">
{editUrl && <EditThisPage editUrl={editUrl} />} {editUrl && <EditThisPage editUrl={editUrl} />}
</div> </div>
@ -95,9 +94,8 @@ function DocItem(props: Props): JSX.Element {
/> />
)} )}
</div> </div>
</div>
)} )}
<div className="margin-vert--lg"> <div className={styles.docPaginator}>
<DocPaginator metadata={metadata} /> <DocPaginator metadata={metadata} />
</div> </div>
</div> </div>

5
packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css
View file

@ -15,6 +15,11 @@
padding: 0 0.5rem; padding: 0 0.5rem;
} }
.docUpdateDetails,
.docPaginator {
margin-top: 3rem;
}
@media only screen and (min-width: 997px) { @media only screen and (min-width: 997px) {
.docItemCol { .docItemCol {
max-width: 75% !important; max-width: 75% !important;

7
packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx
View file

@ -6,6 +6,7 @@
*/ */
import React from 'react'; import React from 'react';
import clsx from 'clsx';
import styles from './styles.module.css'; import styles from './styles.module.css';
import Translate from '@docusaurus/Translate'; import Translate from '@docusaurus/Translate';
import type {Props} from '@theme/LastUpdated'; import type {Props} from '@theme/LastUpdated';
@ -58,9 +59,7 @@ export default function LastUpdated({
lastUpdatedBy, lastUpdatedBy,
}: Props): JSX.Element { }: Props): JSX.Element {
return ( return (
<div className="col text--right"> <div className={clsx('col', styles.lastUpdated)}>
<em>
<small>
<Translate <Translate
id="theme.lastUpdated.lastUpdatedAtBy" id="theme.lastUpdated.lastUpdatedAtBy"
description="The sentence used to display when a page has been last updated, and by who" description="The sentence used to display when a page has been last updated, and by who"
@ -87,8 +86,6 @@ export default function LastUpdated({
<small> (Simulated during dev for better perf)</small> <small> (Simulated during dev for better perf)</small>
</div> </div>
)} )}
</small>
</em>
</div> </div>
); );
} }

12
packages/docusaurus-theme-classic/src/theme/LastUpdated/styles.module.css
View file

@ -5,6 +5,18 @@
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
.lastUpdated {
margin-top: 0.2rem;
font-style: italic;
font-size: smaller;
}
@media only screen and (min-width: 997px) {
.lastUpdated {
text-align: right;
}
}
.lastUpdatedDate { .lastUpdatedDate {
font-weight: bold; font-weight: bold;
} }