Merge pull request #219 from Aylie-Chou/1-feature-header-v2

fix(universal-header): fix ui defect
twreporter · Oct 8, 2021 · 84f2051 · 84f2051
2 parents 0f674a0 + a1592da
commit 84f2051
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 26 deletions.
diff --git a/packages/universal-header/src/components/action-button.js b/packages/universal-header/src/components/action-button.js
@@ -69,6 +69,7 @@ const ActionContainer = styled.div`
   transition: opacity 0.1s;
   transition-delay: 300ms;
   opacity: ${props => (props.isActive ? 1 : 0)};
+  pointer-events: ${props => (props.isActive ? 'auto' : 'none')};
   margin: ${props => arrayToCssShorthand(styles.itemMargin[props.direction])};
   width: 100%;
 
@@ -84,9 +85,11 @@ const ActionContainer = styled.div`
     font-size: ${styles.fontSize.desktop};
     font-weight: ${fonts.weight.bold};
     ${mq.tabletOnly`
+      cursor: default;
       font-size: ${props => styles.fontSize.tablet[props.direction]};
     `}
     ${mq.mobileOnly`
+      cursor: default;
       font-size: ${props => styles.fontSize.mobile[props.direction]};
     `}
   }

diff --git a/packages/universal-header/src/components/channels.js b/packages/universal-header/src/components/channels.js
@@ -12,6 +12,7 @@ import fonts from '../constants/fonts'
 import DropDownMenu from './drop-down-menu'
 import Link from './customized-link'
 // @twreporter
+import mq from '@twreporter/core/lib/utils/media-query'
 import { arrayToCssShorthand } from '@twreporter/core/lib/utils/css'
 // lodash
 import get from 'lodash/get'
@@ -115,7 +116,6 @@ const ListItem = styled.li`
   height: 100%;
   font-size: ${fonts.size.base};
   letter-spacing: 0.5px;
-  cursor: pointer;
   margin: ${arrayToCssShorthand(styles.itemMargin.desktop)};
   flex: 1;
   text-shadow: ${props => props.textShadow};
@@ -149,6 +149,9 @@ const ListItem = styled.li`
       background-color: ${props => props.hoverBgColor};
       color: ${props => props.hoverFontColor};
     }
