cjohansen / portfolio

Eclipse Public License 1.0
222 stars 13 forks source link

Strange "viewport" sizing #26

Open 2food opened 3 months ago

2food commented 3 months ago

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)