Skip to content

G
gitlab-ce
Commit 28f6fbac authored by Jannik Lehmann's avatar Jannik Lehmann Committed by Mark Florian
Browse files
Options

Update Styling of Security & Compliance Carousel 

This commit updates the styling of the
Security & Compliance Carousel to match
the design specs.
parent f3a33f16
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 92 deletions
ee/app/assets/javascripts/vue_shared/discover/card_security_discover_app.vue
View file @ 28f6fbac
...@@ -54,20 +54,10 @@ export default { ...@@ -54,20 +54,10 @@ export default {
}, },
data: () => ({ data: () => ({
slide: 0, slide: 0,
textSlide: 0,
carouselImages: [ carouselImages: [
{ securityDependencyImageUrl,
index: 0, securityScanningImageUrl,
imageUrl: securityDependencyImageUrl, securityDashboardImageUrl,
},
{
index: 1,
imageUrl: securityScanningImageUrl,
},
{
index: 2,
imageUrl: securityDashboardImageUrl,
},
], ],
}), }),
computed: { computed: {
...@@ -88,7 +78,6 @@ export default { ...@@ -88,7 +78,6 @@ export default {
label: 'security-discover-carousel', label: 'security-discover-carousel',
property: `sliding${this.slide}-${slide}`, property: `sliding${this.slide}-${slide}`,
}); });
this.textSlide = slide;
}, },
}, },
i18n: { i18n: {
...@@ -99,24 +88,15 @@ export default { ...@@ -99,24 +88,15 @@ export default {
discoverUpgradeLabel: s__('Discover|Upgrade now'), discoverUpgradeLabel: s__('Discover|Upgrade now'),
discoverTrialLabel: s__('Discover|Start a free trial'), discoverTrialLabel: s__('Discover|Start a free trial'),
carouselCaptions: [ carouselCaptions: [
{ s__(
index: 0, 'Discover|Check your application for security vulnerabilities that may lead to unauthorized access, data leaks, and denial of services.',
caption: s__( ),
'Discover|Check your application for security vulnerabilities that may lead to unauthorized access, data leaks, and denial of services.', 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.',
}, ),
{ s__(
index: 1, "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.",
caption: 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__(
"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__( discoverPlanCaption: s__(
'Discover|See the other features of the %{linkStart}gold plan%{linkEnd}', 'Discover|See the other features of the %{linkStart}gold plan%{linkEnd}',
...@@ -127,59 +107,52 @@ export default { ...@@ -127,59 +107,52 @@ export default {
<template> <template>
<div class="discover-box"> <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 }} {{ $options.i18n.discoverTitle }}
</h4> </h2>
<gl-carousel <div class="discover-carousels">
v-model="slide" <gl-carousel
class="discover-carousel" v-model="slide"
: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"
controls no-wrap
:interval="0" controls
indicators :interval="0"
img-width="1440" indicators
img-height="700" @sliding-start="onSlideStart"
@sliding-start="onSlideStart" >
> <gl-carousel-slide
<gl-carousel-slide v-for="{ index, imageUrl } in carouselImages" :key="index" img-blank> v-for="(imageUrl, index) in carouselImages"
<img :key="index"
:src="imageUrl" :img-src="imageUrl"
class="discover-carousel-img w-100 box-shadow-default image-fluid d-block"
/> />
</gl-carousel-slide> </gl-carousel>
</gl-carousel> <gl-carousel
<gl-carousel ref="textCarousel"
ref="textCarousel" v-model="slide"
v-model="textSlide" class="discover-carousel discover-text-carousel gl-mx-auto gl-text-center"
class="discover-carousel discover-text-carousel" no-wrap
:no-wrap="true" :interval="0"
: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">
{{ caption }} <template #img>
</p> {{ caption }}
</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">
<gl-sprintf :message="$options.i18n.discoverPlanCaption">
<template #link="{ content }">
<gl-link
href="https://about.gitlab.com/pricing/saas/feature-comparison/"
target="_blank"
>
{{ content }}
</gl-link>
</template> </template>
</gl-sprintf> </gl-carousel-slide>
</p> </gl-carousel>
<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
href="https://about.gitlab.com/pricing/saas/feature-comparison/"
target="_blank"
>
{{ content }}
</gl-link>
</template>
</gl-sprintf>
</p>
</div>
</div> </div>
<div class="discover-buttons d-flex flex-nowrap flex-row justify-content-between mx-auto my-0"> <div class="discover-buttons d-flex flex-nowrap flex-row justify-content-between mx-auto my-0">
<gl-button <gl-button
......
ee/app/assets/stylesheets/pages/promotions.scss
View file @ 28f6fbac
...@@ -178,9 +178,28 @@ ...@@ -178,9 +178,28 @@
} }
.discover-box { .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 { .discover-title {
margin: 40px auto 2px; margin-top: 40px;
max-width: 500px; margin-bottom: 40px;
}
.discover-carousels {
padding-left: 30px;
padding-right: 30px;
margin-left: auto;
margin-right: auto;
} }
.discover-carousel-img { .discover-carousel-img {
...@@ -198,7 +217,7 @@ ...@@ -198,7 +217,7 @@
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between; justify-content: space-between;
margin: 0 auto; margin: 0 auto;
max-width: 520px; max-width: 280px;
} }
.discover-footer { .discover-footer {
...@@ -221,35 +240,73 @@ ...@@ -221,35 +240,73 @@
} }
.discover-text-carousel { .discover-text-carousel {
max-width: 650px;
.carousel-caption { .carousel-caption {
height: 100%; 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 { .discover-carousel {
margin: 0 auto; margin-bottom: 30px;
max-width: 720px;
.carousel-inner {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.carousel-indicators { .carousel-indicators {
bottom: -20px;
@media (min-width: map-get($grid-breakpoints, lg)) {
bottom: -15px;
}
li { li {
background-color: $gray-200; background-color: $gray-500;
width: 8px; width: 6px;
height: 8px; height: 6px;
border-radius: 100%; border-radius: 100%;
margin-right: 16px; margin-right: 16px;
@media (min-width: map-get($grid-breakpoints, md)) {
width: $gl-spacing-scale-3;
height: $gl-spacing-scale-3;
}
} }
.active { .active {
background-color: $gray-200; background-color: $gray-500;
} }
} }
.carousel-control-prev-icon { .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 { .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 0 → 100644
View file @ 28f6fbac
---
title: Update Styling of Security & Compliance Carousel
merge_request: 50877
author:
type: changed
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7