From c20aadbf6c7cdea36094df64dc495b3ccabcdfce Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Fri, 2 Jul 2021 14:19:51 +0300 Subject: [PATCH 1/3] desktop version --- .../components/Contentful/Tabs/Tabs.jsx | 2 + .../Contentful/Tabs/themes/underline-box.scss | 112 ++++++++++++++++++ 2 files changed, 114 insertions(+) create mode 100644 src/shared/components/Contentful/Tabs/themes/underline-box.scss diff --git a/src/shared/components/Contentful/Tabs/Tabs.jsx b/src/shared/components/Contentful/Tabs/Tabs.jsx index 12dc1fcef0..75bde60b27 100644 --- a/src/shared/components/Contentful/Tabs/Tabs.jsx +++ b/src/shared/components/Contentful/Tabs/Tabs.jsx @@ -26,6 +26,7 @@ import underlineTheme from './themes/underline.scss'; import underlineDarkTheme from './themes/underline-dark.scss'; import verticalTheme from './themes/vertical.scss'; import pillsTheme from './themes/pills.scss'; +import underlineBoxTheme from './themes/underline-box.scss'; export const TAB_THEMES = { Default: defaultTheme, @@ -36,6 +37,7 @@ export const TAB_THEMES = { 'Underline dark': underlineDarkTheme, Vertical: verticalTheme, Pills: pillsTheme, + 'Underline box': underlineBoxTheme, }; export default class TabsItemsLoader extends Component { diff --git a/src/shared/components/Contentful/Tabs/themes/underline-box.scss b/src/shared/components/Contentful/Tabs/themes/underline-box.scss new file mode 100644 index 0000000000..bb6f8c9084 --- /dev/null +++ b/src/shared/components/Contentful/Tabs/themes/underline-box.scss @@ -0,0 +1,112 @@ +@import "~styles/mixins"; + +$container-background-gray: #ebebeb; +$text-color-black: #262628; +$text-color-gray: #888894; +$text-color-pannel: #4a4a4a; + +.container { + @include roboto-regular; + + margin: auto; +} + +.tabListWrap { + display: flex; + justify-content: center; + + .tablist { + @include roboto-regular; + + display: flex; + flex-direction: row; + justify-content: center; + list-style-type: none; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06); + margin: auto; + min-height: 60px; + border-radius: 30px; + align-items: center; + background-color: white; + padding: 0 25px; + + @include xs-to-sm { + overflow-x: auto; + white-space: nowrap; + border: none; + flex-direction: column; + overflow: hidden; + } + + @media (max-width: 425px) { + justify-content: space-between; + } + } +} + +.tab { + text-align: center; + margin: 0 25px; + color: #555555; + font-family: Barlow, sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 20px; + padding-bottom: 5px; + cursor: pointer; + margin-bottom: -5px; + position: relative; + + @include xs-to-sm { + margin: 0; + } + + &:hover, + &.selected { + color: #2a2a2a; + + &::after { + content: ''; + border-radius: 1000vw; + background: #43d7b0; + height: 3px; + width: 15px; + position: absolute; + bottom: 0; + left: calc(50% - 7px); + border-left: 1px solid #fff; + border-right: 1px solid #fff; + + @include xs-to-sm { + width: calc(100% - 36px); + bottom: -5px; + } + } + } + + p { + small { + color: #888894; + font-size: 13px; + font-weight: 400; + line-height: 25px; + text-align: left; + } + + strong { + font-weight: bold; + } + } +} + +.tabpannel { + display: none; +} + +.selectedTabPanel { + display: block; + + @include xs-to-sm { + padding: 0 15px; + } +} From 7cd1559f2d8dfec33520bcb41199a893a2d87f6c Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Sat, 3 Jul 2021 16:26:34 +0300 Subject: [PATCH 2/3] final tweaks --- .../components/Contentful/Tabs/Tabs.jsx | 37 +++++++++- .../components/Contentful/Tabs/index.jsx | 1 + .../Contentful/Tabs/themes/underline-box.scss | 72 ++++++++++++++++--- .../components/Gigs/GigApply/style.scss | 1 + 4 files changed, 100 insertions(+), 11 deletions(-) diff --git a/src/shared/components/Contentful/Tabs/Tabs.jsx b/src/shared/components/Contentful/Tabs/Tabs.jsx index 75bde60b27..c823afdc73 100644 --- a/src/shared/components/Contentful/Tabs/Tabs.jsx +++ b/src/shared/components/Contentful/Tabs/Tabs.jsx @@ -45,6 +45,7 @@ export default class TabsItemsLoader extends Component { super(props); this.state = { tabIndex: props.selected || 0, + mobileTabsShow: false, }; this.updatePageUrl.bind(this); @@ -85,8 +86,9 @@ export default class TabsItemsLoader extends Component { environment, theme, tabId, + themeName, } = this.props; - const { tabIndex } = this.state; + const { tabIndex, mobileTabsShow } = this.state; return ( this.setState({ tabIndex: tIndx })} + onSelect={tIndx => this.setState({ tabIndex: tIndx, mobileTabsShow: false })} forceRenderTabPanel >
- + { + themeName === 'Underline box' ? ( + + ) : null + } + { _.map(data.entries.items, tabItem => ( ); }} diff --git a/src/shared/components/Contentful/Tabs/themes/underline-box.scss b/src/shared/components/Contentful/Tabs/themes/underline-box.scss index bb6f8c9084..589de02776 100644 --- a/src/shared/components/Contentful/Tabs/themes/underline-box.scss +++ b/src/shared/components/Contentful/Tabs/themes/underline-box.scss @@ -6,14 +6,17 @@ $text-color-gray: #888894; $text-color-pannel: #4a4a4a; .container { - @include roboto-regular; - margin: auto; + + @include xs-to-sm { + margin-top: 65px; + } } .tabListWrap { display: flex; justify-content: center; + position: relative; .tablist { @include roboto-regular; @@ -29,17 +32,57 @@ $text-color-pannel: #4a4a4a; align-items: center; background-color: white; padding: 0 25px; + border: 1px solid #e4e4e4; @include xs-to-sm { - overflow-x: auto; white-space: nowrap; - border: none; flex-direction: column; - overflow: hidden; + padding: 28px 15px 0; + align-items: flex-start; + border-radius: 8px; + min-width: 85vw; + overflow: visible; + position: absolute; + z-index: 999; + display: none; // by default + + &.visible { + display: flex; + } + } + } + + .tabListMobileTrigger { + display: none; + justify-content: center; + align-items: center; + background-color: white; + position: absolute; + top: -65px; + width: 85vw; + left: calc(50% - 42.5vw); + outline: none; + border: navajowhite; + min-height: 60px; + font-family: Barlow, sans-serif; + font-size: 16px; + font-weight: 600; + text-transform: uppercase; + border-radius: 30px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06); + color: #2a2a2a; + + @media (max-width: 768px) { + display: flex; } - @media (max-width: 425px) { - justify-content: space-between; + .tabListMobileTriggerSVG, + .tabListMobileTriggerSVGOpen { + margin-left: 9px; + } + + .tabListMobileTriggerSVGOpen { + transform: scaleY(-1); } } } @@ -47,7 +90,7 @@ $text-color-pannel: #4a4a4a; .tab { text-align: center; margin: 0 25px; - color: #555555; + color: #555; font-family: Barlow, sans-serif; font-size: 16px; font-weight: 600; @@ -59,6 +102,19 @@ $text-color-pannel: #4a4a4a; @include xs-to-sm { margin: 0; + margin-bottom: 23px; + padding: 0; + padding-left: 5px; + + &::after { + display: none; + } + + &:hover, + &.selected { + border-left: 3px solid #43d7b0; + margin-left: -3px; + } } &:hover, diff --git a/src/shared/components/Gigs/GigApply/style.scss b/src/shared/components/Gigs/GigApply/style.scss index abcea04f97..2c1a1e603e 100644 --- a/src/shared/components/Gigs/GigApply/style.scss +++ b/src/shared/components/Gigs/GigApply/style.scss @@ -313,6 +313,7 @@ margin-left: 20px; } } + .gig-list-btn { margin-right: 12px; } From 9328e76c0a34c545f2a079a8171756569b616568 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Mon, 5 Jul 2021 12:11:19 +0300 Subject: [PATCH 3/3] ci: on beta --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 832d6f80cd..1f31dd7dad 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -362,7 +362,7 @@ workflows: filters: branches: only: - - free + - new-tabs-theme # This is stage env for production QA releases - "build-prod-staging": context : org-global