Commit 093394bf authored by Filipa Lacerda's avatar Filipa Lacerda

Wrap content for admin runners table

While refactoring the table into a responsive one we did not account for wrapping issues.
This commit wraps some cells and truncates others.

Adds `section-5` class to the responsive tables CSS
parent 33142335
......@@ -39,7 +39,7 @@
.table-section {
white-space: nowrap;
$section-widths: 10 15 20 25 30 40 50 100;
$section-widths: 5 10 15 20 25 30 40 50 100;
@each $width in $section-widths {
&.section-#{$width} {
flex: 0 0 #{$width + '%'};
......
.gl-responsive-table-row{ id: dom_id(runner) }
= render layout: 'runner_table_cell', locals: { label: _('Type') } do
- if runner.instance_type?
%span.badge.badge-success shared
- elsif runner.group_type?
%span.badge.badge-success group
- else
%span.badge.badge-info specific
- if runner.locked?
%span.badge.badge-warning locked
- unless runner.active?
%span.badge.badge-danger paused
= render layout: 'runner_table_cell', locals: { label: _('Runner token') } do
= link_to runner.short_sha, admin_runner_path(runner)
= render layout: 'runner_table_cell', locals: { label: _('Description') } do
= runner.description
= render layout: 'runner_table_cell', locals: { label: _('Version') } do
= runner.version
= render layout: 'runner_table_cell', locals: { label: _('IP Address') } do
= runner.ip_address
= render layout: 'runner_table_cell', locals: { label: _('Projects') } do
- if runner.instance_type? || runner.group_type?
= _('n/a')
- else
= runner.projects.count(:all)
= render layout: 'runner_table_cell', locals: { label: _('Jobs') } do
= runner.builds.count(:all)
= render layout: 'runner_table_cell', locals: { label: _('Tags') } do
- runner.tag_list.sort.each do |tag|
%span.badge.badge-primary
= tag
= render layout: 'runner_table_cell', locals: { label: _('Last contact') } do
- if runner.contacted_at
= time_ago_with_tooltip runner.contacted_at
- else
= _('Never')
.table-section.section-10.section-wrap
.table-mobile-header{ role: 'rowheader' }= _('Type')
.table-mobile-content
- if runner.instance_type?
%span.badge.badge-success shared
- elsif runner.group_type?
%span.badge.badge-success group
- else
%span.badge.badge-info specific
- if runner.locked?
%span.badge.badge-warning locked
- unless runner.active?
%span.badge.badge-danger paused
.table-section.section-10
.table-mobile-header{ role: 'rowheader' }= _('Runner token')
.table-mobile-content
= link_to runner.short_sha, admin_runner_path(runner)
.table-section.section-15
.table-mobile-header{ role: 'rowheader' }= _('Description')
.table-mobile-content.str-truncated.has-tooltip{ title: runner.description }
= runner.description
.table-section.section-15
.table-mobile-header{ role: 'rowheader' }= _('Version')
.table-mobile-content.str-truncated.has-tooltip{ title: runner.version }
= runner.version
.table-section.section-10
.table-mobile-header{ role: 'rowheader' }= _('IP Address')
.table-mobile-content
= runner.ip_address
.table-section.section-5
.table-mobile-header{ role: 'rowheader' }= _('Projects')
.table-mobile-content
- if runner.instance_type? || runner.group_type?
= _('n/a')
- else
= runner.projects.count(:all)
.table-section.section-5
.table-mobile-header{ role: 'rowheader' }= _('Jobs')
.table-mobile-content
= runner.builds.count(:all)
.table-section.section-10.section-wrap
.table-mobile-header{ role: 'rowheader' }= _('Tags')
.table-mobile-content
- runner.tag_list.sort.each do |tag|
%span.badge.badge-primary
= tag
.table-section.section-10
.table-mobile-header{ role: 'rowheader' }= _('Last contact')
.table-mobile-content
- if runner.contacted_at
= time_ago_with_tooltip runner.contacted_at
- else
= _('Never')
.table-section.table-button-footer.section-10
.btn-group.table-action-buttons
......
.table-section.section-10
.table-mobile-header{ role: 'rowheader' }= label
.table-mobile-content
= yield
......@@ -98,8 +98,16 @@
.runners-content.content-list
.table-holder
.gl-responsive-table-row.table-row-header{ role: 'row' }
- [_('Type'), _('Runner token'), _('Description'), _('Version'), _('IP Address'), _('Projects'), _('Jobs'), _('Tags'), _('Last contact')].each do |label|
.table-section.section-10{ role: 'rowheader' }= label
.table-section.section-10{ role: 'rowheader' }= _('Type')
.table-section.section-10{ role: 'rowheader' }= _('Runner token')
.table-section.section-15{ role: 'rowheader' }= _('Description')
.table-section.section-15{ role: 'rowheader' }= _('Version')
.table-section.section-10{ role: 'rowheader' }= _('IP Address')
.table-section.section-5{ role: 'rowheader' }= _('Projects')
.table-section.section-5{ role: 'rowheader' }= _('Jobs')
.table-section.section-10{ role: 'rowheader' }= _('Tags')
.table-section.section-10{ role: 'rowheader' }= _('Last contact')
.table-section.section-10{ role: 'rowheader' }
- @runners.each do |runner|
= render 'admin/runners/runner', runner: runner
......
---
title: Fixes admin runners table not wrapping content
merge_request:
author:
type: fixed
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