Skip to content

Commit

Permalink
⏪ [open-formulieren/open-forms#4716] Reverting table back to list
Browse files Browse the repository at this point in the history
  • Loading branch information
@robinmolen @sergei-maertens
robinmolen authored and sergei-maertens committed Oct 23, 2024
1 parent 1e86055 commit f6a4bdf
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 66 deletions.
88 changes: 45 additions & 43 deletions src/formio/templates/file.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,55 @@
{%/* taken from https://github.com/formio/formio.js/blob/v4.12.7/src/templates/bootstrap/file/form.ejs */%}
{% if (!ctx.self.imageUpload) { %}
<table class="table">
<thead class="table__header">
<tr>
{% if (!ctx.disabled) { %}
<th class="table__column table__column--1"></th>
{% } %}
<th class="table__column table__column--{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}">{{ctx.t('File Name')}}</th>
<th class="table__column table__column--2">{{ctx.t('Size')}}</th>
{% if (ctx.self.hasTypes) { %}
<th class="table__column table__column--2">{{ctx.t('Type')}}</th>
{% } %}
</tr>
</thead>
<tbody>
{% ctx.files.forEach(function(file) { %}
<tr>
<ul class="list-group list-group-striped">
<li class="list-group-item list-group-header hidden-xs hidden-sm">
<div class="row">
{% if (!ctx.disabled) { %}
<td>
<button type="button" class="utrecht-button utrecht-button--subtle utrecht-button--danger" ref="removeLink" title="{{ctx.t('Remove')}}">
<i class="{{ctx.iconClass('trash-can')}}"></i>
</button>
</td>
{% } %}
<td>
{% if (ctx.component.uploadOnly) { %}
{{{file.originalName || file.name}}}
{% } else { %}
<a href="{{file.url || '#'}}" target="_blank" ref="fileLink" class="utrecht-link utrecht-link--openforms"> {{{file.originalName || file.name}}}</a>
{% } %}
</td>
<td>{{ctx.fileSize(file.size)}}</td>
{% if (ctx.self.hasTypes && !ctx.disabled) { %}
<td>
<select class="file-type" ref="fileType">
{% ctx.component.fileTypes.map(function(type) { %}
<option class="test" value="{{ type.value }}" {% if (type.label === file.fileType) { %}selected="selected"{% } %}>{{ type.label }}</option>
{% }); %}
</select>
</td>
<div class="col-md-1"></div>
{% } %}
{% if (ctx.self.hasTypes && ctx.disabled) { %}
<td>{{file.fileType}}</td>
<div id="{{ctx.instance.id}}-{{ctx.component.key}}__file-list-header--file-name" class="col-md-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}"><b>{{ctx.t('File Name')}}</b></div>
<div id="{{ctx.instance.id}}-{{ctx.component.key}}__file-list-header--file-size" class="col-md-2"><b>{{ctx.t('Size')}}</b></div>
{% if (ctx.self.hasTypes) { %}
<div id="{{ctx.instance.id}}-{{ctx.component.key}}__file-list-header--file-type" class="col-md-2"><b>{{ctx.t('Type')}}</b></div>
{% } %}
</div>
</li>
{% ctx.files.forEach(function(file) { %}
<li class="list-group-item">
<div class="row">
{% if (!ctx.disabled) { %}
<div class="col-md-1">
<button type="button" class="utrecht-button utrecht-button--subtle utrecht-button--danger" ref="removeLink" title="{{ctx.t('Remove')}} {{file.originalName || file.name}}">
<i class="{{ctx.iconClass('trash-can')}}" aria-hidden="true"></i>
</button>
</div>
{% } %}
<div class="col-md-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}" aria-labelledby="{{ctx.instance.id}}-{{ctx.component.key}}__file-list-header--file-name">
{% if (ctx.component.uploadOnly) { %}
{{{file.originalName || file.name}}}
{% } else { %}
<a href="{{file.url || '#'}}" target="_blank" ref="fileLink" class="utrecht-link utrecht-link--openforms"> {{{file.originalName || file.name}}}</a>
{% } %}
</div>
<div class="col-md-2" aria-labelledby="{{ctx.instance.id}}-{{ctx.component.key}}__file-list-header--file-size">
{{ctx.fileSize(file.size)}}
</div>
{% if (ctx.self.hasTypes) { %}
<div class="col-md-2" aria-labelledby="{{ctx.instance.id}}-{{ctx.component.key}}__file-list-header--file-type">
{% if (!ctx.disabled) { %}
<select class="file-type" ref="fileType">
{% ctx.component.fileTypes.map(function(type) { %}
<option class="test" value="{{ type.value }}" {% if (type.label === file.fileType) { %}selected="selected"{% } %}>{{ type.label }}</option>
{% }); %}
</select>
{% } else { %}
{{file.fileType}}
{% } %}
</div>
{% } %}
</div>
</tr>
</li>
{% }) %}
</tbody>
</table>
</ul>
{% } else { %}
<div>
{% ctx.files.forEach(function(file) { %}
Expand Down
66 changes: 43 additions & 23 deletions src/scss/components/_file-upload.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,40 +15,60 @@ we don't have strict BEM naming here.
@include body;
@include anchor.extend-utrecht-link;

.table {
width: 100%;
margin-block-end: 20px;
border-collapse: collapse;

&__header {
border-bottom: solid 1px var(--of-color-border);
}
.list-group {
padding: 0;
margin: 0;
list-style: none;
@include margin(auto);

&__column {
text-align: left;

&--1 {
@include bootstrap-span(width, 1);
}
.list-group-header {
@include hide-on-mobile(block);

&--2 {
@include bootstrap-span(width, 2);
}

&--7 {
@include bootstrap-span(width, 7);
.row {
border-bottom: solid 1px var(--of-color-border);
}
}

&--9 {
@include bootstrap-span(width, 9);
}
.list-group-item {
@include responsive(
padding-top,
$grid-margin-1,
$grid-margin-1,
$grid-margin-1,
$grid-margin-1
);
}
}

.row {
display: flex;
align-items: center;

.col-md-1 {
@include bootstrap-span(width, 1);
@include mobile-only {
flex-grow: 1;
}
}
.col-md-2 {
@include bootstrap-span(width, 2);
@include mobile-only {
flex-grow: 2;
}
}
.col-md-7 {
@include bootstrap-span(width, 7);
@include mobile-only {
flex-grow: 1;
}
}
.col-md-9 {
@include bootstrap-span(width, 9);
@include mobile-only {
flex-grow: 5;
}
overflow-wrap: break-word;
}
.col-sm-2 {
@include bootstrap-span(width, 2);
}
Expand Down

0 comments on commit f6a4bdf

Please sign in to comment.