+    ${mq.tabletAndBelow`
+      cursor: default;
+    `}
   }
 `
 

diff --git a/packages/universal-header/src/components/hamburger-icons.js b/packages/universal-header/src/components/hamburger-icons.js
@@ -35,6 +35,7 @@ const IconContainer = styled.div`
   margin-right: 17px;
   a {
     display: flex;
+    cursor: default;
   }
 
   ${mq.tabletOnly`
@@ -55,7 +56,7 @@ const IconsContainer = styled.div`
 `
 
 const Login = ({ callback }) => {
-  const handleLogin = (releaseBranch) => {
+  const handleLogin = releaseBranch => {
     const redirectURL = window.location.href
     const query = querystring.stringify({
       destination: redirectURL,
@@ -73,11 +74,11 @@ const Login = ({ callback }) => {
     <IconContainer>
       <HeaderContext.Consumer>
         {({ releaseBranch, theme }) => {
-          const [LogInIcon] = themeUtils.selectHamburgerServiceIcons(theme).login
+          const [LogInIcon] = themeUtils.selectHamburgerServiceIcons(
+            theme
+          ).login
           return (
-            <Link
-              onClick={e => handleClick(e, releaseBranch)}
-            >
+            <Link onClick={e => handleClick(e, releaseBranch)}>
               <LogInIcon />
             </Link>
           )
@@ -96,7 +97,7 @@ Login.defaultProps = {
 }
 
 const Logout = ({ callback }) => {
-  const handleLogout = (releaseBranch) => {
+  const handleLogout = releaseBranch => {
     const redirectURL = window.location.href
     const query = querystring.stringify({
       destination: redirectURL,
@@ -114,11 +115,11 @@ const Logout = ({ callback }) => {
     <IconContainer>
       <HeaderContext.Consumer>
         {({ releaseBranch, theme }) => {
-          const [LogOutIcon] = themeUtils.selectHamburgerServiceIcons(theme).logout
+          const [LogOutIcon] = themeUtils.selectHamburgerServiceIcons(
+            theme
+          ).logout
           return (
-            <Link
-              onClick={e => handleClick(e, releaseBranch)}
-            >
+            <Link onClick={e => handleClick(e, releaseBranch)}>
               <LogOutIcon />
             </Link>
           )
@@ -141,11 +142,10 @@ const Search = ({ callback }) => {
     <IconContainer>
       <HeaderContext.Consumer>
         {({ releaseBranch, isLinkExternal, theme }) => {
-          const [SearchIcon] = themeUtils.selectHamburgerServiceIcons(theme).search
-          const link = linkUtils.getSearchLink(
-            isLinkExternal,
-            releaseBranch
-          )
+          const [SearchIcon] = themeUtils.selectHamburgerServiceIcons(
+            theme
+          ).search
+          const link = linkUtils.getSearchLink(isLinkExternal, releaseBranch)
           return (
             <Link {...link} onClick={callback}>
               <SearchIcon />
@@ -170,11 +170,10 @@ const Bookmark = ({ callback }) => {
     <IconContainer>
       <HeaderContext.Consumer>
         {({ releaseBranch, isLinkExternal, theme }) => {
-          const [BookmarkIcon] = themeUtils.selectHamburgerServiceIcons(theme).bookmark
-          const link = linkUtils.getBookmarksLink(
-            isLinkExternal,
-            releaseBranch
-          )
+          const [BookmarkIcon] = themeUtils.selectHamburgerServiceIcons(
+            theme
+          ).bookmark
+          const link = linkUtils.getBookmarksLink(isLinkExternal, releaseBranch)
           return (
             <Link {...link} onClick={callback}>
               <BookmarkIcon />
@@ -195,9 +194,9 @@ Bookmark.defaultProps = {
 }
 
 const HamburgerService = ({ services, callback }) => {
-  const _prepareIconJsx = (service) => {
+  const _prepareIconJsx = service => {
     const serviceKey = service.key
-    switch(serviceKey) {
+    switch (serviceKey) {
       case 'login':
         return <Login callback={callback} key={serviceKey} />
       case 'logout':
@@ -207,7 +206,7 @@ const HamburgerService = ({ services, callback }) => {
       case 'bookmarks':
         return <Bookmark callback={callback} key={serviceKey} />
       default:
-        return null;
+        return null
     }
   }
 
@@ -217,7 +216,7 @@ const HamburgerService = ({ services, callback }) => {
         const { borderColor } = themeUtils.selectHamburgerServiceTheme(theme)
         return (
           <IconsContainer borderColor={borderColor}>
-            { _.map(services, service => _prepareIconJsx(service)) }
+            {_.map(services, service => _prepareIconJsx(service))}
           </IconsContainer>
         )
       }}

diff --git a/packages/universal-header/src/components/mobile-header.js b/packages/universal-header/src/components/mobile-header.js
@@ -23,6 +23,10 @@ const styles = {
     mobile: [24], // px
     tablet: [24, 30, 24, 50], // px
   },
+  hamburgerPadding: {
+    mobile: [24], // px
+    tablet: [24, 30], // px
+  },
   logoHeight: {
     mobile: 26, // px
     tablet: 40, // px
@@ -125,7 +129,12 @@ const HamburgerContainer = styled.div`
 
 const Hamburger = styled.div`
   display: flex;
-  cursor: pointer;
+  position: absolute;
+  right: 0;
+  padding: ${arrayToCssShorthand(styles.hamburgerPadding.mobile)};
+  ${mq.tabletOnly`
+    padding: ${arrayToCssShorthand(styles.hamburgerPadding.tablet)};
+  `}
 `
 
 export default class MobileHeader extends React.PureComponent {

diff --git a/packages/universal-header/src/components/slogan.js b/packages/universal-header/src/components/slogan.js
@@ -19,6 +19,7 @@ const SloganContainer = styled.div`
   font-family: ${fonts.family.serif};
   display: flex;
   align-items: center;
+  cursor: default;
 `
 
 const Slogan = ({ themeFunction }) => {