Skip to content
Snippets Groups Projects
Commit 7a9c9a25 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray Committed by Phil Hughes
Browse files

Responsive environment tables

parent e34e5761
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 232 additions and 123 deletions
app/assets/javascripts/environments/components/environment_actions.vue
+ 1
− 1
View file @ 7a9c9a25
@@ -70,7 +70,7 @@ export default {
</span>
</button>
 
<ul class="dropdown-menu dropdown-menu-align-right">
<ul class="dropdown-menu">
<li v-for="action in actions">
<button
type="button"
app/assets/javascripts/environments/components/environment_item.vue
+ 37
− 22
View file @ 7a9c9a25
@@ -421,14 +421,19 @@ export default {
};
</script>
<template>
<tr :class="{ 'js-child-row': model.isChildren }">
<td>
<div
: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
v-if="!model.isFolder"
class="environment-name"
:class="{ 'prepend-left-default': model.isChildren }"
class="environment-name flex-truncate-parent table-mobile-content"
:href="environmentPath">
{{model.name}}
<span class="flex-truncate-child">{{model.name}}</span>
</a>
<span
v-else
@@ -461,9 +466,9 @@ export default {
{{model.size}}
</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">
{{deploymentInternalId}}
</span>
@@ -478,21 +483,26 @@ export default {
:tooltip-text="deploymentUser.username"
/>
</span>
</td>
</div>
 
<td class="environments-build-cell">
<div class="table-section section-15 hidden-xs hidden-sm" role="gridcell">
<a
v-if="shouldRenderBuildName"
class="build-link"
:href="buildPath">
{{buildName}}
</a>
</td>
</div>
 
<td>
<div class="table-section section-25" role="gridcell">
<div
v-if="!model.isFolder"
class="table-mobile-header">
Commit
</div>
<div
v-if="!model.isFolder && hasLastDeploymentKey"
class="js-commit-component">
class="js-commit-component table-mobile-content">
<commit-component
:tag="commitTag"
:commit-ref="commitRef"
@@ -501,25 +511,30 @@ export default {
:title="commitTitle"
:author="commitAuthor"/>
</div>
<p
<div
v-if="!model.isFolder && !hasLastDeploymentKey"
class="commit-title">
No deployments yet
</p>
</td>
</div>
</div>
 
<td>
<div class="table-section section-10" role="gridcell">
<div
v-if="!model.isFolder"
class="table-mobile-header">
Updated
</div>
<span
v-if="!model.isFolder && canShowDate"
class="environment-created-date-timeago">
class="environment-created-date-timeago table-mobile-content">
{{createdDate}}
</span>
</td>
</div>
 
<td class="environments-actions">
<div class="table-section section-30 environments-actions table-button-footer" role="gridcell">
<div
v-if="!model.isFolder"
class="btn-group pull-right"
class="btn-group environment-action-buttons"
role="group">
 
<actions-component
@@ -553,6 +568,6 @@ export default {
:retry-url="retryUrl"
/>
</div>
</td>
</tr>
</div>
</div>
</template>
app/assets/javascripts/environments/components/environment_monitoring.vue
+ 1
− 1
View file @ 7a9c9a25
@@ -19,7 +19,7 @@ export default {
</script>
<template>
<a
class="btn monitoring-url has-tooltip"
class="btn monitoring-url has-tooltip hidden-xs hidden-sm"
data-container="body"
rel="noopener noreferrer nofollow"
:href="monitoringUrl"
app/assets/javascripts/environments/components/environment_rollback.vue
+ 1
− 1
View file @ 7a9c9a25
@@ -43,7 +43,7 @@ export default {
<template>
<button
type="button"
class="btn"
class="btn hidden-xs hidden-sm"
@click="onClick"
:disabled="isLoading">
 
app/assets/javascripts/environments/components/environment_stop.vue
+ 1
− 1
View file @ 7a9c9a25
@@ -47,7 +47,7 @@ export default {
<template>
<button
type="button"
class="btn stop-env-link has-tooltip"
class="btn stop-env-link has-tooltip hidden-xs hidden-sm"
data-container="body"
@click="onClick"
:disabled="isLoading"
app/assets/javascripts/environments/components/environment_terminal_button.vue
+ 1
− 1
View file @ 7a9c9a25
@@ -29,7 +29,7 @@ export default {
</script>
<template>
<a
class="btn terminal-button has-tooltip"
class="btn terminal-button has-tooltip hidden-xs hidden-sm"
data-container="body"
:title="title"
:aria-label="title"
app/assets/javascripts/environments/components/environments_table.vue
+ 50
− 59
View file @ 7a9c9a25
@@ -45,68 +45,59 @@ export default {
};
</script>
<template>
<table class="table ci-table">
<thead>
<tr>
<th class="environments-name">
Environment
</th>
<th class="environments-deploy">
Last deployment
</th>
<th class="environments-build">
Job
</th>
<th class="environments-commit">
Commit
</th>
<th class="environments-date">
Updated
</th>
<th class="environments-actions"></th>
</tr>
</thead>
<tbody>
<template
v-for="model in environments"
v-bind:model="model">
<tr
is="environment-item"
:model="model"
:can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment"
/>
<div class="ci-table" role="grid">
<div class="gl-responsive-table-row table-row-header" role="row">
<div class="table-section section-10 environments-name" role="rowheader">
Environment
</div>
<div class="table-section section-10 environments-deploy" role="rowheader">
Deployment
</div>
<div class="table-section section-15 environments-build" role="rowheader">
Job
</div>
<div class="table-section section-25 environments-commit" role="rowheader">
Commit
</div>
<div class="table-section section-10 environments-date" role="rowheader">
Updated
</div>
</div>
<template
v-for="model in environments"
v-bind:model="model">
<div
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">
<tr v-if="isLoadingFolderContent">
<td colspan="6">
<loading-icon size="2" />
</td>
</tr>
<template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
<div v-if="isLoadingFolderContent">
<loading-icon size="2" />
</div>
 
<template v-else>
<tr
is="environment-item"
v-for="children in model.children"
:model="children"
:can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment"
/>
<template v-else>
<div
is="environment-item"
v-for="children in model.children"
:model="children"
:can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment"
/>
 
<tr>
<td
colspan="6"
class="text-center">
<a
:href="folderUrl(model)"
class="btn btn-default">
Show all
</a>
</td>
</tr>
</template>
<div>
<div class="text-center prepend-top-10">
<a
:href="folderUrl(model)"
class="btn btn-default">
Show all
</a>
</div>
</div>
</template>
</template>
</tbody>
</table>
</template>
</div>
</template>
app/assets/javascripts/vue_shared/components/commit.js
+ 3
− 3
View file @ 7a9c9a25
@@ -135,8 +135,8 @@ export default {
{{shortSha}}
</a>
 
<p class="commit-title">
<span v-if="title">
<div class="commit-title flex-truncate-parent">
<span v-if="title" class="flex-truncate-child">
<user-avatar-link
v-if="hasAuthor"
class="avatar-image-container"
@@ -153,7 +153,7 @@ export default {
<span v-else>
Cant find HEAD commit for this branch
</span>
</p>
</div>
</div>
`,
};
app/assets/stylesheets/framework.scss
+ 1
− 0
View file @ 7a9c9a25
@@ -49,3 +49,4 @@
@import "framework/icons.scss";
@import "framework/snippets.scss";
@import "framework/memory_graph.scss";
@import "framework/responsive-tables.scss";
app/assets/stylesheets/framework/responsive-tables.scss 0 → 100644
+ 86
− 0
View file @ 7a9c9a25
@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%;
}
}
app/assets/stylesheets/pages/environments.scss
+ 44
− 28
View file @ 7a9c9a25
@@ -11,34 +11,7 @@
}
 
.environments-container {
.table-holder {
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%;
}
.ci-table {
.deployment-column {
> span {
word-break: break-all;
@@ -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 {
text {
fill: $gl-text-color;
spec/features/projects/environments/environments_spec.rb
+ 2
− 2
View file @ 7a9c9a25
@@ -31,7 +31,7 @@ feature 'Environments page', :feature, :js do
it 'should show one environment' do
visit namespace_project_environments_path(project.namespace, project, scope: 'available')
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
 
@@ -59,7 +59,7 @@ feature 'Environments page', :feature, :js do
it 'should show one environment' do
visit namespace_project_environments_path(project.namespace, project, scope: 'stopped')
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
spec/javascripts/commit/pipelines/pipelines_spec.js
+ 2
− 2
View file @ 7a9c9a25
@@ -71,7 +71,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
it('should render a table with the received pipelines', (done) => {
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('.empty-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', () => {
expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
expect(this.component.$el.querySelector('.realtime-loading')).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();
}, 0);
});
spec/javascripts/environments/environment_spec.js
+ 1
− 1
View file @ 7a9c9a25
@@ -271,7 +271,7 @@ describe('Environment', () => {
// wait for next async request
setTimeout(() => {
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);
done();
spec/javascripts/environments/environment_table_spec.js
+ 1
− 1
View file @ 7a9c9a25
@@ -29,6 +29,6 @@ describe('Environment item', () => {
},
}).$mount();
 
expect(component.$el.tagName).toEqual('TABLE');
expect(component.$el.getAttribute('class')).toContain('ci-table');
});
});
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