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

facebook · Jun 2, 2021 · d2e4e60 · d2e4e60
1 parent 15d4519
commit d2e4e60
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 44 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
@@ -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>

diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css
@@ -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;

diff --git a/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx b/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx
@@ -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>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/LastUpdated/styles.module.css b/packages/docusaurus-theme-classic/src/theme/LastUpdated/styles.module.css
@@ -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;
 }