Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
heptapod
heptapod
Commits
4fa2342595e7
Commit
c55b4269
authored
Jun 08, 2017
by
Annabel Dunstone Gray
Committed by
Clement Ho
Jun 08, 2017
Browse files
Responsive table fixes
parent
ab2f71b35ef3
Changes
10
Hide whitespace changes
Inline
Side-by-side
app/assets/javascripts/environments/components/environment.vue
View file @
4fa23425
...
...
@@ -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
View file @
4fa23425
...
...
@@ -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
View file @
4fa23425
...
...
@@ -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
View file @
4fa23425
...
...
@@ -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=
"
row
header"
>
<div
class=
"table-section section-10 environments-name"
role=
"
column
header"
>
Environment
</div>
<div
class=
"table-section section-10 environments-deploy"
role=
"
row
header"
>
<div
class=
"table-section section-10 environments-deploy"
role=
"
column
header"
>
Deployment
</div>
<div
class=
"table-section section-15 environments-build"
role=
"
row
header"
>
<div
class=
"table-section section-15 environments-build"
role=
"
column
header"
>
Job
</div>
<div
class=
"table-section section-25 environments-commit"
role=
"
row
header"
>
<div
class=
"table-section section-25 environments-commit"
role=
"
column
header"
>
Commit
</div>
<div
class=
"table-section section-10 environments-date"
role=
"
row
header"
>
<div
class=
"table-section section-10 environments-date"
role=
"
column
header"
>
Updated
</div>
</div>
...
...
app/assets/stylesheets/framework/responsive-tables.scss
View file @
4fa23425
...
...
@@ -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
View file @
4fa23425
...
...
@@ -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
View file @
4fa23425
...
...
@@ -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
View file @
4fa23425
.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
View file @
4fa23425
.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
View file @
4fa23425
...
...
@@ -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:
'
r
ol
l
header'
}
ID
.table-section.section-40
{
role:
'
r
ol
l
header'
}
Commit
.table-section.section-15
{
role:
'
r
ol
l
header'
}
Job
.table-section.section-15
{
role:
'
r
ol
l
header'
}
Created
.table-section.section-10
{
role:
'
c
ol
umn
header'
}
ID
.table-section.section-40
{
role:
'
c
ol
umn
header'
}
Commit
.table-section.section-15
{
role:
'
c
ol
umn
header'
}
Job
.table-section.section-15
{
role:
'
c
ol
umn
header'
}
Created
=
render
@deployments
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment