Style embedded Trello-Cards

Marc September 20, 2020

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?

1 answer

0 votes
Marc September 21, 2020

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

Question remains on how to speed up things :)

milynnus
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 21, 2020

@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 September 21, 2020

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 21, 2020

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

Marc September 21, 2020

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

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events