explorers' club

explorations in dev, science, sci-fi, games, and other fun stuff!


1 Comment

Trello Label Override Style via Stylish

At my current gig we use Trello to track tasks, bugs, agile-ish info, etc.  One of the biggest issues I had was that once you have more labels than there are available colors, your labels become meaningless.  So I wrote a stylish style to a) display the actual label values, and b) as a bonus, prioritize based on priority, pts and then misc. labels.  A picture is worth a thousand words so….

https://userstyles.org/styles/111321/trello-label-overrides


Leave a comment

CSS: Flex-style gap between sibling elements

I was needing to add a gap between sibling elements.  In Flex, this was done on the parent container by simply adding a gap style to it:

<s:VGroup gap="10">
   <ns:SomeElement/>
   <-- 10px vertical gap -->
   <ns:SomeElement/>
   <-- 10px vertical gap -->
   <ns:SomeElement/>
</s:VGroup>

In HTML/CSS we’re not afforded the gap style.  Instead we have to approach this by using the child elements and their margin styles.

<div>
   <div class="gap-elem"/>
   <div class="gap-elem"/>
   <div class="gap-elem"/>
</div>

<style>
.gap-elem:not(:first-child)
{
   margin-top: 10px;
}
</style>

I find this works with Angular’s ng-repeat directive nicely.  It might be worth writing a directive to simulate Flex’s application of the gap style.