Merge pull request #498 from us3r-network/F-mobileAndCastCardOptimiza…

…tion-shixuewen F mobile and cast card optimization shixuewen
degencast · Jan 26, 2024 · 5bf6fdd · 5bf6fdd
2 parents 282ea5e + a4554d7
commit 5bf6fdd
Show file tree

Hide file tree

Showing 11 changed files with 149 additions and 222 deletions.
diff --git a/apps/u3/src/components/layout/Nav.tsx b/apps/u3/src/components/layout/Nav.tsx
@@ -5,13 +5,14 @@
  * @LastEditTime: 2023-10-30 14:54:49
  * @Description: file description
  */
-import { useCallback, useRef, useState } from 'react';
+import { ComponentPropsWithRef, useCallback, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { isMobile } from 'react-device-detect';
 import useLogin from '../../hooks/shared/useLogin';
 import { CustomNavObject, navs } from '../../route/nav';
 import useRoute from '../../route/useRoute';
+import { cn } from '@/lib/utils';
 
 type Props = {
   onlyIcon?: boolean;
@@ -72,7 +73,7 @@ export default function Nav({ onlyIcon }: Props) {
           isActive={isActive}
           onClick={() => navigate(nav.route.path)}
         >
-          <PcNavItemIconBox isActive={isActive}>{nav.icon}</PcNavItemIconBox>
+          <NavItemIconBox isActive={isActive}>{nav.icon}</NavItemIconBox>
           {!isMobile && renderNavItemText(nav)}
         </PcNavItem>
       );
@@ -116,9 +117,9 @@ export default function Nav({ onlyIcon }: Props) {
                 isActive={groupIsActive}
                 onClick={() => handleGroupClick(item.key)}
               >
-                <PcNavItemIconBox isActive={groupIsActive}>
+                <NavItemIconBox isActive={groupIsActive}>
                   {item.icon}
-                </PcNavItemIconBox>
+                </NavItemIconBox>
                 {!isMobile && renderNavItemText(item)}
               </PcNavItem>
               <GroupChildrenBox>
@@ -179,16 +180,36 @@ export const PcNavItem = styled.div<{ isActive?: boolean; disabled?: boolean }>`
       cursor: not-allowed;
     `};
 `;
-export const PcNavItemIconBox = styled.div<{ isActive?: boolean }>`
-  flex-shrink: 0;
+export function NavItemIconBox({
+  isActive,
+  className,
+  children,
+  ...props
+}: ComponentPropsWithRef<'div'> & { isActive?: boolean }) {
+  return (
+    <div
+      className={cn(
+        'flex-shrink-0 transition-all ease-out delay-300 relative',
+        className,
+        'max-sm:w-[24px] max-sm:h-[24px]'
+      )}
+      {...props}
+    >
+      <NavItemIconInner isActive={isActive}>{children}</NavItemIconInner>
+    </div>
+  );
+}
+export const NavItemIconInner = styled.div<{ isActive?: boolean }>`
+  width: 100%;
+  height: 100%;
   svg {
+    width: 100%;
+    height: 100%;
     path {
       stroke: ${({ isActive }) => (isActive ? `#fff` : '#718096')};
       transition: all 0.3s ease-out;
     }
   }
-  transition: all 0.3s ease-out;
-  position: relative;
 `;
 export const PcNavItemTextBox = styled.div`
   overflow: hidden;

diff --git a/apps/u3/src/components/layout/menu.tsx b/apps/u3/src/components/layout/menu.tsx
@@ -9,7 +9,7 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 import { useMemo, useState } from 'react';
 import LoginButton from './LoginButton';
-import Nav, { NavWrapper, PcNavItem, PcNavItemIconBox } from './Nav';
+import Nav, { NavWrapper, PcNavItem, NavItemIconBox } from './Nav';
 import { ReactComponent as LogoIconSvg } from '../common/assets/imgs/logo-icon.svg';
 import { ReactComponent as MessageChatSquareSvg } from '../common/assets/svgs/message-chat-square.svg';
 import { ReactComponent as ContactUsSvg } from '../common/assets/svgs/contact-us.svg';
@@ -125,9 +125,9 @@ function ContactUsButton() {
           switchNavModal(NavModalName.ContactUs);
         }}
       >
-        <PcNavItemIconBox isActive={openContactUsModal}>
+        <NavItemIconBox isActive={openContactUsModal}>
           <ContactUsSvg />
-        </PcNavItemIconBox>
+        </NavItemIconBox>
         {renderNavItemText('Contact US')}
       </PcNavItem>
       <ContactUsModal />
@@ -146,9 +146,9 @@ function MessageButton() {
           switchNavModal(NavModalName.Message);
         }}
       >
-        <PcNavItemIconBox isActive={openMessageModal}>
+        <NavItemIconBox isActive={openMessageModal}>
           <MessageChatSquareSvg />
