Merge pull request #5818 from topcoder-platform/contentful-tabs-mobile

Contentful tabs mobile

Author: luizrrodrigues

.circleci/config.yml

@@ -342,7 +342,7 @@ workflows:
           filters:
             branches:
               only:
-                - develop
+                - free
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      
@@ -363,7 +363,7 @@ workflows:
           filters:
             branches:
               only:
-                - thrive-spooky1-p0-2
+                - free
       # This is stage env for production QA releases
       - "build-prod-staging":
           context : org-global         

src/shared/components/Contentful/Tabs/Tabs.jsx

@@ -87,6 +87,7 @@ export default class TabsItemsLoader extends Component {
       theme,
       tabId,
       themeName,
+      forceRenderTabPanel,
     } = this.props;
     const { tabIndex, mobileTabsShow } = this.state;
 
@@ -102,7 +103,7 @@ export default class TabsItemsLoader extends Component {
             selectedIndex={tabIndex}
             selectedTabClassName={theme.selected}
             onSelect={tIndx => this.setState({ tabIndex: tIndx, mobileTabsShow: false })}
-            forceRenderTabPanel
+            forceRenderTabPanel={forceRenderTabPanel}
           >
             <div className={theme.tabListWrap}>
               {
@@ -230,6 +231,7 @@ TabsItemsLoader.defaultProps = {
   selected: 0,
   spaceName: null,
   environment: null,
+  forceRenderTabPanel: true,
 };
 
 TabsItemsLoader.propTypes = {
@@ -241,4 +243,5 @@ TabsItemsLoader.propTypes = {
   theme: PT.shape().isRequired,
   tabId: PT.string.isRequired,
   themeName: PT.string.isRequired,
+  forceRenderTabPanel: PT.bool,
 };

src/shared/components/Contentful/Tabs/index.jsx

@@ -36,6 +36,7 @@ function ContentfulTabs(props) {
             theme={TAB_THEMES[fields.theme || 'Default']}
             tabId={fields.urlQueryName || id}
             themeName={fields.theme}
+            forceRenderTabPanel={fields.forceRenderTabPanel}
           />
         );
       }}

src/shared/components/Contentful/Tabs/themes/pills.scss

@@ -22,9 +22,9 @@ $text-color-black: #262628;
   border-bottom: none;
 
   @include xs-to-sm {
-    -webkit-flex-direction: column; /* Safari */
-    flex-direction: column;
+    overflow: auto;
     align-items: center;
+    justify-content: flex-start;
   }
 }
 
@@ -38,9 +38,11 @@ $text-color-black: #262628;
   cursor: pointer;
   border-radius: 15px;
   padding: 0 15px;
+  white-space: nowrap;
 
   @include xs-to-sm {
     margin: 2px;
+    padding: 0 25px;
   }
 
   &:hover {

src/shared/components/Contentful/Tabs/themes/vertical.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 @import '~styles/mixins';
 
 $text-color-black: #262628;
@@ -11,6 +12,10 @@ $gray-border-color: #e9e9e9;
   display: flex;
   max-width: $screen-lg;
   margin: auto;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
 }
 
 .tablist {
@@ -24,9 +29,18 @@ $gray-border-color: #e9e9e9;
   border-right: 5px solid $gray-border-color;
   margin-right: 58px;
   padding: 7px 0;
+
+  @media (max-width: 768px) {
+    flex-direction: row;
+    border-right: none;
+    margin-right: 0;
+    margin-bottom: 15px;
+    overflow: auto;
+    padding: 0;
+  }
 }
 
-.tab {
+li.tab {
   text-align: left;
   color: $text-color-black;
   font-size: 16px;
@@ -35,6 +49,16 @@ $gray-border-color: #e9e9e9;
   cursor: pointer;
   padding-right: 30px;
 
+  @media (max-width: 768px) {
+    padding-right: 20px;
+    border-bottom: 5px solid $gray-border-color;
+    min-width: auto !important;
+
+    &:first-child {
+      padding-left: 7px;
+    }
+  }
+
   &:hover,
   &.selected {
     font-weight: 700;
@@ -52,6 +76,29 @@ $gray-border-color: #e9e9e9;
       border-radius: 5px;
       border-top: 1px solid white;
       border-bottom: 1px solid white;
+
+      @media (max-width: 768px) {
+        display: none;
+      }
+    }
+
+    p {
+      position: relative;
+      display: inline-block;
+
+      &::after {
+        @media (max-width: 768px) {
+          content: '';
+          background: $selected-color;
+          height: 5px;
+          width: 100%;
+          display: flex;
+          position: absolute;
+          border-radius: 15%;
+          border-left: 2px solid white;
+          border-right: 2px solid white;
+        }
+      }
     }
   }