diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue')
-rw-r--r-- | app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue | 17 |
1 files changed, 14 insertions, 3 deletions
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue index 65547af3913..44d7807639d 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue @@ -1,5 +1,5 @@ <script> -import { GlIcon, GlSprintf, GlBadge } from '@gitlab/ui'; +import { GlIcon, GlSprintf, GlBadge, GlResizeObserverDirective } from '@gitlab/ui'; import { GlBreakpointInstance } from '@gitlab/ui/dist/utils'; import { numberToHumanSize } from '~/lib/utils/number_utils'; import { __ } from '~/locale'; @@ -21,6 +21,9 @@ export default { GlBadge, TimeAgoTooltip, }, + directives: { + GlResizeObserver: GlResizeObserverDirective, + }, i18n: { packageInfo: __('v%{version} published %{timeAgo}'), }, @@ -60,18 +63,26 @@ export default { }, }, mounted() { - this.isDesktop = GlBreakpointInstance.isDesktop(); + this.checkBreakpoints(); }, methods: { dynamicSlotName(index) { return `metadata-tag${index}`; }, + checkBreakpoints() { + this.isDesktop = GlBreakpointInstance.isDesktop(); + }, }, }; </script> <template> - <title-area :title="packageEntity.name" :avatar="packageIcon" data-qa-selector="package_title"> + <title-area + v-gl-resize-observer="checkBreakpoints" + :title="packageEntity.name" + :avatar="packageIcon" + data-qa-selector="package_title" + > <template #sub-header> <gl-icon name="eye" class="gl-mr-3" /> <span data-testid="sub-header"> |