1 files changed, 61 insertions, 0 deletions
diff --git a/app/views/projects/artifacts/_artifact.html.haml b/app/views/projects/artifacts/_artifact.html.haml
new file mode 100644
index 00000000000..36e149556e0
--- /dev/null
+++ b/app/views/projects/artifacts/_artifact.html.haml
@@ -0,0 +1,61 @@
+.gl-responsive-table-row.px-md-3
+  .table-section.section-25.section-wrap.commit
+    .table-mobile-header{ role: 'rowheader' }= _('Job')
+    .table-mobile-content
+      .branch-commit.cgray
+        - if can?(current_user, :read_build, @project)
+          = link_to project_job_path(@project, artifact.job) do
+            %span.build-link ##{artifact.job_id}
+        - else
+          %span.build-link ##{artifact.job_id}
+
+        - if artifact.job.ref
+          .icon-container{ "aria-label" => artifact.job.tag? ? _('Tag') : _('Branch') }
+            = artifact.job.tag? ? sprite_icon('tag', css_class: 'sprite') : sprite_icon('branch', css_class: 'sprite')
+          = link_to artifact.job.ref, project_ref_path(@project, artifact.job.ref), class: 'ref-name'
+        - else
+          .light= _('none')
+        .icon-container.commit-icon{ "aria-label" => _('Commit') }
+          = sprite_icon('commit')
+
+        - if artifact.job.sha
+          = link_to artifact.job.short_sha, project_commit_path(@project, artifact.job.sha), class: 'commit-sha mr-0'
+
+  .table-section.section-15.section-wrap
+    .table-mobile-header{ role: 'rowheader' }= _('Name')
+    .table-mobile-content
+      = artifact.job.name
+
+  .table-section.section-20
+    .table-mobile-header{ role: 'rowheader' }= _('Creation date')
+    .table-mobile-content
+      %p.finished-at
+        = icon("calendar")
+        %span= time_ago_with_tooltip(artifact.created_at)
+
+  .table-section.section-20
+    .table-mobile-header{ role: 'rowheader' }= _('Expiration date')
+    .table-mobile-content
+      - if artifact.expire_at
+        %p.finished-at
+          = icon("calendar")
+          %span= time_ago_with_tooltip(artifact.expire_at)
+
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' }= _('Size')
+    .table-mobile-content
+      = number_to_human_size(artifact.size, precision: 2)
+
+  .table-section.table-button-footer.section-10
+    .table-action-buttons
+      .btn-group
+        - if can?(current_user, :read_build, @project)
+          = link_to download_project_job_artifacts_path(@project, artifact.job), rel: 'nofollow', download: '', title: _('Download artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Download artifacts') }, class: 'btn btn-build has-tooltip ml-0' do
+            = sprite_icon('download')
+
+          = link_to browse_project_job_artifacts_path(@project, artifact.job), rel: 'nofollow', title: _('Browse artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Browse artifacts') }, class: 'btn btn-build has-tooltip' do
+            = sprite_icon('folder-open')
+
+        - if can?(current_user, :destroy_artifacts, @project)
+          = link_to project_artifact_path(@project, artifact), data: { placement: 'top', container: 'body', confirm: _('Are you sure you want to delete these artifacts?') }, method: :delete, title: _('Delete artifacts'), ref: 'tooltip', aria: { label: _('Delete artifacts') }, class: 'btn btn-remove has-tooltip' do
+            = sprite_icon('remove')