From 976aa757106df1b3276129a3429cd1474bd6d502 Mon Sep 17 00:00:00 2001
From: Eike Kettner <eike.kettner@posteo.de>
Date: Mon, 9 Nov 2020 21:36:06 +0100
Subject: [PATCH] Move card size definition in css and fix height bug

For very tall images (sometimes shopping receipts), the height must be
restricted, too.
---
 modules/webapp/src/main/elm/Comp/ItemCard.elm |  7 +++--
 .../webapp/src/main/elm/Data/UiSettings.elm   | 11 ++-----
 modules/webapp/src/main/webjar/docspell.css   | 29 ++++++++++++++++++-
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/modules/webapp/src/main/elm/Comp/ItemCard.elm b/modules/webapp/src/main/elm/Comp/ItemCard.elm
index 21563564..95e758cc 100644
--- a/modules/webapp/src/main/elm/Comp/ItemCard.elm
+++ b/modules/webapp/src/main/elm/Comp/ItemCard.elm
@@ -179,7 +179,7 @@ view cfg settings model item =
         pageCountLabel =
             div
                 [ classList
-                    [ ( "card-attachment-nav", True )
+                    [ ( "card-attachment-nav top", True )
                     , ( "invisible", pageCount == 0 || (item.fileCount == 1 && pageCount == 1) )
                     ]
                 ]
@@ -227,7 +227,10 @@ view cfg settings model item =
             span [ class "invisible" ] []
 
           else
-            div [ class "image" ]
+            div
+                [ class "image ds-card-image"
+                , Data.UiSettings.cardPreviewSize settings
+                ]
                 [ img
                     [ class "preview-image"
                     , src previewUrl
diff --git a/modules/webapp/src/main/elm/Data/UiSettings.elm b/modules/webapp/src/main/elm/Data/UiSettings.elm
index 8d955549..5a0bc13f 100644
--- a/modules/webapp/src/main/elm/Data/UiSettings.elm
+++ b/modules/webapp/src/main/elm/Data/UiSettings.elm
@@ -226,15 +226,8 @@ fieldHidden settings field =
 
 cardPreviewSize : UiSettings -> Attribute msg
 cardPreviewSize settings =
-    case settings.cardPreviewSize of
-        Data.BasicSize.Small ->
-            HA.style "max-width" "80px"
-
-        Data.BasicSize.Medium ->
-            HA.style "max-width" "160px"
-
-        Data.BasicSize.Large ->
-            HA.style "max-width" "none"
+    Data.BasicSize.asString settings.cardPreviewSize
+        |> HA.class
 
 
 
diff --git a/modules/webapp/src/main/webjar/docspell.css b/modules/webapp/src/main/webjar/docspell.css
index 58387cac..1fbaa215 100644
--- a/modules/webapp/src/main/webjar/docspell.css
+++ b/modules/webapp/src/main/webjar/docspell.css
@@ -92,19 +92,46 @@
     background: floralwhite;
     padding: 0.8em;
 }
+
 .default-layout .ui.card .link.content:hover {
     box-shadow: 0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);
 }
 .default-layout .image .card-attachment-nav {
     position: absolute;
-    bottom: 2px;
     right: 2px;
     z-index: 10;
 }
+.default-layout .image .card-attachment-nav.bottom {
+    bottom: 2px;
+}
+.default-layout .image .card-attachment-nav.top {
+    top: 2px;
+}
+.default-layout .image.ds-card-image {
+    overflow: auto;
+}
+.default-layout .image.ds-card-image.small {
+    max-height: 120px;
+}
+.default-layout .image.ds-card-image.medium {
+    max-height: 240px;
+}
+.default-layout .image.ds-card-image.large {
+    max-height: 600px;
+}
 .default-layout img.preview-image {
     margin-left: auto;
     margin-right: auto;
 }
+.default-layout img.preview-image.small {
+    max-width: 80px;
+}
+.default-layout img.preview-image.medium {
+    max-width: 160px;
+}
+.default-layout img.preview-image.large {
+    max-width: none;
+}
 
 .default-layout .menu .item.active a.right-tab-icon-link {
     position: relative;