1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<script>
import { GlDrawer } from '@gitlab/ui';
import { __ } from '~/locale';
import FirstPipelineCard from './cards/first_pipeline_card.vue';
import GettingStartedCard from './cards/getting_started_card.vue';
import PipelineConfigReferenceCard from './cards/pipeline_config_reference_card.vue';
import VisualizeAndLintCard from './cards/visualize_and_lint_card.vue';
const DRAWER_CARD_STYLES = ['gl-border-bottom-0', 'gl-pt-6!', 'gl-pb-0!', 'gl-line-height-20'];
export default {
DRAWER_CARD_STYLES,
i18n: {
title: __('Help'),
},
components: {
FirstPipelineCard,
GettingStartedCard,
GlDrawer,
PipelineConfigReferenceCard,
VisualizeAndLintCard,
},
props: {
isVisible: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
drawerCardStyles() {
return '';
},
drawerHeightOffset() {
const wrapperEl = document.querySelector('.content-wrapper');
return wrapperEl ? `${wrapperEl.offsetTop}px` : '';
},
},
methods: {
closeDrawer() {
this.$emit('close-drawer');
},
},
};
</script>
<template>
<gl-drawer
:header-height="drawerHeightOffset"
:open="isVisible"
:z-index="200"
@close="closeDrawer"
>
<template #title>
<h2 class="gl-m-0 gl-font-lg">{{ $options.i18n.title }}</h2>
</template>
<getting-started-card :class="$options.DRAWER_CARD_STYLES" />
<first-pipeline-card :class="$options.DRAWER_CARD_STYLES" />
<visualize-and-lint-card :class="$options.DRAWER_CARD_STYLES" />
<pipeline-config-reference-card :class="$options.DRAWER_CARD_STYLES" />
</gl-drawer>
</template>
|
