Merge branch 'restyle_Security_&_Compliance_Carousel' into 'master'

Update Styling of Security & Compliance Carousel

See merge request gitlab-org/gitlab!50877

ee/app/assets/javascripts/vue_shared/discover/card_security_discover_app.vue

@@ -54,20 +54,10 @@ export default {
   },
   data: () => ({
     slide: 0,
-    textSlide: 0,
     carouselImages: [
-      {
-        index: 0,
-        imageUrl: securityDependencyImageUrl,
-      },
-      {
-        index: 1,
-        imageUrl: securityScanningImageUrl,
-      },
-      {
-        index: 2,
-        imageUrl: securityDashboardImageUrl,
-      },
+      securityDependencyImageUrl,
+      securityScanningImageUrl,
+      securityDashboardImageUrl,
     ],
   }),
   computed: {
@@ -88,7 +78,6 @@ export default {
         label: 'security-discover-carousel',
         property: `sliding${this.slide}-${slide}`,
       });
-      this.textSlide = slide;
     },
   },
   i18n: {
@@ -99,24 +88,15 @@ export default {
     discoverUpgradeLabel: s__('Discover|Upgrade now'),
     discoverTrialLabel: s__('Discover|Start a free trial'),
     carouselCaptions: [
-      {
-        index: 0,
-        caption: s__(
+      s__(
         'Discover|Check your application for security vulnerabilities that may lead to unauthorized access, data leaks, and denial of services.',
       ),
-      },
-      {
-        index: 1,
-        caption: s__(
+      s__(
         'Discover|GitLab will perform static and dynamic tests on the code of your application, looking for known flaws and report them in the merge request so you can fix them before merging.',
       ),
-      },
-      {
-        index: 2,
-        caption: s__(
+      s__(
         "Discover|For code that's already live in production, our dashboards give you an easy way to prioritize any issues that are found, empowering your team to ship quickly and securely.",
       ),
-      },
     ],
     discoverPlanCaption: s__(
       'Discover|See the other features of the %{linkStart}gold plan%{linkEnd}',
@@ -127,48 +107,40 @@ export default {
 
 <template>
   <div class="discover-box">
-    <h4 class="discover-title center gl-text-gray-900">
+    <h2 class="discover-title center gl-text-gray-900 gl-mx-auto">
       {{ $options.i18n.discoverTitle }}
-    </h4>
+    </h2>
+    <div class="discover-carousels">
       <gl-carousel
         v-model="slide"
-      class="discover-carousel"
-      :no-wrap="true"
+        class="discover-carousel discover-image-carousel gl-mx-auto gl-text-center gl-border-solid gl-border-1 gl-bg-gray-10"
+        no-wrap
         controls
         :interval="0"
         indicators
-      img-width="1440"
-      img-height="700"
         @sliding-start="onSlideStart"
       >
-      <gl-carousel-slide v-for="{ index, imageUrl } in carouselImages" :key="index" img-blank>
-        <img
-          :src="imageUrl"
-          class="discover-carousel-img w-100 box-shadow-default image-fluid d-block"
+        <gl-carousel-slide
+          v-for="(imageUrl, index) in carouselImages"
+          :key="index"
+          :img-src="imageUrl"
         />
-      </gl-carousel-slide>
       </gl-carousel>
       <gl-carousel
         ref="textCarousel"
-      v-model="textSlide"
-      class="discover-carousel discover-text-carousel"
-      :no-wrap="true"
+        v-model="slide"
+        class="discover-carousel discover-text-carousel gl-mx-auto gl-text-center"
+        no-wrap
         :interval="0"
-      img-width="1440"
-      img-height="200"
-    >
-      <gl-carousel-slide
-        v-for="{ index, caption } in $options.i18n.carouselCaptions"
-        :key="index"
-        img-blank
       >
-        <p class="gl-text-gray-900 gl-text-left">
+        <gl-carousel-slide v-for="caption in $options.i18n.carouselCaptions" :key="caption">
+          <template #img>
             {{ caption }}
-        </p>
+          </template>
         </gl-carousel-slide>
       </gl-carousel>
-    <div class="discover-footer d-flex flex-nowrap flex-row justify-content-between mx-auto my-0">
-      <p class="gl-text-gray-900 text-left mb-5">
+      <div class="discover-footer mx-auto my-0">
+        <p class="gl-text-gray-900 text-center mb-5">
           <gl-sprintf :message="$options.i18n.discoverPlanCaption">
             <template #link="{ content }">
               <gl-link
@@ -181,6 +153,7 @@ export default {
           </gl-sprintf>
         </p>
       </div>
+    </div>
     <div class="discover-buttons d-flex flex-nowrap flex-row justify-content-between mx-auto my-0">
       <gl-button
         class="discover-button-upgrade"

ee/app/assets/stylesheets/pages/promotions.scss

@@ -178,9 +178,28 @@
 }
 
 .discover-box {
+  .discover-image-carousel {
+    border-color: $gray-50;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    max-width: 1000px;
+
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      padding-top: 30px;
+      padding-bottom: 30px;
+    }
+  }
+
   .discover-title {
-    margin: 40px auto 2px;
-    max-width: 500px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .discover-carousels {
+    padding-left: 30px;
+    padding-right: 30px;
+    margin-left: auto;
+    margin-right: auto;
   }
 
   .discover-carousel-img {
@@ -198,7 +217,7 @@
     flex-wrap: nowrap;
     justify-content: space-between;
     margin: 0 auto;
-    max-width: 520px;
+    max-width: 280px;
   }
 
   .discover-footer {
@@ -221,35 +240,73 @@
   }
 
   .discover-text-carousel {
+    max-width: 650px;
+
     .carousel-caption {
       height: 100%;
+      max-width: 500px;
+      margin-left: auto;
+      margin-right: auto;
     }
   }
 
+  .carousel-control-next-icon,
+  .carousel-control-prev-icon {
+    width: 10px;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      width: inherit;
+    }
+  }
+
+  .carousel-control-next {
+    right: -5%;
+  }
+
+  .carousel-control-prev {
+    left: -5%;
+  }
+
   .discover-carousel {
-    margin: 0 auto;
-    max-width: 720px;
+    margin-bottom: 30px;
+
+    .carousel-inner {
+      width: 90%;
+      margin-left: auto;
+      margin-right: auto;
+    }
 
     .carousel-indicators {
+      bottom: -20px;
+
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        bottom: -15px;
+      }
+
       li {
-        background-color: $gray-200;
-        width: 8px;
-        height: 8px;
+        background-color: $gray-500;
+        width: 6px;
+        height: 6px;
         border-radius: 100%;
         margin-right: 16px;
+
+        @media (min-width: map-get($grid-breakpoints, md)) {
+          width: $gl-spacing-scale-3;
+          height: $gl-spacing-scale-3;
+        }
       }
 
       .active {
-        background-color: $gray-200;
+        background-color: $gray-500;
       }
     }
 
     .carousel-control-prev-icon {
-      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23bababa' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
+      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
     }
 
     .carousel-control-next-icon {
-      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23bababa' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
+      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
     }
   }
 }

ee/changelogs/unreleased/restyle_Security_-_Compliance_Carousel.yml

+---
+title: Update Styling of Security & Compliance Carousel
+merge_request: 50877
+author:
+type: changed