Style embedded Trello-Cards

[Marc]

Hi Guys and Girls

I've embedding Trello-Cards by reading from the board-json file. So far so good, the cards are loading (pretty slow...) but now i want to style the cards. Or at least give them margin/padding.

The id of a single card-div is embedded-card, so i do like this:

#embedded-card {
      margin: 1rem !important;
}

Doesn't matter if I try to style it with CSS directly or add inline styles with JS, there is no effect. I've also tried to set a timeout, so the styles getting added when the cards fully loaded.
Here is my pen: https://codepen.io/CradleToCradle/pen/abNQpbN

Any suggestions for styling? And how to improve loading speed?

[Marc]

Ok I can add margin on the iframe instead of the div.

Question remains on how to speed up things :)

[milynnus]

@Marc Thank you for sharing your project.

Not trying to answer your query of speed, I tested out using report variables to construct the href and send it to an endpoint via a http request to construct the <blockquote>. Because you can use report variables in calendar commands you will be able to use it to provide regular updates to the website. Obviously, your approach of reading the entire json of the board avoided the need for this but I was looking at how I can avoid the hard coding of the list id in this JS and to let Trello automate this aspect of things.

Thanks again for sharing your project.

[Marc]

Now i've coded it that way, so it only displays the cards with a specific label. Reading the whole JSON is very convenient way to do it I think. Also, when just reading the JSON I don't have to mess with Node-JS whats not compatible with our website anyway.

Regarding the speed; Its now live on our website and it loads much faster than on my codepen.

[milynnus]

@Marc Congratulations. Would you be able to point me to the website. 

[Marc]

I am but ashamed :D It's a freakin mess (not my mess im new). I will make ourself a new one soon.

Here you go: https://fundsachenverkauf.ch