Space is correctly allocated for images when unloaded

This commit is contained in:
Thomas Forgione 2021-03-13 11:31:31 +01:00
parent 53e96eaa48
commit 360952706d
1 changed files with 12 additions and 4 deletions

View File

@ -130,14 +130,18 @@ playlistView currentDate time hover playlist =
image = image =
Keyed.el Keyed.el
[ Element.width Element.fill [ Element.width Element.fill
, Element.height Element.fill , Element.height (Element.px 0)
, Element.htmlAttribute (Html.Attributes.style "padding-top" "56.25%")
, Element.htmlAttribute (Html.Attributes.style "position" "relative")
, Events.onMouseEnter (Core.HoverPlaylist playlist) , Events.onMouseEnter (Core.HoverPlaylist playlist)
, Events.onMouseLeave Core.Unhover , Events.onMouseLeave Core.Unhover
] ]
( key ( key
, Element.image , Element.image
[ Element.width Element.fill [ Element.width Element.fill
, Element.height Element.fill , Element.htmlAttribute (Html.Attributes.style "position" "absolute")
, Element.htmlAttribute (Html.Attributes.style "top" "0")
, Element.htmlAttribute (Html.Attributes.style "height" "100%")
, Element.inFront inFront , Element.inFront inFront
, Element.inFront new , Element.inFront new
] ]
@ -260,14 +264,18 @@ videoMiniature currentDate time hover playlist video =
image = image =
Keyed.el Keyed.el
[ Element.width Element.fill [ Element.width Element.fill
, Element.height Element.fill , Element.height (Element.px 0)
, Element.htmlAttribute (Html.Attributes.style "padding-top" "56.25%")
, Element.htmlAttribute (Html.Attributes.style "position" "relative")
, Events.onMouseEnter (Core.HoverVideo video) , Events.onMouseEnter (Core.HoverVideo video)
, Events.onMouseLeave Core.Unhover , Events.onMouseLeave Core.Unhover
] ]
( key ( key
, Element.image , Element.image
[ Element.width Element.fill [ Element.width Element.fill
, Element.height Element.fill , Element.htmlAttribute (Html.Attributes.style "position" "absolute")
, Element.htmlAttribute (Html.Attributes.style "top" "0")
, Element.htmlAttribute (Html.Attributes.style "height" "100%")
, Element.inFront inFront , Element.inFront inFront
, Element.inFront new , Element.inFront new
] ]