[Fix] Support Tablet Device (800px - 1100px case) (#181)

* refactor: prettier format * feat: update font-size and padding with media screen to navigation * feat: update styles for 800px device width * feat: update styles for 1024px device width
dotnetthailand · Oct 29, 2021 · 873cab7 · 873cab7
1 parent c953792
commit 873cab7
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 33 deletions.
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -63,7 +63,11 @@ const TopNavigation = styled.div`
   -webkit-transition: top 0.5s, bottom 0.5s;
   transition: top 0.5s, bottom 0.5s;
   margin-left: 55px;
-  margin-right: 30px;
+
+  @media only screen and (min-width: 1024px) {
+    margin-right: 30px;
+  }
+
   flex: 1 1 auto;
   padding: 10px 0;
   ${onTablet} {
@@ -182,8 +186,8 @@ const MobileMenuToggle = styled(({ open, toggle, className, ...props }) => {
         background={theme.header.icons.background}
         hoverStroke={theme.header.icons.hover}
         fill={'transparent'}
-        stroke={open? theme.header.icons.hover : theme.header.icons.stroke}
-        icon={open? X: Menu}
+        stroke={open ? theme.header.icons.hover : theme.header.icons.stroke}
+        icon={open ? X : Menu}
         onClick={toggle}
         {...props}
       />
@@ -273,7 +277,7 @@ const Header = ({ setShowSearch, location, themeProvider, show, toggleFullscreen
       return (
         <>
           {config.features.fullScreenMode.enabled &&
-          config.features.fullScreenMode.enabled === true ? (
+            config.features.fullScreenMode.enabled === true ? (
             <FullScreenHeader show={!show} css={hiddenMobile}>
               <FullScreenClose toggle={toggleFullscreenMode} />
               {DarkModeButton}
@@ -303,7 +307,7 @@ const Header = ({ setShowSearch, location, themeProvider, show, toggleFullscreen
               </SocialButtonsWrapper>
               <RssIcon {...iconBaseProps} />
               {config.features.fullScreenMode.enabled &&
-              config.features.fullScreenMode.enabled === true ? (
+                config.features.fullScreenMode.enabled === true ? (
                 <FullScreenEnter toggle={toggleFullscreenMode} css={hiddenMobile} />
               ) : (
                 ''
@@ -315,7 +319,7 @@ const Header = ({ setShowSearch, location, themeProvider, show, toggleFullscreen
 
           {isMobile() ? (
             <MobileNavigation css={visibleMobile} show={menuOpen}>
-              <Sidebar location={location} show={true} menuOpen={menuOpen}/>
+              <Sidebar location={location} show={true} menuOpen={menuOpen} />
               <Navigation links={headerLinks} />
 
               <SocialButtonsWrapper css={visibleMobile}>

diff --git a/src/components/Header/logo.js b/src/components/Header/logo.js
@@ -14,16 +14,14 @@ const logoStyle = (theme) => css`
     min-height: 40px;
   }
   img {
-    height: 40px;
+    height: 32px;
+    margin-right: 8px
     margin-right: 16px;
     display: inline-block;
-    ${onTablet} {
+
+    @media only screen and (min-width: 1024px) {
       height: 40px;
     }
-    ${onMobile} {
-      margin-right: 8px;
-      height: 32px;
-    }
   }
 
   span {
@@ -59,17 +57,21 @@ const Logo = styled(({ className, link, img, title }) => {
     <div className={className}>
       <LogoWrapper>
         <Link to={link} css={logoStyle(theme)}>
-          <img css={{display: 'inline-block'}} src={img} alt={'logo'} loading={'lazy'} />
-          <span css={{display: 'inline-block'}} dangerouslySetInnerHTML={{ __html: title }} />
+          <img css={{ display: 'inline-block' }} src={img} alt={'logo'} loading={'lazy'} />
+          <span css={{ display: 'inline-block' }} dangerouslySetInnerHTML={{ __html: title }} />
         </Link>
       </LogoWrapper>
     </div>
   );
 })`
-  min-width: ${(props) => props.theme.layout.leftWidth};
   display: flex;
   align-items: center;
-  padding-right: 80px;
+
+  @media only screen and (min-width: 1024px) {
+    min-width: ${(props) => props.theme.layout.leftWidth};
+    padding-right: 80px;
+  }
+
   ${onMobile} {
     border-right: none;
     min-width: auto;

diff --git a/src/components/Header/navigation.js b/src/components/Header/navigation.js
@@ -4,24 +4,24 @@ import { onMobile } from '../../styles/responsive';
 
 const Navigation = styled(({ className, links }) => {
   return (
-    <nav css={{display: 'flex'}}>
+    <nav css={{ display: 'flex' }}>
       <ul className={className}>
         {links
           ? links.map((link, key) => {
-              const openRule = link.external ? '_blank' : '_self';
-              if (link.link !== '' && link.text !== '') {
-                return (
-                  <li key={key}>
-                    <a
-                      href={link.link}
-                      target={openRule}
-                      rel="noopener"
-                      dangerouslySetInnerHTML={{ __html: link.text }}
-                    />
-                  </li>
-                );
-              }
-            })
+            const openRule = link.external ? '_blank' : '_self';
+            if (link.link !== '' && link.text !== '') {
+              return (
+                <li key={key}>
+                  <a
+                    href={link.link}
+                    target={openRule}
+                    rel="noopener"
+                    dangerouslySetInnerHTML={{ __html: link.text }}
+                  />
+                </li>
+              );
+            }
+          })
           : null}
       </ul>
     </nav>
@@ -70,11 +70,22 @@ const Navigation = styled(({ className, links }) => {
       font-family: 'Roboto';
       position: relative;
       color: ${(props) => props.theme.header.font.base};
-      font-size: 16px;
+      font-size: 12px;
       font-weight: 500;
       line-height: 1em;
       opacity: 1;
-      padding: 10px 15px;
+      padding: 3px 4px;
+
+      @media only screen and (min-width: 1024px) {
+        font-size: 14px;
+        padding: 6px 8px;
+      }
+
+      @media only screen and (min-width: 1280px) {
+        font-size: 16px;
+        padding: 10px 15px;
+      }
+
       &:hover {
         color: ${(props) => props.theme.header.font.hover};
       }