fixed responsive for ipad (768px)

Author: nqviet

src/components/Pagination/styles.scss

@@ -6,7 +6,7 @@
   align-items: center;
   justify-content: center;
 
-  @include down($mfe-screen-xs) {
+  @include down(1024px) {
     .per-page {
       width: 60px;
 
@@ -20,17 +20,13 @@
         }
       }
 
-      @include down(375px - 1px) {
-        .label {
-          display: none;
-        }
+      .label {
+        display: none;
       }
     }
 
     .pages {
-      flex: auto;
       margin: 0;
-      justify-content: flex-end;
 
       .page.previous > button,
       .page.next > button {
@@ -44,6 +40,14 @@
       }
     }
   }
+
+  @include down($mfe-screen-xs) {
+    .pages {
+      flex: auto;
+      margin: 0;
+      justify-content: flex-end;
+    }
+  }
 }
 
 .per-page {

src/components/challenge-listing/ChallengeLoading/styles.module.scss

@@ -1,4 +1,5 @@
 @import "~styles/mixins";
+@import "~styles/variables";
 
 @keyframes placeholderAnim {
   0% {
@@ -81,4 +82,19 @@
     height: 42px;
     width: 40px;
   }
+
+  @include down($mfe-screen-sm) {
+    .title {
+      width: 50%;
+      max-width: 100px;
+    }
+    .info {
+      width: 100%;
+      max-width: 200px;
+    }
+  }
+
+  @include down($mfe-screen-xs) {
+    margin: 0;
+  }
 }

src/containers/Challenges/Listing/ChallengeItem/Tags/styles.scss

@@ -2,6 +2,7 @@
 
 .tags {
   margin-top: -5px;
+  min-width: 1px;
 
   > * {
     margin-top: 5px;

src/containers/Challenges/Listing/ChallengeItem/index.jsx

@@ -32,6 +32,13 @@ const ChallengeItem = ({ challenge, onClickTag, onClickTrack, isLoggedIn }) => {
     submissionLink += "?tab=submissions";
   }
 
+  const challengeName = utils.toBreakableWords(
+    challenge.name,
+    w => w.length > 20
+      ? `<span style="word-break: break-all">${w}</span>`
+      : w,
+  );
+
   return (
     <div styleName="challenge-item">
       <div styleName="track">
@@ -46,7 +53,7 @@ const ChallengeItem = ({ challenge, onClickTag, onClickTrack, isLoggedIn }) => {
         <div styleName="name-container">
           <h6 styleName="name">
             <Link to={`${CHALLENGES_URL}/${challenge.id}`}>
-              {challenge.name}
+              <span dangerouslySetInnerHTML={{__html: challengeName}} />
             </Link>
           </h6>
           <PhaseEndDate

src/containers/Challenges/Listing/ChallengeItem/styles.scss

@@ -25,6 +25,10 @@
       .nums {
         width: 0;
         flex: none;
+
+        > * {
+          margin: 0 15px;
+        }
       }
     }
 

src/containers/Challenges/Listing/index.jsx

@@ -123,9 +123,8 @@ const Listing = ({
           </div>
         </div>
       </Panel.Header>
-      {loadingChallenges ? (
-        _.times(3, () => <ChallengeLoading />)
-      ) : challenges.length ? (
+      {loadingChallenges && (_.times(3, () => <ChallengeLoading />))}
+      {!loadingChallenges && (challenges.length ? (
         <Panel.Body>
           {challenges.map((challenge, index) => (
             <div
@@ -152,24 +151,28 @@ const Listing = ({
               />
             </div>
           ))}
-          <div styleName="pagination">
-            <Pagination
-              length={total}
-              pageSize={perPage}
-              pageIndex={utils.pagination.pageToPageIndex(page)}
-              onChange={(event) => {
-                const filterChange = {
-                  page: utils.pagination.pageIndexToPage(event.pageIndex),
-                  perPage: event.pageSize,
-                };
-                updateFilter(filterChange);
-              }}
-            />
-          </div>
         </Panel.Body>
       ) : (
         <ChallengeError />
-      )}
+      ))}
+      <Panel.Body>
+        <div styleName="pagination" style={{
+          display: challenges.length === 0 || loadingChallenges ? 'none' : ''
+        }}>
+          <Pagination
+            length={total}
+            pageSize={perPage}
+            pageIndex={utils.pagination.pageToPageIndex(page)}
+            onChange={(event) => {
+              const filterChange = {
+                page: utils.pagination.pageIndexToPage(event.pageIndex),
+                perPage: event.pageSize,
+              };
+              updateFilter(filterChange);
+            }}
+          />
+        </div>
+      </Panel.Body>
     </Panel>
   );
 };

src/containers/Challenges/index.jsx

@@ -99,9 +99,10 @@ const Challenges = ({
       <Banner />
 
       <div ref={menuRef}>
-        <h1
+        <div
           styleName={`title ${isScreenXs && menuExpanded ? 'menu-title' : ''}`}
           role="button"
+          tabIndex={-1}
           onClick={() => setMenuExpanded(!menuExpanded)}
         >
           <span>{isScreenXs && menuExpanded ? 'EARN' : 'CHALLENGES'}</span>
@@ -120,7 +121,7 @@ const Challenges = ({
               </button>*/}
             </span>
           )}
-        </h1>
+        </div>
 
         {mobileMenu}
       </div>

src/containers/Challenges/styles.scss

@@ -7,6 +7,11 @@
   @include down($mfe-screen-xs) {
     padding: 10px 0;
     background-color: $tc-white;
+
+    :global(.banner) {
+      margin: 0 20px;
+      width: calc(100% - 40px);
+    }
   }
 }
 

src/styles/_utils.scss

@@ -26,7 +26,7 @@
       }
 
       .sidebar-footer {
-        margin: 0 auto;
+        margin: 0 20px;
         margin-bottom: 125px;
       }
 

src/utils/hooks/useCssVariable.js

@@ -7,7 +7,7 @@ export const useCssVariable = (name, transformFunc) => {
     const val = style.getPropertyValue(name);
 
     return transformFunc ? transformFunc(val) : val;
-  }, [name]);
+  }, [name, transformFunc]);
 
   return value;
 };

src/utils/hooks/useTargetSize.js

@@ -2,15 +2,15 @@ import React from "react";
 
 export const useTargetSize = () => {
   const [size, setSize] = React.useState();
-  const resizeObserverRef = React.useRef();
   const ref = React.useRef();
 
   React.useLayoutEffect(() => {
     setSize(ref.current.getBoundingClientRect());
-  }, [ref.current]);
+  }, []);
 
   React.useLayoutEffect(() => {
-    resizeObserverRef.current = new ResizeObserver(entries => {
+    const targetNode = ref.current;
+    const resizeObserver = new ResizeObserver(entries => {
       for (const entry of entries) {
         if (entry.contentBoxSize) {
           const contentBoxSize = Array.isArray(entry.contentBoxSize)
@@ -22,10 +22,10 @@ export const useTargetSize = () => {
         }
       }
     })
-    resizeObserverRef.current.observe(ref.current);
+    resizeObserver.observe(targetNode);
 
     return () => {
-      resizeObserverRef.current.unobserve(ref.current)
+      resizeObserver.unobserve(targetNode)
     };
   }, []);
 

src/utils/index.js

@@ -179,3 +179,11 @@ export function triggerDownload(fileName, blob) {
   link.click();
   link.parentNode.removeChild(link);
 }
+
+export function toBreakableWords(str, breakFunc) {
+  return str.split(' ').map(hyphenWords => {
+    return hyphenWords.split('-').map(word => {
+      return breakFunc(word);
+    }).join('-');
+  }).join(' ');
+}