3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-05 05:07:14 +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

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

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

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

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

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

@ -6,6 +6,7 @@
*/
import React from 'react';
import clsx from 'clsx';
import styles from './styles.module.css';
import Translate from '@docusaurus/Translate';
import type {Props} from '@theme/LastUpdated';
@ -58,37 +59,33 @@ export default function LastUpdated({
lastUpdatedBy,
}: Props): JSX.Element {
return (
<div className="col text--right">
<em>
<small>
<Translate
id="theme.lastUpdated.lastUpdatedAtBy"
description="The sentence used to display when a page has been last updated, and by who"
values={{
atDate:
lastUpdatedAt && formattedLastUpdatedAt ? (
<LastUpdatedAtDate
lastUpdatedAt={lastUpdatedAt}
formattedLastUpdatedAt={formattedLastUpdatedAt}
/>
) : (
''
),
byUser: lastUpdatedBy ? (
<LastUpdatedByUser lastUpdatedBy={lastUpdatedBy} />
) : (
''
),
}}>
{'Last updated{atDate}{byUser}'}
</Translate>
{process.env.NODE_ENV === 'development' && (
<div>
<small> (Simulated during dev for better perf)</small>
</div>
)}
</small>
</em>
<div className={clsx('col', styles.lastUpdated)}>
<Translate
id="theme.lastUpdated.lastUpdatedAtBy"
description="The sentence used to display when a page has been last updated, and by who"
values={{
atDate:
lastUpdatedAt && formattedLastUpdatedAt ? (
<LastUpdatedAtDate
lastUpdatedAt={lastUpdatedAt}
formattedLastUpdatedAt={formattedLastUpdatedAt}
/>
) : (
''
),
byUser: lastUpdatedBy ? (
<LastUpdatedByUser lastUpdatedBy={lastUpdatedBy} />
) : (
''
),
}}>
{'Last updated{atDate}{byUser}'}
</Translate>
{process.env.NODE_ENV === 'development' && (
<div>
<small> (Simulated during dev for better perf)</small>
</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.
*/
.lastUpdated {
margin-top: 0.2rem;
font-style: italic;
font-size: smaller;
}
@media only screen and (min-width: 997px) {
.lastUpdated {
text-align: right;
}
}
.lastUpdatedDate {
font-weight: bold;
}