Use cards for viewing items

modules/webapp/src/main/elm/Comp/ItemCardList.elm

@@ -13,6 +13,7 @@ import Api.Model.ItemLightGroup exposing (ItemLightGroup)
 import Api.Model.ItemLightList exposing (ItemLightList)
 import Data.Direction
 import Data.Flags exposing (Flags)
+import Data.Icons as Icons
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (onClick)
@@ -80,10 +81,11 @@ view model =
 viewGroup : ItemLightGroup -> Html Msg
 viewGroup group =
     div [ class "item-group" ]
-        [ div [ class "ui horizontal divider" ]
+        [ div [ class "ui horizontal divider header item-list" ]
-            [ text group.name
+            [ i [ class "calendar alternate outline icon" ] []
+            , text group.name
             ]
-        , div [ class "ui one column grid" ]
+        , div [ class "ui stackable three cards" ]
             (List.map viewItem group.items)
         ]
 
@@ -116,81 +118,80 @@ viewItem item =
         newColor =
             "blue"
     in
-    div [ class "column item-list" ]
+    a
-        [ a
+        [ classList
-            [ classList
+            [ ( "ui fluid card", True )
-                [ ( "ui fluid card", True )
+            , ( newColor, not isConfirmed )
-                , ( newColor, not isConfirmed )
-                ]
-            , href "#"
-            , onClick (SelectItem item)
             ]
-            [ div [ class "content" ]
+        , href "#"
+        , onClick (SelectItem item)
+        ]
+        [ div [ class "content" ]
+            [ div
+                [ class "header"
+                , Data.Direction.labelFromMaybe item.direction
+                    |> title
+                ]
+                [ dirIcon
+                , Util.String.underscoreToSpace item.name
+                    |> text
+                ]
+            , span [ class "meta" ]
                 [ div
-                    [ class "header"
+                    [ classList
-                    , Data.Direction.labelFromMaybe item.direction
+                        [ ( "ui ribbon label", True )
-                        |> title
+                        , ( newColor, True )
-                    ]
+                        , ( "invisible", isConfirmed )
-                    [ dirIcon
-                    , Util.String.ellipsis 45 item.name |> text
-                    ]
-                , span [ class "meta" ]
-                    [ div
-                        [ classList
-                            [ ( "ui ribbon label", True )
-                            , ( newColor, True )
-                            , ( "invisible", isConfirmed )
-                            ]
-                        ]
-                        [ i [ class "exclamation icon" ] []
-                        , text " New"
                         ]
                     ]
-                , span [ class "right floated meta" ]
+                    [ i [ class "exclamation icon" ] []
-                    [ Util.Time.formatDateShort item.date |> text
+                    , text " New"
                     ]
                 ]
-            , div [ class "content" ]
+            , span [ class "right floated meta" ]
+                [ Util.Time.formatDateShort item.date |> text
+                ]
+            ]
+        , div [ class "content" ]
+            [ div [ class "ui horizontal list" ]
+                [ div
+                    [ class "item"
+                    , title "Correspondent"
+                    ]
+                    [ Icons.correspondentIcon
+                    , text " "
+                    , Util.String.withDefault "-" corr |> text
+                    ]
+                , div
+                    [ class "item"
+                    , title "Concerning"
+                    ]
+                    [ Icons.concernedIcon
+                    , text " "
+                    , Util.String.withDefault "-" conc |> text
+                    ]
+                ]
+            , div [ class "right floated meta" ]
                 [ div [ class "ui horizontal list" ]
                     [ div
                         [ class "item"
-                        , title "Correspondent"
+                        , title "Source"
                         ]
-                        [ i [ class "envelope outline icon" ] []
+                        [ text item.source
-                        , text " "
-                        , Util.String.withDefault "-" corr |> text
                         ]
                     , div
                         [ class "item"
-                        , title "Concerning"
+                        , title ("Due on " ++ dueDate)
                         ]
-                        [ i [ class "comment outline icon" ] []
-                        , text " "
-                        , Util.String.withDefault "-" conc |> text
-                        ]
-                    ]
-                , div [ class "right floated meta" ]
-                    [ div [ class "ui horizontal list" ]
                         [ div
-                            [ class "item"
+                            [ classList
-                            , title "Source"
+                                [ ( "ui basic grey label", True )
-                            ]
+                                , ( "invisible hidden", item.dueDate == Nothing )
-                            [ text item.source
-                            ]
-                        , div
-                            [ class "item"
-                            , title ("Due on " ++ dueDate)
-                            ]
-                            [ div
-                                [ classList
-                                    [ ( "ui basic grey label", True )
-                                    , ( "invisible hidden", item.dueDate == Nothing )
-                                    ]
-                                ]
-                                [ i [ class "bell icon" ] []
-                                , text (" " ++ dueDate)
                                 ]
                             ]
+                            [ Icons.dueDateIcon
+                            , text (" " ++ dueDate)
+                            ]
                         ]
                     ]
                 ]

modules/webapp/src/main/elm/Comp/ItemDetail.elm

@@ -31,6 +31,7 @@ import Comp.SentMails
 import Comp.YesNoDimmer
 import Data.Direction exposing (Direction)
 import Data.Flags exposing (Flags)
+import Data.Icons as Icons
 import DatePicker exposing (DatePicker)
 import Dict exposing (Dict)
 import Html exposing (..)
@@ -1416,7 +1417,7 @@ renderItemInfo model =
                 [ class "item"
                 , title "Due Date"
                 ]
-                [ i [ class "bell icon" ] []
+                [ Icons.dueDateIcon
                 , Maybe.map Util.Time.formatDate model.item.dueDate
                     |> Maybe.withDefault ""
                     |> text
@@ -1427,7 +1428,7 @@ renderItemInfo model =
                 [ class "item"
                 , title "Correspondent"
                 ]
-                [ i [ class "envelope outline icon" ] []
+                [ Icons.correspondentIcon
                 , List.filterMap identity [ model.item.corrOrg, model.item.corrPerson ]
                     |> List.map .name
                     |> String.join ", "
@@ -1440,7 +1441,7 @@ renderItemInfo model =
                 [ class "item"
                 , title "Concerning"
                 ]
-                [ i [ class "comment outline icon" ] []
+                [ Icons.concernedIcon
                 , List.filterMap identity [ model.item.concPerson, model.item.concEquipment ]
                     |> List.map .name
                     |> String.join ", "

modules/webapp/src/main/elm/Data/Icons.elm

@@ -0,0 +1,41 @@
+module Data.Icons exposing
+    ( concerned
+    , concernedIcon
+    , correspondent
+    , correspondentIcon
+    , dueDate
+    , dueDateIcon
+    )
+
+import Html exposing (Html, i)
+import Html.Attributes exposing (class)
+
+
+concerned : String
+concerned =
+    "crosshairs icon"
+
+
+concernedIcon : Html msg
+concernedIcon =
+    i [ class concerned ] []
+
+
+correspondent : String
+correspondent =
+    "address card outline icon"
+
+
+correspondentIcon : Html msg
+correspondentIcon =
+    i [ class correspondent ] []
+
+
+dueDate : String
+dueDate =
+    "bell icon"
+
+
+dueDateIcon : Html msg
+dueDateIcon =
+    i [ class dueDate ] []

modules/webapp/src/main/elm/Util/String.elm

@@ -1,6 +1,7 @@
 module Util.String exposing
     ( crazyEncode
     , ellipsis
+    , underscoreToSpace
     , withDefault
     )
 
@@ -40,3 +41,8 @@ withDefault default str =
 
     else
         str
+
+
+underscoreToSpace : String -> String
+underscoreToSpace str =
+    String.replace "_" " " str

modules/webapp/src/main/webjar/docspell.css

@@ -132,12 +132,12 @@ textarea.markdown-editor {
     padding-right: 1em;
 }
 
-.default-layout .ui.grid > .column.item-list:not(.row) {
+.default-layout .item-group:not(:first-child) > .ui.horizontal.divider.header.item-list {
-    padding-top: 0.8em;
+    margin-top: 1.5em;
-    padding-bottom: 0;
 }
-.default-layout .ui.grid > .column.item-list:not(.row):last-child {
+.default-layout .ui.horizontal.divider.header.item-list {
-    padding-bottom: 1.5rem;
+    margin-bottom: 1em;
+    background: rgba(240,248,255,0.4);
 }
 
 label span.muted {