Final fixes #2367

Author: kkartunov

src/shared/actions/contentful.js

@@ -267,7 +267,6 @@ async function getChallengesBlockDone(blockProps) {
     filter.technologies = block.fields.technologies.join(',');
   }
   const challenges = await challengesService.getChallenges(filter);
-  // console.log('getChallengesBlockDone', block, challenges);
 
   return {
     id,

src/shared/components/Contentful/ChallengesBlock/Card/style.scss

@@ -11,6 +11,7 @@
   margin: 10px;
   padding: 30px;
   text-align: left;
+  min-height: 350px;
 }
 
 .prizes {

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

@@ -18,47 +18,64 @@ export default function ChallengesBlock({
   challenges,
   fields,
 }) {
+  const challengesToRender = challenges.slice(0, fields.limit || 10);
   return (
     <div styleName="container">
       <h1 styleName="title">{fields.title}</h1>
       <div styleName="list">
-        <Carousel
-          dragging={false}
-          slidesToShow={3}
-          styleName="multiContent"
-          renderCenterLeftControls={({ previousSlide }) => (
-            <a
-              onClick={previousSlide}
-              onKeyPress={previousSlide}
-              role="button"
-              tabIndex={0}
-              styleName="control"
-            >
-              <ArrowPrev />
-            </a>
-          )}
-          renderCenterRightControls={({ nextSlide }) => (
-            <a
-              onClick={nextSlide}
-              onKeyPress={nextSlide}
-              role="button"
-              tabIndex={0}
-              styleName="control"
-            >
-              <ArrowNext />
-            </a>
-          )}
-        >
-          {
-            challenges.slice(0, fields.limit || 10).map(challenge => (
-              <Card
-                baseUrl={baseUrl}
-                challenge={challenge}
-                key={challenge.id}
-              />
-            ))
+        {
+            challengesToRender.length > 2 ? (
+              <Carousel
+                dragging={false}
+                slidesToShow={3}
+                styleName="multiContent"
+                framePadding="80px"
+                heightMode="max"
+                cellSpacing={30}
+                autoplay
+                renderCenterLeftControls={({ previousSlide }) => (
+                  <a
+                    onClick={previousSlide}
+                    onKeyPress={previousSlide}
+                    role="button"
+                    tabIndex={0}
+                    styleName="control"
+                  >
+                    <ArrowPrev />
+                  </a>
+                )}
+                renderCenterRightControls={({ nextSlide }) => (
+                  <a
+                    onClick={nextSlide}
+                    onKeyPress={nextSlide}
+                    role="button"
+                    tabIndex={0}
+                    styleName="control"
+                  >
+                    <ArrowNext />
+                  </a>
+                )}
+              >
+                {
+                  challengesToRender.map(challenge => (
+                    <Card
+                      baseUrl={baseUrl}
+                      challenge={challenge}
+                      key={challenge.id}
+                    />
+                  ))
+                }
+              </Carousel>
+            ) : (
+              challengesToRender.map(challenge => (
+                <Card
+                  baseUrl={baseUrl}
+                  challenge={challenge}
+                  key={challenge.id}
+                />
+              ))
+            )
           }
-        </Carousel>
       </div>
       {
         fields.buttonText && fields.buttonUrl ? (

src/shared/components/Contentful/ChallengesBlock/style.scss

@@ -10,7 +10,6 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  margin-bottom: 40px;
 
   @include xs-to-sm {
     flex-direction: column;