Control the height of thumbnails in table view

Since tables row height can't be controlled using CSS (they
will always resize to the size of their elements), this commit
adds a table cell container whose size can be controlled from
the view. This way big thumbnail images won't break the appearance
of the table.

Signed-off-by: Roberto Rosario <Roberto.Rosario@mayan-edms.com>

mayan/apps/appearance/static/appearance/css/base.css

@@ -483,3 +483,7 @@ body {
     border: 2px solid #18bc9c;
     box-shadow: 10px 10px 20px #000000;
 }
+
+.td-container-thumbnail {
+    height: 100px;
+}

mayan/apps/appearance/templates/appearance/generic_list_subtemplate.html

@@ -118,7 +118,12 @@
                                  {% if not hide_columns %}
                                     {% get_source_columns source=object exclude_identifier=True as source_columns %}
                                     {% for column in source_columns %}
-                                        <td>{% source_column_resolve column=column as column_value %}{{ column_value }}</td>{# Use explicit 'as column_value ' to force date rendering #}
+                                        <td>
+                                            <div class="{{ table_cell_container_classes }}">
+                                                {% source_column_resolve column=column as column_value %}{{ column_value }}
+                                                {# Use explicit 'as column_value ' to force date rendering #}
+                                            </div>
+                                        </td>
                                     {% endfor %}
                                 {% endif %}
                                 {% for column in extra_columns %}

mayan/apps/documents/templates/documents/forms/widgets/document_page_image.html

@@ -13,7 +13,7 @@
         class="thin_border {{ image_classes }}"
         data-url="{{ image_url|default:'' }}"
         src="#"
-        style="{% if image_max_height %}max-height: {{ image_max_height }}; {% endif %}"
+        style="{% if image_style_height %}height: {{ image_style_height }};{% endif %} {% if image_style_max_height %}max-height: {{ image_style_max_height }};{% endif %}"
      />
 </span>
 

mayan/apps/documents/templates/documents/widgets/document_thumbnail.html

@@ -12,7 +12,8 @@
     {% if gallery_name %}data-fancybox="{{ gallery_name }}"{% endif %}
 >
     {% with 'lazy-load thin_border-thumbnail' as image_classes %}
-    {% with '200px' as image_max_height %}
+    {% with '200px' as image_style_max_height %}
+    {% with '100%' as image_style_height %}
     {% with size_thumbnail_width as image_width %}
     {% with size_thumbnail_height as image_height %}
         {% include 'documents/forms/widgets/document_page_image.html' %}
@@ -20,4 +21,5 @@
     {% endwith %}
     {% endwith %}
     {% endwith %}
+    {% endwith %}
 </a>

mayan/apps/documents/views/document_page_views.py

@@ -86,6 +86,7 @@ class DocumentPageListView(SingleObjectListView):
             'column_class': 'col-xs-12 col-sm-6 col-md-4 col-lg-3',
             'list_as_items': True,
             'object': self.get_document(),
+            'table_cell_container_classes': 'td-container-thumbnail',
             'title': _('Pages for document: %s') % self.get_document(),
         }
 

mayan/apps/documents/views/document_version_views.py

@@ -45,6 +45,7 @@ class DocumentVersionListView(SingleObjectListView):
             'hide_object': True,
             'list_as_items': True,
             'object': self.get_document(),
+            'table_cell_container_classes': 'td-container-thumbnail',
             'title': _('Versions of document: %s') % self.get_document(),
         }
 

mayan/apps/documents/views/document_views.py

@@ -93,6 +93,7 @@ class DocumentListView(SingleObjectListView):
                 'permission for any document or document type.'
             ),
             'no_results_title': _('No documents available'),
+            'table_cell_container_classes': 'td-container-thumbnail',
             'title': _('All documents'),
         }