portfolio
portfolio copied to clipboard
Strange "viewport" sizing
Hi! I have a scene for a simple "collapsible" component, with a css transitioning max-height. But the portfolio "viewport" for the component behaves a strangely. Almost like it's resizing to the opposite of what it should do.
Screencast demo:
Screencast from 16. april 2024 kl. 13.54 +0200.webm
And here's the code (using dumdom):
(defcomponent collapsible-box
"Makes a box with title and collapsible content.
(must be given a max-height (in absolute units) for css-transition to work right.)"
[{:keys [title content max-height component-data update-component-data]}]
[:div.box
[:div.level {:on-click (update-component-data #(update % :closed? not))}
[:div.level-left
[:h3.subtitle.is-5 title]]
[:div.level-right
[:span.icon (if (:closed? component-data) [:i.fas.fa-angle-up] [:i.fas.fa-angle-down])]]]
(when-not (:closed? component-data)
(into [:div {:style {:overflow "hidden"
:max-height "0px"
:transition "max-height 0.5s ease"}
:mounted-style {:max-height max-height}
:leaving-style {:max-height "0px"}}]
content))])
(defn generic-event-handler [!state]
(fn [_ actions]
(doseq [action actions]
(match action
[:update-in path f] (swap! !state #(update-in % path f))))))
(defn render-collapsible-box [!state opts]
(d/render-portfolio #'collapsible-box !state #'generic-event-handler))
(defscene collapsible-box
:params (atom {:title "Title text"
:content [[:p "some"] [:p "list"] [:p "of"] [:p "children"]]
:max-height "10em"
:update-component-data (fn [f] [[:update-in [:component-data] f]])})
render-collapsible-box)
(d/render-portfolio
sets the event-handler and calls the render function on the dereffed state)