BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit c55b4269 by Annabel Dunstone Gray Committed by Clement Ho
Options

Responsive table fixes

parent 54f985e6
Showing with 55 additions and 41 deletions
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"
......
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"
......
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>
......
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>
......
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;
}
}
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;
}
}
}
}
......
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
......
app/views/projects/deployments/_commit.html.haml
.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
app/views/projects/deployments/_deployment.html.haml
.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
......
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
......
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