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

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

@ -82,22 +82,20 @@ 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>
{(lastUpdatedAt || lastUpdatedBy) && (
<LastUpdated
lastUpdatedAt={lastUpdatedAt}
formattedLastUpdatedAt={formattedLastUpdatedAt}
lastUpdatedBy={lastUpdatedBy}
/>
)}
</div> </div>
{(lastUpdatedAt || lastUpdatedBy) && (
<LastUpdated
lastUpdatedAt={lastUpdatedAt}
formattedLastUpdatedAt={formattedLastUpdatedAt}
lastUpdatedBy={lastUpdatedBy}
/>
)}
</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;

59
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,37 +59,33 @@ 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> <Translate
<small> id="theme.lastUpdated.lastUpdatedAtBy"
<Translate description="The sentence used to display when a page has been last updated, and by who"
id="theme.lastUpdated.lastUpdatedAtBy" values={{
description="The sentence used to display when a page has been last updated, and by who" atDate:
values={{ lastUpdatedAt && formattedLastUpdatedAt ? (
atDate: <LastUpdatedAtDate
lastUpdatedAt && formattedLastUpdatedAt ? ( lastUpdatedAt={lastUpdatedAt}
<LastUpdatedAtDate formattedLastUpdatedAt={formattedLastUpdatedAt}
lastUpdatedAt={lastUpdatedAt} />
formattedLastUpdatedAt={formattedLastUpdatedAt} ) : (
/> ''
) : ( ),
'' byUser: lastUpdatedBy ? (
), <LastUpdatedByUser lastUpdatedBy={lastUpdatedBy} />
byUser: lastUpdatedBy ? ( ) : (
<LastUpdatedByUser lastUpdatedBy={lastUpdatedBy} /> ''
) : ( ),
'' }}>
), {'Last updated{atDate}{byUser}'}
}}> </Translate>
{'Last updated{atDate}{byUser}'} {process.env.NODE_ENV === 'development' && (
</Translate> <div>
{process.env.NODE_ENV === 'development' && ( <small> (Simulated during dev for better perf)</small>
<div> </div>
<small> (Simulated during dev for better perf)</small> )}
</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;
} }