diff --git a/.circleci/config.yml b/.circleci/config.yml index 88aca8cf49..9e756e116b 100644 --- a/.circleci/config.yml +++ b/.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 diff --git a/src/shared/components/Contentful/Tabs/Tabs.jsx b/src/shared/components/Contentful/Tabs/Tabs.jsx index c823afdc73..85280aa4bd 100644 --- a/src/shared/components/Contentful/Tabs/Tabs.jsx +++ b/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} >
{ @@ -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, }; diff --git a/src/shared/components/Contentful/Tabs/index.jsx b/src/shared/components/Contentful/Tabs/index.jsx index f9b1da4ca3..1dcee00579 100644 --- a/src/shared/components/Contentful/Tabs/index.jsx +++ b/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} /> ); }} diff --git a/src/shared/components/Contentful/Tabs/themes/pills.scss b/src/shared/components/Contentful/Tabs/themes/pills.scss index 86149011fd..564b427ff8 100644 --- a/src/shared/components/Contentful/Tabs/themes/pills.scss +++ b/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 { diff --git a/src/shared/components/Contentful/Tabs/themes/vertical.scss b/src/shared/components/Contentful/Tabs/themes/vertical.scss index 5ceefa6945..47d6f38857 100644 --- a/src/shared/components/Contentful/Tabs/themes/vertical.scss +++ b/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; + } + } } }