-        </PcNavItemIconBox>
+        </NavItemIconBox>
         {renderNavItemText('Message')}
       </PcNavItem>
       <MessageModal />

diff --git a/apps/u3/src/components/notification/MobileNotificationNavBtn.tsx b/apps/u3/src/components/notification/MobileNotificationNavBtn.tsx
@@ -1,7 +1,7 @@
 import { useIsAuthenticated } from '@us3r-network/auth-with-rainbowkit';
 import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { PcNavItem, PcNavItemIconBox } from '../layout/Nav';
+import { PcNavItem, NavItemIconBox } from '../layout/Nav';
 import { ReactComponent as BellSvg } from '../../route/svgs/bell.svg';
 import {
   useNotificationStore,
@@ -58,7 +58,7 @@ function NotificationButtonStyled({
 }) {
   return (
     <PcNavItem isActive={isActive} onClick={onClick}>
-      <PcNavItemIconBox isActive={isActive}>
+      <NavItemIconBox isActive={isActive}>
         <BellSvg />
         {unreadCount > 0 && (
           <div
@@ -75,7 +75,7 @@ function NotificationButtonStyled({
             "
           />
         )}
-      </PcNavItemIconBox>
+      </NavItemIconBox>
     </PcNavItem>
   );
 }
diff --git a/apps/u3/src/components/notification/NotificationNavBtn.tsx b/apps/u3/src/components/notification/NotificationNavBtn.tsx
@@ -6,7 +6,7 @@
  * @Description: file description
  */
 import { useIsAuthenticated } from '@us3r-network/auth-with-rainbowkit';
-import { PcNavItem, PcNavItemIconBox } from '../layout/Nav';
+import { PcNavItem, NavItemIconBox } from '../layout/Nav';
 import { ReactComponent as BellSvg } from '../../route/svgs/bell.svg';
 import {
   useNotificationStore,
@@ -63,7 +63,7 @@ function NotificationButtonStyled({
   const { renderNavItemText } = useNav();
   return (
     <PcNavItem isActive={isActive} onClick={onClick}>
-      <PcNavItemIconBox isActive={isActive}>
+      <NavItemIconBox isActive={isActive}>
         <BellSvg />
         {unreadCount > 0 && (
           <div
@@ -80,7 +80,7 @@ function NotificationButtonStyled({
             "
           />
         )}
-      </PcNavItemIconBox>
+      </NavItemIconBox>
       {renderNavItemText(`Notifications`)}
       {unreadCount > 0 && (
         <div

diff --git a/apps/u3/src/components/save/SaveExploreListItem.tsx b/apps/u3/src/components/save/SaveExploreListItem.tsx
@@ -1,6 +1,5 @@
 import styled, { StyledComponentPropsWithRef } from 'styled-components';
 import { defaultFormatFromNow } from '../../utils/shared/time';
-import EllipsisText from '../common/text/EllipsisText';
 import LinkBox from '../news/contents/LinkBox';
 import type { SaveExploreListItemData } from './SaveExploreList';
 
@@ -17,12 +16,16 @@ export default function SaveExploreListItem({
     <Wrapper {...props}>
       <ListItemInner>
         <IconLink text={data.url} logo={data?.logo} className="iconLink" />
-        <TitleText row={4}>{data.title || data.url}</TitleText>
-        {!!data?.createAt && (
-          <TimeText className="timeText">
-            {defaultFormatFromNow(data.createAt)}
-          </TimeText>
-        )}
+        <div className="flex-1 flex flex-col justify-between gap-[20px] max-sm:flex-row">
+          <div className="flex-[1] font-medium text-[16px] leading-[19px] text-[#ffffff] line-clamp-4 max-sm:line-clamp-1">
+            {data.title || data.url}
+          </div>
+          {!!data?.createAt && (
+            <TimeText className="timeText">
+              {defaultFormatFromNow(data.createAt)}
+            </TimeText>
+          )}
+        </div>
       </ListItemInner>
     </Wrapper>
   );
@@ -53,14 +56,6 @@ const ListItemInner = styled.div`
   gap: 20px;
 `;
 
-const TitleText = styled(EllipsisText)`
-  flex: 1;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 20px;
-  color: #ffffff;
-`;
-
 const TimeText = styled.span`
   font-weight: 400;
   font-size: 14px;
@@ -94,22 +89,4 @@ const IconLink = styled(LinkBox)`
 export const SaveExploreListItemMobile = styled(SaveExploreListItem)`
   padding: 10px;
   height: auto;
-
-  & > div {
-    position: relative;
-  }
-
-  .timeText {
-    position: absolute;
-    right: 10px;
-    bottom: 2px;
-  }
-
-  .bottomBox {
-    padding-right: 100px;
-    .iconLink {
-      padding: 0;
-      height: auto;
-    }
-  }
 `;