💄 better layout of import tables

2 files changed, 77 insertions, 54 deletions

diff --git a/ishtar_common/templates/ishtar/import_table.html b/ishtar_common/templates/ishtar/import_table.html
index 62545f5a3..9aef388b9 100644
--- a/ishtar_common/templates/ishtar/import_table.html
+++ b/ishtar_common/templates/ishtar/import_table.html
@@ -49,12 +49,12 @@
         </tr>
         {% for import in object_list %}
         <tr id="import-{{import.import_id}}"
-             class='import-row{% if import.error_file %}-error{% endif %}{% if import.pk in refreshed_pks %} bg-info{% endif %}'>
-            <td>
-                <strong>{{import.name|default:"-"}}</strong><br>
-                <small><i class="fa fa-calendar" aria-hidden="true"></i>&nbsp; {{import.creation_date|date:"DATE_FORMAT"}} {{import.creation_date|time:"H:i"}} - {% if import.end_date %}{{import.end_date|date:"DATE_FORMAT"}} {{import.end_date|time:"H:i"}}{% endif %}</small><br>
-                <small><i class="fa fa-user" aria-hidden="true"></i>&nbsp; {{import.user}}</small>
-            </td>
+             class='import-row{% if import.error_file or not import.pre_import_form_is_valid %}-error{% endif %}{% if import.pk in refreshed_pks %} bg-info{% endif %}'>
+            <td><ul class="simple">
+                <li><strong>{{import.name|default:"-"}}</strong></li>
+                <li><small><i class="fa fa-fw fa-calendar" aria-hidden="true"></i>&nbsp; {{import.creation_date|date:"DATE_FORMAT"}} {{import.creation_date|time:"H:i"}} - {% if import.end_date %}{{import.end_date|date:"DATE_FORMAT"}} {{import.end_date|time:"H:i"}}{% endif %}</small></li>
+                <li><small><i class="fa fa-fw fa-user" aria-hidden="true"></i>&nbsp; {{import.user}}</small></li>
+            </ul></td>
             <td>
                 {{import.importer_type}} ({% if import.importer_type.type_label %}{% trans import.importer_type.type_label %}{% else %}{% trans "Group" %}{% endif %})
             </td>
@@ -71,36 +71,39 @@
                     {% endfor%}
                 </select>
             </td>
-            <td>
-                {% if import.imported_file %}
-                <a href='{{import.imported_file.url}}'>{% trans "Source" %}</a>
-                {% if import.imported_images %}
-                - <a href="{{ import.imported_images.url }}">{% trans "Media" %}</a>
-                {% endif %}
-                {% elif import.archive_file %}
-                <a href='{{import.archive_file.url}}'>{% trans "Archive" context "name" %}</a>
-                {% endif %}
-            </td>
-            <td>
-                {% if import.has_pre_import_form %}
-                {% if not import.pre_import_form_is_valid %}
-                    <i class="text-danger fa fa-exclamation-triangle" aria-hidden="true"></i>
-                {% endif %}
-                <a href='{% url "import_pre_import_form" import.pk %}'>{% trans "Pre-import values" %}</a><br>
-                {% endif %}
-                {% if import.need_matching %}
-                <a href='{% url "import_link_unmatched" import.pk %}'>{% trans "Make match" %}</a>
-                {% endif %}
-            </td>
-            <td style="white-space: nowrap;">{% if import.error_file %}
-                <i class="text-danger fa fa-exclamation-triangle" aria-hidden="true"></i> <a href='{{import.error_file.url}}'>{% trans "Error" %}</a>
-                <br>{% endif %}
-            {% if import.result_file %}
-                <a href='{{import.result_file.url}}'>{% trans "Result" %}</a>
-                <br>{% endif %}
-            {% if import.match_file %}
-                <a href='{{import.match_file.url}}'>{% trans "Match" %}</a>
-                {% endif %}
+            <td><ul class="simple">
+                {% if import.imported_file %}<li>
+                    <i class="fa fa-fw fa-file-text-o" aria-hidden="true"></i> <a href='{{import.imported_file.url}}'>{% trans "Source" %}</a>
+                </li>
+                {% if import.imported_images %}<li>
+                    <i class="fa fa-fw fa-file-image-o" aria-hidden="true"></i> <a href="{{ import.imported_images.url }}">{% trans "Media" %}</a>
+                </li>{% endif %}
+                {% elif import.archive_file %}<li>
+                    <i class="fa fa-fw fa-file-archive-o" aria-hidden="true"></i> <a href='{{import.archive_file.url}}'>{% trans "Archive" context "name" %}</a>
+                </li>{% endif %}
+            </ul></td>
+            <td><ul class="simple">
+                {% if import.has_pre_import_form %}<li>
+                    {% if not import.pre_import_form_is_valid %}
+                    <i class="text-danger fa fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
+                    {% else %}
+                    <i class="fa fa-fw fa-check-square-o" aria-hidden="true"></i>
+                    {% endif %}
+                    <a href='{% url "import_pre_import_form" import.pk %}'>{% trans "Pre-import values" %}</a>
+                </li>{% endif %}
+                {% if import.need_matching %}<li>
+                    <i class="fa fa-fw fa-arrows-h" aria-hidden="true"></i> <a href='{% url "import_link_unmatched" import.pk %}'>{% trans "Make match" %}</a>
+                </li>{% endif %}
+            </ul></td>
+            <td style="white-space: nowrap;"><ul class="simple">{% if import.error_file %}<li>
+                <i class="text-danger fa fa-fw fa-exclamation-triangle" aria-hidden="true"></i> <a href='{{import.error_file.url}}'>{% trans "Error" %}</a>
+            </li>{% endif %}
+            {% if import.result_file %}<li>
+                 <i class="fa fa-fw fa-th" aria-hidden="true"></i> <a href='{{import.result_file.url}}'>{% trans "Result" %}</a>
+            </li>{% endif %}
+            {% if import.match_file %}<li>
+                <i class="fa fa-fw fa-arrows-h" aria-hidden="true"></i> <a href='{{import.match_file.url}}'>{% trans "Match" %}</a>
+            </li>{% endif %}</ul>
             </td>
         </tr>
         {% if import.importer_type.type_label %}
