Commit c55b4269 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray Committed by Clement Ho

Responsive table fixes

parent 54f985e6
...@@ -230,7 +230,7 @@ export default { ...@@ -230,7 +230,7 @@ export default {
</div> </div>
</div> </div>
<div class="content-list environments-container"> <div class="environments-container">
<loading-icon <loading-icon
label="Loading environments" label="Loading environments"
size="3" size="3"
......
...@@ -70,7 +70,7 @@ export default { ...@@ -70,7 +70,7 @@ export default {
</span> </span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu dropdown-menu-align-right">
<li v-for="action in actions"> <li v-for="action in actions">
<button <button
type="button" type="button"
......
...@@ -422,11 +422,13 @@ export default { ...@@ -422,11 +422,13 @@ export default {
</script> </script>
<template> <template>
<div <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 class="table-section section-10" role="gridcell">
<div <div
v-if="!model.isFolder" v-if="!model.isFolder"
class="table-mobile-header"> class="table-mobile-header"
role="rowheader">
Environment Environment
</div> </div>
<a <a
...@@ -497,6 +499,7 @@ export default { ...@@ -497,6 +499,7 @@ export default {
<div class="table-section section-25" role="gridcell"> <div class="table-section section-25" role="gridcell">
<div <div
v-if="!model.isFolder" v-if="!model.isFolder"
role="rowheader"
class="table-mobile-header"> class="table-mobile-header">
Commit Commit
</div> </div>
...@@ -513,7 +516,7 @@ export default { ...@@ -513,7 +516,7 @@ export default {
</div> </div>
<div <div
v-if="!model.isFolder && !hasLastDeploymentKey" v-if="!model.isFolder && !hasLastDeploymentKey"
class="commit-title"> class="commit-title table-mobile-content">
No deployments yet No deployments yet
</div> </div>
</div> </div>
...@@ -521,6 +524,7 @@ export default { ...@@ -521,6 +524,7 @@ export default {
<div class="table-section section-10" role="gridcell"> <div class="table-section section-10" role="gridcell">
<div <div
v-if="!model.isFolder" v-if="!model.isFolder"
role="rowheader"
class="table-mobile-header"> class="table-mobile-header">
Updated Updated
</div> </div>
......
...@@ -47,19 +47,19 @@ export default { ...@@ -47,19 +47,19 @@ export default {
<template> <template>
<div class="ci-table" role="grid"> <div class="ci-table" role="grid">
<div class="gl-responsive-table-row table-row-header" role="row"> <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 Environment
</div> </div>
<div class="table-section section-10 environments-deploy" role="rowheader"> <div class="table-section section-10 environments-deploy" role="columnheader">
Deployment Deployment
</div> </div>
<div class="table-section section-15 environments-build" role="rowheader"> <div class="table-section section-15 environments-build" role="columnheader">
Job Job
</div> </div>
<div class="table-section section-25 environments-commit" role="rowheader"> <div class="table-section section-25 environments-commit" role="columnheader">
Commit Commit
</div> </div>
<div class="table-section section-10 environments-date" role="rowheader"> <div class="table-section section-10 environments-date" role="columnheader">
Updated Updated
</div> </div>
</div> </div>
......
...@@ -19,10 +19,6 @@ ...@@ -19,10 +19,6 @@
.table-section { .table-section {
white-space: nowrap; white-space: nowrap;
.branch-commit {
max-width: 100%;
}
$section-widths: 10 15 20 25 30 40; $section-widths: 10 15 20 25 30 40;
@each $width in $section-widths { @each $width in $section-widths {
&.section-#{$width} { &.section-#{$width} {
...@@ -87,4 +83,9 @@ ...@@ -87,4 +83,9 @@
@media (min-width: $screen-md-min) { @media (min-width: $screen-md-min) {
flex: 0 0 90%; flex: 0 0 90%;
} }
.avatar {
float: none;
margin-right: 4px;
}
} }
...@@ -143,8 +143,8 @@ ...@@ -143,8 +143,8 @@
} }
> .btn-group, > .btn-group,
.external-url, > .external-url,
.btn { > .btn {
flex: 1; flex: 1;
flex-basis: 28px; flex-basis: 28px;
margin: 0 5px; margin: 0 5px;
...@@ -153,6 +153,10 @@ ...@@ -153,6 +153,10 @@
.dropdown-new { .dropdown-new {
width: 100%; width: 100%;
} }
.dropdown-menu {
min-width: initial;
}
} }
} }
} }
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
%button.dropdown.dropdown-new.btn.btn-default{ type: 'button', 'data-toggle' => 'dropdown' } %button.dropdown.dropdown-new.btn.btn-default{ type: 'button', 'data-toggle' => 'dropdown' }
= custom_icon('icon_play') = custom_icon('icon_play')
= icon('caret-down') = icon('caret-down')
%ul.dropdown-menu %ul.dropdown-menu.dropdown-menu-align-right
- actions.each do |action| - actions.each do |action|
- next unless can?(current_user, :update_build, action) - next unless can?(current_user, :update_build, action)
%li %li
......
.branch-commit .table-mobile-content
- if deployment.ref .branch-commit
%span.icon-container - if deployment.ref
= deployment.tag? ? icon('tag') : icon('code-fork') %span.icon-container
= link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name" = deployment.tag? ? icon('tag') : icon('code-fork')
.icon-container.commit-icon = link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name"
= custom_icon("icon_commit") .icon-container.commit-icon
= link_to deployment.short_sha, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-sha" = 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 %p.commit-title.flex-truncate-parent
%span.flex-truncate-child %span.flex-truncate-child
- if commit_title = deployment.commit_title - if commit_title = deployment.commit_title
= author_avatar(deployment.commit, size: 20) = author_avatar(deployment.commit, size: 20)
= link_to_gfm commit_title, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-row-message" = link_to_gfm commit_title, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-row-message"
- else - else
Cant find HEAD commit for this branch Cant find HEAD commit for this branch
.gl-responsive-table-row.deployment .gl-responsive-table-row.deployment{ role: 'row' }
.table-section.section-10{ role: 'gridcell' } .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-section.section-40{ role: 'gridcell' }
.table-mobile-header{ role: 'rowheader' } Commit
= render 'projects/deployments/commit', deployment: deployment = render 'projects/deployments/commit', deployment: deployment
.table-section.section-15.build-column{ role: 'gridcell' } .table-section.section-15.build-column{ role: 'gridcell' }
.table-mobile-header{ role: 'rowheader' } Job
- if deployment.deployable - 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}) #{deployment.deployable.name} (##{deployment.deployable.id})
- if deployment.user - if deployment.user
by by
= user_avatar(user: deployment.user, size: 20) = user_avatar(user: deployment.user, size: 20)
.table-section.section-15{ role: 'gridcell' } .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' } .table-section.section-20.environments-actions.table-button-footer{ role: 'gridcell' }
.btn-group.environment-action-buttons .btn-group.environment-action-buttons
......
...@@ -28,12 +28,12 @@ ...@@ -28,12 +28,12 @@
= link_to "Read more", help_page_path("ci/environments"), class: "btn btn-success" = link_to "Read more", help_page_path("ci/environments"), class: "btn btn-success"
- else - else
.table-holder .table-holder
.ci-table.environments .ci-table.environments{ role: 'grid' }
.gl-responsive-table-row.table-row-header{ role: 'row' } .gl-responsive-table-row.table-row-header{ role: 'row' }
.table-section.section-10{ role: 'rollheader' } ID .table-section.section-10{ role: 'columnheader' } ID
.table-section.section-40{ role: 'rollheader' } Commit .table-section.section-40{ role: 'columnheader' } Commit
.table-section.section-15{ role: 'rollheader' } Job .table-section.section-15{ role: 'columnheader' } Job
.table-section.section-15{ role: 'rollheader' } Created .table-section.section-15{ role: 'columnheader' } Created
= render @deployments = render @deployments
......
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