refactor: improve last updated styles for mobile devices (#2073)

umijs · Apr 17, 2024 · e3ce9b4 · e3ce9b4
1 parent 6072519
commit e3ce9b4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/client/theme-default/slots/ContentFooter/index.less b/src/client/theme-default/slots/ContentFooter/index.less
@@ -33,6 +33,11 @@
 
     dd {
       margin: 0;
+      @media @mobile {
+        .dumi-default-mobile-hidden {
+          display: none;
+        }
+      }
 
       svg {
         margin-inline-end: 4px;

diff --git a/src/client/theme-default/slots/ContentFooter/index.tsx b/src/client/theme-default/slots/ContentFooter/index.tsx
@@ -20,7 +20,7 @@ const ContentFooter: FC = () => {
   const { frontmatter } = useRouteMeta();
   const intl = useIntl();
   const [prev, setPrev] = useState<
-    typeof sidebar[0]['children'][0] | undefined
+    (typeof sidebar)[0]['children'][0] | undefined
   >(undefined);
   const [next, setNext] = useState<typeof prev>(undefined);
   const [isoLastUpdated, setIsoLastUpdated] = useState('');
@@ -31,7 +31,7 @@ const ContentFooter: FC = () => {
   // calculate the previous and next page
   useLayoutEffect(() => {
     if (sidebar) {
-      const items = sidebar.reduce<typeof sidebar[0]['children']>(
+      const items = sidebar.reduce<(typeof sidebar)[0]['children']>(
         (ret, group) => ret.concat(group.children),
         [],
       );
@@ -61,7 +61,9 @@ const ContentFooter: FC = () => {
         {showLastUpdated && (
           <dd>
             <IconClock />
-            <FormattedMessage id="content.footer.last.updated" />
+            <span className="dumi-default-mobile-hidden">
+              <FormattedMessage id="content.footer.last.updated" />
+            </span>
             <time dateTime={isoLastUpdated}>{lastUpdated}</time>
           </dd>
         )}