diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-19 18:44:42 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-19 18:44:42 +0300 |
commit | 4555e1b21c365ed8303ffb7a3325d773c9b8bf31 (patch) | |
tree | 5423a1c7516cffe36384133ade12572cf709398d /app/assets/javascripts/vue_shared/components/runner_instructions | |
parent | e570267f2f6b326480d284e0164a6464ba4081bc (diff) |
Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/runner_instructions')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue | 41 |
1 files changed, 30 insertions, 11 deletions
diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue b/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue index 795b4f58ac5..1f70644eb2c 100644 --- a/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue +++ b/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue @@ -9,7 +9,9 @@ import { GlIcon, GlLoadingIcon, GlSkeletonLoader, + GlResizeObserverDirective, } from '@gitlab/ui'; +import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import { isEmpty } from 'lodash'; import { __, s__ } from '~/locale'; import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; @@ -33,6 +35,9 @@ export default { GlSkeletonLoader, ModalCopyButton, }, + directives: { + GlResizeObserver: GlResizeObserverDirective, + }, props: { modalId: { type: String, @@ -87,6 +92,7 @@ export default { selectedArchitecture: null, showAlert: false, instructions: {}, + platformsButtonGroupVertical: false, }; }, computed: { @@ -127,6 +133,13 @@ export default { toggleAlert(state) { this.showAlert = state; }, + onPlatformsButtonResize() { + if (bp.getBreakpointSize() === 'xs') { + this.platformsButtonGroupVertical = true; + } else { + this.platformsButtonGroupVertical = false; + } + }, }, i18n: { installARunner: s__('Runners|Install a runner'), @@ -159,17 +172,23 @@ export default { <h5> {{ __('Environment') }} </h5> - <gl-button-group class="gl-mb-3"> - <gl-button - v-for="platform in platforms" - :key="platform.name" - :selected="selectedPlatform && selectedPlatform.name === platform.name" - data-testid="platform-button" - @click="selectPlatform(platform)" + <div v-gl-resize-observer="onPlatformsButtonResize"> + <gl-button-group + :vertical="platformsButtonGroupVertical" + :class="{ 'gl-w-full': platformsButtonGroupVertical }" + class="gl-mb-3" + data-testid="platform-buttons" > - {{ platform.humanReadableName }} - </gl-button> - </gl-button-group> + <gl-button + v-for="platform in platforms" + :key="platform.name" + :selected="selectedPlatform && selectedPlatform.name === platform.name" + @click="selectPlatform(platform)" + > + {{ platform.humanReadableName }} + </gl-button> + </gl-button-group> + </div> </template> <template v-if="hasArchitecureList"> <template v-if="selectedPlatform"> @@ -190,7 +209,7 @@ export default { {{ architecture.name }} </gl-dropdown-item> </gl-dropdown> - <div class="gl-display-flex gl-align-items-center gl-mb-3"> + <div class="gl-sm-display-flex gl-align-items-center gl-mb-3"> <h5>{{ $options.i18n.downloadInstallBinary }}</h5> <gl-button class="gl-ml-auto" |