Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Strange "viewport" sizing #26

Open
2food opened this issue Apr 16, 2024 · 0 comments
Open

Strange "viewport" sizing #26

2food opened this issue Apr 16, 2024 · 0 comments

Comments

@2food
Copy link

2food commented Apr 16, 2024

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant