Commit 399890ac authored by Rayana Verissimo's avatar Rayana Verissimo Committed by Nathan Friend

Resolve "Too much x-axis padding on the Environments Dashboard"

parent 659f5859
---
title: Resolve incorrect x-axis padding on the Environments Dashboard
merge_request: 32533
author:
type: fixed
......@@ -127,7 +127,7 @@ export default {
</script>
<template>
<div class="operations-dashboard">
<div class="environments-dashboard">
<gl-modal
:modal-id="$options.modalId"
:title="$options.addProjectsModalHeader"
......@@ -169,21 +169,21 @@ export default {
>
<template #readMoreLink>
<gl-link :href="environmentsDashboardHelpPath" target="_blank" rel="noopener noreferrer">
{{ s__('EnvironmentsDashboard|Read more.') }}
{{ s__('EnvironmentsDashboard|More information') }}
</gl-link>
</template>
</gl-sprintf>
</p>
<div class="prepend-top-default">
<div v-if="projects.length" class="dashboard-cards">
<div v-for="project in projects" :key="project.id" class="column prepend-top-default">
<div v-if="projects.length">
<div v-for="project in projects" :key="project.id">
<project-header :project="project" @remove="removeProject" />
<div class="row">
<div class="row prepend-top-default no-gutters mx-n2">
<environment
v-for="environment in project.environments"
:key="environment.id"
:environment="environment"
class="col-12 col-md-6 col-xl-4 px-2 prepend-top-default"
class="col-12 col-md-6 col-xl-4 px-2"
/>
</div>
</div>
......
......@@ -127,7 +127,7 @@ export default {
<div :class="cardClasses" class="dashboard-card-body card-body">
<div v-if="lastDeployment" class="row">
<div class="col-1 align-self-center">
<div class="col-1 align-self-center px-3">
<user-avatar-link
v-if="user"
:link-href="user.path"
......@@ -162,7 +162,7 @@ export default {
</div>
<div
class="col-sm-4 mt-0 pl-5 pl-sm-0 offset-1 offset-sm-0 text-sm-right align-self-center col-12 d-sm-block"
class="col-sm-3 mt-0 pl-6 pr-0 pl-sm-0 offset-1 offset-sm-0 text-sm-right align-self-center col-12 d-sm-block"
>
<time-ago
v-if="shouldShowTimeAgo"
......
......@@ -33,7 +33,7 @@ export default {
<template>
<div
class="d-flex align-items-center page-title-holder text-secondary justify-content-between pb-2"
class="d-flex align-items-center page-title-holder text-secondary justify-content-between pb-2 mb-3"
>
<div class="d-flex align-items-center">
<project-avatar :project="project.namespace" :size="20" class="flex-shrink-0" />
......
......@@ -2,7 +2,7 @@
exports[`dashboard should match the snapshot 1`] = `
<div
class="operations-dashboard"
class="environments-dashboard"
>
<gl-modal-stub
modalclass=""
......@@ -57,7 +57,7 @@ exports[`dashboard should match the snapshot 1`] = `
target="_blank"
>
Read more.
More information
</gl-link-stub>
</p>
......
......@@ -16,7 +16,7 @@ exports[`Environment matchs the snapshot 1`] = `
class="row"
>
<div
class="col-1 align-self-center"
class="col-1 align-self-center px-3"
>
<user-avatar-link-stub
imgalt=""
......@@ -63,7 +63,7 @@ exports[`Environment matchs the snapshot 1`] = `
</div>
<div
class="col-sm-4 mt-0 pl-5 pl-sm-0 offset-1 offset-sm-0 text-sm-right align-self-center col-12 d-sm-block"
class="col-sm-3 mt-0 pl-6 pr-0 pl-sm-0 offset-1 offset-sm-0 text-sm-right align-self-center col-12 d-sm-block"
>
<time-ago-stub
time="2019-02-20T16:15:40.122Z"
......
......@@ -2,7 +2,7 @@
exports[`Project Header matches the snapshot 1`] = `
<div
class="d-flex align-items-center page-title-holder text-secondary justify-content-between pb-2"
class="d-flex align-items-center page-title-holder text-secondary justify-content-between pb-2 mb-3"
>
<div
class="d-flex align-items-center"
......
......@@ -76,14 +76,14 @@ describe('dashboard', () => {
it('renders the message', () => {
expect(trimText(message.text())).toBe(
'This dashboard displays a maximum of 7 projects and 3 environments per project. Read more.',
'This dashboard displays a maximum of 7 projects and 3 environments per project. More information',
);
});
it('includes the correct documentation link in the message', () => {
const helpLink = message.find(GlLink);
expect(helpLink.text()).toBe('Read more.');
expect(helpLink.text()).toBe('More information');
expect(helpLink.attributes('href')).toBe(propsData.environmentsDashboardHelpPath);
expect(helpLink.attributes('rel')).toBe('noopener noreferrer');
});
......
......@@ -8468,7 +8468,7 @@ msgstr ""
msgid "EnvironmentsDashboard|More actions"
msgstr ""
msgid "EnvironmentsDashboard|Read more."
msgid "EnvironmentsDashboard|More information"
msgstr ""
msgid "EnvironmentsDashboard|Remove"
......
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