⏪ [open-formulieren/open-forms#4716] Reverting table back to list

open-formulieren · Oct 10, 2024 · 3e3e0b9 · 3e3e0b9
1 parent 4be3aba
commit 3e3e0b9
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 66 deletions.
diff --git a/src/formio/templates/file.ejs b/src/formio/templates/file.ejs
@@ -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) { %}

diff --git a/src/scss/components/_file-upload.scss b/src/scss/components/_file-upload.scss
@@ -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);
  }