Resize the document thumbnails via CSS while preserving the aspect ratio.

Signed-off-by: Roberto Rosario <roberto.rosario.gonzalez@gmail.com>

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

@@ -66,10 +66,6 @@ body {
  left: auto;
 }
 
-.thin_border {
-    border: 1px solid black;
-}
-
 .mayan-page-wrapper-interactive {
     overflow: auto;
 }
@@ -708,3 +704,17 @@ a i {
     width: 150px;
     margin: auto;
 }
+
+.thin_border {
+    border: 1px solid black;
+}
+
+
+.thin_border-thumbnail {
+  display: block;
+  max-width: 100%;
+  max-height: 200px;
+  width: auto;
+  height: auto;
+  margin: auto;
+}

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

@@ -8,7 +8,7 @@
         class="thin_border {{ image_classes }}"
         data-url="{{ instance.get_api_image_url }}?width={{ image_width }}&height={{ image_height }}&zoom={{ image_zoom }}&rotation={{ image_rotation }}"
         src="#"
-        style="{% if display_full_width %}width: 100%;{% endif %} {% if image_container_height %}max-height: {{ image_container_height }}; {% endif %}"
+        style="{% if image_max_height %}max-height: {{ image_max_height }}; {% endif %}"
      />
 </div>
 

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

@@ -9,11 +9,9 @@
     data-type="image"
     {% if gallery_name %}data-fancybox="{{ gallery_name }}"{% endif %}
 >
-    {% with 'lazy-load' as image_classes %}
-    {% with 'true' as display_full_width %}
-    {% with '200px' as image_container_height %}
+    {% with 'lazy-load thin_border-thumbnail' as image_classes %}
+    {% with '200px' as image_max_height %}
         {% include 'documents/forms/widgets/document_page_image.html' %}
     {% endwith %}
     {% endwith %}
-    {% endwith %}
 </a>