Commit 34f925fe authored by Phil Hughes's avatar Phil Hughes

Merge branch '23643-responsive-environment-tables' into 'master'

Responsive environment tables

See merge request !11836
parents e34e5761 7a9c9a25
...@@ -70,7 +70,7 @@ export default { ...@@ -70,7 +70,7 @@ export default {
</span> </span>
</button> </button>
<ul class="dropdown-menu dropdown-menu-align-right"> <ul class="dropdown-menu">
<li v-for="action in actions"> <li v-for="action in actions">
<button <button
type="button" type="button"
......
...@@ -421,14 +421,19 @@ export default { ...@@ -421,14 +421,19 @@ export default {
}; };
</script> </script>
<template> <template>
<tr :class="{ 'js-child-row': model.isChildren }"> <div
<td> :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }">
<div class="table-section section-10" role="gridcell">
<div
v-if="!model.isFolder"
class="table-mobile-header">
Environment
</div>
<a <a
v-if="!model.isFolder" v-if="!model.isFolder"
class="environment-name" class="environment-name flex-truncate-parent table-mobile-content"
:class="{ 'prepend-left-default': model.isChildren }"
:href="environmentPath"> :href="environmentPath">
{{model.name}} <span class="flex-truncate-child">{{model.name}}</span>
</a> </a>
<span <span
v-else v-else
...@@ -461,9 +466,9 @@ export default { ...@@ -461,9 +466,9 @@ export default {
{{model.size}} {{model.size}}
</span> </span>
</span> </span>
</td> </div>
<td class="deployment-column"> <div class="table-section section-10 deployment-column hidden-xs hidden-sm" role="gridcell">
<span v-if="shouldRenderDeploymentID"> <span v-if="shouldRenderDeploymentID">
{{deploymentInternalId}} {{deploymentInternalId}}
</span> </span>
...@@ -478,21 +483,26 @@ export default { ...@@ -478,21 +483,26 @@ export default {
:tooltip-text="deploymentUser.username" :tooltip-text="deploymentUser.username"
/> />
</span> </span>
</td> </div>
<td class="environments-build-cell"> <div class="table-section section-15 hidden-xs hidden-sm" role="gridcell">
<a <a
v-if="shouldRenderBuildName" v-if="shouldRenderBuildName"
class="build-link" class="build-link"
:href="buildPath"> :href="buildPath">
{{buildName}} {{buildName}}
</a> </a>
</td> </div>
<td> <div class="table-section section-25" role="gridcell">
<div
v-if="!model.isFolder"
class="table-mobile-header">
Commit
</div>
<div <div
v-if="!model.isFolder && hasLastDeploymentKey" v-if="!model.isFolder && hasLastDeploymentKey"
class="js-commit-component"> class="js-commit-component table-mobile-content">
<commit-component <commit-component
:tag="commitTag" :tag="commitTag"
:commit-ref="commitRef" :commit-ref="commitRef"
...@@ -501,25 +511,30 @@ export default { ...@@ -501,25 +511,30 @@ export default {
:title="commitTitle" :title="commitTitle"
:author="commitAuthor"/> :author="commitAuthor"/>
</div> </div>
<p <div
v-if="!model.isFolder && !hasLastDeploymentKey" v-if="!model.isFolder && !hasLastDeploymentKey"
class="commit-title"> class="commit-title">
No deployments yet No deployments yet
</p> </div>
</td> </div>
<td> <div class="table-section section-10" role="gridcell">
<div
v-if="!model.isFolder"
class="table-mobile-header">
Updated
</div>
<span <span
v-if="!model.isFolder && canShowDate" v-if="!model.isFolder && canShowDate"
class="environment-created-date-timeago"> class="environment-created-date-timeago table-mobile-content">
{{createdDate}} {{createdDate}}
</span> </span>
</td> </div>
<td class="environments-actions"> <div class="table-section section-30 environments-actions table-button-footer" role="gridcell">
<div <div
v-if="!model.isFolder" v-if="!model.isFolder"
class="btn-group pull-right" class="btn-group environment-action-buttons"
role="group"> role="group">
<actions-component <actions-component
...@@ -553,6 +568,6 @@ export default { ...@@ -553,6 +568,6 @@ export default {
:retry-url="retryUrl" :retry-url="retryUrl"
/> />
</div> </div>
</td> </div>
</tr> </div>
</template> </template>
...@@ -19,7 +19,7 @@ export default { ...@@ -19,7 +19,7 @@ export default {
</script> </script>
<template> <template>
<a <a
class="btn monitoring-url has-tooltip" class="btn monitoring-url has-tooltip hidden-xs hidden-sm"
data-container="body" data-container="body"
rel="noopener noreferrer nofollow" rel="noopener noreferrer nofollow"
:href="monitoringUrl" :href="monitoringUrl"
......
...@@ -43,7 +43,7 @@ export default { ...@@ -43,7 +43,7 @@ export default {
<template> <template>
<button <button
type="button" type="button"
class="btn" class="btn hidden-xs hidden-sm"
@click="onClick" @click="onClick"
:disabled="isLoading"> :disabled="isLoading">
......
...@@ -47,7 +47,7 @@ export default { ...@@ -47,7 +47,7 @@ export default {
<template> <template>
<button <button
type="button" type="button"
class="btn stop-env-link has-tooltip" class="btn stop-env-link has-tooltip hidden-xs hidden-sm"
data-container="body" data-container="body"
@click="onClick" @click="onClick"
:disabled="isLoading" :disabled="isLoading"
......
...@@ -29,7 +29,7 @@ export default { ...@@ -29,7 +29,7 @@ export default {
</script> </script>
<template> <template>
<a <a
class="btn terminal-button has-tooltip" class="btn terminal-button has-tooltip hidden-xs hidden-sm"
data-container="body" data-container="body"
:title="title" :title="title"
:aria-label="title" :aria-label="title"
......
...@@ -45,68 +45,59 @@ export default { ...@@ -45,68 +45,59 @@ export default {
}; };
</script> </script>
<template> <template>
<table class="table ci-table"> <div class="ci-table" role="grid">
<thead> <div class="gl-responsive-table-row table-row-header" role="row">
<tr> <div class="table-section section-10 environments-name" role="rowheader">
<th class="environments-name"> Environment
Environment </div>
</th> <div class="table-section section-10 environments-deploy" role="rowheader">
<th class="environments-deploy"> Deployment
Last deployment </div>
</th> <div class="table-section section-15 environments-build" role="rowheader">
<th class="environments-build"> Job
Job </div>
</th> <div class="table-section section-25 environments-commit" role="rowheader">
<th class="environments-commit"> Commit
Commit </div>
</th> <div class="table-section section-10 environments-date" role="rowheader">
<th class="environments-date"> Updated
Updated </div>
</th> </div>
<th class="environments-actions"></th> <template
</tr> v-for="model in environments"
</thead> v-bind:model="model">
<tbody> <div
<template is="environment-item"
v-for="model in environments" :model="model"
v-bind:model="model"> :can-create-deployment="canCreateDeployment"
<tr :can-read-environment="canReadEnvironment"
is="environment-item" />
:model="model"
:can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment"
/>
<template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"> <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
<tr v-if="isLoadingFolderContent"> <div v-if="isLoadingFolderContent">
<td colspan="6"> <loading-icon size="2" />
<loading-icon size="2" /> </div>
</td>
</tr>
<template v-else> <template v-else>
<tr <div
is="environment-item" is="environment-item"
v-for="children in model.children" v-for="children in model.children"
:model="children" :model="children"
:can-create-deployment="canCreateDeployment" :can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment" :can-read-environment="canReadEnvironment"
/> />
<tr> <div>
<td <div class="text-center prepend-top-10">
colspan="6" <a
class="text-center"> :href="folderUrl(model)"
<a class="btn btn-default">
:href="folderUrl(model)" Show all
class="btn btn-default"> </a>
Show all </div>
</a> </div>
</td>
</tr>
</template>
</template> </template>
</template> </template>
</tbody> </template>
</table> </div>
</template> </template>
...@@ -135,8 +135,8 @@ export default { ...@@ -135,8 +135,8 @@ export default {
{{shortSha}} {{shortSha}}
</a> </a>
<p class="commit-title"> <div class="commit-title flex-truncate-parent">
<span v-if="title"> <span v-if="title" class="flex-truncate-child">
<user-avatar-link <user-avatar-link
v-if="hasAuthor" v-if="hasAuthor"
class="avatar-image-container" class="avatar-image-container"
...@@ -153,7 +153,7 @@ export default { ...@@ -153,7 +153,7 @@ export default {
<span v-else> <span v-else>
Cant find HEAD commit for this branch Cant find HEAD commit for this branch
</span> </span>
</p> </div>
</div> </div>
`, `,
}; };
...@@ -49,3 +49,4 @@ ...@@ -49,3 +49,4 @@
@import "framework/icons.scss"; @import "framework/icons.scss";
@import "framework/snippets.scss"; @import "framework/snippets.scss";
@import "framework/memory_graph.scss"; @import "framework/memory_graph.scss";
@import "framework/responsive-tables.scss";
@mixin flex-max-width($max) {
flex: 0 0 #{$max + '%'};
max-width: #{$max + '%'};
}
.gl-responsive-table-row {
margin-top: 10px;
border: 1px solid $border-color;
@media (min-width: $screen-md-min) {
padding: 15px 0;
margin: 0;
display: flex;
align-items: center;
border: none;
border-bottom: 1px solid $white-normal;
}
.table-section {
white-space: nowrap;
$section-widths: 10 15 25 30;
@each $width in $section-widths {
&.section-#{$width} {
flex: 0 0 #{$width + '%'};
@media (min-width: $screen-md-min) {
max-width: #{$width + '%'};
}
}
}
&:not(.table-button-footer) {
@media (max-width: $screen-sm-max) {
display: flex;
align-self: stretch;
padding: 10px;
align-items: center;
height: 62px;
&:not(:first-of-type) {
border-top: 1px solid $white-normal;
}
}
}
}
}
.table-row-header {
font-size: 13px;
@media (max-width: $screen-sm-max) {
display: none;
}
}
.table-mobile-header {
color: $gl-text-color-secondary;
@include flex-max-width(40);
@media (min-width: $screen-md-min) {
display: none;
}
}
.table-mobile-content {
@media (max-width: $screen-sm-max) {
@include flex-max-width(60);
text-align: right;
}
}
.flex-truncate-parent {
display: flex;
}
.flex-truncate-child {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@media (min-width: $screen-md-min) {
flex: 0 0 90%;
}
}
...@@ -11,34 +11,7 @@ ...@@ -11,34 +11,7 @@
} }
.environments-container { .environments-container {
.table-holder { .ci-table {
width: 100%;
@media (max-width: $screen-sm-max) {
overflow: auto;
}
}
.table.ci-table {
.environments-actions {
min-width: 300px;
}
.environments-commit,
.environments-actions {
width: 20%;
}
.environments-date {
width: 10%;
}
.environments-name,
.environments-deploy,
.environments-build {
width: 15%;
}
.deployment-column { .deployment-column {
> span { > span {
word-break: break-all; word-break: break-all;
...@@ -150,6 +123,49 @@ ...@@ -150,6 +123,49 @@
} }
} }
.gl-responsive-table-row {
.environments-actions {
@media (min-width: $screen-md-min) {
text-align: right;
}
@media (max-width: $screen-sm-max) {
background-color: $gray-normal;
align-self: stretch;
border-top: 1px solid $border-color;
.environment-action-buttons {
padding: 10px;
display: flex;
.btn {
border-radius: 3px;
}
> .btn-group,
.external-url {
flex: 1;
flex-basis: 28px;
}
.dropdown-new {
width: 100%;
}
}
}
}
}
.folder-row {
padding: 15px 0;
border-bottom: 1px solid $white-normal;
@media (max-width: $screen-sm-max) {
border-top: 1px solid $white-normal;
margin-top: 10px;
}
}
.prometheus-graph { .prometheus-graph {
text { text {
fill: $gl-text-color; fill: $gl-text-color;
......
...@@ -31,7 +31,7 @@ feature 'Environments page', :feature, :js do ...@@ -31,7 +31,7 @@ feature 'Environments page', :feature, :js do
it 'should show one environment' do it 'should show one environment' do
visit namespace_project_environments_path(project.namespace, project, scope: 'available') visit namespace_project_environments_path(project.namespace, project, scope: 'available')
expect(page).to have_css('.environments-container') expect(page).to have_css('.environments-container')
expect(page.all('tbody > tr').length).to eq(1) expect(page.all('.environment-name').length).to eq(1)
end end
end end
...@@ -59,7 +59,7 @@ feature 'Environments page', :feature, :js do ...@@ -59,7 +59,7 @@ feature 'Environments page', :feature, :js do
it 'should show one environment' do it 'should show one environment' do
visit namespace_project_environments_path(project.namespace, project, scope: 'stopped') visit namespace_project_environments_path(project.namespace, project, scope: 'stopped')
expect(page).to have_css('.environments-container') expect(page).to have_css('.environments-container')
expect(page.all('tbody > tr').length).to eq(1) expect(page.all('.environment-name').length).to eq(1)
end end
end end
end end
......
...@@ -71,7 +71,7 @@ describe('Pipelines table in Commits and Merge requests', () => { ...@@ -71,7 +71,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
it('should render a table with the received pipelines', (done) => { it('should render a table with the received pipelines', (done) => {
setTimeout(() => { setTimeout(() => {
expect(this.component.$el.querySelectorAll('table > tbody > tr').length).toEqual(1); expect(this.component.$el.querySelectorAll('.ci-table .commit').length).toEqual(1);
expect(this.component.$el.querySelector('.realtime-loading')).toBe(null); expect(this.component.$el.querySelector('.realtime-loading')).toBe(null);
expect(this.component.$el.querySelector('.empty-state')).toBe(null); expect(this.component.$el.querySelector('.empty-state')).toBe(null);
expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBe(null); expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBe(null);
...@@ -108,7 +108,7 @@ describe('Pipelines table in Commits and Merge requests', () => { ...@@ -108,7 +108,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBeDefined(); expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
expect(this.component.$el.querySelector('.realtime-loading')).toBe(null); expect(this.component.$el.querySelector('.realtime-loading')).toBe(null);
expect(this.component.$el.querySelector('.js-empty-state')).toBe(null); expect(this.component.$el.querySelector('.js-empty-state')).toBe(null);
expect(this.component.$el.querySelector('table')).toBe(null); expect(this.component.$el.querySelector('.ci-table')).toBe(null);
done(); done();
}, 0); }, 0);
}); });
......
...@@ -271,7 +271,7 @@ describe('Environment', () => { ...@@ -271,7 +271,7 @@ describe('Environment', () => {
// wait for next async request // wait for next async request
setTimeout(() => { setTimeout(() => {
expect(component.$el.querySelectorAll('.js-child-row').length).toEqual(1); expect(component.$el.querySelectorAll('.js-child-row').length).toEqual(1);
expect(component.$el.querySelector('td.text-center > a.btn').textContent).toContain('Show all'); expect(component.$el.querySelector('.text-center > a.btn').textContent).toContain('Show all');
Vue.http.interceptors = _.without(Vue.http.interceptors, folderInterceptor); Vue.http.interceptors = _.without(Vue.http.interceptors, folderInterceptor);
done(); done();
......
...@@ -29,6 +29,6 @@ describe('Environment item', () => { ...@@ -29,6 +29,6 @@ describe('Environment item', () => {
}, },
}).$mount(); }).$mount();
expect(component.$el.tagName).toEqual('TABLE'); expect(component.$el.getAttribute('class')).toContain('ci-table');
}); });
}); });
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