Merge pull request #5692 from topcoder-platform/thrive-sep-update1

Thrive sep update1

Author: luizrrodrigues

.circleci/config.yml

@@ -356,7 +356,7 @@ workflows:
           filters:
             branches:
               only:
-                - free
+                - thrive-sep-update1
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global

src/shared/components/Contentful/Article/Article.jsx

@@ -129,6 +129,7 @@ export default class Article extends React.Component {
         uppercaseHeadings: false,
       },
     ).substring(0, CONTENT_PREVIEW_LENGTH);
+    const catsGrouped = _.groupBy(fields.contentCategory, cat => cat.fields.trackParent);
 
     return (
       <React.Fragment>
@@ -215,14 +216,25 @@ export default class Article extends React.Component {
               <div className={theme.separator} />
               <h3 className={theme.label}>categories</h3>
               {/* Cats */}
-              <div className={theme.tagContainer}>
+              <div className={theme.catsWrapper}>
                 {
-                _.map(fields.contentCategory, cat => (
-                  <div className={theme.tagItem} key={cat.sys.id} title={`Search for articles in ${cat.fields.trackParent}:${cat.fields.name} category`}>
-                    <Link to={`${config.TC_EDU_BASE_PATH}${config.TC_EDU_TRACKS_PATH}?${qs.stringify({ track: cat.fields.trackParent, tax: cat.fields.name })}`} key={`${cat.sys.id}`} className={theme.catLink}>{cat.fields.name}</Link>
-                  </div>
-                ))
-              }
+                  _.keys(catsGrouped).map(k => (
+                    <React.Fragment>
+                      <div className={theme.catItem} key={k} title={`Search for articles in ${k} category`}>
+                        <Link to={`${config.TC_EDU_BASE_PATH}${config.TC_EDU_TRACKS_PATH}?${qs.stringify({ track: k })}`} key={k} className={theme.catLink}>{k}</Link>
+                      </div>
+                      <div className={theme.catsContainer}>
+                        {
+                          _.map(catsGrouped[k], cat => (
+                            <div className={theme.catItem} key={cat.sys.id} title={`Search for articles in ${cat.fields.trackParent}:${cat.fields.name} category`}>
+                              <Link to={`${config.TC_EDU_BASE_PATH}${config.TC_EDU_TRACKS_PATH}?${qs.stringify({ track: cat.fields.trackParent, tax: cat.fields.name })}`} key={`${cat.sys.id}`} className={theme.catLink}>{cat.fields.name}</Link>
+                            </div>
+                          ))
+                        }
+                      </div>
+                    </React.Fragment>
+                  ))
+                }
               </div>
               <div className={theme.separator} />
               <h3 className={theme.label}>Tags</h3>

src/shared/components/Contentful/Article/themes/default.scss

@@ -134,6 +134,53 @@
     }
   }
 
+  .catsWrapper {
+    margin-top: 10px;
+
+    .catsContainer {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-wrap: wrap;
+      border-left: 3px solid #e9e9e9;
+      padding-left: 7px;
+      margin-bottom: 5px;
+      margin-left: 6px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .catItem {
+      @include roboto-regular;
+
+      display: inline-block;
+      height: 23px;
+      width: auto;
+      padding: 4px 6px;
+      white-space: nowrap;
+      border: 1px solid #2a2a2a;
+      border-radius: 5px;
+      background-color: #fff;
+      color: #2a2a2a;
+      font-size: 11px;
+      font-weight: 400;
+      letter-spacing: 0.4px;
+      line-height: 15px;
+      text-align: left;
+      margin-bottom: 5px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .catLink {
+        font-weight: 500;
+      }
+    }
+  }
+
   .tagContainer {
     display: flex;
     justify-content: flex-start;
@@ -159,10 +206,6 @@
       letter-spacing: 0.4px;
       line-height: 15px;
       text-align: left;
-
-      .catLink {
-        font-weight: 500;
-      }
     }
   }
 
@@ -425,16 +468,17 @@
   background-color: #e9e9e9;
   flex-direction: column;
   overflow: visible;
+  margin-bottom: 35px;
 
   @include xs-to-sm {
     margin-bottom: 200px;
   }
 
-  @media screen and (min-width: 1024px) and (max-width: 1440px) {
-    margin-bottom: 50px;
+  @media screen and (min-width: 768px) and (max-width: 1440px) {
+    margin-bottom: 108px;
   }
 
-  @media screen and (max-width: 425px) {
+  @media screen and (max-width: 768px) {
     margin-bottom: 300px;
   }
 

src/shared/containers/EDU/Home.jsx

@@ -44,7 +44,7 @@ export default class EDUHome extends React.Component {
 
   render() {
     const { taxonomy } = this.state;
-    const title = 'Topcoder Thrive | Topcoder Community | Topcoder';
+    const title = 'Tutorials And Workshops That Matter | Thrive | Topcoder';
     const description = 'Thrive is our vault of content that we have been gathering over the years. It is full of tutorials and workshops that matter. Grow with us!';
 
     return (
@@ -64,6 +64,7 @@ export default class EDUHome extends React.Component {
           </div>
           <div className={homeTheme.searchBarWrapp}>
             <SearchBar />
+            <div className={homeTheme.infoTextWrap}>Don’t know what a challenge is? <a className={homeTheme.infoTextLink} href="/thrive/articles/all-about-topcoder-challenges-tasks-and-gig-work-opportunities" target="_blank" rel="noreferrer">Find out here</a>.</div>
           </div>
         </div>
         <div className={homeTheme.shapeBanner} />

src/shared/containers/EDU/Search.jsx

@@ -86,7 +86,7 @@ export default class EDUSearch extends React.Component {
     const {
       taxonomy, query, tree, isShowFilter,
     } = this.state;
-    const title = 'Topcoder Thrive | Topcoder Community | Topcoder';
+    const title = 'Tutorials And Workshops That Matter | Thrive | Topcoder';
     const description = 'Thrive is our vault of content that we have been gathering over the years. It is full of tutorials and workshops that matter. Grow with us!';
 
     const metaTags = (

src/shared/containers/EDU/Tracks.jsx

@@ -183,7 +183,7 @@ export default class EDUTracks extends React.Component {
       taxonomy, query, tree, isShowFilter,
       articleCnt, videoCnt, forumCnt,
     } = this.state;
-    const title = 'Topcoder Thrive | Topcoder Community | Topcoder';
+    const title = 'Tutorials And Workshops That Matter | Thrive | Topcoder';
     const description = 'Thrive is our vault of content that we have been gathering over the years. It is full of tutorials and workshops that matter. Grow with us!';
     const metaTags = (
       <MetaTags

src/shared/containers/EDU/styles/home.scss

@@ -87,6 +87,22 @@
         top: 0;
         margin-left: -20px;
       }
+
+      .infoTextWrap {
+        margin-top: 6px;
+        color: #fff;
+        line-height: 36px;
+        font-size: 16px;
+        font-family: Roboto, sans-serif;
+
+        .infoTextLink {
+          text-decoration: underline;
+
+          &:hover {
+            text-decoration: none;
+          }
+        }
+      }
     }
   }