summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorClement Ho <clemmakesapps@gmail.com>2017-06-08 01:15:41 +0000
committerClement Ho <clemmakesapps@gmail.com>2017-06-08 01:15:41 +0000
commitdcf622937bab0ca068603eece410a18c9d1ca25d (patch)
treeed1c2c360536475838f482f0cc39078f3fcd1fce
parent54f985e60c8ac06230c0afe1a637db6129bc428f (diff)
parentc55b4269dcae55884bcec4121fc4835b6dbf78f1 (diff)
downloadgitlab-ce-dcf622937bab0ca068603eece410a18c9d1ca25d.tar.gz
Merge branch 'responsive-table-fixes' into 'master'
Responsive table fixes Closes #33376 See merge request !11987
-rw-r--r--app/assets/javascripts/environments/components/environment.vue2
-rw-r--r--app/assets/javascripts/environments/components/environment_actions.vue2
-rw-r--r--app/assets/javascripts/environments/components/environment_item.vue10
-rw-r--r--app/assets/javascripts/environments/components/environments_table.vue10
-rw-r--r--app/assets/stylesheets/framework/responsive-tables.scss9
-rw-r--r--app/assets/stylesheets/pages/environments.scss8
-rw-r--r--app/views/projects/deployments/_actions.haml2
-rw-r--r--app/views/projects/deployments/_commit.html.haml31
-rw-r--r--app/views/projects/deployments/_deployment.html.haml12
-rw-r--r--app/views/projects/environments/show.html.haml10
10 files changed, 55 insertions, 41 deletions
diff --git a/app/assets/javascripts/environments/components/environment.vue b/app/assets/javascripts/environments/components/environment.vue
index 28597c799df..8120ef182d4 100644
--- a/app/assets/javascripts/environments/components/environment.vue
+++ b/app/assets/javascripts/environments/components/environment.vue
@@ -230,7 +230,7 @@ export default {
</div>
</div>
- <div class="content-list environments-container">
+ <div class="environments-container">
<loading-icon
label="Loading environments"
size="3"
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
index 41d5453f1b2..a2448520a5f 100644
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -70,7 +70,7 @@ export default {
</span>
</button>
- <ul class="dropdown-menu">
+ <ul class="dropdown-menu dropdown-menu-align-right">
<li v-for="action in actions">
<button
type="button"
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 03eb51ba1b2..de2269118cd 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -422,11 +422,13 @@ export default {
</script>
<template>
<div
- :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }">
+ :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }"
+ role="row">
<div class="table-section section-10" role="gridcell">
<div
v-if="!model.isFolder"
- class="table-mobile-header">
+ class="table-mobile-header"
+ role="rowheader">
Environment
</div>
<a
@@ -497,6 +499,7 @@ export default {
<div class="table-section section-25" role="gridcell">
<div
v-if="!model.isFolder"
+ role="rowheader"
class="table-mobile-header">
Commit
</div>
@@ -513,7 +516,7 @@ export default {
</div>
<div
v-if="!model.isFolder && !hasLastDeploymentKey"
- class="commit-title">
+ class="commit-title table-mobile-content">
No deployments yet
</div>
</div>
@@ -521,6 +524,7 @@ export default {
<div class="table-section section-10" role="gridcell">
<div
v-if="!model.isFolder"
+ role="rowheader"
class="table-mobile-header">
Updated
</div>
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index f9262ab85c5..b1fd9db650b 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -47,19 +47,19 @@ export default {
<template>
<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">
+ <div class="table-section section-10 environments-name" role="columnheader">
Environment
</div>
- <div class="table-section section-10 environments-deploy" role="rowheader">
+ <div class="table-section section-10 environments-deploy" role="columnheader">
Deployment
</div>
- <div class="table-section section-15 environments-build" role="rowheader">
+ <div class="table-section section-15 environments-build" role="columnheader">
Job
</div>
- <div class="table-section section-25 environments-commit" role="rowheader">
+ <div class="table-section section-25 environments-commit" role="columnheader">
Commit
</div>
- <div class="table-section section-10 environments-date" role="rowheader">
+ <div class="table-section section-10 environments-date" role="columnheader">
Updated
</div>
</div>
diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss
index a24483fa431..f0a4c66aa1a 100644
--- a/app/assets/stylesheets/framework/responsive-tables.scss
+++ b/app/assets/stylesheets/framework/responsive-tables.scss
@@ -19,10 +19,6 @@
.table-section {
white-space: nowrap;
- .branch-commit {
- max-width: 100%;
- }
-
$section-widths: 10 15 20 25 30 40;
@each $width in $section-widths {
&.section-#{$width} {
@@ -87,4 +83,9 @@
@media (min-width: $screen-md-min) {
flex: 0 0 90%;
}
+
+ .avatar {
+ float: none;
+ margin-right: 4px;
+ }
}
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index a44a8bce879..b24803678ea 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -143,8 +143,8 @@
}
> .btn-group,
- .external-url,
- .btn {
+ > .external-url,
+ > .btn {
flex: 1;
flex-basis: 28px;
margin: 0 5px;
@@ -153,6 +153,10 @@
.dropdown-new {
width: 100%;
}
+
+ .dropdown-menu {
+ min-width: initial;
+ }
}
}
}
diff --git a/app/views/projects/deployments/_actions.haml b/app/views/projects/deployments/_actions.haml
index c96616a0be4..e2baaa625ae 100644
--- a/app/views/projects/deployments/_actions.haml
+++ b/app/views/projects/deployments/_actions.haml
@@ -6,7 +6,7 @@
%button.dropdown.dropdown-new.btn.btn-default{ type: 'button', 'data-toggle' => 'dropdown' }
= custom_icon('icon_play')
= icon('caret-down')
- %ul.dropdown-menu
+ %ul.dropdown-menu.dropdown-menu-align-right
- actions.each do |action|
- next unless can?(current_user, :update_build, action)
%li
diff --git a/app/views/projects/deployments/_commit.html.haml b/app/views/projects/deployments/_commit.html.haml
index 465ddaf713a..4502c397d29 100644
--- a/app/views/projects/deployments/_commit.html.haml
+++ b/app/views/projects/deployments/_commit.html.haml
@@ -1,16 +1,17 @@
-.branch-commit
- - if deployment.ref
- %span.icon-container
- = deployment.tag? ? icon('tag') : icon('code-fork')
- = link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name"
- .icon-container.commit-icon
- = custom_icon("icon_commit")
- = link_to deployment.short_sha, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-sha"
+.table-mobile-content
+ .branch-commit
+ - if deployment.ref
+ %span.icon-container
+ = deployment.tag? ? icon('tag') : icon('code-fork')
+ = link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name"
+ .icon-container.commit-icon
+ = custom_icon("icon_commit")
+ = link_to deployment.short_sha, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-sha"
- %p.commit-title.flex-truncate-parent
- %span.flex-truncate-child
- - if commit_title = deployment.commit_title
- = author_avatar(deployment.commit, size: 20)
- = link_to_gfm commit_title, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-row-message"
- - else
- Cant find HEAD commit for this branch
+ %p.commit-title.flex-truncate-parent
+ %span.flex-truncate-child
+ - if commit_title = deployment.commit_title
+ = author_avatar(deployment.commit, size: 20)
+ = link_to_gfm commit_title, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-row-message"
+ - else
+ Cant find HEAD commit for this branch
diff --git a/app/views/projects/deployments/_deployment.html.haml b/app/views/projects/deployments/_deployment.html.haml
index d6822106266..d956cb2cc1a 100644
--- a/app/views/projects/deployments/_deployment.html.haml
+++ b/app/views/projects/deployments/_deployment.html.haml
@@ -1,20 +1,24 @@
-.gl-responsive-table-row.deployment
+.gl-responsive-table-row.deployment{ role: 'row' }
.table-section.section-10{ role: 'gridcell' }
- %strong ##{deployment.iid}
+ .table-mobile-header{ role: 'rowheader' } ID
+ %strong.table-mobile-content ##{deployment.iid}
.table-section.section-40{ role: 'gridcell' }
+ .table-mobile-header{ role: 'rowheader' } Commit
= render 'projects/deployments/commit', deployment: deployment
.table-section.section-15.build-column{ role: 'gridcell' }
+ .table-mobile-header{ role: 'rowheader' } Job
- if deployment.deployable
- = link_to [@project.namespace.becomes(Namespace), @project, deployment.deployable], class: 'build-link' do
+ = link_to [@project.namespace.becomes(Namespace), @project, deployment.deployable], class: 'build-link table-mobile-content' do
#{deployment.deployable.name} (##{deployment.deployable.id})
- if deployment.user
by
= user_avatar(user: deployment.user, size: 20)
.table-section.section-15{ role: 'gridcell' }
- #{time_ago_with_tooltip(deployment.created_at)}
+ .table-mobile-header{ role: 'rowheader' } Created
+ %span.table-mobile-content= time_ago_with_tooltip(deployment.created_at)
.table-section.section-20.environments-actions.table-button-footer{ role: 'gridcell' }
.btn-group.environment-action-buttons
diff --git a/app/views/projects/environments/show.html.haml b/app/views/projects/environments/show.html.haml
index f9068d11542..23aa4c29e69 100644
--- a/app/views/projects/environments/show.html.haml
+++ b/app/views/projects/environments/show.html.haml
@@ -28,12 +28,12 @@
= link_to "Read more", help_page_path("ci/environments"), class: "btn btn-success"
- else
.table-holder
- .ci-table.environments
+ .ci-table.environments{ role: 'grid' }
.gl-responsive-table-row.table-row-header{ role: 'row' }
- .table-section.section-10{ role: 'rollheader' } ID
- .table-section.section-40{ role: 'rollheader' } Commit
- .table-section.section-15{ role: 'rollheader' } Job
- .table-section.section-15{ role: 'rollheader' } Created
+ .table-section.section-10{ role: 'columnheader' } ID
+ .table-section.section-40{ role: 'columnheader' } Commit
+ .table-section.section-15{ role: 'columnheader' } Job
+ .table-section.section-15{ role: 'columnheader' } Created
= render @deployments