Fork me on GitHub
#rum
<
2017-03-07
>
grounded_sage04:03:46

Hey everyone. I am seeking some advice on how to do some simple UI stuff. I'm assuming this is the right channel as I am using Rum. I want to simply fade out the logo and then attach it to the top of the screen. This is the current iteration of the website. https://shire-campaign.netlify.com/

grounded_sage04:03:13

I'm wondering if this is best done in Rum or using Element Queries. http://elementqueries.com/

Niki09:03:31

@grounded_sage this is more of frontend question in general

Niki09:03:35

Rum is tangetial to that

Niki09:03:51

how would you do it in CSS/JS? Use the same approach in Rum

grounded_sage13:03:17

Cheers. I wasn't sure whether Rum would have an impact on using it and like React apparently has an impact on using Greensock animations

Niki13:03:31

Well, Rum is similar to React in that regard

mruzekw17:03:11

Is there a way to pass a set of [:div]s to a third party component?

mruzekw17:03:30

(defn slider [children]
           (js/React.createElement js/Slider
                                   #js {:dots true
                                        :infinite true
                                        :arrows false
                                        :speed 500
                                        :slidesToShow 1
                                        :slidesToScroll 1}
                                   (clj->js children))))

mruzekw17:03:03

The component I’m using requires [:div]s rather than components

mruzekw17:03:28

When I use the above code it turns all [:div]s into strings

rauh17:03:26

@mruzekw Just call html macro manually on it. Ie. sablono's html.

mruzekw17:03:30

Oh sablono's

rauh17:03:09

@mruzekw Ideally, you want to pass React children in your slider function. Ie, already compiled stuff, then there won't be any runtime overhead.

mruzekw17:03:51

Does the html macro also compile rum components?

rauh17:03:52

So you should prefer (slider (html [:div "foo])) which will be precompiled, instead of (slider [:div "foo"]) and then compile during runtime

rauh17:03:25

The html macro only does hiccup (ie clojure datastructures) -> React.createElement calls

rauh17:03:43

As much as it can during macro expansion and interprets the rest during runtime.

mruzekw17:03:05

Huh alright, I’ll give this a try and report back. Thanks!

jrychter17:03:31

I am looking for HTML/CSS for components like the Semantic UI Popup and Dropdown, that could be adapted to be Rum components. I would really like to get rid of semantic.js and its dependency on jquery. Any suggestions?

jrychter17:03:35

The idea is: I can manage the behavior myself, so I don't need their JavaScript. But I do need nice and clean markup.

jrychter17:03:53

If I can't, I'll just reverse-engineer the semantic ui components…

mruzekw18:03:08

@rauh Is there a way to expand a list of nodes/divs or must there be a root one?