@@ -123,24 +126,38 @@
             <td>{{sub.importer_type}}</td>
             <td id="status-{{sub.import_id}}">{{sub.status}}</td>
             <td></td>
-            <td>{% if sub.imported_file %}
-                <a href='{{sub.imported_file.url}}'>{% trans "Source" %}</a>
-                {% if sub.imported_images %}
-                - <a href="{{ sub.imported_images.url }}">{% trans "Media" %}</a>
-                {% endif %}
-            {% endif %}</td>
-            <td>{% if sub.need_matching %}
-                <a href='{% url "import_link_unmatched" sub.pk %}'>{% trans "Make match" %}</a>
-            {% endif %}</td>
-            <td style="white-space: nowrap;">{% if sub.error_file %}
-                <i class="text-danger fa fa-exclamation-triangle" aria-hidden="true"></i> <a href='{{sub.error_file.url}}'>{% trans "Error" %}</a>
-                <br>{% endif %}
-            {% if sub.result_file %}
-                <a href='{{sub.result_file.url}}'>{% trans "Result" %}</a>
-                <br>{% endif %}
-            {% if sub.match_file %}
-                <a href='{{sub.match_file.url}}'>{% trans "Match" %}</a>
+            <td><ul class="simple">
+                {% if sub.imported_file %}<li>
+                    <i class="fa fa-fw fa-file-text-o" aria-hidden="true"></i> <a href='{{sub.imported_file.url}}'>{% trans "Source" %}</a>
+                </li>{% endif %}
+                {% if sub.imported_images %}<li>
+                    <i class="fa fa-fw fa-file-image-o" aria-hidden="true"></i> <a href="{{ sub.imported_images.url }}">{% trans "Media" %}</a>
+                </li>{% endif %}
+            </ul></td>
+            <td><ul class="simple">
+                {% if sub.has_pre_import_form %}<li>
+                {% if not sub.pre_import_form_is_valid %}
+                <i class="text-danger fa fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
+                {% else %}
+                <i class="fa fa-fw fa-check-square-o" aria-hidden="true"></i>
                 {% endif %}
+                <a href='{% url "import_pre_import_form" sub.pk %}'>{% trans "Pre-import values" %}</a>
+            </li>{% endif %}
+            {% if sub.need_matching %}<li>
+                <i class="fa fa-fw fa-arrows-h" aria-hidden="true"></i> <a href='{% url "import_link_unmatched" sub.pk %}'>{% trans "Make match" %}</a>
+            </li>{% endif %}
+            </ul></td>
+            <td style="white-space: nowrap;"><ul class="simple">
+            {% if sub.error_file %}<li>
+                <i class="text-danger fa fa-fw fa-exclamation-triangle" aria-hidden="true"></i> <a href='{{sub.error_file.url}}'>{% trans "Error" %}</a>
+            </li>{% endif %}
+            {% if sub.result_file %}<li>
+                <i class="fa fa-fw fa-th" aria-hidden="true"></i> <a href='{{sub.result_file.url}}'>{% trans "Result" %}</a>
+            </li>{% endif %}
+            {% if sub.match_file %}<li>
+                <i class="fa fa-fw fa-arrows-h" aria-hidden="true"></i> <a href='{{sub.match_file.url}}'>{% trans "Match" %}</a>
+            </li>{% endif %}
+            </ul>
             </td>
         </tr>
         <tr></tr>{# only for even and odd style #}
diff --git a/scss/custom.scss b/scss/custom.scss
index 1883798a2..934d67937 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -672,10 +672,15 @@ div#validation-bar{
     color: darken(red, 20%);
 }
 
-.import-row-error {
+.import-row-error,
+.table-striped tbody tr:nth-of-type(2n+1).import-row-error {
     background-color: lighten(red, 40%);
 }
 
+#import-list li {
+white-space: nowrap;
+}
+
 /* context menu */
 #shortcut-menu {
     width: 700px;
@@ -1050,6 +1055,7 @@ ul.compact{
     display: none;
 }
 
+ul.simple,
 .simple-window-content ul,
 .ishtar-map-popup ul {
     margin: 0;