Fixes in dashboard table view

- The first tag was rendered with slightly higher height than the rest
- Columns between first and last are hidden on small screens
- Use `break-all` to break all words if necessary without trying to
  keep whole words
This commit is contained in:
eikek 2022-02-23 23:18:58 +01:00
parent 8103e25e32
commit b664b5771d
2 changed files with 30 additions and 4 deletions

View File

@ -123,6 +123,12 @@ viewItemHead texts meta =
let let
( col1, cols ) = ( col1, cols ) =
getColumns meta getColumns meta
isSecond n =
n == 1
isNotLast n =
n > 1 && n < List.length cols
in in
if not meta.showHeaders then if not meta.showHeaders then
[] []
@ -131,7 +137,18 @@ viewItemHead texts meta =
[ thead [] [ thead []
[ tr [] [ tr []
(List.map texts.itemColumn.header (col1 :: cols) (List.map texts.itemColumn.header (col1 :: cols)
|> List.map (\n -> th [ class "text-left text-sm" ] [ text n ]) |> List.indexedMap
(\index ->
\n ->
th
[ class "text-left text-sm"
, classList
[ ( "hidden sm:table-cell", isSecond index )
, ( "hidden md:table-cell", isNotLast index )
]
]
[ text n ]
)
) )
] ]
] ]
@ -143,12 +160,18 @@ viewItemRow texts settings meta item =
( col1, cols ) = ( col1, cols ) =
getColumns meta getColumns meta
isSecond n =
n == 0
isNotLast n =
n > 0 && n < (List.length cols - 1)
render col = render col =
Comp.ItemColumnView.renderDiv Comp.ItemColumnView.renderDiv
texts.templateCtx texts.templateCtx
settings settings
col col
[ class "flex flex-row flex-wrap space-x-1 space-y-1" ] [ class "flex flex-row break-all flex-wrap space-x-1" ]
item item
td1 = td1 =
@ -164,7 +187,10 @@ viewItemRow texts settings meta item =
tdRem index col = tdRem index col =
td td
[ class "py-1 px-1" [ class "py-1 px-1"
, classList [ ( "hidden md:table-cell", index > 1 ) ] , classList
[ ( "hidden sm:table-cell", isSecond index )
, ( "hidden md:table-cell", isNotLast index )
]
] ]
[ render col [ render col
] ]

View File

@ -29,7 +29,7 @@ renderDiv ctx settings col attr item =
(List.map (List.map
(\t -> (\t ->
div div
[ class "label text-sm" [ class "label text-sm mt-1"
, class <| Data.UiSettings.tagColorString2 t settings , class <| Data.UiSettings.tagColorString2 t settings
] ]
[ text t.name ] [ text t.name ]